header.jpg

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.  

 

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.

SITEMAP.jpg

User Flow

Wireframe

Sign up

Splash Screen

Onboarding

Login

Calm

Home Screen

Menu

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

baseline_fingerprint_black_24dp.png
statistics-24px.png

#FF6060

Group 72.png

Typography

Roboto

Group 70.png

#B388FF

#E8E4E4

#A8A8A8

#4A4A4A

#9687B1

#FFFFFF

84

Path 706.png
Group 3.png

Color Palette

Dark Mode

baseline_fingerprint_black_24dp.png

Typography

Roboto

#FF6060

Group 74.png

#B388FF

#131313

#343434

#A8A8A8

#9687B1

#FFFFFF

84

Path 706.png

Color Palette

Style Guide

Logo

Group 68.png

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

Design System Language

Screens - Light Mode

Onboarding

onboarding1.png
onboarding3.png
onboarding2.png

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

Home.png
selectactivity.png

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.

measure.png

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

stats.png

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

onboarding1.png
onboarding3.png
onboarding2.png

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

Measure

home.png
select activity.png

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.

measurement.png

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.

stats.png

Final Screens - Light mode

Sign up

onboarding1.png
signup.png
splashscreen.png
login.png

Splash Screen

Onboarding

Log in

selectactivity.png
measure_save.png
Home.png
measure.png

Saving measurement

Home screen

Activity selection

Measurement

calm.png
breathe.png
stats.png
profile.png

Menu

Breathing exercises

Statistics

Calm

Final Screens - Dark mode

Sign up

onboarding1.png
sign up.png
splashscreen.png
login.png

Splash Screen

Onboarding

Log in

select activity.png
measurementsave.png
home.png
measurement.png

Saving measurement

Home screen

Activity selection

Measurement

Prototype

Retrospective

calm.png
breathe.png
stats.png
profile.png

Menu

Breathing exercises

Statistics

Calm

Thanks for visiting!