Creative Arrangment
Studio Fitness
Studio Fitness

EmojiYou

A new interactive emoji-driven fitness app that engages users in effective stretching and healthy diet routines

Frame 39.png
Emoji You Cover 1 copy.png
Studio Fitness

General Information

EmojiYou is a new interactive emoji-driven fitness app that engages users in effective stretching and healthy diet routines. Developed during the cold period of South Korea when people were forced to be staying physically inactive at home, the app is designed to help users stretch and consume more fruits and vegetables daily and to promote a healthy lifestyle that should be maintained over time. Further, the app incorporates the usage of customizable Emojis, which act as fitness coaches who guide users through stretching and diet sessions.

The Goal

As a UI/UX Designer, I want to help users maintain a balanced healthy lifestyle through consistent physical movements and healthy diets daily through this app. The app will eventually require a monthly subscription from users to unlock certain features in terms of business.

Target Audience

The primary target audience is females in the age group of 25-45 working and who do not have much time to work out and make a daily diet schedule. Also, based on my primary research, it is found that women tend to utilize fitness apps and tutorials online more than men, and they like the idea of customizable and cute emojis being their fitness partners. Thus, the app will target busy and hardworking women across the globe.

pexels-li-sun-2294353.jpg
pexels-sarah-chai-7262479.jpg
pexels-nappy-936075.jpg

Affinity Map & Interviews

I sent my screen surveys to 20 people with different careers in different locations. I chose five candidates, both male and female, who have experienced changes in their diet and exercise routines. Some of them worked from home, and some of them worked in the office, and they shared their stories of how physically inactive they became, and unhealthy their diet became.

For the Affinity Map, I categorized their responses into four categories: Work Out Plans, Physical Effects, Emotional Effects, and Overall Changes. The physical effects were similar among them, gaining weight and many muscle aches due to sitting down too much. In terms of emotional developments, they all experienced feeling isolated and depressed often because of staying at home too much without much interaction with other people. It affected their careers as well.

Sam Soltis.jfif
Rachael Hu.jfif
Emma Li.jfif
Annemarie.jfif
Byron.jpg
Imran.jfif
Shineui Thomas Zoom.PNG
An interview with my participants about their experiences with changes in their workout & diet routines
IMG_20210318_095221386_HDR.jpg
IMG_20210318_095234220_HDR.jpg
IMG_20210318_095230278_HDR.jpg
IMG_20210318_095237395_HDR.jpg
IMG_20210318_095225762_HDR.jpg

Personas

Based on my primary interviews, I categorized my personas into workouts at Home and Workout Outside. Some people prefer working out at home using online tutorials and yoga mats. Some people like working outside, running, hiking, and playing frisbee. People who prefer working out at home think about living a healthy life is concentrated on maintaining their weight and eating healthy while the way people who like working outside is focused more on having fun and enjoying outdoor activities.

Workout at Home.jpg
Workout Outside.jpg

User Stories

The User Stories for two groups come to share similar patterns, but one of the differences is that people who prefer working at home want the app to be quiet and very quick to use, so they don’t bother other people. For this reason, even though I originally came up with the Desktop and Mobile version, I decided to design this app in a watch, which can provide the same type of service to people both indoors and outdoors, and it is easier to use than a desktop laptop, which people prefer not to carry around outside.

User Stories (Indoor).jpg
User Stories (Outdoor).jpg

Nielsen Heuristic Analysis

Nielsen Heuristics Competitor's analysis evaluates design quality based on ten key elements. Some of the aspects that I examine in this chart contain information such as "keeping users updated with information and receiving feedback for open communication, enabling users to control what they choose to see independently, and catching errors to minimize mal-functionalities." It is crucial to lay out the chart that can be interconnected to the purpose, which is optimized usability, of the application as a whole. I pinpointed some of the keywords for short clarity and created a notepad map with photographic senses. 

WhiteBoard Interview (2).jpg

Sketches

Here are some of the early sketches that I drew. I wanted the Watch App to focus on the data and customization of the app and not on other functionalities since the capabilities of the watch app are very limited, so many graphics will not be implemented.

For the mobile app, I sketched how the user will choose and customize their Emoji and send an invitation to their friends to join the app and stretch together, two of which are very important functionalities.

(Progress Data) Apple Watch Sketch.jpg
(Account Create) Apple Watch Sketch.jpg

Health Checker

Customization and Schedule

(Video Interact) Iphone Sketch.jpg
(Emoji Creation) Iphone Sketch.jpg

Invite Friends to the App

Emoji Customization

User Flow & Site Map

The User Flow showcases how the user navigates through each channel, and I focus on how the user is able to 1) create an emoji 2) set up a stretching session 3) invite friends and family to the app to stretch together

The sitemap represents how each channel on the app will be presented categorically and where each sub-channel belongs. I want the app to focus on two primary media: Stretch and Diet. The users will be able to customize their emoji when they first sign up, and they will be able to choose the levels of stretching and schedule their sessions, and diet sessions can be scheduled as well. One of the key features that the app will provide is the ability to stretch with friends to invite their friends to the app to video-stretch together.

1 How to Invite Friends

12.4 User Flow LifeYou (2).jpg

3 How to Set Up Stretching Sessions

12.4 User Flow LifeYou (1).jpg

2 How to Create an Emoji

12.4 User Flow LifeYou.jpg

Site Map : Homepage to Subpages

12.3 Site Map LifeYou.jpg

Moodboard and UI Elements

UI Elements

I choose the color Yellow because it convey the sense of excitement and engagement, in which the app is trying to deliver to the users. The UI elements will consist of light colors Yellow, Red, and Blue since I do not want users to be overwhelmed by both characters and UI elements in bold colors. The color will ease the overall color balance of the app and enable the users to navigate through each category more efficiently.

The icons will be used for five main channels: Stretch, Healthy Diet, Notifications, Messages, and Account, and they will be standard. The typography will be Comfortaa (the font style is a bit more easygoing and easy-to-approach than SF or Roboto, and it looks a bit more playful, which fits the mood of the app the best.

I choose these images because they portray the beauty of a healthy life, and they encourage the users to think about how their lives can be fulfilling through exercise and a healthy diet. The images of ordinary people finding happiness through stretching act as motivational factors for everyone.

Moodboard.png
Frame 39.png
Frame 40.png
Logo Design.png
Frame 41.png

Wire Frames & Edge Cases

I created wireframes based on the User Flows and Low Fidelity Sketches, and I made sure to include three
important edge cases. One of the most important ones was the Edge Case 3, which was made to help the
disabled users who had troubles with hearing, seeing, and moving their body parts. I wanted to make sure that the app worked for everyone regardless of their physical condition, and the app could provide support to those with disabilities to enjoy the app, thus if the user could not see very well, the app would provide “hearing only” session, if the user could not hear very well, the app would provide “seeing only” sessions, and if the user could not move their arms or legs, the app would provide “sedentary only” sessions.

WireFrame 1.png
WireFrame 2.png
WireFrame 3.png

Initial High Fidelity Mockups

I created my high fidelity mockups based on the feedback that I received from my mentor and testers, and I believe I stick to my UI elements and original plan of how I am going to solve this problem. The primary color is yellow, and the font style is Comfortaa, and I make the Emojis big enough to catch users’ attention, and I try my best to lay each step as concrete and straightforward as possible.

Red Route: Log In & Sign Up

Initial High Fidelity Mockups 1.png

Red Route: Customize Emoji

Initial High Fidelity Mockups 2.png

Red Route: Schedule on Watch

Initial High Fidelity Mockups 3.png

Usability Report

I conducted several usability tests with participants with different fitness and career backgrounds over the course of two months. Some of them were active fitness enthusiasts while the rest were casuals who enjoyed working out 2 - 3 times a week and understood the importance of stretching.

The critical issues obviously were addressed from the feedback, and most of them involved mal-functions of buttons and images shown on applications.  Emojis and buttons were not working properly, and some participants addressed their concerns regarding animation and limited choices of characters, and they were not having the optimized experiences on the app due to un-smoothness of user flow.  I took every feedback into serious consideration and went on revising them with scrutiny and openess.

Report.PNG

Onboarding Red Routes

Red Route: Log In & Sign Up

Frame 53.png

Red Route: Schedule Stretch

Frame 53 (1).png

Red Route: Schedule Stretch and Health Check on Watch

Frame 53 (2).png

Validation & Conclusion

Validation: After two rounds of testing, I was able to identify critical and major issues and fix them for my users. Some of the essential issues involved not following the guideline and clicking the designated buttons to navigate. Many users complained about the limited functionalities that the app offered at the moment. I was able to fix them through redesigning buttons and specific texts to make the guideline more thorough, and with the help of Adobe XD, I made the transition and user flow smoother.

Improvements: I believe the app can be improved on the graphics of the stretching session. Since the app requires lots of dynamic pictures, it needs to implement “show not tell” strategies throughout the app, which involves dynamic and animated motions from Adobe XD or Invision. I was able to show a 3D motion in my prototype, but I did not feel like it was enough.
Also, the app can improve on the Video Interaction part. The app needs to incorporate security functionalities (asking for permission to access the microphone and camera), and it needs to show the users that the app takes security and privacy very seriously.


Conclusion:

After months of interviews, writing scripts, sketching, drawing user flows and sitemaps, wireframing, creating high fidelity mockups and testing prototypes with potential users, I believe I have been able to solve the problem for this capstone one project. Being inspired by actual events, I choose this problem very carefully, and whenever I feel lost, I have been able to figure out what my goal is and how I can use my UI/UX skills to solve the problem.

Through my app EmojiYou, the users can stay physically active both indoors and outdoors using the mobile and watch app and maintain a healthy diet, and they can have fun inside the app with Emojis and other friends and family, all of which contribute to the success of this Capstone Project.

Next: Optimus Bikes