U.S. Food & Drug Administration
UI redesign of a government agency website

For this project, I focused on updating the information architecture and simplifying the website’s current navigation. Starting with a proto-persona, I created a potential user whom I thought would visit the FDA website.

I identified the top 5 usability problems and navigation issues through a quick Heuristic Evaluation and confirmed my findings after testing the current site with users. Three initial usability tests on the current FDA website revealed:

→ Website needs a top navigation

→ Important information should be above the fold

→ Forms to submit a drug for FDA approval are buried

→ Navigation headlines are confusing and need to be rephrased

→ Hero image could be smaller

Next, I utilized a card sorting exercise to reorganize the navigation, adding a secondary navigation called "Forms & Applications"  because users found it difficult to locate the necessary forms to submit a product for FDA approval.

Afterwards, I updated the Sitemap from my card sorting results and successfully reorganized the navigation, allowing the user to easily understand and find information more quickly. 

→ Renamed primary navigation headlines

→ Added navigation to Forms

→ Recategorized and grouped secondary navigation

Following the sitemap, I created header/footer components, navigation and homepage wireframes. 

I conducted six usability tests (3 mobile and 3 desktop) on my lo-fidelity design and discovered the following:

→ Need to increase font size for secondary and tertiary menus on both desktop and mobile

→ "Safety Information" Nav and "Resources" Nav seem similar, could be combined?

→ Hamburger icon not necessary on standard size desktop view

Then I created responsive mid-fidelity desktop and mobile wireframes for three pages of the user flow and tested again. Feedback from mid-fidelity usability tests mentioned:

→ Mobile - need a larger clickable space for teasers instead of just button

→ Desktop - add a main “Forms & Applications” page that will then lead the user to choose which product category they want forms for

→ Use consistent > arrows for desktop navigation menus to be visible even when not in a hover state

I built a comprehensive Style Guide to further explain how colors, typography and etc. should be used in the redesign.

Lastly, I added an interactive element to the desktop version when users hover over teaser images and updated both designs with the feedback from the previous usability tests for a hi-fidelity desktop and mobile prototype.