FDA
April 1st 2024- 5 week sprint
My Role - UI/UX Designer
The Challenge
The current FDA website lacks hierarchy and recognizable organization of information, making it difficult to navigate for users. An abundance of blue text causes users to feel overwhelmed.
The Outcome
A clear format and UI style guide to increase navigation and distinct calls to action to guide the user through the website as they search for what they are looking for.
UI Style Tile
Card Sorting
Organized by users for users
Wireframes
Laying out the Design
Mobile First Approach
Improved Navigation Elements
Responsive components to rework for any page.
Designing for all Screen Sizes
Responsive web design for a good user experience no matter what size screen they are using.
Prototyping
Usability Test
“I quickly got that the button in the middle was the main focus and I loved how clean the design looked overall.” - Interview 1
“I didn’t know what the FDA website was, I thought it was federal something agriculture!” - Interview 2
“It was hard for me to read the labels on the buttons, the text was quite small.”
- Interview 3
“I didn’t even notice the top navigation bar, I think it needs to stand out a bit more.
- Interview 4
Example Iteration
Before
After
- Increased deliniation between top navigation bar and top bar
- Clear identification of what the FDA means
Improved Site Map
Intuitive Navigation
Mockups
For a government website that creates new webpages everyday, scalability is one of the most important aspects to think about. Creating a responsive UI kit allows for efficient creation of new pages and timely recreation of old ones.
Navigation was the other focus of this redesign. If users cannot find what they are looking for, often times they will look elsewhere. With the redesigned navigation, we saw a 40% increase in successful user flows
User acceptance
- Higher efficiency of use
- 100% task completion on the redesigned website
- 60% task completion on old FDA website
- User acceptance was a success with with 100% acceptance of the redesigned website