Functional Flow Wellness
Functional Flow Wellness specializes in personalized, holistic health solutions for women dealing with chronic health issues. With functional lab testing, Functional Flow Wellness aims to uncover underlying issues such as hormonal imbalances, gut health problems, and nutrient deficiencies, and develops tailored wellness plans that encompass nutrition, lifestyle changes, and targeted interventions to promote long-term health and vitality
At the time of this project, Functional Flow Wellness had already recruited a professional visual designer for branding, so my role as a UX/UI designer was to rework the website to improve navigation and hierarchy and refresh the website’s overall visual design by applying the given branding strategically.
ROLE
TOOLS
User Research, UX/UI Design,
Data Synthesis, Prototyping
Figma, FigJam, Google Meet, Typeform, Google Form
7 weeks (March - May 2024)
DURATION
DISCOVERY
Initial Assumptions
I started off with some initial assumptions about Functional Flow Wellness’s current experience and conducted a website audit and user survey to help either validate or disprove these assumptions.
Lack of Call-To-Action (CTA)
Missing critical information relevant to a user's decision to invest
Potential impact
The website didn’t have a clear call-to-action and users have difficulty finding certain information, which can all lead to an increase in bounce rate and drop off.
Client Discovery Call
To understand the owner's business goals and website needs, I had a discovery call with her to hear directly from the source.
During our conversation, we discussed her mission, target users, brand values, website objectives, and key features the site should include. We established the following main goals together:
Create a user-friendly website that is informative about functional health coaching, transparent about her services and pricing, and engaging for visitors.
Add booking capabilities so clients can schedule appointments directly on the site.
CURRENT EXPERIENCE
I recruited 6 participants to conduct a remote audit on the original website. I learned about what users like, what is currently working, and which areas need improvement. Below are some of the tasks users were asked to complete in the audit:
After visiting the website, do you now have a basic understanding of what a functional diagnostic nutrition practitioner (FDN-P) does?
Did the website effectively convey the qualifications and expertise of Kristin Waldron, FDN-P?
Did you find the navigation menu intuitive in guiding you to relevant information?
Please briefly describe how you would find information on Kristin’s background and qualifications.
How would you rate the clarity of the website's overall layout and organization?
What do you think of the overall aesthetics of the website (the colors, typography, and images)?
Website Audit
50%
Colors are pleasing
50% of users liked the main colors of the website and found them to be “simple yet harmonizing”.
83%
Qualifications and expertise are effectively conveyed
83% of users agreed that the website adequately conveyed the practitioner’s qualifications and expertise.
What went well
67%
The “About Me” information was hidden
While most users felt the owner's qualifications were well communicated, 67% of users found this information somewhat hidden and not easily accessible.
50%
There was an information overload
50% of users mentioned feeling overwhelmed by the abundance of text and were unsure what to do with all the information.
67%
Users only have a vague understanding of what the practitioner does
67% of users felt that they still only had a vague understanding of what an functional diagnostic nutrition practitioner (FDN-P) does after visiting the website.
67%
Direct booking capability was not available on the website
67% of users expected to book the practitioner directly on the website and expressed a desire for this functionality to be available.
Users expect to see a separate “About” or “My Story” tab in the navigation.
Users feel that the website has too much text in general, making it difficult to scan and retain key information. Additionally, the contact information is a bit too inconspicuous. Users prefer a built-in contact form so they
don’t have to exit the website and open their email to leave a message for the owner.
Users want a streamlined booking process and expect the website to have direct booking capability.
COMPETITOR ANALYSIS
I conducted a competitive analysis to compare and contrast other Functional Diagnostic Nutrition Practitioners (FDN-Ps). I could see what works for their websites and how it attracts more potential clients to consider their practice.
Through this competitive analysis, I found that most FDN-Ps have a clear Call-To-Action and booking capability as well as a dedicated "About Me" or "My Story" page and a "Services" page outlining their packages or programs. Most FDN-Ps also highlight client testimonials on their website. These features and pages engage clients and help them learn more about the practitioner and their offerings, aiding in their decision to invest.
Clear Call-To-Action (CTA)
About or My Story
Contact form
Transparent pricing
Reviews or Testimonials
Booking capability
Megan Nash Health
The Mindful Nutrivore
Lauren Walker
Wynn At Health
Megan Nash Health
Offers a free 5-day blood sugar balancing smoothie PDF guide if email is entered.
Blog articles are categorized and clients can search for blog posts by keywords.
Client portal allows her clients to log in directly on the website to follow up after their sessions.
Packages are clear, easy to understand, and pricing is transparent.
Her "Get Started" page, which is her contact form, is a little bit hidden.
The website doesn't have any buttons; they are all links. Even the CTA is a link and doesn't stand out that much visually.
Visitors can't directly book appointments on her website.
To take a deeper look at where each business is doing well and where are their areas for improvement, I compared the strengths and weaknesses of each competitor:
The Mindful Nutrivore
Has numerous detailed testimonials from his past clients.
Packages are clearly outlined and listed side-by-side for easy compare and contrast.
Education, training, and credentials are posted in one consolidated list.
Shop is currently empty and not maintained.
His tagline could be unintentionally limiting his clientele.
"Get Started" button on the pricing page lead straight to a PayPal checkout screen, which could startle the user. Additionally, the amount on the PayPal checkout screen does not match what is listed on pricing page.
Lauren Walker
Maintains an active and informative Facebook page.
Potential clients have the option to choose between a free 15-minute consultation before they commit and as well as a direct evaluation appointment if they are ready.
Has many testimonials.
Pages seem to have loading issues and certain images just never show up even after the pages have fully loaded.
"How FDN Helps" is a broken link, and should be fully removed and/or combined with the "How functional nutrition helps" page.
Pricing seems to be per session, which is convenient for the client but might not be the most advantageous for her business, since the client doesn't have to make a continuous commitment.
Wynn At Health
Colors are vibrant and lively which translate well for her brand.
Clients can directly book appointments on her website.
Her contact information is easy to find from the Contact link in the navigation.
Success Stories page is empty besides several images.
Reviews are scattered across several pages and not centralized.
My Story page is in an expandable FAQ's accordion, which is an unexpected format.
USER SURVEY
Since Functional Flow Wellness exclusively focuses on women, I conducted a survey with 13 female participants in their 20s to 40s. The purpose of this survey is to gather some relevant insights, specifically from female users’ perspective, on what potential clients look for when seeking to work with a Functional Diagnostic Nutrition Practitioner (FDN-P) to improve their health and lifestyle.
70%
Do read the reviews when they visit the website of a service
or business
92%
Considered transparent pricing to be crucial in deciding whether to invest in a service
85%
Were unfamiliar with Functional Diagnostic Nutrition Practitioners (FDN-Ps) and their role
Finances
Extra time commitment
Reluctance to change lifestyle
Other (doctor’s advice, etc.)
15.38%
15.38%
38.46%
76.92%
Factors affecting user’s decision to invest in a personalized health program
When asked about the specific health or lifestyle goals they hoped to achieve with the help of a Functional Diagnostic Nutrition Practitioner (FDN-P) or a health coach, users most commonly cited improving their diet as their top priority, followed by a desire to lose weight.
54%
Expressed a desire to improve their diet when asked what goals they would like to achieve with a health coach
When it came to reasons for investing in a coach to improve their overall health, users’ answers mostly varied, but several users mentioned a desire for a healthier lifestyle.
23%
Mentioned wanting a healthier lifestyle when asked why they would invest in a coach to improve their overall health
Other significant findings are detailed below:
1
Users find the current website to be overwhelmed with text, which makes it difficult to parse through the information
2
Users would like to see transparent pricing information to enhance the website's credibility and to understand the cost upfront
3
Users prioritize reviews or testimonials for insights into the service and others' experiences
4
Users believe the website should offer direct booking capability for a more streamlined booking process and enhanced convenience
USER INTERVIEWS
In addition to the survey, I conducted 45-minute user interviews with five participants, all of whom are women in their 20s to 40s, to gather their perspectives on working with a health coach. These interviews enabled me to ask follow-up questions if needed and allowed the participants to
elaborate on their responses.
I found that users felt the current website is a bit overwhelming and lacks a clear call-to-action, causing them to disengage and leave without making a connection. Users also suggested that
the content should be more separated and once again confirmed the importance of direct booking capability as well as transparent pricing. To organize the main insights from the user interviews,
I created an affinity map as my next step.
After conducting the user interviews, I extracted quotes and grouped them to identify recurring patterns and key themes.
These findings enabled me to understand user experience trends and visualize potential solutions to address the identified pain points.
Major Research Findings
Anna “The Everyman”
Background
Brands
Age
30 years old
Location
Philadelphia, PA
Occupation
Audit Manager
Needs
Goals
Pain Points
Anna is an audit manager who has been in public accounting for 7 years. Her job requires her to work long hours and she lives a sedentary lifestyle.
Anna is sick often and feels that she hasn’t been in control of her health in years; she cannot remember the last time she felt healthy. She takes fitness classes on the one day she has off per week, but is barely seeing results. In fact, the exercises leave her extremely tired and it takes her a long time to recover.
Anna wants to improve her health but has no idea how and where to start.
Needs a guided, personalized plan to improve her health
Needs to figure out the underlying causes to her problems and not just treat symptoms repeatedly
Would like to work on her health holistically
Wants to make actionable changes that are actually sustainable that she can incorporate into her lifestyle
She is tired of Googling her symptoms and guessing on her own to figure out solutions
She has no clue where to start and is afraid that she will have to add drastic changes to her lifestyle that she can’t keep up with
“I am extremely burnt out and constantly exhausted.
I have unexplained weight gain and seem to be always bloated. I want to start feeling better again.”
Hard-working
Detail-oriented
Trustworthy
DEFINING THE USER
I developed a persona named Anna to represent the users from my interviews. Anna represents a 30-year-old woman who is experiencing burnout and seeks to improve her health through a health professional and a personalized plan. She embodies the same needs and pain points shared by the interview participants.
User Persona
POV STATEMENTS & HMW QUESTIONS
I would like to explore ways to help users who struggle with chronic health issues discover their underlying causes because they are tired of the endless searches and guessing only to repeat the cycle.
How might we eliminate the guesswork for users when it comes to identifying the underlying causes to their chronic illnesses?
I would like to explore ways to encourage users who are seeking to make changes to their lifestyle to improve their health but are reluctant to start because they are unsure if they could keep up with these changes.
How might we instill confidence in users who are interested in improving their health through lifestyle changes but are skeptical whether they could maintain the changes?
After identifying the main user problem, I wrote out Point of View statements to generate How Might We questions, which opened up opportunities to address user pain points.
Point of View
How Might We...?
How might we convey an FDN-P’s role and scope of work to users who are seeking personalized, holistic guidance to achieve improved overall wellness?
I would like to explore ways to help users who want to improve their health receive personalized, holistic guidance from a wellness professional because they struggle to come up with a plan on
their own.
After evaluating the three Point of View statements and their corresponding How Might We questions, I have chosen the most relevant one, highlighted above, as my primary focus.
INFORMATION ARCHITECTURE
Card Sorting
To understand user expectations of where features would be placed, I conducted a closed card
sort with four participants. Participants were asked to organize 12 topics into the 7 predetermined categories in a way that felt most logical to them. The topics were:
What is Functional Diagnostic Nutrition?
Who is this for?
Bio
Contact Form
Packages
Success Stories
Refer A Friend
Join A Group
Intake Form
Functional Health Cheat Sheet
Blog or Instagram Posts
Booking Calendar
As shown by the results summary above, users mostly agreed on similar groupings, which led to the creation of the site map in the next step.
The only categorizations that users disagreed on were the two highlighted topics:
Success Stories: 2 users placed this card in Services, and 2 users placed it in Home.
Functional Health Cheat Sheet: 2 users placed this card in Resources, 1 user placed it in Home, and 1 user placed it in Our Story.
Ultimately, I decided to place “Functional Health Cheat Sheet” in the Resources page based on majority vote, and “Success Stories” in the Services page using my best judgment.
Site Mapping
The site map was structured based off of the user responses from the card sort.
The main pages that would be in the primary navigation of the new website include:
Home
Our Story
Services
Resources
Blog
Book Consult
Contact
While the original website only featured four pages:
Home
Coaching
How To Book
Intake Form
The new categories in the site map below reflect improved informational hierarchy and align better with user expectations. Additionally, "Book Consult" will be the new call-to-action on the website, enabling users to schedule a free consultation with the practitioner and encouraging further engagement and connection.
Task Flows & User Flows
After developing the site map, task flows and user flows were mapped out to follow the logical sequences of the user experience. The main task flows that I created were:
1) Booking a free consultation on the website, and
2) Finding services and pricing information
Task Flows
Click image to enlarge
User Flows
Click image to enlarge
WIREFRAMING
To convey informational and visual hierarchy effectively, I developed low-fidelity wireframes that would guide users to the information they are looking for. Additionally, I aimed to engage users by incorporating more visuals to break up the text and enhance overall balance.
Low-Fidelity Wireframes
Home Page
Resources
Book Consult
Our Story
Services
Checkout
Client Details
Summary
Confirmation
Mobile
Home Page
Services
Book Consult
Our Story
Checkout
Client Details
Resources
Purchase Summary
Booking Confirmation
Desktop
The low-fidelity wireframes were digitized into mid-fidelity wireframes. The images below outline my design decisions at this stage of the project. Although I followed a mobile-first design approach, I chose to present my design decisions using the desktop version for better readability.
Home Page
Our Story Page
Services Page
Book Consult Page
Resources Page
Contact Us Page
Mid-Fidelity Wireframes
Added sections for easier scanning which helps users retain information
Opted for smaller icons for better visual hierarchy and to avoid wasted white space
Reintroduced the CTA to remind users they can take their next step without needing to scroll up
Created a separate, dedicated page showcasing the owner's story so users can easily learn more about her background
and qualifications
Included additional images of the owner to foster a more personal connection with users
Expanded and renamed the "Coaching" page to "Services" to include detailed descriptions of specific plans offered, along with clear pricing for each plan.
Clients can select a plan and pay directly through the website
Included multiple client testimonials to add to the business’ credibility
Transformed the original "How to Book With Me" page into a "Discovery Call" page, which is what clients see when they click the "Book Consult" CTA button. This change simplifies and streamlines the booking process, allowing clients to book appointments directly on the website without needing to exit.
A “Resources” page was added to the website to include the Intake Form and other essential resources for clients to access.
A new "Contact Us" page was added, featuring a contact form that allows clients to leave messages directly on the website.
Additionally, a toggle was added to help new and existing clients quickly find resources suitable for them.
Added a calendar for easy booking
Concise text in the hero section to keep users engaged and avoid fatigue
Added a Call-To-Action button to provide users with a clear next step
Original website: Home Page
Original website: Coaching
Original website:
Original website:
The original website did not have a “Resources” page and only featured the Intake Form as a tab in the navigation.
Original website:
The original website lacked a "Contact Us" page and instead displayed the owner's contact information in the footer.
INITIAL TESTING & RESULTS
Five users in their 20s and 40s, who met the requirements for the user persona, participated in the mid-fidelity user testing for both the desktop and mobile versions. This helped to gather users’ initial feedback on the layout and structure of the website and to evaluate users’ ability to complete the given tasks without errors. The tasks were focused on three main functions of the website that were previously unavailable:
Book an appointment directly on the website
Send a message through the website
View available services and securely purchase a plan directly on the website
All five users navigated the screens successfully and completed the tasks without major issues.
Users expressed that the tasks were intuitive and easy to complete, and that they’ve had an overall positive user experience with the website. Most found the website’s layout enjoyable and noted that it flowed nicely.
For the desktop version, users spent an average of 32 seconds on task one, 8 seconds on task two, and 38 seconds on task three. For the mobile version, users spent an average of 31 seconds on task one, 8 seconds on task two, and 28 seconds on task three.
Results & Feedback
Several users raised concerns about the booking experience on the mobile version:
Participant 1
Participant 2
For the booking page on the mobile version, I wish that once I click on the date, the screen would jump to the available times because it would be nice not having to scroll down, even though scrolling down is not really an issue.
Based on user feedback, iterations were made to the original mid-fidelity wireframes for mobile.
The discovery call details are now displayed on a subsequent screen after the user selects their appointment date and time, instead of on the same page. This change prevents the screen from “jumping” back to top during the selection process, resulting in a smoother, more natural flow and an improved overall booking experience.
Improvement
Original
Improved
Once the user selects a date, the screen will automatically scroll down to bring up the available times.
The call details will appear on the next screen after the user selects the appointment date and time.
BRANDING
Integrating Existing Branding
Before I began the redesign of the Functional Flow Wellness website, the client had already taken proactive steps to enhance her site, including hiring a visual designer to revamp the branding.
The visual designer was responsible for creating the brand’s logo, selecting images, and defining the typography. My role was to integrate these branding elements into a seamless and user-friendly interface. The visual designer’s work, which included the logo, images, and typography, was passed on to me by the client. While I did not work directly with the visual designer, I worked closely with the client and regularly consulted with her to ensure that the final design aligned well with her vision.
Prior to officially applying the given branding to all the wireframes, I presented a few mock-up screens to the client to allow her to get an overall “feel” of the website. We discovered that the small version of the logo with the two double-looped “F”s was not easily decipherable as “FF,” which is short for Functional Flow. The loops, without context, almost look like “L”s instead. Ultimately, we opted to use the full logo consistently across all breakpoints to maintain context, as well as ensure optimal clarity, readability, and better brand recognition.
Click image to enlarge
PROTOTYPING
High-Fidelity Wireframes
I incorporated visual elements from branding, such as the color palette, typography, logo, and icons, into the high-fidelity wireframes and then conducted a second round of moderated usability testing.
Home
Our Story
Services
Book Consult
Contact Us
Resources
Mobile
Home
Our Story
Services
Book Consult
Contact Us
Resources
Desktop
100%
successful completion rate among users
39s
was the average time to complete Task 1
22s
was the average time to complete Task 2
51s
was the average time to complete Task 3
Results
USABILITY TESTING
High-Fidelity Testing
I conducted an moderated usability test with seven women between ages 26-60 to validate my designs. Due to time constraint, only the mobile prototype was tested. Users were asked to complete the same three tasks in mid-fidelity testing:
Book an appointment directly on the website
Send a message through the website
View available services and securely purchase a plan directly on the website
Feedback
All participants responded positively to the prototype, therefore no further changes were made to the final website. Below are some recurring comments made by the users:
1
The website looks professional
57% of users described the website as 'professional' without any prompting.
2
Users are satisfied with how the information is organized
100% of users mentioned in some way that they enjoyed the way information is organized and sectioned, and that they didn’t feel fatigued browsing the website.
3
Users responded favorably to the website's color scheme
100% of users enjoyed the color scheme, noting that the vibrant colors were tastefully applied throughout the website. Users mentioned that certain elements on the website were highlighted effectively without causing eye strain.
REFLECTION
Final Thoughts
I am incredibly grateful for the opportunity to work on this project, as it has been a significant learning experience for me. I learned how to conduct a rebrand for a real stakeholder and improve an existing website. Collaborating with a stakeholder for the first time added a layer of realism and complexity that I hadn't encountered before. Truthfully, this project turned out to be the most challenging one I've tackled yet, as I faced several unforeseen delays and obstacles. Because personal health can be a sensitive topic for some, conducting research for this project posed its own set of challenges. For example, recruiting participants for interviews was especially difficult.
Learning how to integrate the visual elements created by another designer seamlessly into the website definitely stretched my design skills. Working with given branding had its pros and cons. On the plus side, it saved me considerable time, which helped push the project forward. However, it also meant that I had limited opportunities to explore rebranding and make changes. Despite these hurdles, I am proud of the final solution; it was immensely rewarding to see all the efforts culminate in a user-friendly and visually appealing website for my client. Personally, this project has been instrumental in my growth as a designer, teaching me valuable lessons that will undoubtedly shape my approach to future projects.
©2024 Dorothy Chung