top of page

HEART THROB

UI HEART RATE APP CONCEPT
CALARTS      UX/UI SPECIALIZATION      COURSERA
MY ROLE : CONCEPT, ICONOGRAPHY, FINAL DESIGN
DURATION : 3 WEEKS
heart throb.jpg

HEART RATE APPLICATION

HEART RATE APPLICATION

HEART RATE APPLICATION

HEART RATE APPLICATION

PROJECT BRIEF

Create a sketch for an app that focuses on one simple task.

​

Your app must be one of the following :

​

• heartbeat monitor

​

• tuner for a musical instrument.

​

• digital microscope.

​

• an app that finds a specific food within a given area.

No matter what app you choose, you should be able to answer the following questions about your product:

​

• What is it ?

​

• Who is it for ?

​

• Where will it live ? On a smartphone,  website, computer, etc...

HEART THROB

HEART THROB

HEART THROB

HEART THROB

HEART THROB

HEART THROB

HEART THROB

WHAT IS HEART THROB?

APP NAME, FUNCTION & AUDIENCE

"For the Super Fan who gets a little too excited."

Heart Throb is heart monitor for young fans, who are super excited to meet their idol and need to keep track of their heart rate during the whole experience. Get notifications and updates that keep you enjoying the experience rather than passing out at the sight of them.​

​

This monitor allows you to track your heart rate with the help of your smart watch and Smart Phone , making sure you don’t pass out in front of your favorite idol. It notifies you when your heart rate is too high and gives you tips and tricks to calm down. You can easily share with your fellow fans how excited you are to meet your Super Crush or your favorite Celebrity.  

INSPIRATION

INSPIRATION

INSPIRATION

INSPIRATION

INSPIRATION

INSPIRATION

INSPIRATION

MOOD BOARD

"LOOK & FEEL"

After producing the app's name, function and deciding the audience we would be designing the app for, we were directed to create a mood board for the app. 

​

For my app I was inspired by vintage love testing machines and wanted to create a similar system where sections of the different heart rate ranges would light up. I wanted the app to be fun and cute to distract the user from what's going on around them.

ICONOGRAPHY

ICONOGRAPHY

ICONOGRAPHY

ICONOGRAPHY

ICONOGRAPHY

ICONOGRAPHY

ICONGORAPHY

SAMPLE PATTERN LIBRARY

DESIGN ELEMENTS

THE NEXT STEP IN THE PROCESS WAS TO CREATE A SERIES OF DESIGN ELEMENTS BASED ON THE DESIGN AND FUNTIONALITY OF THE APPLICATION:

The following things were considered for this part of the project:

​

  • how shape, color, words, imagery, and icons imply a specific function and affect the user’s interaction.

​

  • how each element could change as a user interacts with them.

​

  • that each element is appropriate for a desired action.

​​

  • how shape, color, typography, and imagery from your moodboard affects the overall look and feel of the set of elements.

Heart Throb1gf_Page_3.jpg

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

FINAL DESIGN

COMPLETED DESIGN

STATIC INTERFACE

THE FINAL ASSIGNMENT FOR THIS PART OF THE COURSE WAS TO BRING ALL THE ELEMENTS TOGETHER. 

I combined the app functionality & purpose, look & feel and sample icons, buttons, and different elements, to create 2 screens of the mobile application.

​

The first screen is the home/main screen, and the second screen is based on the described functionality of the app.

​

The most important things to note in creating these static interfaces was the hierarchy of content, which is prioritizing the most important functions for the user.

FINAL DESIGN

When it came to the final design I was inspired by vintage Love Test machines. I wanted the user to be able to get notified of their heart rate by looking at the different levels lighting up like the classic machine. Once the user becomes too stressed or close to passing out the user is directed to a de-stress page where they need to participate in calming techniques until they are back to a stable rate. I wanted the design to be fun and aestheitcally pleasing to the average "fan-girl".

CONCLUSION

CONCLUSION

CONCLUSION

CONCLUSION

CONCLUSION

CONCLUSION

CONCLUSION

FINAL THOUGHTS

I was able to apply my lessons in the Visual Elements of User Interface Design course on Coursera and create two mock ups. This course was offered by the California Institute of the Arts and involved working on several projects. These projects were development stages towards our final projects, mine being a heart monitor app. I learned about how aesthetics and details affect your final product.

OTHER WORKS

OTHER WORKS

OTHER WORKS

OTHER WORKS

OTHER WORKS

OTHER WORKS

bottom of page