Sideline Sidekick
Helping physicians treat athletes in high pressure settings
Product Design
0 to 1
Agile
Overview
MY ROLE
Product Designer
TIMELINE
20 weeks / Nov 2023 - May 2024
TEAM
3 Designers / 9 Developers / 1 PM
TOOLS
Figma
Firebase
React
Solution Preview
Quickly access a medical emergency at events
Used in high pressure settings, physicians can spend less time searching for injury protocol and more time treating athletes.
Look up injury treatment protocol anytime, anywhere
Quick search and identify injuries with key words. Designed for sports medicine physicians to access medical library of 150+ injuries.
CONTEXT
Our client, UCSD Division of Sports Medicine, treats professional sports teams
As a designer at Triton Software Engineering, I worked with UC San Diego’s Department of Family Medicine Division of Sports Medicine (DFMDSM), whose physicians serve professional sports teams such as US Women's Soccer, US Figure Skating, and San Diego Padres.
THE PROBLEM
At on-call events, physicians used a 170+ page manual, making injury treatment slow and inefficient
This is the current 170+ page sports injury manual physicians use to reference treatments at on-call events.
Insights from a user research survey and interviews with physicians revealed the following pain points:
!
Complex navigation
The PDF is unorganized and lengthy, causing excessive scrolling to locate the desired injury protocol.
!
Lack of search functionality
Finding specific injuries / relevant info is difficult without a structured search process.
!
Poor visual cues / organization
Lack of logical hierarchy in organizing injuries plus low visual cues makes it difficult to digest crucial details.
PROJECT DELIVERABLES
Through an offline-accessible design, how might we make treating injuries in high pressure settings easier and quicker?
In a real medical situation, it’s important for a physician to be able to find the correct medical protocol fast to treat emergencies in real-time. With no existing product on the market to tackle this challenge, our proposed product was Sideline Sidekick, a mobile application that helps physicians quickly find the correct protocol in an emergency field medical situation.
Why a mobile application was the best solution:
1
Portability
Physicians can reference protocol anytime, anywhere.
2
Offline accessible
Physicians can download protocol to reference at events.
3
Live search
Physicians want to quickly know how to treat athletes in high-pressure settings.
PRODUCT STRATEGY
What features do we need for a Minimum Viable Product?
Since the project was on a restricted timeline, my team and I split up the design stage into phases. From there, we brainstormed the most important and necessary features, pitching an MVP to the client to get the project started.
1
Live search function
Users can search for medical issues / situations using keywords
2
Access medical emergencies
Users can easily access medical emergency protocol
3
Find injury protocol
Users can find how to treat specific injuries
INFORMATION ARCHITECTURE
Exploring early solutions
I had to design a home page that would fit 150+ medical injuries, emphasizing the importance of exploring mobile app design patterns to best structure content. When structuring information architecture in low-fidelity explorations, I explored 3 common hierarchies: grid view, list view, and carousel. I evaluated each version using metrics to establish clear navigation, prevent cluttering, and minimize scrolling. I also included physicians’ input at this stage to determine information architecture to minimize their learning curve when using a new product.
VISUAL DESIGN
User testing real use cases revealed the need for scalability
I realized that my initial idea of sorting injuries by anatomy had to be adjusted to meet stakeholder needs. Given this challenge, I focused on the visual hierarchy of the ‘Browse by Category’ cards to minimize space on the home page, utilizing usability testing insights to deliver the final designs.
ITERATIONS
Several rounds of design critique later
Given feedback from 2 separate usability testing sessions, I iterated my designs into the new search flow. The final version utilizes visual hierarchy principles, icons, and call to actions to help physicians best navigate through dense information when searching for injury protocol in high-pressure settings.
DESIGN SYSTEM
Designing for interfaces at scale
Because our client asked us to follow UC San Diego’s branding, we utilized their color palette and typeface. Since there were 3 designers on the team, we collaborated to build a design system to reuse standardized components and maintain interface consistency. I designed cards for users to visualize medical conditions, exploring edge cases with icons and truncated text.
FINAL SOLUTIONS
My final solution streamlines navigation, increases discoverability, and establishes visual hierarchy — helping physicians treat injuries easier and quicker
