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 existing clients and potential consumers derive from Heather’s services and the specific challenges they aim to address through engagement with her content and site. The objective is to research competitors, interview current and prospective clients, identify areas of opportunity, strategize with Heather on her goals and vision to create solutions that satisfy the user and client and build a unique brand identity that can compete in the remote Health and Wellness industry.
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 sites: Good Nutrition and NOOM App, 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 Holistic Heather.
*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. A clean aesthetic, easy to navigate, and content clearly labeled effortless CTA prompts—an excellent reference for promoting credentials. Content, credentials, and services seem honest and reputable.
*FORM lacks connection to the practitioner, no ABOUT page. Visually modern, minimalist, bold. No credentials; Content seems superficial.
*MWH is the gold standard for the whole package offering, similar to what HH is offering. As mentioned in subsequent interviews, Melissa Wood is an independently wealthy content creator who is less relatable to her audience. HH opportunities are her credentials and her role as a full-time healthcare practitioner tailoring wellness in a busy schedule.
Opportunities
Heather has a significant Instagram following and medical credentials that 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. She needs clearer navigation, better CTA and scheduling features for users to connect with her, improved UX copy, and a better-defined service offering with prices available.
User Interviews Participants
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
Why
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.
Align Goals
Prioritize product features by aligning business goals with user needs and taking into account any limitations.
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 ensure we were on the same page with the aesthetics. I submitted 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 to be used on 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.
How
Following wireframes as a guide for site structure, I began creating an information hierarchy.
Early Design Decisions
In the initial phase, I developed a responsive website featuring original content and imagery, focusing on UX strategy. This foundational stage enabled me to dedicate 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, we tested the hypothesis of how users would interact with the site. If they found the information intuitively and could solve their problem of connecting with a health coach and if the interactions offered on her site had any sticky interactions.
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 and confirm that all links function and content.
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
Why
To improve the product based on the user testing
How
Revisions were made to improve and friction points mentioned during testing.
User Testing Revision: Contact
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
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.