/ Project
Smash Run
Redesigning a running data analytics app with a focus on purpose and simplicity
(with design inspiration from FiveThirtyEight; famous for their analytics)
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?

Overview
Context
Timeline
2 Weeks Personal Project
July 2020
Tooling
Figma
Hand Sketching
Process Elements
Analysis, Audit and Positioning
App Information Architecture
Wireframing
Ideation
Prototyping
Branding
Problem Statment
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?
Live Prototype
Press "Create Account" to explore this live prototype!
To view full screen hover and press the full screen button below ↘︎
Development
Analysis
Site Audit

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.
Positioning

Competitive analysis
Alternative apps provide lackluster run analysis with minimal actionability but provide quality social or training services.

Gender neutral
Based on secondary research
Jobs-To-Be-Done. Hybrid approach Goal: build empathy + maintain an outcome oriented framing.
Persona
Data Visualizations

Data Insights
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
Insights

Navigation needs clear hierarchy to empower the user to navigate complex data
The interface should afford closer focus on each element
Interface
Each data visualization needs an explicit purposes
Insights from each visualization or metric should be actionable
Each insight should be motivational
Purposeful Product
Shaping
Information Architecture
Restructuring
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
Demographic Data
Community/Social
Data set manipulation
Trend over time
Personal Visualizations
Personal Data Analysis
Goals
Progress
Training Plan
Accomplishments
Preferences
Account/Profile
Data Manipulation

Current data selector tool
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
Making Pixels
Iteration

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

Reference sheet created by briefly formalizing and organizing some of the existing rules and guidelines.
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 →