Overview
Functional medicine (FM), which borrows from various schools of Eastern medicine and takes a holistic and systematic approach to wellness, is still relatively unknown and inaccessible to the majority of Americans. It has the potential to address many sub-acute issues which Western, allopathic medicine fails to remedy.
Kleva’s Asian American co-founders wanted to harness the power of Eastern healing and Functional Medicine and make these remedies more accessible to the general public. They wanted to build a desktop site for customers to be able to research, seek guidance, and purchase FM products.
When my design partner and I were brought onboard, this project was an early stage concept. Our job was to help grow this seedling of an idea by helping Kleva better understand their audience and design their website informed by extensive user research.
- Role: UX Designer (solo)
- Responsibilities:
- Research
- Lofi + Hifi prototyping
- User testing
- Tools:
- Sketch
- Marvel
- Invision + InvisionStudio
Role: UX Designer
Client: Kleva
Team:
- Myself
- Kristy Tran, UX Designer
- Bernie Siu, Project Manager
Responsibilities:
Research
IA
Wireframes
User testing*
HiFi Prototype
Tools:
Figma
* In the interest of time, we were asked to forego testing in order to prioritize completion of the high fidelity prototype for submission to Y-Combinator (more detail below)
Research
User Interviews
The first task was to better understand people’s experience (or lack thereof) with Functional Medicine. We sent out a screener survey to recruit participants for user interviews, and selected a demographically, experientially diverse pool of interviewees.
Kristy and I conducted 5 video interviews via Zoom. In the interviews, we sought out information about people’s current routines and practices, level of familiarity, and perceptions of FM.
Affinity Map
We synthesized our findings in the form of an affinity map:
In summary, the key insights from our user interviews:
- Middle-aged and senior (40+) people take a more proactive and methodical approach to managing their health (preventative supplements, practices, etc) out of necessity
- They are also more in-tune with their bodies and have a stronger intuition regarding their health needs
- Conversely, younger people tend to take a more passive, ad hoc approach to their health (i.e. buying Theraflu from the drugstore on an as-needed basis) because they do not have a sense of urgency or see the long term benefit
- There is no centralized resource to learn about FM
- Limited access to knowledge
- Detracts from credibility
- Clinical studies and quantitative data bolster credibility
- People prefer to consume FM and herbal products in the least processed form possible (powders, oils vs. gummies, gel capsules)
From our affinity map, we extracted two personas: a younger, “uninitiated” user and an older, more conscious and experienced user.
Personas
Unaware + Passive
- Young and healthy
- Tends to health on a reactive, "as-needed" basis
- Oblivious to the benefits of preventative practices
- Limited (or no) exposure to Functional Medicine
conscious + proactive
- A bit older, feeling the effects of age
- Takes. a proactive and preventative approach to health
- Familiar with FM, started when Western medicine failed to meet her needs for sub-acute issues
One big marketing opportunity we discovered was emphasizing the importance of taking a proactive approach to managing one's health early-on.
.png)
.png)
"An ounce of prevention
is worth a pound of cure"
.png)
.png)
Design
Ideation & IA
Now it was time to use our gathered insights and stakeholder input to create user stories, and outline the site functionalities we needed to account for in our designs. We began by putting together user stories and a macroscopic outline of the customer journey.
The overarching tasks we identified were:
- Evaluate and identify wellness needs and goals (Nigel)
- Research and determine which products would best help reach these goals (both)
From here, we zeroed in on user flows for two key routes to meet the needs of both personas:
- Researching and browsing remedies independently (clinical data, history, user reviews, etc)
- Booking a consultation with a licensed practitioner to get guidance
On one hand, Nigel wanted guidance and professional input to identify his needs and find the right products. On the other hand, Connie preferred to conduct her own research and make her own informed decisions on products. We needed features that would cater to both of these personas.
User Flows
We mapped out the red routes to both get guidance, and conduct independent research in a user flow diagram:
Site Map
From here we created a site map to get a better sense of the layout and navigation:
With our scaffold in place, we were ready to begin designing at low fidelity.
Sketching & Brainstorming
From our user stories and user stories, we knew we needed to incorporate the following features in some form:
- A learning resource (a glossary?) to research ingredients, history, applications, etc.
- A platform to get diagnostic and prescriptive guidance (virtual consultation? questionnaire?)
- Easy site navigation to sort, search, and filter through numerous products and indications
We made some rough sketches to ideate on solutions that would help us accomplish the above:
Now it was time to bring our ideas from paper to pixel.
Wireframes
After discussing and aligning, we made digital adaptations of our sketches and created wireframes. Here are a few sample screens:
A handful of wireframes for the landing page, product page, and virtual consultation service.
High Fidelity
Change in Plans
In our original project plan, we had planned to carry out a round of user testing with our low fidelity designs prior to the high fidelity mockups.
In a bit of a last minute change of trajectory, the co-founders of the company needed a high fidelity prototype by the end of the day to present to an investor. To support them in meeting the tight deadline, we decided to forego the low fidelity testing and allocate our full efforts to preparing the high fidelity prototype.
Although stressful, this unexpected change was a valuable learning opportunity about the realities of designing for a client. It emphasized the importance of transparency and communication between all stakeholders and the design team. This experience also highlighted the importance of flexibility and adaptability—projects evolve and deviate from the plan most, if not all, of the time.
We worked hard to deliver the high fidelity prototype on a very impacted timeline. This was the result:
HiFi Prototype
Our high fidelity prototype for Kleva.
In case the interactive prototype doesn't display correctly, here are a few of our high fidelity screens:
Reflections
Working with Kleva has been one of my most formative experiences as a designer. Through this collaboration, I grew in many areas and learned valuable lessons such as:
