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.

Problem Statement

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.

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

Hesitations & Pain Points

• She struggles with getting more customers.

• She sometimes doesn't feel protected enough when handling large amounts of money

• She feels like she will never be able to compete with big retailers and online stores


• Needs to lower her overhead for her merchandise


• She needs to lower the number of hours she works a week (too much)

• She is hesitant to go into business with new vendors because they can be fickle

Findings Implementation

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

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.

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.

Style Guide

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

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

• Users navigate differently with different device

• Creating a style guide helps to keep all the design elements together

• When presenting a lot of information, it is important to make it easy to read and scan