Goal

The goal of this project was to redesign the current website to modernize the look and feel, organize the content, and allow users to quickly find help if they are in need. For new users, it should be clearly recognized as a reputable source for information.

Solution

To begin, I conducted a full website audit. Reviewing each page, evaluating every link on the website, identifying duplicate pages, evaluating the user experience and website flow contribute to a full written report of issues and solutions. From there, I reviewed the audit with the team at Didi Hirsch, we decided on the mandatory changes and the wish-list changes. Once we have discussed the plan, I wrote a full creative brief and used that as a roadmap for the work to follow.

I worked very closely with the team at Didi Hirsch to take a look at their current content, organize a new sitemap, design wireframes for each of the templated pages, update their style guide, and design the website based on their goals. I also worked very closely with the developer to help choose a Wordpress template that was reputable, sustainable, and something we could customize to fit their needs.

We identified 7 prospective users and outlined how the new design and layout would speak to each of those groups individually. We identified a clear hierarchy of the information based on the hierarchy of the users.

Sitemap

To begin, we did a content inventory of the website to get an idea of the current sitemap. From there, the pages were organized into sections and reviewed by the team. After removing duplicate pages and outdated content, we were able to reorganize the content into parent categories to create the new sitemap. Below is the sitemap we went to production with.

STYLING

Didi Hirsch also wanted to modernize their website’s styling and branding. I presented them with 3 options of colors, fonts, UI elements, and styling techniques. From here, they were allowed to either choose one or choose specific elements from each. The ultimately chose option 3 for their overall styling.

Wireframing

The wireframes ultimately will be the guide for the developer to layout the pages within the theme. With a Wordpress theme and style guide chosen, the wireframes will be directly applied to the theme and the styles layered on. The specific project was unique because we opted to forego the design phase.

Prototype

I used a prototyping software called UXPin to present the wireframes to the client. This gives the client a great depiction of user interaction and expectations.