Heart Throb :
UI App Concept :
California Institute of the Arts
UX/UI Specialization
Coursera
My Role :
California Institute of the Arts
UX/UI Specialization
Coursera
Project Duration :
3 weeks
Project Brief :
Create a sketch for an app that focuses on one simple task.
Your app must be one of the following :
-
tuner for a musical instrument
-
digital microscope.
-
heartbeat monitor
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...
.png){kind=small}
What is Heart Throb? :
App Name, Audience and Function :
"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.
Moodboard :
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.
Sample Pattern Library :
Design Elements :
The subsequent phase involved crafting a set of design elements inspired by the application's design and functionality :
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.
Final Design :
Static Interface :
The ultimate task for this course segment was to integrate all the elements cohesively.
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 + 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.
