A responsive website for a holistic fitness and nutrition brand.

Developed a comprehensive brand strategy, identifying the target users and creating a digital experience to convert a large social media following into a more lucrative and sustainable business.

My Role

Design Research, Brand Identity, UX +UI Designer, UX Copy, Wire-framing, Redesigning site & Testing

Collaborators

Client, Mentor, Interview and User Participants

Tools

Figma, Adobe Suite

Background

Heather is a full-time nurse with a large social media following for her Holistic Wellness Coaching Business. She wants to create a brand, grow the business, and offer “On Demand Content” in addition to her current services.

Objective

Identify the value Heather’s content brings existing clients and her target audience. Explore specific challenges they aim to address through engagement with her Instagram and website. Conduct competitor research, interview clients and target audience, and collaborate with Heather to develop solutions aligned with her goals. We'll establish a distinctive brand identity to thrive in the remote Health and Wellness industry.

Mindful Redesigning

Heather's original site, created by herself a few years ago, serves as an information-sharing platform for her services but lacks traffic and business generation. There's potential for clearer brand identity, refined services, and enhanced SEO. Following our initial discussion, I documented her site's current state and her goals and vision for the rebrand.

Holistic Heather Health - Original website

Landing page notes

Research & Empathize

Research Goal

To understand the needs, limitations and motivations of HH’s current client’s as well as her followers and potential clients.

Methods & Objectives

Compare competitors in fitness and wellness platforms and evaluate features, strengths, and areas of opportunity. Followed by interviews with current and potential HH clients.

Competitive Analysis

Compared two nutrition brands, Good Nutrition and NOOM, a Fitness site, Sweat with Sav, and two Fitness+Wellness sites, FORM and MWH, to analyze offerings, patterns, target market, price structure, and business goals to identify areas of opportunity for HH.

  • *Noom is a native application focused on nutrition and calorie counting. This is a one-size-fits-all calorie counting application. Holistic Heather's opportunity should emphasize personalized nutrition guidance.

  • *Sweat with Sav is on-demand fitness content. Uses Arketa to manaage streaming. Not currently relevant but will be a good reference when launching fitness content.

  • *Good Nutrition is a well-designed site. Clean aesthetic, easy to navigate, and content clearly labeled effortless CTA prompts—an excellent reference for promoting credentials.

  • *FORM lacks connection to the practitioner, no ABOUT page. Visually modern, minimalist, bold. There are no credentials; the Content seems superficial.

  • *MWH is the gold standard for the wellness and fitness lifestyle offering. As mentioned during User Interviews, Melissa Wood is a wealthy content creator who is less relatable to her audience. HH opportunities are her credentials and her role as a real person/full-time healthcare practitioner tailoring wellness in a busy schedule.

Opportunities

Heather’s medical credentials set her apart from MWH. Her social media is her strength, which shows she is a real person with a full-time job as a medical provider and a passion for wellness. Her brand needs to be better defined, including a clear mission statement. Her site must exude professionalism to balance her Instagram presence while still connecting with the user/ potential client. She needs clearer navigation, better CTA and scheduling features, improved UX copy, and a better-defined service offering with prices available.

User Interviews

3 Holistic Heather Clients: Conducted 30 min remote interview.

2 Potential Wellness Clients: Selected 2 women who follow or are members of the brands from the competitive analysis

Interview Insights

Motivations

  • To improve energy & vitality

  • To improve their relationship with food and dieting

  • To look and feel their best for an upcoming event, trip or phase of their life

Pains

  • Feeling frustrated with too many nutrition options and information; not knowing which one is right for them

  • Not having enough time to take care of themselves

Needs

  • Someone to help them create manageable goals

  • Accountability and encouragement

  • A customized plan that can work into their work-life schedule

Define

Next steps

Leverage interviews and competitive analysis to identify goals and needs for HH responsive site. 

Deliverables

Business/User Goals Ven Diagram, User Personas, Features Roadmap

User Personas

My interviews relieved 2 Personas to consider when creating Holistic Heather’s updated responsive website. The Holistic Heather Graduate and the Prospective Client.

The Prospective Client needs to learn about Heather, connect to her social media, review Services and pricing, and book a consult call.

The HH Graduate needs to book their next session, look up recipes, access on-demand fitness content. 

Aligning Goals

Aligning business goals with user needs and taking into account any limitations helped to prioritize which features were necessary for a launch and what could be added in time.

How Might We

Developing Strategy

Ideate

  • Focus on creating a brand that exudes professionalism to highlight Heather’s experience as a healthcare practitioner and her nutrition education and certified personal trainer. Separate her from other Instagram influencers who lack credentials.

  • Emphasize the features her followers connect with her on.

  • Draw the new user into the clean and easy-to-navigate platform with beautiful wellness content and lead them to her other services and shops through CTA, bringing to her services and connecting directly with her through an intro call.

  • Create member-only content, nutrition, fitness, and tips as an additional option for past or prospective clients who can not invest in a one-on-one program.

  • Make it seamless for prospective clients to engage, inquire, and connect.

Deliverables

Information Architecture, Sketch Wireframes

Sitemap

Organize and create proper naming conventions for site navigation.

Sketching Wireframes

Referencing the sitemap as a guide, I loosely sketched the wireframes for the responsive website.

Responsive Design: Mobile First Lo-Fi Wireframe

Responsive Design: Desktop Lo-Fi Wireframes

Design

The client has colors she incorporates in her Instagram feed; using that as a foundation, I built a cohesive brand color palette and design system. 

Brand Identity

Communication was fluid between deliverables to align on the aesthetic. I shared a few logo and color palette options, and we landed on the branding concept below.

Final HH Branding and Inspiration

Logo Design

Branding Design for Holistic Heather for all digital platforms. Inspired by her original feminine font and incorporating vines and leaves to suggest a natural, wholesome lifestyle.

Logo branding

Style Guide

Holistic Heather UI style sheet

Build

Platform

In collaboration with the client, we decided to keep the site in Squarespace so she can add recipes and update information after handoff.

Following wireframes as a guide for site structure, I began creating an improved information hierarchy and navication.

Early Design Decisions

In the initial phase, I developed a responsive website featuring original content, focusing on UX strategy. I dedicated significant attention to information architecture, naming conventions, UX copy, mission statements, service clarity, and accessibility, culminating in creating an MVP. Upon presenting the work to the client, her enthusiasm for the product prompted her to invest more in the visual brand elements and new professional photography. This decision propelled the final product to the next level visually.

Responsive site design with original content and photography

Test

Usability Testing

With the site created, I tested the hypothesis of how users would interact with the site interactions if they found the information intuitively and could solve their problem of connecting with a health coach.

User Tasks

4 User Test Participants were prompted to book a consultation, then follow a link for a link on her product page.

Testing Goal

To test assumptions of how users would use the Holistic Heather site for booking a consultation and confirm that all links function as expected and that the content is clear.

User Testing Feedback

  • All users interviewed were pleased with the aesthetics and branding choices.

  • Many Users comments on preferring to E-mail directly rather than fill out a contact sheet.

  • 2 Users mentioned wanted to take action immediately after finding the service they wanted to proceed with.

  • All users loved the ease of the shop page and had no issues with links.

  • Users liked the ability to book a free consultation immediately.

  • One user mentioned not liking the green text.

  • A user noted the Credentials on the About page being difficult to read.

  • 2 users mentioned wanting to click on each service on a separate page. 

Prioritizing Revisions

  • Revise the contact page for direct e-mail contact. Omit form field.

  • Add CTA Buttons to all service pages to allow students to connect with Heather to purchase packages.\

  • Test consultation booking to ensure the link to Calendy functions without issue.

  • Make Credentials more legable> Increase font, line height, and add bullets.

  • Phase 3 updates: Move all services onto their own page for more detail and a more simple service landing page.

Iterate

Revisions were made to improve and friction points and pages mentioned during testing.

User Testing Revision: Contact form

User Testing Feedback

Users don’t like these inwebsite contact forms. Prefer to e-mail someone directly.

What’s different?

Increase font, increased line height, and added bullets for clearer credentials

User Testing Revision: About page

User Testing Feedback

Credentials blend together and are not clearly defined.

Whats different?

Removed form fields and created a direct e-mail CTA

User Testing Revision: Services

User Testing Feedback

Users want to book or take action directly after reading service details.

What’s different?

Added a CTA button for each service to book a consultation or contact Heather

Final Product

See the website to review the UX strategy, brand identity, and services offered:

Next Steps

Stay in touch with Heather to track web traffic and learn more about improving SEO. Meet again before launching her on-demand content to design the UX strategy for her fitness content and membership.