Overview

LemonDrop Nutrition is a health and wellness company that wants to empower people through education, habit building, mindfulness, and nutrition to lead healthier lives. They want to inspire and motivate people to reach their goals. LemonDrop Nutrition offers nutrition coaching, products, and resources.

Problem

The challenge was to redesign LemonDrop Nutrition’s current website so that it is easier to navigate and become a educational resource on health and wellness. They wanted to build their social media presence on YouTube and Instagram. Their main goal was to have users subscribe to their newsletter and provide resources to help people be healthier.

Solution

I designed a website with improved organization for users to come and learn more about LemonDrop Nutrition has to offer. Users have a clearer sense of what they can do and learn on the website. Additionally, I made clear CTA’s to subscribe to my client’s email list, and encouraged more social media engagement.

View Prototype

Project Scope

Re-design a responsive website

Tools Used

Figma, Otter, Miro

Role

UX/UI Designer

Duration

Dec. 2020 – Jan. 2021

4 weeks

80+ hours

PROCESS

1 Empathize

  • Research
  • User Interviews
  • Empathy Map
  • User Persona

2 Define & Ideate

  • Customer Journey Map
  • Business & User Goals
  • Site Map

3 Design

  • Mid-Fidelity Wireframes
  • Mood Board
  • UI Kit
  • High Fidelity Wireframes

4 Prototype & Test

  • Prototyping
  • Usability Testing
  • Iterations

Empathize

Define & Ideate

Design

Prototype & Test

market Research

Starting with Research

To gain a better understanding for this project, I started off with market research and competitor analysis. I wanted to see what other coaches and wellness professionals were doing online. Additionally, I felt it was important to see how the Covid-19 pandemic has changed people’s lives. I discovered that the pandemic has forced everyone to adjust their lives and has increased stress for many individuals. People are worried about their health and family member’s health. They were worried about their mental health and physical health especially during the winter months in 2020. The pandemic also forced the health and wellness industry to shift as people were staying home more. Wellness actually became more accessible to people since many people could access free or low cost services online.

I compared competitors that my client gave as inspiration, similar fitness and wellness businesses, and social media influencers since my client was trying to build a social media presence. In the beginning of our calls, she had initially wanted to target young women, but after discussing her goals, she decided that she wants to reach all people because she wanted to build an educational resource hub so that anyone can learn how to live healthier lives. Additionally, she said she currently wasn’t looking for clients, so we chose to focus on redesigning her home page, about page, and creating a resource page.

User interviews

What do users want and need? What do users think of the current site?

I conducted 3 user interviews using Zoom and Otter.ai. I wanted to learn about how the pandemic has changed their situation, their health and wellness, current nutrition habits, work out routine, stress, and what they would like from a nutrition coach or influencer. I also asked what would motivate them to sign up for an email newsletter, what type of content or information are they interested in, and also what makes you trust a person as a professional in an industry. I wanted to find out how I could design a website to build trust so that clients can come to LemonDrop Nutrition’s website and know that they can trust the information given. Lastly, I had them click through the current site and asked for current opinions on it.

User Needs and Wants

  • Coach preferences: non-judgmental, understanding, realistic, not too intense, relatable, share value, mindful of lifestyle/personality, focus on diet, accountability, specific coaching
  • Online preferences: credibility, coach’s background, reviews, testimonials, trial PDF, certifications, results, insights and videos

Industry Frustrations

  • Feels that society perpetuates the idea that a woman’s body needs to look a certain way, and it isn’t healthy
  • Wants to see realistic people that look more like her
  • More diversity and relatable people who are different sizes
  • Wants to see strong and healthy people

Current LemonDrop Nutrition Website

  • Likes testimonials, but needs more
    Simple
  • Likes the bright colors, but thinks it’s a start up
  • Can tell they’re promoting nutrition and wellness
  • Noticed that the smoothie doesn’t have the top navigation to click to a different page
  • Looks like they’re targeting people who want to lose weight
  • Like the founder’s story
  • There is no newsletter or email sign up
  • All users stated that they’d be willing to sign up for a newsletter in exchange for a free informational PDF

How can I design a website for users to feel accepted, understood, educated without the societal and toxic pressures to look a certain way?

During my meetings with my client, she mentioned the same issues with the health and fitness industry. She wanted to promote overall health and taking care of your body. She wanted to stray away from the toxic pressures of diet culture and always trying to be thinner, and encourage people to build healthier habits because it makes them feel better and stronger.

Empathy Map

What is our user seeing, thinking, saying, and feeling?

In order to empathize even more, I made an empathy map for Sophia to think about how her full experience might be. I utilized my research and meetings with my client to inform these thoughts and feelings.

User Persona

Who are our users?

I created 2 user personas: one who is a complete beginner to health & wellness, and one who was a previous athlete but has been working from home and mostly stationary at her desk all day. I keep both user personas in mind as I begin to design for them.

Define & Ideate

How can I improve the experience, and what are our goals?

Customer journey Map

How will this re-design help users in their journeys?

I created a journey map because I wanted to show how Sophia and Whitney’s experiences will change after this redesign. LemonDrop Nutrition’s current website was a little bit confusing to navigate so with the new design, our users will be able to discover LemonDrop Nutrition, build trust while browsing, and decide to follow or stay connected. From my primary research, I learned that users wanted trustworthy resources that can help them learn and live healthier. While browsing the website, users can learn about LemonDrop Nutrition, build trust through seeing testimonials and featured podcasts in order to start following them on social media and using their resources.

Business & user goals

How can we reach business and user goals?

After meeting with my client, we discussed what her goals are for her business, her current users and target users, and what she wants on her website. Her goal was to build a social media following by providing free resources to her users. She planned to create more nutrition, lifestyle, and fitness resources in the form of PDF’s, videos, text, pictures, and ebooks. Her goal was to start selling her ebooks and products in the future. She currently had enough clients and wanted to reach a larger audience by building a following on her Instagram, Youtube, and website.

Information architecture: Site map

What is the best way to organize the site for new and returning users?

I created multiple site maps until reaching to the final one below. We decided that we would focus on the home page, about page, and resources page due to the project timeline.

Within the Home page, users can get to know my client and her business, their approach, and sign up for their email newsletter. We would also feature their social media so that users can easily go to their Instagram profile. In the About page, we would feature their story, testimonials, partnerships, and include a way to contact them. Within the Resources page, we decided to separate the categories into Nutrition, Lifestyle, and Family. My client gave me a list of article titles of the resources she has created and plans to create.

Although I wasn’t able to design all the pages of their website, this site map will help them in the future especially with their goals of sharing recipes and selling products eventually.

Design

How can I help Sophia and Whitney in their health & wellness journeys?

Mid-Fidelity Wireframes

Organizing and Prioritizing Information

After sketching some wireframes, I created these wireframes to show the order of content and how I plan to organize the resources. I wanted to build trust on the home page by starting off what a blurb about LemonDrop Nutrition, and then lead to some quick resources that users can easily click to since that was the main focus. In the Resources page, we included a simple filter to click through so users can easily find different resources.

Moodboard

What do we want our users to feel as they browse our site?

After speaking with my client, she expressed the importance of users feeling inspired, motivated, and welcomed.

UI Kit

Colors, Logos, Typography

I started out designing a style tile and showed my client the typefaces, colors, and some sample photos for her to get a sense of the direction we were going. After getting her feedback, we made some changes: changed the header to a san-serif font, and the body text to a serif font.

My client also requested a logo redesign. She wanted something simple and friendly, so I sketched some ideas and created a few options.

Old Logo

New Logo

We wanted the overall UI to be friendly, inspiring, and positive. My client was very happy with the logo, typography, and colors.

High Fidelity Wireframes

Designing with Details

Prototype & Test

How can I help Katherine feel accomplished and educated while using the app?

usability testing

Usability Testing Findings

I recruited 4 participants to test out my prototype. My goals were to identify the usability of the website, discover how well users can find a specific resource, discover if the flow, information architecture, and copy are easy to understand, and discover if the website builds trust with users.

The four main tasks were:

  1. Find the Lifestyle Resources page.
  2. Find the “How to develop a healthy relationship with food” article (check if they used the filter).
  3. Sign up for the free smoothie e-book or newsletter.
  4. Find a way to LemonDrop Nutrition’s Instagram.

I also asked the participants what their first impressions were, if they had any feedback, how easy was it from a scale of 1-10 to complete the tasks, how likely would they subscribe to the newsletter, and likes or frustrations.

View Prototype

Completing each task was pretty straightforward.

  • All of the testers were able to complete 100% of the tasks.
  • The only error I had was when one tester clicked the subscribe button on the navigation bar which I did not make a pop up for yet.
  • To find the specific resource, none of the testers used the filter. I followed up asking if they saw it and would use it, and they said they would probably use it depending on what they were looking for. They all scrolled down to find it since there weren’t that many resources.
  • Next time, I would create more resources instead of limiting it to the titles my client gave me because I know her plan was to create and build more resources over time.

Overall the participants liked the experience, and gave positive feedback especially on the Resource page. They described the design as inviting, lively, happy, optimistic, light, relaxing, and trustworthy.

From my transcriptions using Otter, I made an affinity map to discover additional patterns.

Completed next steps from usability tests:

  • Added LemonDrop Nutrition’s Instagram handle so users can easily search on their phones
  • Added a downloadable resource
  • Make the resource more interactive by adding a message for users to tag LemonDrop Nutrition if they use the resource to build more awareness about LemonDrop

Reflection

Next Steps and What I Learned

It was a great experience to work with a client on this project. I learned that sometimes, things won’t go exactly as planned, and that is okay. I learned how to adjust the plan in order to complete each task, and make sure my client understood the reasoning behind each design decision while also including her in the decision making process. My client was extremely happy with the final prototype, and she expressed her appreciation for my communication with her and thoughtfulness behind each decision. Comparing with her previous website design, I think we were able to create and design a cohesive, positive, and organized website where users can gain more knowledge on health, wellness, and nutrition. If possible in the future, I look forward to working more with her to design the other pages.

TrueCoach
case study

ecotrack case study