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
Duration: Jun - Aug 2021 (3 months)
Design Team Size
1
Role
Design Lead, UX Unicorn
Reach
500+ active users / month
Design System
Providence, Helios
Device Type
Responsive Web
Tools
Sketch, InVision, Figma
Summary
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.
Before
After
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
Workflow
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
Personas
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
Launch
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
Impact
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