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 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!
Hover boxes to discover information about my research process and my personas "Pixie" and "Nino".
Hover pain points in the top panels to discover the design solutions below.
How are my solutions relevant? What do they solve?
How do I know what my Users need?👀
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
Hover Pain Point to see
New Design Solutions.
Reset Button
Butter'ed Solutions
#3
#4
#5
#1
#2
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
Usability Testing & Persona Development
Preliminary Research Process
Persona #2 "Rising Connoisseur"
"
Meet Nino!
Informational Hierarchy for holistic beauty e-commerce brand, Butter'ed by Bri.com
User Testing & Prototyping
Preliminary Research Process
Usability Testing & Persona Development
Hover pain points in the top panel to discover the design solutions below.
How do I know my solutions work?
Pain Points
#1
Solution Screen Shot
Reset Button
Butter'ed Solutions
Hover boxes to discover information and learn about my research process..
How do I know what my Users need?
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.
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.