Usability First is a resource for those new to usability, which includes an extensive glossary of nearly 2,000 terms and about seventy pages of information The design had gone untouched for 5 years and the information was mostly out of date. The architecture of this massive site required a large amount of work as did the outdated navigation structure.
It was crucial that our team assessed the state of Usability First. Creating a Google Analytics report gave insight into site traffic, demographics, and popular queries. Performing a competitive analysis helped with understanding where Usability First stood in relation to competition. Personas were created using the information we gained from the analytics and competitive analysis. A sitemap and content inventory were created concurrently to better understand the site volume and content.
We then recruited individuals that fit with the personas that were created and conducted user interviews to gain insight on what users wanted to gain from a usability resource site. Card sorts were conducted in tandem to aid in refreshing the information architecture of the site. Taking the information gained from the card sort helped with refreshing the IA of Usability First. Our small team sketched ideas around navigation and IA as well.
Style tiles were designed to explore different stylistic directions we could take and we narrowed our choices down to one, while retaining some elements from the others. During the creation of style tiles, effort was also being put towards redesigning the logo. Afterwards, visual representations of the personas were designed.
The first step we took in the design process was sketching navigation and interior page structure. Keeping in mind how the navigation and interior page layout would work responsively was crucial. Multiple iterations of sketching occurred before reaching the design phase where we would apply the style tile design to the layouts.
After multiple iterations of sketches, a mega-menu style navigation was decided upon due to the vastness of the site. The mobile version was treated differently with a hierarchical drill down navigation to create a simpler UI. The interior page design incorporated various visual elements to break up the body copy. Each page had a sidebar of related topics. In mobile format the related topics sidebar would live beneath the main content.
This work was created while working at at Foraker Labs, but never reached implementation.