Empathiq is a progress tracking app designed to prioritize and celebrate your journey with self-compassion and empathy.
Role: UX/UI Designer and Researcher (with support from my mentor Patricia Machado)
Timeline: 100 HoursQ
Project Type: End to End Design
Tools: Figma, Figjam, Google Sheets, Maze, Zoom
America is Dehydrated
The Problem
According to the CDC,
“During 2015-2018 US children and adolescents drank an average of 23 oz (0.6 L) of plain water daily, and US adults drank an average of 44 oz (1.3 L)."
The U.S. National Academies of Sciences, Engineering, and Medicine determined that an adequate daily fluid intake is: About 124 oz (3.7 L) of fluids a day for men. About 92 oz (2.7 L) of fluids a day for women.
Despite the existence of water trackers, statistics show that the average American is dehydrated. I wanted to evaluate the shortcomings of these water trackers to see if I can improve an aspect of them to potentially motivate users to be more hydrated.
Finding the Solution
A Saturated Market
Competitive Analysis
Through the analysis, I found that water trackers are already quite developed. They already include quality motivators, effective reminders, aesthetically pleasing UIs, charts to view progress, and health education to inform users.
The apps are already quite fleshed out. One of the apps called Waterllama was even named App of the Year.
So I was hoping through user interviews I can find another way to improve them.
A Change in Perspective
Interviews
I interviewed 7 participants with the intention to:
Understand why people don’t drink enough water
Check if their daily schedules affect their water intake
Identify factors influencing their water consumption
Determine if any particular motivators play into their daily water consumption
If they have any experience with trackers, get feedback on tracker experiences and suggestions for improvement.
Discoveries
6/7 participants regularly drink water with or without the help of a water tracker.
4/7 participants keep a bottle or glass of water at their desk to stay hydrated
4/7 track their water intake by how often they consume and refill.
2-3 participants actually used a water tracker currently or in the past and have had success.
The interview results determine that interviewees are satisfied with their method of tracking water but had other concerns. Through that, I was able to find another problem to tackle.
User Seeking Motivation
“It can be very demoralizing to track things and then it just stays static, if that's not what you're hoping for. ”
Busy Mom of Two
“It’s already hard enough to take care of your health with so much going on.”
Key Takeway:
Taking care of your health can be overwhelming. Progress trackers can also be demoralizing when progress starts to appear more stagnant.
Upon gaining a fresh perspective, I delved deeper into researching this emerging challenge.
To do that, I developed these questions to guide me in the process:
1. How might we motivate people to keep taking care of their health despite the lack of progress?
2. How do we make tracking their health a more uplifting process?
3. And lastly, how might we simplify the main components of health so it is easier to navigate?
Defining the Target Audience
Personas
Upon identifying users, I generated ideas to foster a more positive and supportive experience in health tracking, particularly for individuals with hectic daily schedules striving for self-improvement. My objective is to highlight incremental improvements rather than solely focusing on numerical data, aiming to mitigate any feelings of discouragement stemming from gradual progress.
Tackling the Problem
Brainstorming
Idea 2: Provide users with a prompt to accomplish a task within a short time frame. By completing a small self-improvement related task, they might discover increased motivation to continue progressing since it’s an easy achievement, thereby reducing the overall sense of overwhelm.
I appreciated both concepts, and ultimately, I decided to integrate both in the final design.
Idea 1: Rather than meticulously tracking every detail, users can input their progress in their preferred manner. Upon completion of progress input, a positive message will be integrated, commending them for any effort exerted that day.
Here are the key features I would like to incorporate convey those ideas:
A personalized onboarding procedure for tailoring user preferences and crafting an individualized experience, with a particular emphasis on highlighting positive progress.
A versatile tracker for physical, mental, sleep progress, or anything the user would like. It can be customized to their preferences and needs.
An empathy screen validates and inspires users upon progress tracking, ensuring sustained motivation and preventing feelings of overwhelm.
Now it is time to determine now to put everything together…
I conducted a card sort through Maze and then I created a sitemap to figure out how to layout the key features. I tested it out along with a card sort to figure out how users think and best categorize screens and features. This was necessary to determine the best layout for my app.
*Stars indicate the key features
I focused on the text and bright imagery in the onboarding screen since conveying the importance of empathy to oneself is the focal point.
I had to play around with a few different styles to see what would be the most convenient way to customize the tracker and enter in their data. This design received the most positive feedback so I ended up sticking with this design for the high fidelity wireframes.
Crafting the Brand Identity
Brand Keywords: Empathy, care, mindful, uplifting, wellness
I selected pale colors to convey a welcoming and calming environment for the user.
Pale green evokes a sense of peace.
Lilac communicates serenity, calmness, and tranquility.
Light yellow radiates freshness and joy. Symbolizing a new start.
I created a user and task flow to help construct the process of the screens I will be designing.
From my perspective, the onboarding process emerges as a pivotal moment in shaping the user’s first impression as it is their initial introduction to the app. It’s also important to me that I’m able to emphasize the significance of self-compassion within the pursuit of personal growth.
The tracker stands as the app's central feature. I aimed to refine the user experience, ensuring individuals can customize their progress tracking to suit their preferences. Additionally, it serves as a reminder to conclude with a focus on self-empathy.
Early-Stage Design Selections
The main component of my design was the tracker and the onboarding screens.
Iteration 1
Upon a user's suggestion to modify the color of the current day or integrate a progress icon into the calendar, I've adjusted the colors accordingly. Additionally, I've reorganized specific items to improve overall readability.
Several users noted that the navigation buttons on the onboarding screens were challenging to reach due to their low placement. In response, I resized the images and repositioned the buttons upward.
Additionally, my mentor suggested adopting a card aesthetic to enhance the visual appeal and better organize the information.
A different user highlighted that the dark buttons on the health tracker gave the impression that options were not selected. Noticing the color dissatisfaction myself, I made a change. Additionally, I incorporated more of the brand's color to enhance cohesion.
Iteration 2
The Design Progression
Usability Testing and Design Feedback
This was a pretty lengthy process due to me being a beginner designer. There were several rounds of feedback within group critiques, mentor sessions, and in person prototype testing. I have compiled major changes based on feedback.
Also, I have made a few changes to the color scheme originally so the colors of the UI vary in the previous versions.
Others pointed out that the onboarding screen seemed somewhat cluttered. Another individual highlighted the assertiveness of the bold text. As a result, I modified the text to semi-bold, providing additional space and reducing the perceived crowding on the screens.
I relocated the save button to enhance accessibility and applied the finishing touches in terms of colors and icons, aiming for a more unified design.
Iteration 1
Iteration 2
Iteration 1
Iteration 2
Iteration 1
Iteration 2
Iteration 1
Iteration 2
Glimpse of the Final Design
Interactive Prototype
Lessons Learned
Pivoting Perspectives
Embarking on this project as a novice UX/UI designer proved to be a significant learning curve for me. Originally conceptualizing a water tracker, my approach shifted after conducting interviews and recognizing the challenges busy participants faced in managing their overall health. Despite the need to pivot the project, I appreciate the valuable experience gained in adapting swiftly within tight timelines.
Gaining New Skills
Additionally, delving into UI design, an area where I had limited prior experience aside from designing flyers for student organizations, provided an enlightening journey. Navigating through multiple iterations involving color schemes and layouts, each cycle became an opportunity for learning and personal growth, for which I am truly grateful.