Enhance at-home workout experience
iOS & Android Mobile App Design

Role: UI and Visual Mobile App Design

Timeline: 1 month (April 2020)

Project Background
The unexpected global pandemic has changed how people exercise. With gyms keeping their door closed, it comes as no surprise that at-home workout has become the new way to go. Many fitness companies have shifted to offering workout contents in the form of online tutorials, on-demand classes, workout apps, etc.

Like many fitness enthusiasts, I have been jumping through hoops in the last few months to find a “gym-alternatives” that fits into my fitness level and preferences. I found that following workout videos online to be a great way to stay active at home. However, the lack of real interaction with the trainers for personalized coaching makes it hard for people to stick with a routine and make progress.

“How do I know if I am working out in a proper form?”, “How should I structure my work out to meet my goal?” These questions arise around people who strive to work out more effectively, even staying at their comfortable home.
Tools:

Adobe XD, Illustrator, InVision, Useberry, Google Draw

Design Guidelines:

Google Material Design | iOS Human Interface Guidelines

Deliverables:

User stories | User Flow Diagram | Logo & Icon Design | Wireframes, Interactive Prototypes and Mobile Mockup (for iOS & Android)

About Tevo
TEVO stands for “Training Evolved”.

The idea built upon connecting home fitness enthusiasts, my target users, with fitness trainers who share workout videos online, to allow instant feedback interaction. It enhances the experience of at-home workouts by mimicking the benefits of personalized fitness coaching.
Purpose
TEVO is a mobile app concept I developed for my UI Design certification. The goal of the project was to design mobile app interfaces for both the iOS and Android platforms adhering to the existing design guidelines.
CHallenge
As a long-time iPhone user who is more familiar with the iOS interface, my main challenge was to acquaint myself with the different design patterns between native iOS and Android platforms, and to implement them into the respective app designs in my project.
My Approach
Empathize & Define
With the initial app concept in place, I interviewed a few people who I met at the local gym to understand their needs and pain points toward working out at home. This helps me with defining the MVP and key user flows for my projects.
User's pain points
User Stories & Flows

As a users,

I want to play a workout video, so that I can work out at home by following along the instructions.
I want to get to know the fitness trainers who share the workout videos, so that I can decide if his/her workout videos is suitable for me.
I want to interact with the fitness trainers, so that I can ask him/her questions about the workouts, share picture and video with him/her to get feedback on my forms.
Research

To familiarize myself with the native app design patterns, I thoroughly researched the iOS Human Interface Guidelines and Material Design. I subsequently did in-depth app analyses to the existing apps on the market, focusing on learning their use of color palettes, typography, UI patterns, styles and interactivity.

I analyzed the Nike Training Club app and Fitbit Coach app, given their popularity in the industry and similar features to TEVO. I also looked into the UI of the YouTube mobile app provided that video content sharing is one of the key features of TEVO, and based on my user research, I learned that a lot of people utilize YouTube as a primary channel for follow-along workout videos.

Ideation

It’s time to put my ideas into practice! I sketched out wireframes in low-fidelity with pen and paper. I then converted them into digital format with Adobe XD., highlighting the key differences in the use of UI patterns for the iOS and Android interfaces.

Low-to-Mid Fidelity Wireframes
Layout & Spacing

Grid Layout

Material design recommended using 4-column grids for mobile breakpoints that are less than 600pt, while iOS emphasized restricting content inside a safe area without specifying a cohesive grid system.

Considered the complexity of content and function of the app,  I have chosen to use a 12 column grid in both the iOS and Android interfaces to allow optimal flexibility for placing UI elements in various layouts.

Baseline grid

To maintain consistent spacing across the project, I adopted the 8pt baseline grid for the Android interface following the Material Design Guideline. As for iOS, I have noticed the constraints of implementing a rigid 8pt grid given the various sizings of system UI elements (e.g., 51pt height for search bar) defined by the iOS Human Interface Guidelines. After further research in this area, I found a workaround to apply a "soft 8pt grid" from which individual elements are spaced 8pt apart rather than placed in a fixed 8pt grid.

Button Style

Floating Action Button (FAB) for primary action

Android
iOS

Flat Button with text label in title-case

Raised button with text label in capitalized letter

Information Architecture

Bottom Nav Bar displays only the top-level destinations; Secondary destinations (e.g. account setting, dashboard) are placed under the Navigation Drawer

Bottom Tab Bar for navigating between all main sections of the app

iOS
Android
Navigation

Build-in back control instead of back button on the navigation bar

Top navigation bar contains a standard back button to allow users retrace to the previous screen

iOS
Android
Visual Design
Logo Design

Exercise and Interaction are the two key features that TEVO offers. I narrowed down dumbbell, kettlebell and chat bubble to be the direction for my logo and icon design after running a quick word association around the two keywords.

Dumbbell Concept

Logotype Exploration with Adobe Illustrator

I laid out a few san serif typefaces in different variations, and tried to combine them with the dumbbell concept to create a direct and simple logotype that can represent the brand.

I decided on the FreightSans Pro given its warm and harmonious look. Uppercase is chosen as it conveys power and strength, which I found appropriate for a workout app.

Color Palette

Instead of using the default color palette provided by iOS and Android design guidelines, I created a distinct color palette that aligns with the app’s brand.

Typography

I decided to employ the default typefaces, the San Francisco for iOS and the Roboto for Android, for optimal readability.

Prototype

After finalizing the visual direction and applying them to the wireframes, I created a prototype for the iOS and Android interface with the Adobe XD prototyping tool to help me gather user feedback.

I strategically shared the corresponding prototypes with current iOS and Android users to ensure my designs are adhered to the specific design guidelines and are understandable to users.

Refinement

Prototype Issue

Upon prototyping, the first thing I noticed was an unexpected prototyping issue where the overlays for selected elements were not showing up correctly on users’ mobile devices - an issue caused by the “Overlay Function” I used when creating the prototype.

I did not want the unintentional error to interrupt my user experience, so I did some thorough research on the topic aiming to find an alternative to illustrate the “selecting” effect.

After some trial and error, I discovered the “Component states” feature would allow me to create a seamless transition between the “default states” and “hover states.”

Screens shared by users(overlay were misplaced on mobile devices)
Intended design(Problem solved with Component States feature in Adobe XD)

User feedback

final UI Design
01 Onboarding
App Introduction

Learn about the key features of the apps before signing up an account.

Sign up

Options to sign up with Google, Facebook or email account.

Profile Setup

Provide basic fitness information to enjoy customized workout experience.

02 The Workouts
Workout Home Screen

Preview featured workouts, explore workouts by types or body parts.

Workout by Types

(Strength, HIIT, Stretching)

Workout by Body Parts

(Abs, Back, Arms, etc.)

03 The Trainers
Trainers Screen

Find a trainer and get to know them before following their workouts.

Trainer's Bio

Watch a short video about the trainers or connect with them on social medias.

04 Instant Messager

Instant Chat Feature

Got questions about the workouts? Don’t be shy! Reach out to the trainers with the app instant chat feature.