N WELLNESS:

A full website and branding redesign

Provided a full refresh of the sites information architecture, branding, and UI assets. Produced product packaging, and revised content messaging guidelines for improved branding cohesion.

My role: UX/UI  Designer , site author (Shopify), packaging designer. Tools used: Figma, Adobe Photoshop.
Project Timeline: 4 weeks.

VIEW FULL PROTOTYPE ↗

Background

Client was a health and wellness e-commerce startup that had been active for 1 year. They sold two products: an energy and immunity shot and an ashwagandha-based relaxation shot.

Problem

  • They noticed they had lots of visitors, but low sales conversion rates. They needed help understanding why.
  • Nurish also needed to undergo rebranding, and needed to change to N Wellness due to legal reasons.
“Why aren’t we converting and how can we help customers understand our product more?”
-N Wellness Team

PHASE 1: RESEARCH AND DISCOVERY

User survey analysis

50 participants completed a survey to help us understand consumer health habits. We asked sales associates from the company’s other brands, to distribute survey in exchange for free samples. We also posted survey in UX/UI bootcamp chats and Linkedin groups.

60%
Female
40%
Between 25-30 years old

Pain points and observations

  • Men tend to have more issues with: stress, trouble sleeping, and low energy.
  • Men tend to use CBD and listen to music to relax.
  • Women tend to have more issues with: anxiety, low energy, and stress.
  • Women: tend to drink tea and meditate to relax.
  • Vitamin D, C an B are top vitamins for all genders.
  • Most people take nothing at all.
  • Most people rely on coffee or caffeine in general to get energy.
  • 2nd most popular method is through exercise and healthy habits.

Interview and usability testing analysis

10 participants total: Conducted usability test of current state of the website.

Goal: Understand consumer health habits and discover weaknesses and strengths with current website design.
Recruitment method: Found participants on Linkedin and exchanged UX bootcamp experience info and advice for a 20-30 minute usability test/research interview.

WEBSITE CONTENT IMPRESSIONS
“It seems like this is for...fit...athletic people. A little Regina George. OH so, it's an energy drink. Got it.”
  • Based on the imagery , most users assumed that this product is just for fit , athletic people and might not be targeted for them.
  • Some users felt that the imagery had a super serious tone, that was almost unexpected or off-putting
.
  • Users didn't understand the benefit in comparison to their current method of relaxation or gaining energy .
  • Most users expressed their interest to be educated in how the products would improve their health/life in order to be convinced.
  • Most people were hesitant to trust the website and the product due to the lack of “proof” that the product actually works. Most were looking for blogs or case studies for that education.
“For the testimonials….these kind of look like stock photos. Are these real people? If they are real, I think I’d rather see like a blog they wrote personally or something.”
User journey issues and technical difficulties:

Personas

Created personas based on the insights learned from the surveys and interviews. Serves as an exploration of the possible issues and goals of the two main groups identified in the research.

Image by Freepik

Marcus G.

30 | M | Project manager
Bio: Marcus works a 9-5, owns 2 dogs, and likes to go to the gym twice a week.
Motivations: He wants to balance his busy lifestyle. He’d like to go to the gym to be healthier, but he’d like to discover quick new ways to get to his health goals faster.
Goals: He wants to work out at the gym longer, but be less fatigued when he comes home. Wants to feel like he has time for everything.
Frustrations: Starbucks is expensive (and too sugary) and most health drinks he’s tried are kind of nasty. Finding the right method is hard because everything feels like a gimmick.

Helen K.

25 | F | Waitress/ grad student
Bio: Helen is a grad student studying biology. Her busy schedule and mental health issues prevent her from living her best life. On her good days, she describes herself as a free spirited yogi, who loves nature walks and hikes. She prides herself in being vegan, and living sustainably.
Motivations: She would like the energy and motivation to do more things and experience her surroundings.
Goals: Wants to improve her lack of energy and tone down her anxiety in a more natural way that doesn't have her relying on synthetic medications.
Frustrations: Right now she’s using weed to self-medicate. She’s struggling with affording it as a broke student. It also makes her anxiety worse if she smokes too much.

Image by Freepik

Customer Journey

If Helen and Mark were to come eventually come to the website and complete a purchase, this diagram represents the different touchpoints we must consider when they start their customer journey.

Heat map

  • Most userson mobile do not reach the social media links.
  • Most users do not make it past the halfway point on both web and mobile.
  • Web users only 1 click on social media link for the past 3 weeks.

Competitive Analysis

Researched competitors to compare how they tackle their own user’s problems and discovered opportunities to surpass them.

GOLI
AMBROISA
PRIMA
RITUAL
FLO
STRENGTHS
Product: organic, certified non-GMO, certified gluten-free.

Web: expandable info on how it solves each problem. Very problem/solution oriented.
Product: clinically researched ingredients, interesting flavors.

Web: packaging/ product photos well branded. Reminiscent of old maps and pirates.
Product: doctor formulated,, vegan and cruelty free, 100% clean ingredients, 3rd-party tested, carbon neutral.

Web: illustrated infographics, product icons.
Product: vegan, 3rd-party tested, non-GMO, traceable ingredients, no artificial flavors.
‍
Web: clean, simple color palette. Clearly breaks down claims. "Skeptics speak" ection is a impaction way to do testimonials.
Product: vegan,  gluten free, non-GMO, made in USA.

Web: product photos go well with color scheme. The “PMS fucking sucks” section clearly states problem vs. solution. Has a subscription feature.
WEAKNESSES
Navigation bar is too big and bulky. Takes up too much space when scrolling. UI is not as appealikng as its competitors.
Testimonials from CEO, staff, and partners seem biased. Banner does not match the vibe of the packaging. Ugly call to action buttons.
Looks specifically targeted towards women. Might discourage men from buying.
The testimonials seem fake. Menu may be too oversimplified.
Focuses too much on 1 product rather than both. Did not know they had a second product until very end.
OPPORTUNITIES
Utilize their problem/solution product snapshot, but be more visually interesting.
Get inspiration on developing a strong brand personality for packaging.
Focus on our demographic and represent it through our branding.
Learn from their transparency about their product. How can we get closer to their level?
We can gain inspiration from their their reviews, and subscription layouts.
THREATS
They sell an ashwagandha product just like us. This could be a competitive product to the RELAX product.
They are featured on other websites (gives credibility). They also give location to buy in person.
N/A
N/A
GTFO gummies are a direct competitor of our vitamin C gummies.

PHASE 2: INFORMATION ARCHITECTURE AND WIREFRAMES

Site map

BEFORE: Each item quantity had its own page; if users wanted to change their quantity, they would have to navigate back to the homepage to find the correct quantity. In addition, this meant that in the cart itself, they could not edit the quantity, they would have to delete the entire item, and go re-add it from a different page.

AFTER: The user journey was simplified in order for make it easier for users to select the quantity they desired, and give them the freedom to change their mind and edit their quantities with ease.

Wireframes and iterations

The wireframe was built under the presumption that the site was going to be built with custom code. Used this version to conduct simple usability tests with staff.

Late in the review process, the engineer was let go, and we had to pivot and completely rely on Shopify themes. This meant a lot of design features that were initially discussed, were not compatible with the theme we had to use and edit.

Wireframe iterations were made based off of usability tests and workshops with the stakeholders.

WIREFRAME
WIREFRAME ITERATION
+UI MOCKUP
EXAMPLE#1
Reviews page
At first this page was meant to showcase testimonials from influencers only. It was requested to have the second row of testimonials to scroll horizontally.

One bit of feedback from stakeholders was not all reviews were created equal--some were more famous and some where "nobodies".

In usability testing, some users stated "how do I even know these are real, they look like fake reviews"
Changed to have a features testimonial at the top from an influencer with a substantial following. Underneath I placed a widget that would pull reviews from real customers, not just paid influencers to establish more trust.
EXAMPLE#2
Home page
In the first design, the things that were required to be on the page were the following:
-The icons related to the products value propositions
-Reviews from the customers
-Links to social media.

As the project evolved and we got feedback, it was clear that there wasn't enough emphasis on the product itself . We needed to help users continue the customer journey and increase sales conversions.
Links to products with their reviews were now added for users to get the product quickly, rather than solely relying on the navigation bar. Equal emphasis was placed on both products so users could understand which one would benefit them the most before moving forward in the customer journey.

We also added an affiliate program in order to increase social media visibility by utilizing micro influencers.

PHASE 3: BRANDING AND UI

Branding and colors

Created UI and brand guideline for visual consistency across the website, packaging, and social media assets.

The branding inspiration came from athletic brands like nike, adidas, and wellness brands we were trying to emulate. A cool, yet gender-nuetral vibe was what we aimed for,
While waiting for updates for packaging, we took some new product photos with our new brand colors and to put an emphasis on the product, rather than the influencer,
Mockup social media grids were created in order to visualize brand identity and how we would appear to others during social media campaigns.
Branding for potential packaging mockups were made to show potential of the product after the launch of the website. As we developed a stronger brand identity for the web, it was important that we planned to do the same for the physical product.

NWELLNESS.COM PROTOTYPE

VIEW FULL PROTOTYPE ↗

Next Steps

  • Implement packaging redesign to align with web redesign.
  • Revamp social media grid and align visuals with web redesign and new brand guidelines.
  • Organize advertising campaigns and advertising strategy.
  • Implement brand ambassador program and select new influencers that align with our current sales demographic
  • Monitor heat maps and conversion rates.
  • Monitor heat maps and conversion rates.
  • Conduct new set of usability tests.

Final thoughts

  • Don’t be afraid to involve the entire team in the testing process-things progressed much quicker with help.
  • Newfound confidence: Was able to take a leadership role and guide my team to choose long-lasting user friendly practices, even when my contract ends.
  • My usability testing felt a tad bias. I should focus on crafting script.
  • I should have tested the final website outside of the team, in order to confirm that my changes worked, instead of waiting solely for analytic data to come.
  • Prototype based on what web platform you’re using.

SAY HELLO!

email me at MANDI.EXCELL@GMAIL.COM if you have any questions. I’d love to hear from you!

☆ made with webflow ☆

Follow me! ♡

INSTAGRAM↗TIKTOK ↗LINKEDIN ↗