HeadCheck Health Dashboard
Web App and Mobile App
Designing a dashboard for sports leagues to view athlete injury data and patterns, allowing them to take better care of their athletes.
Responsible for:
UX Strategy, Product Processes, Product Management, Ideation, Customer Discovery, User Testing, Supervision of development and QA teams
Tools:
Figma, Miro
INTRODUCTION
As the designer at HeadCheck Health, one of my biggest tasks was to redesign the all of HeadCheck Health's web and mobile products. One of the larger projects which came out of redesigning the entire HeadCheck Health system was to create a more valuable dashboard for our users.
What does HeadCheck Health's product do?
HeadCheck Health's product aims to help sports leagues and organizations execute concussion protocols, support athlete recovery from injuries, and highlight areas for improvement within a sports organization's injury management system.
THE PROBLEM
In order to help sports leagues and organizations execute concussion protocols and support athlete recovery from injuries, our users needed to be able to see their organization's concussion data.
On web, I needed to find a way to make the dashboard more valuable to our customers.
On mobile, the dashboard did not exist, and was a plain blank screen.
SOLUTION
My goals as I was designing this dashboard was to design for the different needs of multiple user types. I wanted to provide a high level overview of insights, as well as allow users to take a deeper dive into specific widgets if they so wished.
​
Since we have so many different types users (sports team administrators, physical therapists, coaches, etc), I wanted our dashboard to meet the needs of our many user types.
Our new dashboard displayed deeper insights into the activity within a sports organization, and provided a level of personalization which our users appreciated.
​
IMPACT
• Reduced the number of clicks to get to key functionality by 60%
• 85% of users provided positive feedback on their overall user experience of the HeadCheck Health application after the dashboard was implemented.
• An increase in reported customer satisfaction levels of the homepage from customer success calls.
PRELIMINARY RESEARCH: WHAT I CURRENTLY KNEW
Coming onto this project, I sat down with members of the Customer Success Team to understand what information we currently knew surrounding our users, and where the gaps were. This was the information shared with me:
2 Different Target Users:
Organization Medical Administrators
(Presidents of Sports Organizations)
Team Medical Staff
(Athletic Trainers/Athletic Therapists)
• In charge of overseeing multiple (possibly hundreds) of sports teams.
• In charge of overseeing specific athletes' health on specific teams.
• Usually only part of 1-5 teams.
Each of these personas would use the dashboard differently.
1) Organization Medical Administrators wanted to see big picture details, such as injury trends over long periods of time.
2) Team Medical Staff wanted to see specific details, such as which athletes were injured and what those athletes needed in terms of care.
BUSINESS AND PRODUCT STRATEGY
To understand how this project impacted the bigger vision, I sat down with leadership to understand business strategy, and use that to define product strategy.
Business Strategy:
To be the gold standard of concussion protocol management software for sports leagues locally and internationally, enabling them to successfully manage their athletes' safety.
In order to meet the business strategy:
The dashboard will need to provide a high level experience that allows sports leagues to monitor their concussion protocols and manage athlete safety
Product Strategy:
Increase self service on our product, and reduce the number of support calls/tickets the Customer Success team receives.
In order to meet the product strategy:
The dashboard will need to provide an intuitive, user friendly way for users to meet their needs.
USER INTERVIEWS
What do our users find valuable about our current product? What gaps are we not filling?
I sat down with 7 individuals (4 Team Medical Staff and 3 Organization Medical Administrators) on 30 minute calls to get a deeper sense of why they used HeadCheck Health.
Call Objectives:
• Understand the whys behind why our users use our product (core motivations, core needs).
• Learn how our users use our app currently (ie which functionalities did they use most often and which did they not use?)
• Learn our user's frustrations surrounding their injury management process and assess whether or not the HeadCheck Health product can alleviate that frustration.
A LIL PSYCHOLOGY SNIPPET
Endowment Effect
Users value something more if they feel it's theirs.​
​
User interviews are a crucial part of the design process, and they allow me to involve our customers in the process of designing a product that better suits their needs. This builds a sense of ownership and responsibility in our users, helping them perceive the product as their own.
​
In this way I can both meet user's needs, and also create value to our users through these customer calls!
INTERVIEW SYNTHESIS
After the interviews, I organized and categorized insights from the interviews to look at larger patterns, then further organized the insights into themes.
Theme 1: Motivations of the Users
The main motivator of every single person I spoke to was to take care of athlete safety first.
Theme 2: What Customers Valued
Customers valued seeing return to play progress of injured athletes (when athletes were injured, how they were progressing through their concussion protocols).
Customers valued seeing insights all in one place.
Theme 3: Customer Pain Points
Customers had many tasks to complete.
Customers had a lack of time to organize themselves.
It was hard to communicate with other staff on athlete care.
Theme 4: Customer Wants
To baseline test athletes quickly and easily
To see stats on concussions (when they occurred, how many concussed athletes, how did they occur, etc)
To see an overview of tests performed on all athletes.
To be able to better view and care for concussed athletes.
Theme 5: Additional Recurring Asks
View COVID details (athletes with positive COVID-19 tests, which athletes need to complete their COVID-19 screening before a game).
View unsigned forms.
View how an injury occurred (mechanism of injury).
EARLY ITERATIONS: WEB
-
As I created early iterations, I kept in mind scalability, knowing I had to design the dashboard in a way that it could grow.
-
Our users had many needs, and I had to prioritize features to determine how robust the dashboard would be.
-
This page had to both contain high level insights (for OMA users), and detailed insights (for TMS users).
EARLY ITERATIONS: MOBILE
When I first started redesigning the mobile app, one of the key things that I had to keep in mind was that the mobile app was designed to be used by both team staff, and concussed players. ​
​
Athletes didn't have access to the web version of the app yet as this was an early build of a product. Knowing that concussed athletes would use this app to communicate to their team and report/their symptoms meant that the app had to be designed in a dark mode, hence the dark mode look.
USER TESTING
Testing: Web and Mobile
Users: 8 total - 4 Organization Medical Administrators (Presidents of sports leagues) and 4 Team Medical Staff (Physical Therapists).
Age Range: 26-57
.jpg)
During these calls I sat down with these users, gave them specific tasks, and I had them walk through low-fidelity prototypes, in order to give me feedback and first impressions.
​
USER FEEDBACK
"Can I expand views of certain widgets to look at them in depth?"
"Viewing baseline tests is helpful, but is there one place I can go where I can just perform all baseline tests for all athletes?"
"On mobile, I prefer the history page to view activity. I don't like the widget because it's not full page."
"I like the recovery overview widget because I can follow up with my injured athletes."
"It's [the recent activity widget on mobile] too small."
VISUAL DESIGN
Since there was no standardization, I had to set and maintain a design standard. This led organically into my next project, which was creating a design system. Below are some ways I rearranged and assigned HeadCheck's brand colours on the product itself.
COMPROMISES
The original web dashboard consisted of 3 widgets. After consulting with users, I expanded the scope to 9 widgets, to better meet user's specific needs.
​
However, over a series of meetings with the development team, I learned that displaying 9 widgets on the user's dashboard home page could take up to 9 seconds of loading time (due to some constraints we had of the way the backend was architected). This meant I had to rethink how to present a 9 widget dashboard.
FINAL DESIGN
Since it was too much loading speed to display a dashboard with 9 widgets, I split the dashboard up into 2 sections:
1) An "Advanced" dashboard displaying 5 widgets which would be used as the primary homepage.
2) An "All" dashboard section which showed all widgets, but would not be the primary view for the homepage.
ADVANCED DASHBOARD
-
An Overview widget
​
-
Recent Activity widget​
​
-
Baseline Tests Needed
-
Suspected/Diagnosed Concussions
-
COVID-19 Screen Needed​
​
This primary dashboard consists of 5 widgets:
• Shows users trends in concussions & testing activity over a customizable time range.
• Has a second Injury Updates tab displaying a more detailed view of which athletes are currently concussed, helping users follow up with their injured athletes.
​
• ​​Allows users to see which specific tests and notes were logged for which specific athletes. Seeing when these tests and notes were logged helped users know next steps to follow for each athlete.
​• Shows athletes missing a mandatory baseline test (mandatory requirement for all sports leagues).
​• Shows athletes with suspected/diagnosed concussions.
• Shows athletes missing their mandatory COVID screening.​
​
A LIL PSYCHOLOGY SNIPPET
Miller's Law
The average person can only keep 7 plus or minus 2 items in their working memory.
​
I decided the primary view of the dashboard should contain 5 widgets, as that was consistent with Miller's Law. This also worked out in terms of loading speed, as after meeting with the development team, I learned that 5 widgets would only take about 1-3 seconds to load.
MOBILE ADVANCED DASHBOARD
This dashboard consists of 3 widgets:
-
An Overview widget
-
Shows users trends in concussions and testing activity over a 4 month time range.
-
-
An Injury Updates widget
-
​​Displays a more detailed view of which athletes are currently concussed, helping users follow up with their injured athletes.
-
-
Baseline Tests Needed
-
Shows athletes missing a mandatory baseline test (mandatory requirement for all sports leagues).
-
Addressing user feedback:
"It's [the recent activity widget on mobile] too small."
"On mobile, I prefer the history page to view activity. I don't like the widget because it's not full page."
Since users didn't like the recent activity widget on mobile, and since there was an already preexisting "History" page on mobile which essentially showed all activity that had happened, I got rid of the "Recent Activity" widget on mobile only.
.jpg)
"Viewing baseline tests is helpful, but is there one place I can go where I can just perform all baseline tests for all athletes?"
To help users perform all their baseline tests on one page, I added in a subpage where the user could click on the "View all" button from the "Baseline Tests Needed" widget. This would take them to this page on the right where they can see all athletes missing a baseline test, and tap to add a baseline test for that athlete right away.
"ALL" DASHBOARD
.jpg)
This second dashboard section displays all the widgets a user can view.​ Because of its high loading time, I had to design this as a place where users could still access all their widgets, but not use this area as their primary view.
​​
A LIL PSYCHOLOGY SNIPPET
User Investment
When users invest themselves, they're more likely to come back.
​
From the "All" dashboard section, users are able to customize which widgets they want to see on their primary "Advanced" dashboard by clicking the kebab menu at the top right of each widget.
By letting our users customize their experience, I allow them to invest energy into our product for future rewards (ie data insights on what they want to see)!
Users that invested in our platform will be more likely to stay loyal than to switch to a competitor.
Addressing user feedback:
"Can I expand views of certain widgets to look at them in depth?"
Users can click into the widget to view a more detailed display of the data. ​
​
The detailed view displayed information in a column form, to allow better digestion of information, and allow users to easily scan the page.
​​
​
"Viewing baseline tests is helpful, but is there one place I can go to where I can just perform all baseline tests for all my athletes?"
In the past, users had to click through 6 pages before landing on a page they could perform a Baseline Test from.
Now, from the Baseline Tests Needed widget, users can click once to expand the widget, in order to conduct all of their baseline tests from this one page.
Taking user concerns one step further:
Has Not Watched CrashCourse Video
​
Our users asked for an area to view which teams still had athletes that needed to watch the mandatory CrashCourse concussion education video.
​
​
​
​
​
I took this a step further and added this page in with two additional feature:
1) A way to mark an individual athlete or an entire team as having watched the video
2) A progress bar displaying how much of the team had completed watching this video.
​
These 2 features allowed a team staff member to view team progress of viewing the mandatory video, allowing them to understand who they needed to follow up with.
MOBILE "ALL" DASHBOARD SETTINGS
On mobile, users can pick and select how many widgets they want their home page to display.
​
CHALLENGES AND COMPROMISES
One of the main challenges of working in a startup is the lack of resources and time. To work around this, I had to iterate often, prioritize certain features over others, think about what to release first and what to release later, and work with all departments in order to achieve company goals while providing value to the customers.
1. Web "All" Dashboard
In order for this page to have a faster load time, I learned that the backend would have to be rearchitected, and that was a much larger project which the web developer did not have capacity for. That's why I decided that having this secondary dashboard page that loaded more slowly would have to be the solution for now.
​
To mitigate for this, I collaborated with the marketing and customer success team, and we rolled this out to users letting them know through marketing emails and customer success onboarding calls that the loading speed of this page would be a bit slower.​
.jpg)
2. Determining Long Term Product/Design Vision
After meetings with the mobile developer, I learned that the speed at which the mobile "All" dashboard would be developed would be at a slower pace than the web dashboard.
​
To mitigate for this, I sat down with leadership and mapped out the short term and long term release plan, my design/product vision for the future, and a roadmap for what lay ahead.
-
For mobile, all widgets would be rolled out over the course of 4 releases, each release consisting of 3-4 widgets, starting from the widgets of most importance to least.
-
On web, we would have 2 major releases. Version 1 would be the Advanced Dashboard, and Version 2 would be the "All" Dashboard.
FINAL THOUGHTS
As part of this redesign, I took on a product leadership role, creating roadmaps, organizing and writing the Jira Expics/Stories/Tasks, and creating extensive Confluence documentation as well as my design work.
​
Owning a large project as the sole designer at a startup isn't easy, and this journey of figuring out how to best design a dashboard for 2 different customer types, as well as creating a design system on the side was a challenging and rewarding process. Our new dashboard was shipped and was met with overwhelmingly positive reception! The "completion" (in quotations because I'm always iterating) of this project felt really good, as our product could now directly meet the customer's needs, empower customers to perform their duties, and allow sports teams to provide better athlete care through the new dashboard!
Future Thoughts:
Looking ahead, after this project, I want to explore diving deeper into our customer's concerns, and build different dashboard for professional leagues (MLS) vs university sports leagues. Earlier research showed the needs for professional vs amateur sports leagues do vary, but this would involve more research, user testing, and time from developers who already have their hands full. In the future, as I have more calls with different stakeholders, we'll decide if this makes sense for both product/user needs and for the business, and then will make the decision to prioritize this project moving forward.