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.
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.
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.
Re-design a responsive website
Figma, Otter, Miro
Dec. 2020 – Jan. 2021
- User Interviews
- Empathy Map
- User Persona
2 Define & Ideate
- Customer Journey Map
- Business & User Goals
- Site Map
- Mid-Fidelity Wireframes
- Mood Board
- UI Kit
- High Fidelity Wireframes
4 Prototype & Test
- Usability Testing
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.
What do users want and need? What do users think of the current site?
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
- 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
- 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?
Who are our users?
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?
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.
How can I help Sophia and Whitney in their health & wellness journeys?
Organizing and Prioritizing Information
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.
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.
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 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:
- Find the Lifestyle Resources page.
- Find the “How to develop a healthy relationship with food” article (check if they used the filter).
- Sign up for the free smoothie e-book or newsletter.
- 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.
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
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.