CONTEXT
Alki Supplements aims to become an online retail startup—offering a variety of health supplements, including products like Multivitamins and Omega-3s. Their mission is to promote trust and transparency, in the hope of enabling customers to make informed purchasing decisions with confidence.
As the sole UX designer, I led the design process from research to the creation of high-fidelity interactive prototypes for both mobile and desktop platforms.
The integration of quantitative and qualitative research, combined with a thorough competitor analysis and card sorting, was instrumental in shaping the design solution and influencing the information architecture of this project.
MY ROLE
Sole UX Designer
Research
Visual + Interaction Design
Prototyping
Usability Testing
Branding
TOOLS
Figma
Miro
Creative Cloud
DURATION
6 months
Research objectives
First, I wanted to discover the influential factors driving users' online purchases, while also evaluating any apprehensions, anxieties, and pain points they may have encountered at existing online retailers.
Then, I aimed to conduct a competitor analysis to gauge how my research insights actually measured up against the competition.
Discovering user needs in the online health supplement marketplace
To cover the first objective—I began with online research—examining transparency concerns and anxieties associated with online supplement shopping—Which helped in developing open-ended interview questions, as well as a demographic-neutral survey—to gather broader insights.
Overall, I held 5 contextual interviews and administered a survey, resulting in a total of 30 responses.
Key insights
While my contextual interviews were great in gauging anxiety levels related to online shopping, the survey played a larger role in uncovering users' distinct needs, concerning product background information and overall transparency.
The first key insight revealed that confidence in online supplement purchasing varied, with over 60% expressing hesitation or just flat out never engaging in online purchases—due to a lack of product transparency.
Influential factors
The primary factors influencing supplement purchasing decisions among users included: Brand Reputation, Scientific Research, Product Reviews, Quality Certifications, Educational Information, Supplement Facts, and Ingredient Sourcing.
Users also expressed concerns about their limited understanding of certain supplements and their potential health benefits, emphasizing the need for an enhanced focus on educational information.
Competitive analysis
In response to my second research goal, I analyzed various health supplement brands that operate online, some of which are shown below.
While some brands echoed the influential factors from my own research, I observed that several details were either hard to find or not readily accessible on their websites. Instead, priority seemed to be given to product advertisements with brief blurbs.
Overall, this analysis proved to be valuable in laying the groundwork for the initial stages of the site. But my analysis was less about surpassing competitors and more about establishing a solid foundation on what users relied on most from my research. However, I did identify opportunities for improved content organization based on the analysis of these sites.
The combination of research insights and the competitor analysis helped in understanding the primary problem and challenge at hand.
A lack of transparency
Exploring the online realm for health supplements is marked by consumer uncertainties and anxiety. Concerns about product safety, authenticity, and effectiveness, along with a multitude of choices and a lack of transparent information, were shown to increase stress and apprehension for individuals seeking health supplements online.
This anxiety highlights the need for a solution that not only instills confidence but also offers clarity and fosters trust in the online purchasing process. This involves providing a more detailed array of elements, such as the influential factors discovered in my research.
This brought up the question…
How might I ease health supplement purchasing anxiety through the design of the Alki Supplements website?
—while also ensuring transparency, product authenticity, and simplifying the decision-making process to instill consumer confidence and trust?
Establishing a framework for ideation
To contribute to the development of a sitemap and kickstart the ideation process, I conducted five virtual (open and closed) card sorting sessions through Miro. While the open card sorts uncovered diverse grouping preferences among participants, the closed card sorts proved more beneficial in revealing consistent patterns.
In the closed card sorting sessions, I assigned participants the task of categorizing 36 cards into 6 predefined categories: Shop by Supplement, Shop by Health, Quality & Safety, Education, About Us, and User Account. Among these cards were the influential factors identified in my user research as well.
Here is a look at how I documented these sessions:
Comparing the outcomes:
Sitemap
This is the sitemap resulting from those card sorting sessions.
Below is a zoomed in section of the sitemap, to show how the key insights were organized.
Quality + Safety encompasses the crucial influential factors identified by users. In the About Alki section, there are pages that outline Alki's comprehensive start-to-finish processes, health articles offering product-specific educational information, as well as a page featuring the physicians and nutritionists contributing to those health articles.
Together, these elements helped in laying the foundation for transparency across the site, as well as carrying the project forward into the ideation phase.
Integrating the insights
While exploring the best method to incorporate key insights, I worked to create a template—from the homepage to the product page—that would come to instill site wide product transparency. This template, started with the development of modules that could be reused for multiple products.
For instance, a health article module designed to link to articles tailored to the products showcased on the same page. A product specific module featuring videos that depict a start-to-finish manufacturing process—from initial ingredient sourcing to packaging. I also developed modules with a global functionality, designed to uphold the concept of transparency, and are capable of being reused across a variety of pages.
Collectively, these modules encompass the key factors that users identified as vital when shopping for supplements online.
Here’s a look at some of these modules from lo-fi to hi-fi:
Incorporating the modules into lo-fi wireframes
Next, the modules were carefully placed from the homepage to the product page, using lo-fi wireframes. This played an essential part in solidifying a transparency-driven template that could be consistently reused for each product on the site.
Testing objectives
I tested three main areas to strengthen my solution for improving transparency:
Findability
The top priority is to enhance findability since the product flow and layout will establish a template for future products.
Content Positioning
Assessing the positioning of supporting product content, to strengthen my initial user research findings aimed at product transparency.
UI Design
Ensuring that the UI and visual design play a positive role in enhancing the overall content.
The image below is a look at how I documented my usability tests, of which the outcomes were mostly positive. The tests did however lead to the creation of a product ‘group’ page.
A new page
Here's a look at the Men's Multivitamins group page, developed out of usability testing. This page would offer a variety of multivitamins tailored for men. For example, options for Men 50+, variants without Iron, or different forms such as tablets, gelcaps, or gummies.
This page is a crucial addition to the overall product template, for additional products that have similar variations, such as Vitamin D, D3, or D3 + K2.
COLOR PALETTE
TYPOGRAPHY
THE LOGO
I selected Playfair Display Bold for its enduring aesthetic, classical elegance, and sophistication. Its letterforms and proportions project a timeless appeal. Using Adobe Illustrator, I outlined the font and made subtle manipulations—aligning, balancing, and merging character elements.
LOGOS | Product and digital use
Conclusion
With Alki Supplements aiming to be an online startup brand—this project mainly focused on the initial organization of content, with an emphasis on establishing a framework (or template) that could be used for additional products going forward. The aim wasn’t to compete with competitors at this stage, although a competitor analysis was helpful to inform the organization of content. But the priority was on identifying and integrating the influential factors highlighted by users, because those are the factors that would not only drive sales but also contribute to the developing brand reputation.
What I learned
This project involved a thorough design journey, where I integrated my real-world skills as a visual and branding designer into the user experience design process. Throughout, I acquired new skills in defining research objectives, using diverse research methodologies, and organizing findings to bring ideas to life. I also gained experience in iterative usability testing to further enhance and improve the user experience for the beginning phase of the Alki Supplements website.
Reflections
While I was happy with the outcome of this project, I had hoped to include a post-sale element in the form of an app that would allow users to do things like: set notifications for supplement intake, connect with nutritionists, and access additional supplement educational information. However, this ended up being a bit too much to take on along with the transparency element of the project.
