Redesigning a running data analytics app with a focus on purpose and simplicity
Smash Run provides its users with complex data visualizations to enable deep training insights based on gps running data. The current app is complex and frequently hard to navigate. This hinders the core purpose—enabling runners to make data driven training decisions.
How might the web-app be redesigned as a mobile first application to improve is usability and effectiveness?
2 Weeks Personal Project
Analysis, Audit and Positioning
App Information Architecture
SmashRun presents extremely detailed data analysis. This leads to struggles with overly complex navigation and often confusing information architecture. These challenges can lead to difficulties with navigation and understanding. How can it be redesigned with more a mobile first focus and more purposeful architecture to better support its goal of improving training through data analysis?
Press "Create Account" to explore this live prototype!
Current UI + Branding
The interface is exclusively desktop based and not optimized for mobile use. Data collection is often mobile phone based → This creates a misalignment in use.
Mapping a Complex Navigation Flow
The current design on the website necessitated diagraming almost exclusively the menus. Multiple menu bars with different types of interactions and confusing layout makes this website a complex web with unexpected outcomes.
Alternative apps provide lackluster run analysis with minimal actionability but provide quality social or training services.
Based on secondary research
Jobs-To-Be-Done. Hybrid approach Goal: build empathy + maintain an outcome oriented framing.
While recording a workout, apps record a few different types of data: Time, Location, Health Data, and Heart Rate. From those data a multitude of metrics and analysis can be developed —> this informs purposeful decisions for visualizations
Navigation needs clear hierarchy to empower the user to navigate complex data
The interface should afford closer focus on each element
Each data visualization needs an explicit purposes
Insights from each visualization or metric should be actionable
Each insight should be motivational
The fundamental purpose driven actions got broken into domains. Each domain delineates a to the user a space that has clear user context boundaries (social benchmarking, reflection on the real, planning and projection)
Feed of friends
Data set manipulation
Trend over time
Personal Data Analysis
Insights from runs range in scope from single run analysis to year long trends. Data manipulation is how the user navigates through this treasure trove of training history. Current tool is a bar with upwards of 30 buttons does not communicate purpose.
Data Selector Design Goals
…is a simple interface
…offers purpose driven timeframes
…allows for rapid data manipulation
Design Directions + Explorations
Initial explorations began from the current design language but quickly branched out as I found it was too restrictive. Specific interactions were developed with unique styles that worked with the function which ultimately lead to the data first no-frills style inspired by research documentation and political data analytics juggernaut fivethirtyeight.
Branding + Styling
Unified Branding + Experience
The utility as well as the brand and styling all grew simultaneously throughout the prototype development. This allowed each to inform the others as choices were made and development progressed. Function ↔︎ Language ↔︎ Data Styling ↔︎ Navigation Touch Points etc. This fostered purposeful decision that worked in a cohesive way across particulars.
Live Prototype →