David Duyker

I am a Product Designer building between digital and physical spaces. I’m currently freelancing and available for full-time work.

I recently began writing about bringing design to small nonprofits and "do good" organizations.
Check it out on Medium →

dduykerthis goes in the middle@gmthis goes in the middleail.com
206.this goes in the middle953.this goes in the middle1178
résumé →

About

/ 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

Screenshot of a website with a dark background and many buttons

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.

Site Audit with labeled boxes with arrows inbetween them

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

Document with text describing charactaristics of popular running apps and some screenshots

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

Image of Document with a picture of multiple people and text describing attributes and habbits of a person

    Persona

  • Gender neutral

  • Based on secondary research

  • Jobs-To-Be-Done. Hybrid approach Goal: build empathy + maintain an outcome oriented framing.

Data Visualizations

Words in columns with colored arrows moving between them

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

Image of a bulleten board with printer paper and stickynotes both with writing and sketches on them

    Interface

  • Navigation needs clear hierarchy to empower the user to navigate complex data

  • The interface should afford closer focus on each element

    Purposeful Product

  • Each data visualization needs an explicit purposes

  • Insights from each visualization or metric should be actionable

  • Each insight should be motivational

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)

Data Manipulation

Rows of buttons with years, months, and days on them

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

Many mobile phone screen mockups with numbers and letters on them

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

Columns of text with labeled properties and descriptions of how they should be used

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 →