Revital — Hollistic Wellness App

Revital is a holistic wellness app that aims to redefine healthy living by integrating nutrition, fitness, and mental health support into a seamless platform. In a world where traditional notions of wellness often focus solely on physical health, Revital’s mission is to broaden this perception and provide individuals with the resources they need to approach well-being in a holistic manner.


Role
User research, prototyping, UI/UX design, design system, art direction, brand design
Tools
Miro, Figma, Photoshop, Illustrator 
Duration
6 months





Problem



Most health and fitness apps focus on numbers—steps, calories, and heart rate—while neglecting the holistic aspects of wellness. Mood, effort level, and the interconnectedness of fitness, mental health, and nutrition are often overlooked. There’s a need for a platform that moves beyond numeric tracking to promote a more integrated and sustainable approach to well-being.


Objective

The objective of Revital is to create a holistic wellness platform that integrates fitness, mental health, and nutrition, moving beyond numeric tracking to provide a more comprehensive and sustainable approach to well-being.


Solution

Revital bridges the gap between fitness, nutrition, and mental well-being by offering:

  • Holistic Tracking Experience: Allows users to monitor their wellness journey beyond just numbers, incorporating fitness, nutrition, and mental health in one seamless platform.
  • Integration with External Data & Devices: Syncs with wearables, fitness trackers, and nutrition apps to provide a comprehensive view of health metrics.
  • Personalized Goal-Setting: Enables users to establish tailored fitness, nutrition, and mindfulness goals based on their unique motivations and lifestyle.
  • Curated Resources for Wellness: Provides workout videos, nutrition guidance, and healthy recipes to support users in building sustainable habits.

Research and Discovery

To develop a deeper understanding of user needs and behaviors, I conducted a thorough research and discovery phase. This process incorporated multiple methodologies, including secondary research to analyze existing data, a screener survey to identify the target demographic, user interviews to uncover wellness habits and challenges, and affinity mapping to identify common patterns and insights.


Secondary Research

During the pandemic, people not only sought ways to stay active but also prioritized mental health support. As awareness grew, therapy and mental wellness services became more widely accepted. Notably, the mental health app market grew by 54.6% from 2019 to 2021, demonstrating the rising demand for accessible mental health resources. Wellness apps have the potential to bridge this gap, making support more available to those in need.


Screener Survey

To ensure that interview participants closely aligned with the project’s target demographic, I developed a screener survey. I surveyed 33 individuals through social media to gain insights into their behaviors and attitudes toward well-being, focusing on their areas of interest, progress-tracking methods, frequency of engagement, and approach to setting wellness goals. This process helped refine participant selection, maximizing the relevance of interview findings and strengthening the overall research outcomes.





User Interviews

To gain deeper insights into users' perspectives on fitness, mental health, and nutrition, I conducted five user interviews following the initial insights gathered from the screener questionnaire. Selecting participants aged 25 to 33, I aimed to comprehend their diverse relationships with wellness. Throughout these five 30-minute interviews, I delved into topics such as app usage habits, motivations, challenges, and existing support systems. This iterative process was crucial in informing the development of a wellness app tailored to users' needs and preferences, offering features and resources to support their holistic health journey and align with their wellness goals.


Affinity Mapping

After conducting the interviews, I extracted key insights and transferred them onto individual post-it notes, using distinct colors for each participant to streamline identification. I then organized these notes into clusters based on recurring themes and common topics. This visual approach helped highlight widespread user concerns as well as niche insights unique to specific individuals. The primary categories that emerged included:

  • Motivation: This section encompassed the diverse motivations driving users, including factors related to both mental and physical health.
  • Challenges + Pain Points: This category addressed the various obstacles and frustrations users encounter while using health apps.
  • Features: This segment covered considerations such as personalization options, content quality, privacy measures, and personalized guidance.
  • Data Tracking: This encompassed the metrics users prefer to track and their preferred presentation format.




Key Insights

The user interviews uncovered key insights into the challenges and expectations individuals have regarding their wellness journey:

  • Consistency is a challenge: Many individuals struggle to maintain regular habits in exercise, self-care, and diet.
  • Wearable integration matters: Users increasingly expect seamless connectivity with fitness trackers and smart devices.
  • Small steps lead to success: Gradual lifestyle changes and breaking large goals into smaller, manageable milestones improve adherence.
  • Personalization is key: Users seek a highly customizable experience tailored to their unique wellness needs.

By addressing these insights, the app can better support users in building sustainable wellness habits, fostering motivation, and providing a more seamless and personalized experience.

Define

At this stage, I synthesized user insights and refined project parameters to establish a clear and focused direction. I created user personas to represent target users based on research, ensuring design decisions aligned with real needs. Empathy maps helped visualize users' thoughts, emotions, and challenges, fostering a deeper understanding of their experiences. Using the Jobs-To-Be-Done framework, I identified core motivations and unmet needs driving product engagement. "How Might We" problem statements encouraged innovative thinking, while user stories highlighted key behaviors and goals within the app experience. Together, these tools shaped a well-defined scope and a user-centered foundation for the design process.


Personas

I leveraged insights from the affinity map to craft three distinct personas, each with different lifestyles, wellness objectives, motivations, and pain points. Creating personas helped segment different types of ideal users and facilitated a deeper understanding of user needs and motivations. 




Empathy Maps

In this next step, I created empathy maps based off each of the three personas I created. Creating this allowed me to better understand user environments, feelings, thoughts and actions of each persona. While working on the empathy maps, I had to put myself in the user’s shoes and visualize what their day-to-day life was like. Doing so forced me to think about how my app would exist within their world and how it had to bring value to their lives. 




Jobs-to-Be-Done

With a clearer understanding of my target users, I conducted a "Jobs-to-Be-Done" exercise to pinpoint the specific objectives and tasks users sought to accomplish. This process helped identify both essential and supplementary features, shedding light on what motivates users to engage with the app consistently. By focusing on the goals and outcomes users aim to achieve, this framework provided a structured approach to prioritizing development efforts, ensuring the app delivers meaningful value aligned with user needs.




“How Might We” Problem Statements

To foster innovation and guide the design process, I formulated problem statements that addressed key user challenges. These "How Might We" questions served as a foundation for idea generation, ensuring solutions were user-centered and actionable:

  • How might we make commitment to a routine less daunting?
  • How might we show the user their progress?
  • How might we help the user keep up the momentum?

By framing these challenges as opportunities, I was able to explore creative solutions that enhance user engagement and long-term wellness habits.


User Stories

User stories help define the objectives users aim to achieve when interacting with the product. As a designer, they allow me to focus on understanding user needs before crafting solutions. This process clarifies which features are essential, desirable, or optional, guiding the prioritization of functionalities for the minimum viable product (MVP). By emphasizing only the core features necessary for early users to complete key tasks, user stories ensure a streamlined and impactful initial experience.


Ideate

In the ideation phase, I explore initial concepts through brainstorming sessions, refine navigation structures with site mapping, delineate user journeys with user flows, and draw insights from competitive analysis to generate innovative solutions that cater to user needs and enhance the user experience.


Initial Ideas

  • Personalized Guidance: Provide users with personalized recommendations based on their unique wellness goals and preferences, ensuring that their journey towards better health is tailored to their individual needs.
  • Comprehensive Resources: Offer a comprehensive suite of resources to support users in every aspect of their wellness journey — from meal planning tools and workout routines to mindfulness exercises and mental health support.
  • Seamless Integration: Bring together nutrition, fitness, and mental health support in one cohesive platform, making it easier for users to stay on track and achieve their goals.
  • Community Support: Foster a supportive community where users can connect with like-minded individuals, share their experiences, and receive encouragement and motivation along their wellness journey.


Site Mapping

I created a sitemap to show the information architecture of the app and provide a visual representation of the site’s organization. Doing so helped better inform the app’s goals and purposes and eliminated any unnecessary or duplicative content. 




User Flows

With the MVP and sitemap as a reference, I created user flows of red routes, mapping out the actual sequence of steps a user would take to complete a task.





Competitive Analysis

A competitive analysis was conducted to get a better idea of what’s in the market and where my app sat compared to other health and wellness apps. This analysis helped identify potential problems and opportunities for improvement and served as inspiration as well.




Design


Sketching

Once I had a good understanding of my user and the app’s functionalities, I began sketching low-fidelity screens of my red routes on paper. Pencil on paper sketches allowed for rapid iteration and concept validation.





Wireframes

Utilizing Figma, I translated my low-fidelity sketches into wireframes, communicating the app's navigation structure, information architecture, layout, content, and functionality. This exercise served as the foundational step in crafting the user interface and interaction flow for the app. Additionally, I addressed edge cases by designing screens for system or user errors.





Wireflow

Integrating my low-fidelity wireframe designs with user flows, I developed a wireflow, illustrating the app’s navigational structures and user journey from screen to screen. Crafting the wireflow prompted considerations of the visual transitions within the interface as users interact with the app, particularly when presenting multiple states of the same screen.




Brand Identity


App Name

I selected the name 'Revital' for my app because it embodies the essence of what the platform aims to achieve: To revitalize and infuse vitality into the lives of its users. By bringing together nutrition, fitness, and mental health, 'Revital' represents a holistic approach to wellness, fostering a rejuvenated and balanced way of living.


Vision / Mission

Revital’s vision is to empower users to embrace a comprehensive approach to wellness, where nutrition, fitness, and mental health are equally valued. The app offers a range of features designed to support users in setting and achieving their wellness goals, from meal planning and workout routines to journaling. By bringing together these elements in one convenient platform, Revital seeks to simplify the journey to a healthier lifestyle and promote a new way of living where holistic wellness is the norm. 


Attributes

Calming, friendly, trustworthy, supportive, non-judgemental, inclusive


Style Guide

 

Logo

For the logo, I chose a lotus as it symbolizes growth, balance, and mindfulness—core themes of the app. The lotus represents personal transformation and well-being, aligning with the app’s mission to support users on their health journey.




Color Palette

The color palette was chosen to evoke a sense of calm, clarity, and trust. The primary shades of periwinkle blue and light blue create a soothing and approachable feel, reinforcing the app’s focus on mindfulness and well-being. Neutral tones provide balance and sophistication, ensuring a clean and modern aesthetic.




Typography

SF Pro was chosen for its clean, modern, and highly legible design, making it an excellent choice for a seamless user experience. Its refined typography ensures readability while maintaining a polished and professional aesthetic.



High-Fidelity Designs




Test


Usability Tests

Two rounds of usability testing were carried out, with each round consisting of five distinct tasks. These tasks were crafted to evaluate the user-friendliness of essential functions, including adding daily tasks, establishing specific goals, favoriting videos, and discovering recipes.


Findings

Input gathered from the tests led to several design iterations. Each round of testing uncovered crucial design insights.

  • Users found the initial pie chart on the home page, which displayed the breakdown of goals in progress, confusing. The usage of a progress ring in this context was unfamiliar to them.
  • Most users were confused by the difference between tasks and goals. Starting from a blank state as a new user, the homepage did not offer enough context.
  • When creating a goal, users were curious about the various visual charts they could select from. This demonstrated a need for clear visuals besides the text. 

Iterations


Home Screen

The home page underwent substantial revisions aimed at enhancing clarity and visual appeal. Previously, users found the chart displaying the breakdown of goals in progress confusing, leading to its removal in the current design. Additionally, the updated interface addresses confusion stemming from duplicate ‘plus’ buttons, incorporates subtext for clarification, and features a more prominent ‘+’ button for improved navigation and usability.






Create A Goal

To address the ambiguity surrounding goal types, examples were included as subtext beneath each type to enhance clarity. These examples now offer users explanations of how each goal type can be utilized, improving comprehension for users.




Conclusion + Takeaways 

 

Challenges

As a novice UX/UI designer, tackling this complex project over six months came with its challenges. At times, I struggled with motivation and felt overwhelmed by the workload, but taking periodic breaks helped me regain focus and prioritize tasks. Using Figma for the first time was also a hurdle, and I relied on tutorial videos to navigate its tools efficiently, ultimately streamlining the design process and improving my workflow.


Lessons Learned

User testing revealed that what seemed intuitive to me was not always clear to users, reinforcing the importance of validating assumptions. Thorough user research played a crucial role in shaping the project, providing a strong foundation for innovation. I also realized that I was initially too ambitious with features—constraints are essential to maintaining focus. Stepping away from the project at times helped me gain fresh perspectives and renew creativity. Lastly, iterative design proved invaluable, as each round of feedback refined and improved the user experience.

Next Steps

Moving forward, I plan to continue testing and iterating to develop a functional MVP for real-world usability assessments. I will explore compatibility with external applications and devices while monitoring usability trends, such as user goal completion rates, to measure design effectiveness. Additionally, ensuring the protection of personal information and encrypting customer data will remain a priority.
ELISE HU