Fitness Tracker: Fitness Report
(Web App Redesign)
A curated view of application-technology healthiness stats
"Get in, Get fit, Get on with it"
Client: Fidelity Investments
Duration: May 2020 - May 2022 (2 years)
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 have to track down what needs to be worked on from multiple sources and then try to figure out what to prioritize for my next delivery" - Decision Maker (ex. A Squad Leader)
From developers to leaders, there is a need to monitor their apps' technology health. Tech health data as it relates to themes like Security, Stability Accessibility, and more.
My Solution
Solving for the "Why" vs the "What", understanding that the true goal of leaders was to improve their quarterly KPIs (Key Performance Indicators) vs just visualizing the data; I redesigned the Fitness Report to focus on helping users understand their consolidated stats and show them how to improve their technology health.
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
Created Stakeholder Goal Brief > Explored Existing Site to Understand Intent > Reviewed Existing Qualitative and Quantitative Research > Defined Target Audience > Conducted Additional Research > Identified New Features/Pages to Design > Created Low then High Fidelity Mock-ups > Conducted Intermittent Mock-up Research > Created Redesign Launch Plans > UX Developed / Frontend Engineered the Beta Site > 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 site, 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 most used features and the demographics of visitors by their org rankings.
Insights Gained:
Pages with the most specific app-level details drove the most traffic
Bounce rates showed opportunities to optimize transitional pages (Navigation improvements needed to take users to their designated page)
Qualitative Research
Following the quantitative research, I was able to get an accurate-representative sample of users to interview. I conducted 5 Usability Studies and User Interviews with 6 representative users.
Insights Gained:
Most users did not understand the data on the site and what to do with the information
Learned about how users used the site in relation to their workflow
Found pain points of specific features users interacted with
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.
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
What's New Modal
New Navbar and NavModal
Search bar enhancements
Top Level Team Page
Middle/Intermediary Page
Lowest Level Team Page
Metric Summary Card
Metric Detailed Modal
Team Info and Members Modal
Feedback Modal
And more
Minor Features
Loading Screen
User Settings Menu and Modal
Guidance Tooltips
Side Navbar
Footer
Squad/Team Setting
Squad/Team Notifications
Metric Feedback Section in Modal
Miscellaneous Graphics, Logos, and Branding
And many more
3/6 Ideate
A set of sketches to generate a range of creative ideas to prototype
4/6 Prototype
A set of high fidelity mockups to bring the creative ideas to life
5/6 Test
Qualitative Research
After high-fidelity mockups were drafted, more Usability Studies and User Interviews were conducted with 3+ individuals to test the Figma Prototype.
Insights Gained:
All users understood which data stat was favorable, versus what needed to be Improved
Most users understand the flow of the page and how to dive deeper into the details to understand their apps' stats
6/6 Implement
Launch
Following multiple favorable tests and pivots, I assisted the development team in crafting a plan for the Redesign approach and writing the Jira stories to see it through
I UX Developed / Frontend Engineered over 90% of the high Fidelity designs I made using HMTL, SCSS, and React JS
After months of Beta testing and development, the Redesign launched to positive reception
Impact
Streamlined user feedback to be recorded in the dev team's backlog
Feedback could now be made in the specific area to ease triage
Increase user satisfaction and a steady increase of 10% in monthly active users
Lessons Learned
Dashboards are often perceived to be desired by users, but instead, users want the outcomes of the dashboard, not necessarily the dashboard itself.
Users value...
being shown the right data at the right time
Telling them why the data is important
and showing them how to fix or improve their stat/score