Role: UI and Visual Mobile App Design
Timeline: 1 month (April 2020)
Adobe XD, Illustrator, InVision, Useberry, Google Draw
Google Material Design | iOS Human Interface Guidelines
User stories | User Flow Diagram | Logo & Icon Design | Wireframes, Interactive Prototypes and Mobile Mockup (for iOS & Android)
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.
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.
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.
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.
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
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
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.
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.
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.
I decided to employ the default typefaces, the San Francisco for iOS and the Roboto for Android, for optimal readability.
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.
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.”
I think this page looks very crowded and busy at the first glance!
Changed button color and input field to increase white space
The “plus” icon on the left is a bit confusing, is it for adding more time to the workout?
Replaced the “plus” icon with a “add to list” icon to better explain the “save workout” feature
The background behind your social media icons are a bit off-brand and does not fit your other screens.
Removed the grey background and changed the icon color to align the app brand style
Learn about the key features of the apps before signing up an account.
Options to sign up with Google, Facebook or email account.
Provide basic fitness information to enjoy customized workout experience.
Preview featured workouts, explore workouts by types or body parts.
(Strength, HIIT, Stretching)
(Abs, Back, Arms, etc.)
Find a trainer and get to know them before following their workouts.
Watch a short video about the trainers or connect with them on social medias.
Instant Chat Feature
Got questions about the workouts? Don’t be shy! Reach out to the trainers with the app instant chat feature.