Informational Hierarchy for holistic beauty e-commerce brand, Butter'ed by Bri.com
Information Hierarchy Breakdown
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 did 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 Origin: I started this project for a course, whilst achieving my MS in HCI. Afterwards, I continued research, design, iteration and created wireframes.
How do I know what my Users need?
How are my solutions relevant? What difference do they make?
Pain Points
#1
#2
#3
#4
#5
Butter'ed Solutions
Hover Pain Point to see
New Nav. Solutions below
Reset Button
Hover Pain Points on the left panel to discover the Design Solutions in the corresponding right panel.
Preliminary Research Process
Usability Testing & Persona Development
User Testing & Prototyping
All Research and Design Methods: Content Inventory, Competitor Reviews, Literature Review, Tree Testing, Card Sort Testing, Results Coding, Iterative Testing Rounds, Affinity Mapping, Insight Clustering, Results Analysis, Low-High Fidelity Prototyping, Usability Testing, Interview Coding & Analysis.
Persona #1 "Hopeless Seasonal Scratcher"
Meet Pixie
Persona #2 "Rising Connoisseur"
"
Meet Nino!
Hover boxes to discover my thought process throughout each phase of research and design. Do the same to learn more about Pixie & Nino—click to see more info about them!
Informational Hierarchy for holistic beauty e-commerce brand, Butter'ed by Bri.com
Information Hierarchy Breakdown
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 did 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 Origin: I started this project for a course, whilst achieving my MS in HCI. Afterwards, I continued research, design, iteration and created wireframes.
How do I know what my Users need?
How do I know what my Users need?
How are my solutions relevant? What difference do they make?
How are my solutions relevant? What difference do they make?
Pain Points
#1
#2
#3
#4
#5
Butter'ed Solutions
Hover Pain Point to see
New Nav. Solutions below
Reset Button
Pain Points
#1
#2
#3
#4
#5
Butter'ed Solutions
Hover Pain Point to see
New Nav. Solutions below
Reset Button
Hover Pain Points on the left panel to discover the Design Solutions in the corresponding right panel.
Preliminary Research Process
Usability Testing & Persona Development
User Testing & Prototyping
All Research and Design Methods: Content Inventory, Competitor Reviews, Literature Review, Tree Testing, Card Sort Testing, Results Coding, Iterative Testing Rounds, Affinity Mapping, Insight Clustering, Results Analysis, Low-High Fidelity Prototyping, Usability Testing, Interview Coding & Analysis.
Persona #1 "Hopeless Seasonal Scratcher"
Meet Pixie
Persona #2 "Rising Connoisseur"
"
Meet Nino!
Preliminary Research Process
Usability Testing & Persona Development
User Testing & Prototyping
All Research and Design Methods: Content Inventory, Competitor Reviews, Literature Review, Tree Testing, Card Sort Testing, Results Coding, Iterative Testing Rounds, Affinity Mapping, Insight Clustering, Results Analysis, Low-High Fidelity Prototyping, Usability Testing, Interview Coding & Analysis.
Persona #1 "Hopeless Seasonal Scratcher"
Meet Pixie
Persona #2 "Rising Connoisseur"
"
Meet Nino!
Hover boxes to discover my thought process throughout each phase of research and design. Do the same to learn more about Pixie & Nino—click to see more info about them!
Hover tabs to discover information about my research process.
How do I know what my users need?
How do I know what my users need?
Research
Testing
Prototyping
Personas
Content Inventory
UX Research
Competitor Reviews
Literature Review
Methods used
The content inventory and competitor review revealed that the “Buttered for Men” category is repetitive and gender-biased, excluding women and non-binary users while largely duplicating "beard"-care products found elsewhere.
The main navigation is inefficient, separating similar face and body items into multiple tabs and creating unnecessary length, while new categories on the homepage (Home Care, Makeup, Seasonal) are not included in the main menu or accessible from other pages.
Takeaways
Research
Testing
Prototyping
Personas
Content Inventory
UX Research
Competitor Reviews
Literature Review
Methods used
The content inventory and competitor review revealed that the “Buttered for Men” category is repetitive and gender-biased, excluding women and non-binary users while largely duplicating "beard"-care products found elsewhere.
The main navigation is inefficient, separating similar face and body items into multiple tabs and creating unnecessary length, while new categories on the homepage (Home Care, Makeup, Seasonal) are not included in the main menu or accessible from other pages.
Takeaways
Pain Points
#1
Solution Screen Shot
Reset Button
Butter'ed Solutions
Pain Points
#1
Solution Screen Shot
Reset Button
Butter'ed Solutions
Hover pain points in the top panel to discover the design solutions below.
Full Prototype
Click Around!
View Old Navigation
View Old Navigation
Project Origin: I started this project for a course, whilst achieving my MS in HCI. Afterwards, I continued research, design, iteration and created wireframes.
Why did 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.
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.
Information Hierarchy Breakdown
Informational Hierarchy for holistic beauty e-commerce brand, Butter'ed by Bri.com
Why do Learner Systems need UX?
Informational Hierarchy for holistic beauty e-commerce brand, Butter'ed by Bri.com
Research
Testing
Prototyping
Personas
Content Inventory
UX Research
Competitor Reviews
Literature Review
Methods used
The content inventory and competitor review revealed that the “Buttered for Men” category is repetitive and gender-biased, excluding women and non-binary users while largely duplicating "beard"-care products found elsewhere.
The main navigation is inefficient, separating similar face and body items into multiple tabs and creating unnecessary length, while new categories on the homepage (Home Care, Makeup, Seasonal) are not included in the main menu or accessible from other pages.
Takeaways
Research
Testing
Prototyping
Personas
Content Inventory
UX Research
Competitor Reviews
Literature Review
Methods used
The content inventory and competitor review revealed that the “Buttered for Men” category is repetitive and gender-biased, excluding women and non-binary users while largely duplicating "beard"-care products found elsewhere.
The main navigation is inefficient, separating similar face and body items into multiple tabs and creating unnecessary length, while new categories on the homepage (Home Care, Makeup, Seasonal) are not included in the main menu or accessible from other pages.
Takeaways
Hover pain points in the top panel to discover the design solutions below.
How do I know what my users need?
Pain Points
#1
Solution Screen Shot
Reset Button
Butter'ed Solutions
Pain Points
#1
Solution Screen Shot
Reset Button
Butter'ed Solutions
Hover pain points in the top panel to discover the design solutions below.
Why do Learner Systems need UX?
Explore!
Full Prototype
Information Hierarchy Breakdown
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.
Project Origin: I started this project for a course, whilst achieving my MS in HCI. Afterwards, I continued research, design, iteration and created wireframes.
Why did 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.