Amoeba
Overview
FIGUR8 offers a best-in-class musculoskeletal tracking solution for fitness professionals. Unfortunately, MSK data can be complex and overwhelming, often resulting in confusion for clinicians and trainees.
My role in this project was to synthesize the most important fitness metrics into a gamified and visual “score," allowing a user to comprehend the implications of an assessment at a glance. Using parametric, computational, and visual design tools, I prototyped a data visualization tool and accompanying set of screens to build product vision and get buy-in from the engineering team before committing to development.
Focus
Data visualization Rapid prototyping UI design
Other Contributors
1 × product designer 1 × data scientist
Year
2019
Process
Clarifying Complex Metrics
While MSK data offers a wealth of information to clinicians about the athleticism of their clients, it can still be challenging to interpret. Typical assessments often show too much information, making quick and high level takeaways difficult.
To empower clinicians with information they actually cared about, we had to provide a high level overview that humanized the metrics through careful abstraction.
Extracting Relevant Data
This focus on abstraction required us to be thoughtful about which performance metrics to highlight. So the next step was to investigate what data was critical enough to be user-facing.
After corroborating with our research team, we determined that the overview screen needed to provide information on six KPIs:
- Balance (Priority KPI)
- Stability (Priority KPI)
- Flexibility (Priority KPI)
- Efficiency
- Agility
- Power
To minimize scope and accelerate the prototyping process, I proceeded with just the first three KPIs, knowing that the UI would need to ultimately accommodate for the remaining indicators.
Developing the KPIs into a UI
Having the Engineering team build the data visualization using d3.js would have been too expensive of an undertaking at our early stage of development. It made more sense for me to devise an efficient prototyping flow to quickly visualize the solution I was envisioning and get buy-in from the various teams that were involved.
The back-end of my solution relied on Excel to parse streams of KPI data into a clean and organized CSV format. From there, CSV files were imported into Rhino and Grasshopper. Data was grafted into separate branches, averaged, and then normalized. Depending on the type of assessment (Squat, RUPS, etc), some KPIs were evaluated between a different range of values. So this last step of normalizing the KPI data was crucial.
For the front-end, I arranged the KPIs on a radial grid. Because the data was normalized between 0 and 1, I could represent each KPI as a node along a radius of the grid, and then connect them to form a closed polyline.
With some playful fine-tuning and interpolation, an amoeba-like shape emerged from the data visualization. The radial logic kept the door open for the three unaddressed KPIs to be integrated at a later time by simply adding more radii.
Generally speaking, the athleticism of a patient became a function of how large and regular the shape of the amoeba was.
A clinician could glance at this snapshot, quickly discern any acute issues, and dive deeper into the data if needed.
Outcome
Showing Data Meaningfully
This parametric process allowed us to test dozens of options, making our end-to-end design workflow more easy, iterative, and efficient.
After the styling of the data visualization was finalized, the amoeba was prototyped manually using Sketch and InVision Studio and then integrated with the mobile app flow that was already in development.
Altogether, this solution allowed clinicians to engage with an overview page that quickly and meaningfully identified problematic areas. From there, if they needed to, they could dive deeper to look at assessment data more granularly.
Inspiring other Product Initiatives
In addition to serving as a rapid prototyping tool for the overview page, my design workflow also enabled us to automatically generate take-home PDF reports so that athletes could study their performance metrics.
The data pipeline was largely the same. First, a PDF template and some styling rules were constructed in Sketch. Next, athlete data was organized in Excel and funneled into Rhino and Grasshopper in CSV format, automatically populating on the PDF template. A final export operation generated the PDFs, concatenating the patient name with the date of assessment to automatically name each file.
Ultimately, the affordance of this parametric workflow was that it could be applied to more than one initiative. In this case, it allowed us to output dozens of PDF reports in seconds.
