REDESIGN - Federal Trade Commission
Embedded Files
.The Problem
When navigating the Federal Trade Commission (FTC) website, users have difficulty filing fraud reports, registering for events, and subscribing for email notifications.
.The Solution
Redesign of the global navigation and select pages on the current FTC website.
.My Role + Tools
UX Researcher + UI Designer.
Figma, Trello, Miro, Google Drive, Zoom
Project Date: 2020
Research + Analysis
Proto Persona
Though I was primary designer and researcher on this case study, I did work with other UX colleagues on select aspects (the user personas being one).
Jack Kohen, the proto-persona was identified through the collaboration based upon assumptions while dividing the most common categories in the FTC website. Many of the pain points and goals directly relate to design decisions that needed to be made.
User Path
The User Path Plan was created to understand the potential (or my assumed) path that a user might take to file reports, register for events, and subscribe for email notifications.
Take a closer look at the plan in detailed photos here.
Heuristic Analysis
The following highlights a templated spreadsheet that I use when conducting reviews of multiple pages on a site. One can quickly scan to see the amount of "1s" or failures of usability and accessibility standards throughout the website. Take a closer look here
Accessibility Testing
When redesigning products, in particular websites, evaluating and identifying any accessibility problems early on, when it's easier to address them, is an invaluable step in the process. The following showcases color testing that was conducted and it ultimately shows that the overall website design passes AA standards. However, because the website currently has so many colors, it was decided that the the test should be run multiple times for various color combinations. Failures were then noted in this process and suggestions made to the heuristic analysis.
Usability Testing
The following tasks were completed by users to test the
functionality of the current website. View detailed research plan here.
Tasks
Report Fraud
Register for an event via email
Subscribe for updates about coronavirus
Feedback
✓X Users successfully report fraud (but only one path, not successful with other)
X Users registered for an event via email but with notable frustration.
X Users did not successfully subscribe for updates.
X Users did not understand how to invite a friend.
Only 20% of usability tasks were completed successfully.
Annotations
Data analysis is personally such an important step and I have found success in annotating screenshots of the screens planned in a redesign, The following images showcase how I combine notes from accessibiity testing, hueristic analysis, and user testing directly to the current design of websites. This has also been a great tool and/or resource when discussing or presenting research with others.
2 x 2 Matrix
Following this initial research, I consulted with the same group of colleagues in order to compare notes from testing. The idea was by sharing notes we may gain a holistic understanding of website and users pain points - also, other researchers may have gathered slightly different insights. A part of the collaboration at this step was by sharing notes via Miro.
From the shared notes, we created an affinity board and ultimately the matrix on view - successfully identifying our redesign priorities.
Moodboard
Colors and images chosen for the moodboard remained true to the FTC brand - all things finance, commerce, and professionalism. Though the colors don't stray far from the current website, focusing on the color blue -which in America represents trust, confidence, and stability. Using this color with more intention yet minimally should lend itself to creating confidence in navigating the site among users.
Information Architecture
Card sorting & Sitemap
Using the results from card sorting as a starting point, the featured sitemap was created. The new navigation focuses on language and organization. Additional categories have been added to more clearly define and highlight the many resources available to users who visit the site.
UI Design
Navigation Prototype
The navigation was a major focal point for the redesign of the FTC website due to the overwhelming amount of information provided as well as it being the primary point of frustration and confusion from users while making their way through the site. Following card sorting decisions the initial step in the design process was dedicated to the global navigation. Notice design decisions like adding bold text and underlined titles to help users clearly navigate.
Wireframes
Users expressed confusion, not knowing how to complete tasks, and a generally overwhelming feeling from the original design. With Figma as my tool of choice, wireframes were quickly made to create a more streamlined homepage design focused on highlighting the most important categories.
Below, call to action buttons, news, events, and featured stories are easily accessible on the homepage. Another pain point from users was the complicated nature to register for events on the current site so the addition of a filter, calendar, and list of upcoming events provided users with multiple points to access information.
Responsive Design
Responsive Mobile Wireframes
Streamlining responsive and mobile-first designs were imperative during this process because most internet users today use their mobile phone to access websites. Usability Testing revealed insights that users preferred to scroll vertically regardless of page length. Many sites, specifically popular social media apps, have created an opportunity to generate long scroll pages without causing much user frustration. So the decision was made to focus on information placed in a single column for the corresponding sections on the homepage.
Style Tile
As noted in the moodboard - The current colors used on the site did not need to be completely replaced but rather needed to be used more intentionally. The decision was made to maintain the overall feel with minor updates to make the website feel more fresh and contemporary without losing the trust of users. Blue traditionally is recognized as being a color that is more masculine, serious, trustworthy, and resonates with finance. The color green also is one that user's typical relate to finance as well so this was used as a secondary color to be used. Red was chosen as a deliberate contrast for call to action buttons to stand out against the other colors.
Responsive High Fidelity Wireframes
Rapid Prototyping + Testing
Key Learnings + Takeaways
If more time allotted, would have reached out to current employees and consumers in order to gain a better understanding of current pain points of the site.
Complete a deeper assessment of mission and overall site organization to better understand needs. As time went on, I started to understand why items were organized certain ways. Would be beneficial to discover this sooner.
Test faster and more frequently. Actual current live website changed frequently.
Would take own photos and create personalized graphics/new logo/videos to enhance a new brand feel.
Create a section on homepage for “what we do” to clearly communicate the about and why of FTC. Would also make the options for businesses versus consumers separate and more clear, believe this would make the FTC more approachable.
Page updated
Google Sites
Report abuse