Federal Trade Commission
Website Redesign
The FTC’s website is a government website used by consumers, corporations and small businesses. We were tasked with redesigning the website.
Overview
The Problem
The Federal Trade Commission oversees and protects many different users including consumers, businesses, and international trade partners. Each area has their own challenges and needs. How might we help a wide range of users quickly find information pertinent to their needs so that they can efficiently take care of business because the success of the economy depends on individuals and business playing an active role in the system.
The Solution
Redesign the website so that users can easily navigate through the vast amount of information and find what they need in the effort to make it easier for consumers, and business owners alike to participate successfully in the economy.
Tools
Miro, Figma, Google Slides, Google Forms, Google Sheets, UsabilityHub (Five Second Test)
User Research
Research started with what the FTC did and how users used the website. From there two proto personas were created: consumer and small business. Why two personas? We needed to be sure that we would be redesigning for the user that would yield the greatest accessibility. We picked those two because unlike with corporations, the FTC takes measures to protect and educate small businesses the way they do consumers. Ultimately, we found that by redesigning for the consumer, we would simultaneously be designing in a way that would benefit the consumer and small businesses alike.
Proto Persona
The next step was to do a heuristic evaluation on the current website and user paths on both mobile and desktop of a specific task (filing a complaint) to better understand the site and navigation.
Heuristic Evaluation
Key Takeaways:
bulky text in areas
too many ways to navigate to one thing
alot of white space
icons are hard to recognize
inconsistent navigation
odd placement of links and categories
Usability Testing
The next step was to understand how a user currently navigates the site and find potential pain points. We conducted five usability tests asking our users to complete a few simple, common tasks.
Key Takeaways:
all test users perceived the home page to be busy and some even expressed it to be overwhelming
most users found it easy to navigate so long as they had a clear job, otherwise their flow was often interrupted by distractions
“confusing” was the general feeling of the users
the site would open new tabs during navigation with no clear way back
most users felt there was too much to read, too much text to a page, and no way to easily digest all the information
Using this information an affinity diagram and a feature prioritization map were created.
Feature Prioritization Map
Affinity Diagram
Redesign Opportunities:
consolidate information
consistency in returning to the homepage
change how users file a complaint
improve IA overall
Definition & Ideation
Through all of this research, one thing was clear: the FTC has a lot of information and users felt lost trying to navigate through all of it.
Card sorting was the next step to streamlining the navigation and consolidating steps. This was also preparation for the sitemap. With so much information this really helped us to reorganize the IA of the site and make sure we didn’t lose anything important. After creating task flows, we were ready to start sketching for our wireframes.
Site Map
Card Sorting
Prototyping
Sketches
We started with sketches and did some wireframes which turned into our lofi prototype once we came up with a style guide. We found the FTC’s centennial artwork on their site and from those colors we used coolors to help us find similar colors. It also inspired the logo and symbols used throughout the website.
Style Guide
Lofi Prototype
Screenshots of our mobile and desktop navigation from our first prototype:
After we made the lofi prototype we did a 5 second test to see what our users thought on first look.
Here’s what we found:
Midfi Prototype
We made changes based on our testing results and further developed our prototype. We then did usability testing on this prototype. We made an affinity diagram and feature prioritization map. This is what we found:
Hifi Prototype
After much testing and iterations we had our final prototype. Here is a screen shot of the desktop home page before and our redesign:
Final Thoughts
Our biggest success was clarity. All users found the redesign clean, with one commenting “This page makes me feel very productive.”
All users improved their speed for completing tasks, finding information and navigating back to the home page, from 10 seconds on the FTC official site, to 4 seconds on the redesigned site. Users come to a government site with specific tasks. The faster they can accomplish that task, the more likely they will return.
Through all of our tests, we learned that users use color and iconography as a primary way to group information and orient themselves on a page.
For this process we focused on the consumer side of the FTC after acknowledging that the FTC uniquely serves two distinct groups. After our redesign, most user tests commented on the “business”-like feel to the site. This confirms our analysis that as dual protectorates, consumers and competition are intrinsically linked.
Next steps would include expanding our color coding throughout the site to highlight user choices, iterating on complaint forms from original user tests and examining competition section for organization.