Buttered by Bri Site Redesign
Info Architecture
Role
Sole UX Researcher
3 months
Timeline
Tools
Figma, Optimal Workshop,
Canva
This project came about as a term assignment for a research course at DePaul University, with Professor Danyell Jones. Working solo, I completed a Content Inventory and various rounds of Tree Testing and Card Testing for a beauty e-commerce site known as Buttered By Bri.com.
Brief
Problem
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.
Complete Redesign of Main Naviagtion
Create a Final Site Map, Tailored to Personas
Creation of Sub Level and Third Level Navigation
Goals
Content Inventory
Repetitive Issues
Whilst reviewing the site, I found the site structure to be repetitive and inconsistent in multiple ways. Below are specifics.
Within the "Buttered for Men" category, other than a few beard-care products, many listings from other categories repeat. This category is also gender biased, through exclusion of bearded customers who are women or non-binary individuals.
Within the Main Navigation Menu there are three tabs: "Body Balms", "Scrubs" and "Oils" which can be classified as Face or Body products. This separation wastes space and makes the Main Nav too long. (See picture below)
On the Home Page, I discovered the links to three new sections: Home Care, MakeUp & Seasonal. These categories were not listed within Main Navigation and aren't accessible within other pages. (See picture below)
Missing main navigation categories
Swipe left or press right arrow key to view, persona #1 The Know it All
Persona Take #1
Swipe left or press right arrow key to view, persona #2 The Clueless Newbie
Persona Take #2
Round #1
Round #2 Results & takeaways
Round #1 Resutls & Takeaways
My first plan for the Main Navigation was to broaden it and include paths tailored for novice and expert shopper needs. For Novice Shoppers, I included a category entitled "Skin Care 101", in which users can be directed to an educational experience.
For Expert Shoppers, I created a category entitled "Ingredients". This way shoppers can easily view products by specific ingredients. Other minor changes include a way to shop per skin condition via the "Skin Condition" tab, the exclusion of the Men's section, and additional "Home", "Makeup" and "Seasonal" paths.
Main Navigation
About Us
Profile
Skin Care 101
Body & Face
Skin Conditions
Ingredients
Make Up
Home Care
Seasonal
NEW Navigation
My Account
New to Skin Care?
Shop by Ingredients
Skin Conditions
Face and Body
Seasonal
More Departments
About Us
insights
Immediate
Actions
Community Engagement
Proactive
measures
Effective Communication
Tech Solutions
Hover to learn more about each theme in regard to pet recovery from Round #2
interviewS Round #2
Based off of Round 1, we interviewed 8 adults (5 women, 3 men) aged 24 to 63, focusing on our 5 themes. Data was collected via video conferencing and recorded for processing. Zoom recordings helped us transcribe and identify topic frequencies using Atlas. Ti. We organized data with a Codebook, informing our feature matrix and personas.
Hover to learn more about each theme discovered
Over 50% confused "about us" and "profile" cards.
70% put "make up" cards under the "face & body category
Over 70% misplaced "face & body" cards under "Skin care 101"
Over 50% were not sure where to put "ingredient" sub nav. cards i.e "herbs"
My Account
About Us
Based on Round 1 results I made 5 changes above.
Changes
#1 "Profile" to "My Account"
#3 "Skin Care 101" to "New to Skin Care?"
#2 "Ingredients" to "Shop by Ingredients"
#4 "Makeup" sub nav cards were all eliminated
#5 "Makeup" and "Home Care" were consolidated under "More
Departments" section
The changes resulted in a higher percentage of correct placements amongst participants. 75 percent of the areas of concern improved significantly.
All participants incorrectly placed the "Make Up"card under "Body & Face" vs "More Departments". However, I realized that users were completely right in this assumption — it is the ideal placement.
6 participants
33 Cards
9 Categories
100% incorrectly placed the "makeup" card under "body & face" vs "more departments"
Hover to view more about this insight
Card Sort
8 participants
34 Cards
10 Catergories
Round #1 Resutls & Takeaways
Round #2 Resutls & Takeaways
My goals for Tree Testing were to test the Sub Navigation, based on the New Main Navigation from the second round of Card Sorting. For reference, I staggered the Card and Tree Tests in efforts to maximize the limited timeline. I surveyed participants within the Expert and Beginner personas regarding the "New to Skin Care?" and "Shop by Ingredients" UI paths.
insights
Immediate
Actions
Community Engagement
Proactive
measures
Effective Communication
Tech Solutions
Hover to learn more about each theme in regard to pet recovery from Round #2
interviewS Round #2
Based off of Round 1, we interviewed 8 adults (5 women, 3 men) aged 24 to 63, focusing on our 5 themes. Data was collected via video conferencing and recorded for processing. Zoom recordings helped us transcribe and identify topic frequencies using Atlas. Ti. We organized data with a Codebook, informing our feature matrix and personas.
Hover to learn more about each theme discovered
Under "New to skin care?"
none were able to learn more about ingredients
none associated "make up" with "more departments". all placed it under "body & face"
80% found products with specific ingredients via "shop by ingredients"
My Account
About Us
main navigation
Seasonal
Home Care
About Us
Tree testing
Final Navigation
5 participants
6 questions
Changes
#1 Rephrased all questions to be more concise & unique
#2 Dissolved "More Departments"
#3 Changed "New to Skin Care?" to "New to All Natural?"
#4 Listed "Makeup" Section under "Body & Face" category
Based on Tree Testing and the final round of Card Testing
this round had significant success. On average, participants scored 87%.
insights
Immediate
Actions
Community Engagement
Proactive
measures
Effective Communication
Tech Solutions
Hover to learn more about each theme in regard to pet recovery from Round #2
interviewS Round #2
Based off of Round 1, we interviewed 8 adults (5 women, 3 men) aged 24 to 63, focusing on our 5 themes. Data was collected via video conferencing and recorded for processing. Zoom recordings helped us transcribe and identify topic frequencies using Atlas. Ti. We organized data with a Codebook, informing our feature matrix and personas.
Site map
Swipe and Zoom in to view
Next Steps…
This project was a huge undertaking. If I had more time, I would have revamped the project using complex softwares that I am now comfortable with, such as Canva, Figma, or Affinity Design. In addition, I would have conducted more User Testing, focusing on interviews and preliminary research with the company founder, Briana Spears. Lastly, I think the project could benefit from more personas and user perspectives.
Hover over each point to see what I will tackle next time!
