E-commerce Health & Wellness Products
Adding a feature
Trillium Chiropractic
UX Designer
75 hours
The Big Picture Overview
A local chiropractic clinic, already successful with in-store product sales, wanted to expand online. The goal was to explore how an e-commerce feature could integrate into their existing website to reach a wider audience and grow revenue.
What is Trillium Chiropractic?
A chiropractic and wellness clinic in Plymouth, MN, Trillium Chiropractic focuses on holistic healing and supporting overall health.
What's the problem?
Trillium Chiropractic clients love the health and wellness products available in-store, but that’s the only place they can buy them.
The solution?
An easy-to-use online store seamlessly integrated into Trillium’s existing website, giving customers convenient access to their favorite products.
Digging In Research
Before designing, I wanted to understand exactly what users needed. This online store would serve a small, passionate community focused on health and wellness. I researched similar businesses and explored what potential customers expect from an online shopping experience.
Competitive Analysis
I analyzed other chiropractic and wellness online stores to see what worked and what didn’t. While some had useful features, many felt disconnected, lacked product info, or had clunky checkouts. This helped me identify what to avoid, what to prioritize, and which features could inspire a better, more seamless shopping experience.
User Interviews
Research Goal
Learn what customers expect from Trillium’s online shopping experience
Interviewees
5 total interviews
3 Trillium Patients
2 users ages 60+
Details
3 interviews were conducted in person, 2 over Zoom
Biggest Takeaways
The Predicted, Sort of Obvious
Users want an intuitive shopping experience with easy-to-use filters
Users expect clear, detailed product descriptions
Users want a seamless, frustration-free checkout process
What Stood Out
Users wanted a search tool that suggests products based on their current symptoms
All users emphasized trusting product recommendations directly from their healthcare provider
The relationship and trust built with their chiropractor strongly influenced their purchasing decisions
Making Sense Define
Once I had my research insights, it was time to make sense of everything. I created user personas to really understand who I was designing for and what mattered most to them. Then, I turned their biggest pain points into “How Might We” questions, helping me dig deeper and define the problem more clearly.
User Personas
The personas of Olivia and Ron highlight the diverse needs of Trillium’s customers. Olivia, a busy mom, values trusted recommendations and efficiency but struggles with time and clunky online shops. Ron, a no-fuss retiree, wants clarity, simplicity, and straightforward product information, but gets frustrated by confusing platforms and unfamiliar brands. Together, their needs emphasize the importance of creating an online store that is trustworthy, easy to navigate, and personalized to different lifestyles.
How Might We?
To turn research insights into actionable design opportunities, I reframed user problems as “How Might We” questions. This approach opened up possibilities instead of narrowing in on solutions too early, helping me explore different ways to address user trust, ease of use, and personalization in the online shopping experience.
Problem #1
Users lack confidence in purchasing health and wellness products online unless recommended by a trusted provider.
HMW
How might we build trust by clearly showing products are endorsed by the chiropractor or clinic?
Problem #2
Users expect a shopping experience tailored to their individual health needs and routines.
HMW
How might we create a personalized shopping experience?
Problem #3
Users struggle with online shopping platforms that are difficult to navigate.
HMW
How might we design an online store that feels intuitive, visually clear, and easy to navigate?
Focusing on a Few Features
During interviews, almost every user mentioned a few key features they wanted: getting personal recommendations from their trusted provider, searching products by symptoms, seeing clear product details, and having a smooth, intuitive shopping experience. Because searching by symptom came up so often, I decided to include it in the user flow to see how it could fit naturally into the shopping journey.
User Flow
Based on research insights, I wanted to understand how users would navigate the Trillium Chiropractic online store from deciding what to buy to completing a purchase. Mapping the flow helped identify decision points, common paths, and opportunities to simplify the shopping experience.
Key Takeaways:
Decision points (diamonds) clearly show where users must make choices, like filtering products or confirming selections.
Users have multiple entry paths to the same product, highlighting the need for flexible navigation.
Opportunities identified include streamlining the “back to shopping” experience and improving filters to reduce friction for users who aren’t sure what they want.
Bringing Ideas to Life Design
With my research in hand, I dove into designing, quickly realizing there’s more to online shopping than meets the eye. Drawing inspiration from retailers like Crate and Barrel and Target, I learned that simple, thoughtful design can be surprisingly powerful.
Low-Fidelity Wireframes
I kicked things off by exploring other online shopping experiences to see what worked well and what didn’t. Then I grabbed a pen and started sketching, mapping out the flow from adding a product to the cart through checkout. Along the way, I made sure to include the little but important details—like back and cancel buttons, dropdowns, and filtering checkboxes—that make shopping feel intuitive. Since this was for a small business, I focused on keeping the experience simple and functional, without adding unnecessary bells and whistles.
High-Fidelity Wireframes
With Trillium Chiropractic’s colors and style as a guide, I was able to jump straight into high-fidelity wireframes, complete with fonts and branding elements. After testing my low-fi wireframes and confirming I was on the right track, it was time to bring the designs to life digitally. My detailed sketches translated smoothly into clean, simple hi-fi wireframes, creating an e-commerce experience tailored specifically for this small business.
Shop Landing Page
🔍 Filters & search: Quick ways to narrow options (by category, symptom, or product name).
↕️ Sorting: Options like price: low to high and best seller to match shopping habits.
🏷️ Product labels: “Our favorite” and “best seller” added based on user feedback.
🧭 Navigation clarity: Breadcrumbs and pagination to keep users oriented.
🎯 Overall goal: A clean, functional layout that balances user needs with business objectives.
Product Page
🍓 Clear options: Variants like flavors are highlighted to reduce errors.
🔄 Autoshipment: Added based on user feedback for recurring deliveries.
📖 Product details: Descriptions, directions, and reviews organized into expandable sections.
🛍️ Similar items: Keeps users in the flow by surfacing relevant alternatives.
🌟 Overall goal: Support different shopping preferences with a clear, adaptable layout.
Checkout Process
📊 Progress bar: Shows exactly which step the user is on.
🔙 Navigation: Clear options to go back to the cart or continue to payment.
🛒 Cart summary: Displays product images, variants, purchase type (one-time or autoship), and total cost.
🎟️ Discount codes: Field included based on user feedback for friend/family discounts.
✅ Overall goal: Reduce uncertainty and keep the checkout process simple and reassuring.
Time to Test! Testing
Online shopping can either feel effortless or incredibly frustrating depending on the experience. Through usability testing, I was able to see how my designs held up in practice. Overall, users found the flow clear and enjoyable, with only a few insights that led to meaningful iterations.
User Testing Overview
Goals
Evaluate how easily users can navigate the online shopping experience
Identify points in the user journey where confusion or navigation issues occur
Method
Conducted usability testing with 5 participants
Observed interactions on the shop landing, product page, and checkout screens
Overall Findings
Users loved:
Clear, simple layout; easy to navigate
Filters for fast product searching
Product badges (“Best Seller”) for quick recognition
Opportunities:
Move “Need a recommendation?” button higher for visibility
Add “Back to Results” button on product page
Extend product description section to full width
Making Iterations
During testing, 5/5 users missed the “Need a Recommendation?” button since it was buried near the bottom, often clicking Contact Us instead. Based on feedback, I moved the button just under the filters, making it more visible and easier to access in the shopping flow.
Users stated they wanted to see a clear “Back to Results” button rather than relying on their browser’s back arrow. This allows the user to confidently return to their search results without losing their place, breaking their flow, or risking reloading the page—a common frustration in online shopping.
User feedback suggested extending the description section to span the full width of the page. This change makes the layout cleaner, clearer, and more balanced, while also ensuring that users don’t overlook important product details.
Final Design in Action
Final Thoughts Wrap Up
Wrapping up this project, I’m grateful for the lessons learned and excited to carry these insights into future designs!
Reflections
Personal Growth & Learnings:
New territory: This project pushed me into ecommerce design for the first time, teaching me how many small details shape a smooth shopping experience.
Research focus: I learned how valuable it is to listen closely to users — especially when they’re passionate about something as universal as online shopping.
Figma & process confidence: Building features from scratch improved my technical skills and reminded me that it’s important to understand fundamentals, not just rely on templates.
Challenges:
Balancing scope in a short sprint — some “nice-to-have” pages didn’t make the cut.
Overcoming self-doubt when tackling a complex ecommerce flow from scratch.
Next Steps & Takeaways
Future application:
Use established ecommerce patterns as inspiration while tailoring for user needs.
Prioritize what to design based on time, scope, and user impact.
Keep scrappy testing methods in mind (e.g., grabbing quick feedback from real people in the moment).
For Trillium Chiropractic:
They will have access to my key research insights (symptom-based filters, “Need a recommendation?” feature, reviews still visible but secondary).
Deliverables like shop landing and product detail mockups can help guide future site updates..
Thanks for reading!
View other case studies
