STUDENT PROJECT
ANA Wellness
An Ayurvedic meal plan website that helps users create healthy, sustainable eating habits based on their doshas. ANA pairs personalized recipes with mindfulness practices in order to support users in achieving holistic wellbeing.
YEAR
2022
ROLE
End-to-end UX/UI designer
DURATION
200 hours
TOOLS
Figma, Miro, Paste, Dovetail, Otter.ai, Optimal Workshop, Whimsical
Introduction
According to the CDC, “six in ten adults in the US have a chronic disease and four in ten adults have two or more.” Targeting users who struggle with poor health and those who want to maintain their good health in order to avoid developing chronic conditions, this project focused on preventative healthcare and positive lifestyle habits. I chose to present this in the context of Ayurveda, a natural form of healthcare practiced in India for thousands of years, because it addresses health in a holistic manner and because it has gained popularity in the US along with its sister science, yoga. By providing nutrition and mindfulness resources, as well as a tracking system to aid in the development of long-term habits, I aimed to assist users in attaining overall wellbeing. When people feel their best both physically and mentally, they can move past a survival mentality and truly thrive!
Process Overview
RESEARCH
Secondary research
Competitive analysis
User interviews
DEFINE
Research analysis
Concept development
Site structure
DESIGN
Low- to mid-fi wireframes
Branding
High-fidelity wireframes
Interactive prototype
ITERATE
Usability testing
Iteration on wireframes
Iteration on prototype
STEP 1: RESEARCH
Learned about the needs of people combating chronic health conditions; validated the hypothesis that Ayurveda can be an effective form of medicine to achieve this goal.
DELIVERABLES
Research plan
Secondary research
Competitive analysis
Interview guide
User interviews
Research findings presentation
In order to define the problem and learn about the audience, I conducted three types of research. Secondary research gave me a better understanding of the physical and mental issues the general population struggles with, as well how Ayurveda could be leveraged in terms of preventative healthcare. Competitive analysis allowed me to see what similar products are currently available and what features they offer. User interviews provided insight into the needs, pain points, habits, and motivations of real users.
User Interviews
PROCESS
Recruited 8 participants via social circle. I lacked the time to conduct more than eight interviews, and I assumed this would be a sufficient number to uncover patterns in the data.
The group included 4 women and 4 men. 4 participants currently practice Ayurveda. 3 participants currently suffer from a chronic condition.
Conducted interviews via phone and in person.
KEY QUESTIONS
I created open-ended questions which I explored in depth with each participant. These were tailored depending on if the participant was currently healthy or had a chronic condition, as well as if they practiced Ayurveda or not. A few of the overarching questions were:
Are you doing anything to maintain or improve your current state of health? If so, what?
What does being in good health look like for you, personally?
What helps you make progress toward being in good health?
How do you implement Ayurveda in your own daily life?
What tools or resources do you use in your Ayurveda practice?
INSIGHTS
Users aim to sustain a regular, healthy routine every day, especially in regards to the times of day/night that they eat and sleep, in order to feel better physically and mentally. (This is a huge part of Ayurvedic medicine, but non-Ayurvedic users also expressed this same desire.)
Users need external help to create healthy habits and get into good physical/mental shape. However, once users reach a level they feel satisfied with, they no longer need assistance because they feel confident in continuing their habitual routines on their own.
Tracking progress is a huge motivational factor. If users see tangible progress (small, regular successes) they are more likely to continue trying to improve.
People who don’t know much about Ayurveda but are already invested in maintaining good health are open to trying it as a supplement to what they already know works for them.
STEP 2: DEFINE
Developed the concept and structure for an Ayurvedic meal plan website, based on research data and the target audience.
Research Analysis
DELIVERABLES
Affinity map
Point of View Statements
How Might We’s
User personas
Using the audio recordings and transcripts I had gathered in Dovetail during interviews, I transferred individual data points onto sticky notes in Miro. I then organized these based on topic and pinpointed insights that could be gained based on each grouping. Using these insights, I created several point of view statements, which helped define who the product should be designed for, what their needs are, and what was unique about the problem and users. In order to determine opportunities and generate ideas to solve the problem, I wrote out several “How Might We”s based on the POV statements. I also developed two user personas, which I was able to refer back to throughout the rest of the project. These helped me develop empathy for the users and to keep their needs and goals in the forefront of my mind. All of these steps were iterative; I reorganized my affinity map groupings, reworked my POVs, and tweaked my user personas multiple times. Finally, I gathered all of these assets and insights into a research findings presentation, which served as an overview of the data and analysis, as well as a starting point for brainstorming concepts.
I’d like to explore ways to help people interested in using Ayurveda as a preventative healthcare method to create long-term habits around schedule consistency, because both Ayurvedic practitioners and those not knowledgeable about Ayurveda have seen drastic positive impacts when adhering to a consistent schedule (which is also a fundamental part of an Ayurvedic lifestyle).
How might we help people create long-term habits around schedule consistency?
How might we make consistent preventative healthcare schedules easier to maintain?
How might we help people new to Ayurveda understand the Ayurvedic principles revolving around schedule consistency?
Concept Development
DELIVERABLES
Two proposed solutions
Storyboards
Feature Set
Feature Prioritization Graph
In order to begin brainstorming potential solutions to the problem, I used the techniques of “creative constraints” and “analogous inspiration.” I chose the two possibilities that I believed could be most successful and created storyboards to help visualize each concept. After presenting these ideas during a group critique, I chose a direction based on peer feedback. From there I created a feature set, prioritizing them on a scale of 1 to 4 based on effort vs. impact.
Site Structure
DELIVERABLES
Site map
User flows
Task flows
Moving on to develop the framework and organization of the site, I sketched out a sitemap. I then used Optimal Workshop to conduct a closed card sorting exercise with four participants, in order to understand users’ mental models. This resulted in tweaking the sitemap before creating a higher-fidelity version. (Ultimately, the site structure would shift multiple times during the course of the project, due to testing and feedback!) Using this version of the sitemap, I created user flows and task flows for two potential scenarios. These helped me define and organize what steps users would need to take while utilizing the site. It also helped me make a concrete list of what screens were needed to design, and what was essential to include on each screen.
STEP 3: DESIGN
Designed the wireframes needed for users to complete daily meal plan activities; developed branding that conveys values and appeals to the target audience.
Low- to Mid-Fidelity Wireframes
DELIVERABLES
Low-fidelity mobile wireframes
Mid-fidelity mobile wireframes
Mid-fidelity desktop wireframes
Seeing as the main purpose of the site would be to support users in their daily meal routines, I chose to move forward with wireframing the task flow of a user logging into their account, accessing their dashboard, and completing a mindfulness practice and recipe. Using a pencil and paper, I quickly explored a variety of layouts for each mobile screen needed for this task. I chose the layout I felt worked best for each screen, and created mid-fidelity designs in Figma, which better helped me understand which aspects of my sketches worked in the digital realm. I also adjusted three of the screens for desktop. It was interesting to think about how the site structure and layout would need to change, and in turn it made me consider making changes to the mobile wireframes in order to create a more cohesive experience across devices.
Branding
DELIVERABLES
Brand values & mood board
Color palette & typeface selection
Brand logo
UI component library
Stepping away from wireframes momentarily, I worked on the branding for my site. Keeping in mind my user personas and their needs and goals, I developed a set of brand values that could lead the visual design of the project, making it appealing to my target audience. An accompanying moodboard served as inspiration for the general vibe I wanted the site to evoke. I selected a color palette that focuses on greens and oranges and is inspired by culinary ingredients used in Ayurveda. Green is commonly associated with health and growth, so I chose it for the brand color; using orange for the action color is eye-catching and adds a touch of vitality. For the typeface selection, I tried a variety of serif and sans serif fonts, and finally settled on a friendly yet somewhat serious serif font for headers paired with a clean sans serif for paragraphs and buttons. Developing the logo began with plenty of quick thumbnail sketches, followed by refinement of two of the best options. I presented vectorized versions of the two logos during a group critique, and eventually moved forward with one based on their feedback. Using the color palette and typeface selection, I began the process of compiling a UI component library, including some custom icons; this library continued to evolve during the rest of the project.
High-Fidelity Wireframes
DELIVERABLES
High-fidelity mobile wireframes
Populating my mid-fidelity wireframes with the branded UI components was a very satisfying moment! I created high-fidelity mobile wireframes for all the screens in my task flow, which I presented for peer and mentor feedback. After making several revisions, I linked the screens together in an interactive prototype, which I could then use for testing.
STEP 4: ITERATE
Highlighted current content and refined navigation between activities, based on user feedback during usability testing.
DELIVERABLES
Feedback grid
Frequency to severity grid
Iteration on high-fidelity wireframes
Final interactive prototype
And then it was time to see how my design functioned in the wild! I recruited five participants to take part in a moderated usability study. I wanted to understand what parts of my design were intuitive for users, and pinpoint what needed iteration. I also wanted to ensure that the branding was conveying the message that I intended it to. The usability test was performed on the high-fidelity interactive prototype I had created prior to this step, and I walked through the screens with each participant, asking them to talk out loud about what they were experiencing. Using the insights gathered during testing, I created a feedback grid in Miro, which organized data points into categories based on what was working, what needed to change, questions users had, and ideas the suggested. I then prioritized issues that needed to be addressed based on frequency and severity. At that point, there were six issues that were a priority to address, but while I was iterating on the wireframes, I realized that one of the issues could be solved by providing a brief pop-up tutorial when users first access the site. Eventually, there were two major revisions to the design based on the feedback I’d gained from the participants. Firstly, I explored ways to make it more obvious to the user what the current content was (on both the weekly and daily view of the dashboard). Secondly, I refined the navigation between the mindfulness practice and recipe pages, so that users could more easily go back and forth and to create more concise button wording.
Next Steps
Design wireframes for the second task flow I developed, wherein a new account holder takes a quiz to determine their dosha. This is an important task flow because the customized meal plans are based on a user’s dosha, and if a user is unfamiliar with Ayurveda they likely wouldn’t know that information yet.
Perform another round of usability testing, to ensure that the last round of iterations successfully addressed user pain points and to gain feedback needed for iterations on the new task flow.
Conclusion
As this was my first project for the Designlab UX Academy, I was learning the design process while working on this site. The entire project was eye-opening in terms of understanding user needs and the detailed steps of UX, but the overarching lesson that has stuck with me is that designers must learn how to balance the need for iteration with knowing when to move forward. It’s easy to get caught up in trying to make a perfect, finished product and to forget that a site is forever a work in progress. Even if a designer and stakeholders feel satisfied with what has been produced, the needs of users change over time and design choices will eventually need to be reevaluated.