Design Development
Defining the Sitemap
I mapped the existing screens to identify any overflow or redundancies, and then devised a new sitemap. Defining this sitemap was incredibly beneficial because, aside from easing the flow throughout the site, it served as a roadmap for how to proceed with this huge overhaul. Having the client visualize the pages while we discussed priorities was a big help. Since most of the pages were either being completely redone or added/removed, looking at the existing site wasn't as beneficial as this approach for understanding our scope.
Redefined Sitemap
Iterating Layouts
Wireframes were quickly created to review the priority of components and review new layouts. The focus was mostly placed were simplifying navigation, seeing where and how we could shift to a reusable component system. A large constraint in this phase, as well as through a lot of the design implementation, was the restricted search feature that required users to select keywords instead of typing them in. This impeded user experience and would be rectified in later developments.
Low-fidelity wireframes of the homepage
Low-fidelity wireframes of search results page
Mediumn-fidelity wireframes of search results
Style Guide and Accessibility Overhaul
All styles were implemented into Figma for efficient and consistent designs. The accessibility updates proved to be an immense undertaking, as it required careful consideration of all existing marketing materials, emails, and other assets. The scope of the task involved ensuring that the new colors not only addressed accessibility concerns but also seamlessly integrated across their entire range of materials.
Through this collaborative process, the client and I worked together to refine the palette and found an outcome that exceeded the client's expectations.
Figma Style Guide
