Buttered ~ Information Hiearchy
a navigation mock up for holistic beauty e-commerce brand,
Role
Sole UX/UI Design + Brand Designer, Primary Researcher
Timeline
2 months, Nov.-Dec 2024
Tools
Altas Ti, Figma, Canva, Affinity Designer. Adobe, Zoom Workspace
Product Brief: Buttered by Bri is a Black owned skincare company that sells all natural body products for men and women. The owner, Brianna Spears, started her business in February 2021 to help individuals with skin sensitivities and allergies, as she struggled with severe eczema and psoriasis as a child. Though buttered by bri.com has wonderful products, the site's main navigation is lacking second and third level navigation menus. Secondly, categories within the main navigation are repetitive. Lastly, there is no customer portal navigation for consumers to view there account information. This issues combined cause user confusion and encourage task abandonment.
Why I choose this site?: My inspiration stems from interest in e-commerce and small businesses. A life goal of mine is to help upcoming entrepreneurs with Web Design—I know starting out can be intimidating. I seek to make their dreams achievable.
Project Origins:I started this project for a course, whilst achieving my MS in HCI, at DePaul University. Afterwards, I continued research, design, iteration and created wireframes utilizing Figma, Adobe, and Canva for visuals.
Why does the UI matter?
Examine the pain point on the right and the following solution on the left to reflect on this question.
Pain Point #1
Navigation lacks efficiency—previous navigation led users to hundreds of product listings, lacking the granularity needed for regular shoppers.
Key Solution
I added a new tab, named
'Shop by Ingredient'
Here users can locate paths to products by a specific ingredient that the have in mind, such as peppermint.
Pain Point #2
The previous navigation is not designed for beginners who would not know the differences between holistic ingredients to make an informed purchase decision.
Key Solution
I added a 'New to Natural Category', where ingredients have their own section and index.
Here users have the chance to view the benefits of certain, possibly foreign or unknown ingredients to help them make informed decisions.
Pain Point #3
Despite the owner's insporation for skin care, there was no way to shop for products specifically helpful for skin conditions such as Eczema, Psoriasis, etc.
Key Solution
This feature empowers users to take control of their care journey by allowing them to filter and view product listings based entirely on the specific skin conditions they are actively managing, via the new 'Skin Conditions' tab.
Pain Point #4
Product titles sound too similar for example, titles such as "Butter, vs, Oil, vs Balm". Use cases are only obvious to familiar or expert shoppers.
Key Solution
The 'New to Natural' tab helps educate users by breaking down the nuances between common, similar-sounding products, empowering them to make informed decisions—with more insight.
How do I know what my users need?
Examine the pain point on the right and the following solution on the left to reflect on this question.
Methods Used: Content Inventory, Competitor Reviews, Literature Review
Takeaways
User research revealed that the existing information architecture was repetitive and inefficient, plagued by overlapping categories and disconnected sections. Additionally, the 'Men’s' category created an unnecessary silo, duplicating products that were already easily accessible under broader, more inclusive classifications.
Preliminary Process
Methods Used: Tree Testing, Card Sort Testing, Results Coding, Iterative Testing Rounds, Affinity Mapping, Insight Clustering, Results Analysis, Personas
Takeaways
Card sorting and tree testing revealed that users rely heavily on familiar terminology to categorize items, particularly when product titles lack clear usage cues. Additionally, qualitative feedback highlighted a strong user preference for explicit clarity regarding holistic use cases and product benefits
Interviews & Persona Decvelopment
Examine personas, Pixie and Nino to discover important user perspectives that shaped the product.
Persona #1 "Hopeless Seasonal Scratcher"
Meet Pixie!🧚
Meet Nino!
Persona #2 "Rising Connoisseur"
Methods Used: Persona Scenarios, Low-High Fidelity Prototyping, Usability Testing, Interview Coding & Analysis.
Takeaways
I learned how to design navigation that maintains simplicity without sacrificing depth. By limiting the main menu to two visible layers, I reduced visual clutter while still encouraging exploration.
Furthermore, structuring content by user knowledge level—creating distinct pathways for both novices and experts—established clearer entry points and significantly accelerated navigations for the brand's target personas.
User Testing & Prototyping
Introducing specialized educational pathways and filtering by skin condition reduced the product discovery bounce rate by 22%.
Increased direct success rate by 31% by Round 3, validating that the refined category labels matched user mental models
By flattening the main menu to two visible layers and removing redundant categories, the average time required to locate a specific product decreased by 35%.
Final Metrics