Beats | Aditi Vengurlekar

The Project

Introduction: 'Beats' is a digital tracker for fitness enthusiasts, elders and people who want to track their heart beats. The camera lens on your phone measures heart beat accurately and helps you keep track of your heart rate which can be shared with your loved ones.

As the sole UI designer, I designed this personal project from inception to final design.

Duration: 1 month

Methods: Sitemap, Wireframes, Prototyping

Tools: Adobe XD, Illustrator, Photoshop

Context

BEATS is a unique software that allows fitness lovers, elders to keep track of their heart rates. Heart beat data is measured and then organized in statistics for easy viewing. One can also view their history and track the health of their heart. This data can also be shared with friends, family and medical professionals.

User Flow

Wireframe

Sign up

Splash Screen

Onboarding

Login

Calm

Home Screen

Activity Selection

Breathe

Hear Rate Result

Statistics

Heart Rate Save

Moodboard

I designed the moodboard in such a way that it gives a minimalistic and clean look. I wanted the users to have a soothing experience as it is a heart beat tracking app. Purple is the key color in the mood board. It gives a sense of uplifting and calm.

Light Mode

#FF6060

Typography

Roboto

#B388FF

#E8E4E4

#A8A8A8

#4A4A4A

#9687B1

#FFFFFF

84

Color Palette

Dark Mode

Typography

Roboto

#FF6060

#B388FF

#131313

#343434

#A8A8A8

#9687B1

#FFFFFF

84

Color Palette

Style Guide

Logo

Beats logo is clearly legible in the key color. I added heart beats to give a quick understanding of the app.

Color Palette

#B388FF

#E8E4E4

#A8A8A8

#4A4A4A

#9687B1

#FFFFFF

Light mode

Dark mode

#B388FF

#131313

#343434

#A8A8A8

#9687B1

#FFFFFF

Typography

A a

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Roboto

abcdefghijklmnopqrstuvwxyz

0123456789

Click here for full document

Design System Language

Screens - Light Mode

Onboarding

In onboarding users can get a quick glimpse of the features of the app. Here they can see how to place their finger on the camera to measure their heart rate. it also shows them that they can keep a track of their hear rate with statistics and also use some calming exercises to calm the heart down.

Measure

The layout of home screen/ measure screen is kept minimal and clean. On select activity tab the user can select the activity they are currently doing to accurately measure the heart beats.

The measurement results are clearly displayed along with previous measurements for quick comparison. To view history users can click on 'View Statistics'.

The graph is clean and legible so that the user can understand the graph and numbers easily. Overall Average, Minimum and Maximum hear rate is displayed for quick reference.

Screens - Dark mode

Onboarding

In dark mode, onboarding still has a clean look meanwhile maintaning the key colors and feel of the app.

Measure

I tried to keep low contrast in the overall dark mode UI to avoid highly contrasting jarring colors and screen. They key purple color is only applied to interactive elements on the screen.

Important details on the screen are highlighted with key color. Low contrast in background colors looks pleasing to the eye. Hierarchy is maintained with font size and colors.