Bencium / Product Design / User Experience / User Interface
Product Design / User Experience / User Interface
Slide-One.jpg

iOS Fitness App [UX Case Study]

OVERALL CONCEPT, BRANDING AND UX/UI DESIGN
Research • User Interviews • Competitor Analysis • Logo and Visual Identity • Naming • Wireframing • Prototyping

(2014)

Standing out in a crowded marketplace:

Standing out in a crowded marketplace:

Aiming to have the cleanest UI in the App Store

Almost instant start after installation

No settings, no searching for start button, no registration – similar to WhatsApp

Supported by professional branding

 Gathering Requierements

Gathering Requierements

Userflow and Wireframes

Userflow and Wireframes

Based on research findings, I started ideating new features

User Interviews

User Interviews

Two main observations:

1) Reason for deleting fitness apps: battery drain
Solution: energy saving feature has to be highlighted in the App Store feature list

2) Easy to use fitness apps tested = they really work intuitively as advertised

Competitor Analysis

Competitor Analysis

I tested the leading apps while cycling to work fitness, tracking, health and coaching apps like FitBit, Strava, Couch to 5K, MyFitnessPal, Lifesum. 

UI Design Moodboard

UI Design Moodboard

As searching for the ideal concept, I found award winning, innovative applications like SoundCloud, Flickr, Monument Valley, AirBnb and Google Apps.

Branding

Branding

Good examples for strong branding and carefully selected colour palette in app UI design.

All screens should feature subtle animations and transitions in a pre- defined style.

Naming Options

Naming Options

Looking at the leading apps I realised that many of them have confusing names and few stand out (like STRAVA).

STIMULI: “A thing that rouses activity or energy in someone or something; a spur or incentive.” It sounds a bit foreign and hopefully will be remembered by the users.

Font Research

Font Research

Visually strong typeface design, good legibility
Avoiding overused typefaces
Typeface should support the app’s overall concept
Screen optimised

App Icon / Logo

App Icon / Logo

Goal: to create a unique shape that stands out on the user’s Home Screen and in the App Store.

Legible in small sizes on social channels.

Number Eight <> Infinite Loop

Number Eight <> Infinite Loop

The overlap of the letter 'S' and number 8: eight-week programme, the shape can be used as an hourglass, there are further possibilities in promotion visuals.

Unique Features

Unique Features

• Inspirational images pulled in from nearby running routes
• Battery saving mode: detects battery charge level
• Food intolerance/allergy, non-dairy, halal and vegan settings

Onboarding

Onboarding

Inspirational images set the user in the right mood

Home Screen

Home Screen

Swiping up reveals more information on the challenge

Challenge examples:

• eat no sugary food for one month

• 20000-step weekend

• run home from work • run to work
• run at lunchtime
• fastest 3K

• sponsoring possibilities with retailers like Strava/Rapha partnership

Home Screen Top Bar

Home Screen Top Bar

Progess constantly visible:
tapping on the top progress bar reveals the time left until programme end

Menu

Menu

INSPIRE button:
showing evidence for the positive impact: face will
look healthier, feel warmer all day, better sleep, circulation, weight loss, reduced nervousness, better food, better mood, nicer body

Social/Group Activity:
joint training with friends / local and remote

Screen during Workout

Screen during Workout

• Enhanced button legibility during running

• Inspirational images are pulled in from image server based on user’s location

• Progress graph: showing current location and route map

• Clean UI: focussing only one item while running

Screen during Workout

Screen during Workout

Progress graph option: animatedperformance graph

Screen during Workout

Screen during Workout

• Swiping left or right reveals further inspirational images about the area

• Showing beautiful images about the surrounding area is one of the biggest motivation to get up and go running

Home Screen during Workout

Home Screen during Workout

Animated performance graph

Achievement Overlay

Achievement Overlay

• Voucher codes, credit points can be also gained: building partnerships with retailers and other brands

• Social/Group Activity: Sharing achievments

Stats Dashboard

Stats Dashboard

• No geeky tables and stats

• Only friendly and clear infographics

Feature: Behavioural Change Detection

Feature: Behavioural Change Detection

1 Fitness Level
Tracking the progress as a normal running tracker app. Based on special algorithm (speed, distance etc), it is able to detect performance gain

2 Eating Habits
Food quality change based on purchased food list