Fitness Tracker: Accessibility Dashboard
(Web App Redesign)

A curated view of webpage Accessibility-healthiness stats

"Get in, Get fit, Get on with it"

Client: Fidelity Investments
Jun - Aug 2021 (3 months)

Design Team Size

Design Lead, UX Unicorn

500+ active users / month

Design System
Providence, Helios

Device Type
Responsive Web

Sketch, InVision, Figma


The Challenge

"I am new/unfamiliar with web accessibility compliance, what is an easy way for me to easily understand where my apps are not compliant and get steps to make them compliant" - Tech lead

My Solution

Working/mentoring the summer 2021 interns, I redesigned the existing table-centric dashboard of automated accessibility stats to a more action-oriented dashboard view. I create 2 major sections within the view: a top-half view to show the overall stats of the application, and a bottom-half view to dive deeper into the details of accessibility issues.



Skills Applied

Content Strategy, Design Lead, Graphic Design, Information Architecture, Interaction Design, Marketing, Product Design, UI Design, UX Analyst / Design Ops, UX Design, UX Front-end Development, UX Research, UX Strategy, UX Writing & Visual Design


Confirmed Stakeholder Goal Brief > Explored Existing Site to Understand Current Pain-points > Reviewed Pain-points with Existing Target Audience > Reviewed Information API Payload to Display > Identified Key Features to Design > Created Low then High Fidelity Mock-ups > Conducted Intermittent Mock-up Research > Created Redesign Launch Plans > Worked with interns to UX Develop the New Features > Reviewed Final Output on Live Site > Facilitated Launch of the Redesign

1/6 Empathize

UX Research

To better understand the developers and leaders that visited the current Accessibility Dashboard, I explored both old and new Quantitative and Qualitative research.

Quantitative Research

Reviewing the Google Analytics of the current site, I was able to learn about the drop-off (Bounce) rate of visitors to the page.

Insights Gained:

  • Low traffic and a high Bounce rate to the Accessibility Dashboard indicated low satisfaction and/or unperceived value

Qualitative Research

Following the quantitative research, I was able to get an accurate-representative sample of users to interview. I conducted a few Usability Studies and User Interviews to understand specific pain points.

Insights Gained:

  • Leaders were not satisfied with the current table-view page, because they wanted an overview of their app or squad's accessibility compliance status

  • Developers we not satisfied with the navigation and grouping of accessibility issues to fix on the page

2/6 Define


The needs of the users ranged per persona. Building upon the already existing personas created by team members, I was able to understand what views/features each individual would value.

(Same personas as Fitness Tracker: Fitness Report)

Adrian (He/Him)
Domain Leader

"I want my organization to continually grow in it's ability to deliver products that directly impact our profit margins while providing increased value to our customers"

Felicia (She/Her)
Chapter Leader

"I need to better understand squad needs so that I can provide squads and individuals with the right skillsets"

Samantha (She/Her)
Squad Leader

"Every Sprint I have to decide whether my team should be adding business value by developing new features or if my team should address issues that remove technical debt from my applications"

Adam (They/Them)
Squad Member

"I need real time information about my applications so that I can develop new features quickly and react to any issues as they arise"

Defined Features to Build

Major Features

  • Accessibility Dashboard Landing Page

  • Top Summary View Dashboard

    • Includes relevant application-level info

  • Bottom Detailed List View

    • Include issue grouping along with easy-to-understand instructions to fix the issues

Minor Features

  • Walkthrough Modal to explain how to use the dashboard

  • Marketing GIF showing a walkthrough

  • Recharts graph interface

  • Code block for accessibility issues

3/6 Ideate

A couple sketches, an information architecture digram and the API payload breakdown - all used to generate a range of creative ideas to prototype

4/6 Prototype

A set of high fidelity mock-ups to bring the creative ideas to life

Platform Gallery

5/6 Test

Quantitative Research

After high-fidelity mock-ups were drafted, a quick Usability Study was performed to test the Figma Prototype.

Insights Gained:

  • The new design resulted in a significant increase in understanding of teams' accessibility compliance

  • Users were glad to get info about the page, its purpose, and how to get started using the dashboard

  • Feedback on a minor information feature that was missing, resulted in its addition for a later I’mp implementation

6/6 Implement


  • Following multiple favorable tests I worked with interns to walk them through the design

  • Although a majority of the development was started by the interns and the team's developer, I later on refined the code, and made it mobile responsive

  • After weeks of Beta testing and development, the Redesign launched to positive reception


  • Traffic to the dashboard increased 137% from 1,513 pageviews 6 months before the redesign to 3,587, 6 months after the redesign

  • The result of the large satisfaction of customers led to an exponential increase in application pages scanned

  • Multiple teams across the company made accessibility updates a routine in their demo process and credited the redesigned dashboard

Lessons Learned

  • How information is presented can greatly influence how/whether or not a customer would interact with the info.

  • Dashboard users valued...

    • an introduction of the dasahboard - its purpose and how to get started

    • an overview of the data along with a history to show change over time

    • a focused and well-grouped view of the issues so users can see that 1 solution solves multiple issues that may exist on the same page