Rethinking Usable.tools

Internews

Due to a hasty development process the USABLE site suffered from navigational and inconsistency issues that made the site very difficult to access information and resources.

Approach

Research And Development

Before starting any design work, I needed to understand the goals of the Internews team and the goals of their site.

It turns out that their previous site was built hastily due to the need to get their content online as soon as possible (we’ve all been there). Issues with USABLE’s site navigation stemmed from inconsistent dropdown styles to unclear page links.

(A quick mockup of a persona page on Usable.tools)

The new design needed to address this lack of structure while also adhering to common accessibility principles and heuristics.

(The navigation before the redesign, we needed to organize and minimize)

Phase It Out

Turned out that the redesign project ended up including both the reorganizing of site navigation as well as developing a unique identity that leveraged an adaptation of the USABLE logo. I was able to split the project up into a couple phases once the scope expanded.

The first phase focused on redesigning the site but only with the pages that were absolutely necessary for an upcoming conference. The second phase revolved around adding the other pages and additional functionality on the personas page.

(Drawing of how the Usable team’s audience would arrive at Usable.tools)

Phase One Goals

The two main goals for this phase were: 1) reorganize, declutter and create consistency to the navigational elements of the site, and 2) think of this website as a product and make it so it’s value proposition is the personas page.

Another subgoal for this phase was to update the styles of the site to create a stronger visual link between the USABLE logo and the site’s personality.

Phase Two Goals

Phase two’s purpose was to add additional higher engagement pages such as resource pages for designers, developers and trainers (USABLE’s three main visitor types).

The USABLE team wanted to have a place for their visitors to find useful articles, open-source tools and other resources curated based on their profession. The design of the template for each page would stay the same, the resources and information for each page would differ based on the corresponding profession.

(Here is the hero section of the homepage on mobile)

Takeaways

Where USABLE is at?

Just recently (end of July 2019), we launch the first phase of the USABLE redesign.

Working with their developer, we clarified the navigation, gave the personas a page dedicated for them with search functionality, and gave USABLE a new and unique identity that complements their current logo. Now that we have a more solid foundation to stand on with the completion of phase one, phase two is more than ahead of schedule.

(Same section but on desktop)