Project Overview

Kardio is an Apple Watch-paired mobile app that aims to make fitness fun. By tracking their heart rate on their Apple Watch, users can earn points to compete against themselves, friends, and family. In short, Kardio uses gamification methods to help build close communities of people who support and incentivize each other throughout their fitness journeys.

The Building Blocks

We’re not designing pages, we’re designing systems of components. -Stephen Hay

I had a kickoff meeting with the Creative Director and the PM to align expectations of the branding and style guidelines and reached the following objectives:

• Our new design system would prioritize iOS interface guidelines
• Use our new logo and typeface as a guide for our branding direction.
• Use Atomic Design principles to set up the building blocks for complex components

Grids

Since this design system was based on the mobile app, I decided to address the layout. Based on the iOS grid guidelines, I used a responsive 4-column layout for varying screen sizes.

Typography

The team’s chosen typeface was Roboto Mono, as they described their brand attributes: retro, friendly, and energetic. I created different styles to address the Heading, Body text, and Link text styles. I then provided variations in weight, so that we could play around with the visuals for the redesigns.

Color Palette

To align our brand personality with the look and feel, we chose a specific green as the primary color. I used a color tool plugin to generate HEX gradients for a consistent color scheme. By creating different gradients, this would not only help with addressing a better color contrast, but also help us design more complex components without deviating from the original color scheme.

Iconography

Our Creative Director had a small set of custom icons reflecting our rebranding concept. The problem was the lack of resources to produce the rest of our needed icons. My recommendation was to find an existing icon library with a pixellated aesthetic. After thorough research, I discovered Skware icon library that consisted of 100 icons.

I built off of these icons to produce 4 different pixel sizes (16px, 24px, 32px, 64px) and 2 states (light, dark). Then I produced additional color states to represent 5 different heartrate zones, which were globally used in the app.

Buttons

I spent more time on our existing app to evaluate the sizes and states that our Buttons needed. Given the current use cases of navigation and activity, I started with 3 types: Primary, Secondary, and Lined. Next, I used component properties (i.e. Boolean, Instance Swap) to address various call-to-action buttons.

What were previously inconsistent button types, shapes, and sizes, we were now able to refer to this single component to create dozens of button variations.

Form fields

I created Form Fields as another complex component, as they are frequently used in the user onboarding flow. I used various component properties to capture different states of a single form field (e.g. Error state and Selected state). It was important that form fields were accessible.

Adding multiple indicators to the error state and creating Selected vs. Active states (i.e. visually impaired users rely on the keyboard to navigate and select form fields) are all common considerations.

Redesigning based on Design System

Local components

These components were designated for specific screens and flows as I started redesigning the app. I was able to create these components using the foundational design system as well.

The heart rate chart was particularly important, as it provided the user with insight into how intense their workouts were. We deemed it appropriate to provide each state with laymen terms, e.g. “Warm Up” for “Zone 1,” to indicate the intensity. Basic color psychology guided our decision to define cooler colors with light zones vs. warmer colors with intense zones.

Designing UI Screens

After running through several Design System feedback sessions with the PM and Creative Director, I was able to move forward with the Redesigns for the screens. Using the swanky design system, I was able to create all the available screens and provide new ones that addressed some design gaps I’ve noticed while evaluating the app.