Nutrition Counseling
Website
This design project is about setting up a website for an eCommerce business that offers nutrition and health counseling with a holistic approach. The business owner wants to present a platform to provide knowledge about healthy food, recipes and personalized meal plans.
This project was a team work and we were a team of three aspiring UX'UI Designers with a different focus within the project. My focus was more on the UX part with conducting interviews and the analysis of insights.
The project timeline was about 2 months. Since this was a part time project, we worked on it 11- 15 hours per week.
UX Part
Research
Define & Ideate
Wireframes (Low-Fidelity and Mid-Fidelity)
User Testing
UI Part
Visual Competitive Analysis
Definition of brand attributes
Typography, colors
High-Fidelity prototype with responsive design
Design Thinking approach
Starting with the Empathize Phase of the Design Thinking process , we conducted Interviews with the stakeholder and afterwards with interviewees from the target group. Afterwards, we put the pieces together in the Define phase and let our creativity flow when entering the Ideate phase. After setting up the Low-Fidelity and Mid-Fidelity Prototype, we conducted user tests. It helped us to get valuable feedback and we adjusted the prototype accordingly.
Stakeholder interview
Our Business Owner (BO) wants to make it easier for mothers to cook and eat healthy for themselves and their family. The BO wants to teach basics about nutrition and wants to enable to cook with a variety that fits to different meal preferences and food intolerances. Changing small and tiny bits rather than a strict diet plan.
After the stakeholder interview, we had a clear understanding about the target group:
The target group is about busy mothers who have to deliver healthy, tasty food on a regular basis and are stressed by their lives.
User interviews
More qualitative research is needed, in order to better understand users’ experiences, motivations and problems. This is where user interviews come into play. We brainstormed about the interview questions at first and conducted the interviews with mothers and young women. The interviewees talked very detailed about their pain points and gave very valuable insights in their personal situation and why they are stressed about preparing healthy meals.
Competitive Analysis
We have chosen six competitive brands and informed us with the help of internet research about their programs, coaching processes, website content and philosophy. We found out, that only one of them provides a course and only one coach provides a standalone coaching. Personalized counseling was offered only once. Only on three websites was a transparent information available about the price and payment options. You can see our focus concisely in the figure below — our Marketing Positioning Map.
Affinity Diagram
An affinity diagram is a useful tool to group ideas and summarize information. In order to set up the profile for our Persona, we went back to the results of our user interviews, filtered out the main statements and organized them by using an affinity diagram. Finally all ideas that fit together are grouped and named. We categorized in:
Nutritional Goals, Information Sources about nutrition, Diet experiences, Expectations from a coach, Cooking style and other topics. You can see a small glimpse in the figure below.
User Persona
User Personas are fictional characters that are created based upon research. A user persona is very helpful in order to establish accurate user profiles of who will interact with the final product. With that step, the Design Thinking process enters the Define Phase. As you can see in the figure below, our User Persona is a mother of a 3 years old child and cooks on a daily basis.
Her wish: ‘I wonder how good it would feel, if I had someone to help me with what my family and I need, to meet our individual nutritional needs.’
User Journey
After finalizing the User Persona, the next step was to create the user journey from a design project perspective. The goal of a customer journey map is to gain an understanding of how the customer experience develops over time. We sketched the user journey after a brainstorming session and refined the steps into our team’s version of an appropriate customer journey.
As you can see in the figure below our Customer Journey Map has 3 zones.
On the left-hand-side is our Persona Shweta and a rough scenario description
In the middle there are possible thoughts, actions and feelings
At the bottom, our ideas with possible solutions
We have decided to show a typical day for Shweta and challenges she has when preparing and serving food for her family. The journey starts with trying to prepare a healthy breakfast — but Shweta is not sure what to prepare. Preparing Lunch — more frustrating, since cooking every day means to need a lot of creativity. Finally when preparing dinner, she feels better since she got support from a coach. At the bottom, you can see opportunities. Those are our ideas with possible solutions that can help Shweta to improve her experiences throughout the day.
After another brainstorming we as a team defined the core problem in the form of a Problem statement:
“Busy mothers need to maximize the nutritional value for their family and themselves as don’t have time to demystify what food choices are best in a simple, repeatable and personalized way.”
With all of our insights it is time to challenge assumptions, think outside the box to explore and to ideate. This Ideation Phase is about generating ideas, how might we as aspiring UX Designers might solve problems for our target group. Ideation is a deep understanding of your consumer and a focused, well-articulated challenge to solve, it’s time to start developing potential solutions. The How Might We technique is a powerful way to turn insights into actionable design solutions. “How Might We” (HMW) statements are mighty questions that allow Designers to re-frame insights into opportunity areas and innovate on problems, found during user research. At this point we broke down the larger problem into smaller, actionable pieces and consolidated our ideas into these 3 HMW questions:
1. How might we help her figure what to cook?
2. How might we help her learn what foods provide the best nutritional value?
3. How might we help her find the best help navigating nutrition and food choices for her and her family?
Afterwards, we brainstormed ideas about how to solve the 3 HMW Questions and used the MoSCoW Method to give our ideas a prioritization.
MoSCoW Method and MVP statement
The MoSCoW analysis is a popular prioritization technique for managing requirements. The term MoSCoW itself is an acronym derived from the first letter of each of four prioritization categories (Must have, Should have, Could have, and Won’t have).
With that being said, we sorted our notes into the MoSCoW Method quadrant (see figure below) and put a focus on the must haves in order to set up our MVP.
Now we were able to define our MVP statement:
‘The goal of Ilka’s website, at a bare minimum, is to stand out for mothers and their families by providing reviews of their food journal with personalized feedback and educational tips. By doing so, she can help moms on a weekly basis with their current problems and help promote change, while building content for her website and brand to attract new moms.’
Sitemap
Since our target is to create a website based on our research and insight, it was time to take action regarding setting up the website structure by creating a Sitemap that represents our MVP. A Sitemap is essentially a well structured design and plan of the website’s hierarchy. It has far reaching effects on everything, starting from search engine optimization to making sure the visitors have a smooth and great user experience.
In the figure below you can see the whole Sitemap structure.
User Flow with happy path
The Happy Path as an ideal user journey you can see in the figure below:
As a first action, the user scrolls down to find more information about the services and price information. Already on this page, the user can see the mainly provided service: the meal planner.
The user is now informed about the meal plans, knows their prices and wants to get inspired by exploring the recipes page. Catched by the well arranged recipe proposals and appealing images, the user gets curious about the meal plan review. The questionnaire is about getting information about the typical behavior regarding meal planning and preparing as well as intolerances and current pain points. After submitting the questionnaire, there are two options. Every person who completes the survey and does not want to have a call, receives a free and basic meal plan review. The second option is to make an appointment with the coach for a call to talk individually about the survey answers. If the user decides to work together with the coach, a payment link is sent out to the client. If the payment took place, the client submits a short overview of the past week’s meals. Based on the survey results the client is offered a comprehensive plan for the upcoming week. Ideally, the client decides after one week to continue working with the coach.
Next to the happy path, we highlighted in our User Flow as well the options to start exploring the website by viewing the:
Event page to inform about upcoming and past events
About the page that tells more about the background and aims of the coach
Start Now page as direct entry point to the meal plan program
Wireframes
After setting up the Sitemap and the Happy Path, it was time to convert our ideas into rough paper sketches. Everyone of us sketched a flow of the Happy Path. Subsequent to that, we put together our preferred screens and set them up into a Low-Fidelity user flow as shown in figure below.
After our rough sketches, we set up a prototype with limited functionality but clickable parts that present the interactions and navigation possibilities of the website: the Mid-Fidelity Prototype (see figure below). This prototype usually provides some of the critical functionality and content used in the product but does not contain all of them. This means that graphics and photos are not there. It is more of a series of wireframes linked together to provide certain levels of interactivity.
User Test
After setting up the Mid-Fidelity Prototype, we started user testing. User testing helps to get valuable feedback from users at every single point in the user journey. We needed to observe what the user is trying to accomplish or what additional information they will need. In the figure on the right you can see some quotes from our testers as a response to our Mid-fidelity prototype.
UI Part
In order to create the look and style of the final product, the User interface (UI) design process needs to be followed.
Our target is to create an outstanding website style and look that gives our product a unique positioning compared to other competitors. That meant for us, to do research about the competitors’ websites. Visual competitive analysis involved identifying our direct and indirect competitors to reveal their strengths and weaknesses in relation to our own planned website and business.
Brand Attributes and Mood board
A Mood board helped us to get an idea of what feelings we want to evoke in our target audience (see figure below). It also served as an inspiration and gave direction for defining the brand attributes, the right typography and color style for the website. Actually, a mood board was for us like the ingredients of a recipe. You want your mood board to offer inspiration and direction. In the figure below you can see our Mood board and the feedback from our testers.
That feedback helped us to define the brand attributes, aka the core values. Brand attributes are adjectives that represent the essence of the brand and are a set of human characteristics that identify the physical, character, and personality traits of a brand. Our final brand attributes are: Empowered, Healthy, Caring, Positive.
Typography and Colors
With the insights from our Mood board and feedback of our testers we explored colors and fonts and presented them to our testers as well. We set up a final color palette and found the favored font after letting our testers do their work.
You can see the result in the figure below.
High-Fidelity Prototype
Now it was time to put all the pieces together and present the final High-Fidelity prototype. These prototypes include visual elements: pictures, icons, colors, and typography. They also have interactions and navigation and are closer to the final product. We set up our High-Fidelity Prototype along our Happy Path and you can see the result in the video below: