Federal Trade Commission website redesign

Overview

Federal Trade Commission website redesign emphasizes navigation and cyber security topics. Redesign with user-centric in mind to solve user problems when navigating through the website, including user-friendly categories to reduce confusion and more effective navigation to help users find information with fewer steps.

Team Member + Roles

Chia-I Chen - UX designer

Solo project after research

Christian Garcia-  Co researcher

Tools


Project Duration

4 weeks - Part time

Current FTC Homepage

Challenges


The previous website navigation category was confusing for users resulting in low usability, poor conversion, and hard navigating.


So, we decided to develop an appealing and functional website that would require less time to search, be more user-friendly, and increase user trust. A navigation redesign focused on small businesses needs to help users find information more easily.


Notes: After completing this project, FTC had a homepage and navigation redesign, therefore the current homepage is different from the images on the left.





Problem Statement

Business owners want to find out information about how to protect their small businesses from cybersecurity because cybersecurity has become a serious issue for businesses everywhere.


Goals



Goal 1: Impress with efficient UX/UI design

We strived to provide stunning UX/UI solutions within simple yet efficient government agency website design.


Goal 2: Deliver User-focused design

We improved the website via easy to navigate homepage, logical navigation structure, easy-to-understand menus, and much more.


Research/Analysis


We performed a heuristic evolution of the current site, we found the current website receives the lowest rate in these categories: minimal text/information presented, consistent design, Icons are universally understood, and limited numbers of buttons and links. And navigation, design, organization, and easy-to-scan categories were also rated lower.

We also conducted 5 usability test for the current site and we found the navigation is confusing for user and information are hidden deep in the site. When asking users to “Find basic cybersecurity information for small business” only 80% of users completed the task and only 70% of users completed the task when asked to “Open sign up free credit report page” and 60% of users felt the layout and fonts are not easy to read.

Navigation categories are confusing

Having trouble with wording and terminology 

Lay out and fonts not easy to read

We created a 2X2 matrix based on the usability testing findings to evaluate elements important for FTC and users and we found them easy to understand and read, easy to find links, easy to navigate around, and Search bar are important elements for users.


Annotate usability and heuristic issues

we also annotated usability and heuristic issues for the current site to dive deep into the current page's pros and cons.

Persona



After our research, we found users are confused with the navigation categories and when the page hides dive in the site, users have difficulties locating them. To help focus our design efforts on addressing these pain points, we created a persona to represent the typical users of our website

Summer Gomez

Age 38     Miami, FL     Entrepreneur

Behavioral Demographics + Drive

Goals & Needs

Hesitations & Pain Points

Findings Implementation


Taking our research results I conducted navigation usability testing and card sorting in order to deep dive into the navigation redesign.

Navigation usability testing

Performed 2 usability tests for current navigation and found when asked to find a specific page, users have a hard time locating the right category. Users looked through each category before using the search bar for keyword

Card sorting

Conducted 3 users card sorting to help understand how user categorize each topic

I established a new navigation sitemap by analyzing card sorting and usability testing result

Lo-Fi Wireframe

With the new sitemap in mind, I created a new navigation layout with the drop-down from primary categories including the secondary and tertiary page titles. The tertiary would change as users navigate through the secondary titles, while the drop-down remained the same. In order to help the user scan through the homepage, I considered other heavy content pages like Yahoo which there are headline news suggestions and important content links users might be interested in. Also, keep the "Take Action" section above the fold where users can easily locate it.

 Desktop Homepage


Navigation dropdown menu

Mobile Homepage 

Mobile Navigation

AB Test

I conducted an AB test with the mid-fi wireframe to find out which layout is appealing to users. Users prefer B over A because it is easier to understand the purpose and what they can do on the site with the take action section on top of the page.

A

B

Style Guide

I designed various elements that were reused throughout the site, such as typography, colors, and cards. I converted these symbols into components.

Typography

I’ve chosen Roboto for Navigation and Lato for the heading and body text for style and readability

Color palette

I created a color palette based on the site's current use

Cards

The card element includes a title body section, with a drop shadow effect. The title section is 60px in height for desktop and 50px for mobile


Hi-Fi Wireframe

I've taken the testing result and combined all the elements shown throughout the design process to redesign this functional, informational, easy-to-navigate FTC website.

Usability Testing

I conducted 7 usability testing on the mobile version to find out if the redesign page is easy to navigate. The test is done both in person and  via Zoom. 

Test objectives: 


Users are given 3 tasks: 


Testing results:


Prototype

Select the image below to view the high-fidelity prototype in Figma! Feel free to try out the tasks I assigned to the users mentioned above.

Conclusion/Reflection