About

What makes everyone happy? Like, really happy! Wait, if you are thinking of money or big achievements, well, I am sorry to say that it not true. Let me tell you. It is the good health that makes all of us happy. But we don't really realize that.

We all have a hectic schedule and people say, they don't even have time to think about workout or even to cook healthy meals. Does this sound like you! Then, it is time for a change. Thinking how?

Introducing Happy

It all began in May 2022. My passion for designing and my genuine interest to help people in anyway I can, brought Happy to life. At this point, I had very little understanding of UX but I had taken up a UX course in CareerFoundry and believed it would help me with skills needed to come up with a design and so the story of continued. I decided to both include workout and healthy meal options in one application. Users can choose short workouts and quick meals and get into a healthy routine.

My Role

Tools used

DISCOVERY

Analyzing Competitors

Before I could start my design process for this application, I had to know my competitors first. I chose NTC and Mealime. After some deep analysis, these applications have inspired me, but there were some limitations too. I now present my SWOT profile on these 2 competitors. The limitations and weaknesses of these applications are some of the features I really needed for my own application even before I started this analysis.

Nike Training Club

Mealime

Target audience and their pain points - User Research

Now that I was becoming a UX designer, Understanding the target audience and their challenges was my first priority.

I interviewed 5 users and identified the pain points. Almost all the users needed a way to stay healthy mentally and physically but workouts were considered tedious. People were often giving up or didn't try at all. Many people didn't eat healthy meals and ran after restaurants/processed foods. On the whole, people didn't feel motivated.

I now knew my target audience - working professionals, busy homemakers and middle-aged people.

User Personas

User research helped me discover the problem that I was trying to solve. On the whole, users were lacking motivation, and being consistent was another issue. With this understanding, I jumped into creating user personas for the target audience. This was very helpful in making design decisions.

User Journey maps

With the business goals in mind, I sketched current-state user journey maps for the above personas to identify opportunities for improvement. All these were laying some strong foundations to the future design.

CONCEPTING

Information Architecture

With all the new knowledge, I created sitemap for the mobile application. It was more like laying bricks(foundations/ideas) to construct a solid product. But I wanted to test it out with real users to see how they perceived these ideas. I conducted open and digital card sorts with 20 cards with 5 participants. I then modified the sitemap to accustom to the new changes.

Card Sort Results

Only 40% of the participants grouped tracking and Zumba/Yoga together

60% of participants have grouped tracking and profiles together

The Search option was quite a challenge and participants had placed in different categories

The card tracking created some ambiguity and it had its presence in categories such as social, settings, workout etc. To fix it, I have renamed it to "My progress". Also, included "Goals" in this section, which was previously in Settings.

Outside card sort, I thought that it would be easy and also more accessible to have a virtual chat/help option on the home page itself.

PROTOTYPING

Sketches - Rapid Prototyping

I was feeling much more comfortable now and had a fairly good idea on the layout of the application. Of course a lot had changed since my initial thoughts on the application. I began sketching the designs in a process called rapid prototyping. All I needed was pencil and paper. Sounds simple, but very effective!

I sketched for the 3 features - Tracking workout and nutrition, Setting up reminders, Help feature

Wireframes

Using Figma, I translated my first sketches into low-fidelity wireframes. Then, I further improved by adding more details such as text. I also created all the screens necessary based on the user flow. At this stage, the wireframes were defined enough for some user testing. I now had my first mid-fidelity prototype ready to be tested with some real users.

USER TESTING

Usability Testing

MY APPROACH

Recruiting test participants

At first, I reached out to my friends and family. Sent out a recruitment email and also attached a poster that gave brief information on the Happy application.

Conducting usability testing

I conducted moderated usability testing with 6 participants.

Preference Testing

At this stage, I was also beginning to design my high-fidelity wireframes with all the changes from the usability testing. I designed 2 choices for onboarding and conducted preference testing to get a sense of users liking using UsabilityHub. 16 users participated and the results were very close.

Option 1 with Images

On the design 1, users liked the nutrition screen better than workout. Users felt that this design was more appealing.

Option 2 with Illustrations

However, looking at the design 2, the users preferred it better comparatively. It is simple and fun. One user stated that using real pictures is old fashion. I liked both the designs but definitely going with the design 2. Since it is easy to follow and read.

UI REFINEMENT

At this stage, I realized that there was more to creating High-Fidelity Wireframes/Prototypes. Adding UI elements into the design to include visual aesthetics and accessibility to create the best experience for the users.

Using Color Strategically

Particular colors can evoke certain emotions. Keeping the Plutchik’s Wheel of Emotions as reference, I chose to use a combination of colors mainly yellow and blue. I also chose these colors because I associate yellow with the color of the sun(energy) and Blue(water) and together for a good health.

Style Guide

Design Language System

I used the style guide and further added standards to provide consistency in the products. The design language system provides a standard for brand communication between teams. I included typography, images, color, navigation systems that were used and much more in this document.

Design Language System .pdf

Accessibility

Although I have come a long way, the design until now is never perfect. There is always more to it. Improvisations/iterations are part of UX at any level and for any experienced designer. Looking at all the above content definitely made me feel good. But would that suffice? Would that make my ALL my users happy? Let's talk about accessibility.

We are all different people with different needs and different disabilities. But we are all the same - Humans!. Every user must feel included in the design and that is accessibility.

I have made a few changes to my high-fidelity to make it more accessible.

Happy Mockup

From initial ideas to user interviews to planning mobile layouts to sketching to wireframing to prototyping to adding visual elements to including accessibility to a number of iterations to numerous learnings to more iterations and more learnings, here is Happy for you!

Try Happy!

Next steps

I would continue to work on UI elements, interactions and conduct another round of usability testing. Update portfolio and share my work with many more to get more ideas and keep getting inspired and keep designing!

Learnings

I started this case study with absolutely no knowledge on the process or anything in UX. The thorough process in UX has been very helpful in understanding WHAT, WHY, HOW of UX!