Health & Beauty

E-commerce Web Design

Introduction

The beauty industry is constantly evolving and taking more and more place in our everyday lives. We are trying to take better care of our skin and our appearance, but for some of us it comes with a cost. Being exposed to some ingredients can, with time, develop allergies. For some, the sensitivities have even been there since day one.

That’s why Health & Beauty was created, to help those people find makeup, skin care, or hair products that work for them. No need to read labels for hours to find something that works. Health & Beauty takes your needs into consideration and offers you the guarantee of effective shopping.

Process

Research
 

Competitive Analysis
1:1 Interviews
User Persona
Empathy Map

Information Architecture

Site Map
User Flow

Interaction Design

Sketches
Low-Fi Wireframes
High-Fi Wireframes
Prototyping
User Testing

UI Design
 

Logo
Style Tile
UI Kit

Research Insights

After doing a competitive analysis and conducting 1:1 interviews with potential users, I received confirmation that more and more people are either suffering from allergies to beauty products and/or are mindful of what they use on a day-to-day basis.

Unfortunately, the beauty industry doesn’t really offer a solution to this issue, so here are my solutions:

  • Personalization: Once signed in, the user gets a very personalized experience with the ability to build a profile (skin type, hair type, allergies, etc.).
  • Filters: Creation of an extended filtering section which allows the user to filter out products he might be allergic to.
  • Recommendations: A section helping the user find products/routines that are safe for him.
Visuals

Moodboard

Color Palette

#000000
#FFFFFF
#979797
#F6F6F6
#FF588E
#BD466D

Buttons & Interactions

Normal

Button text: Avenir Next
Demi Bold 14px
#000000

Fill #FFFFFF
Opacity 100%
Border #000000

Fill #FF588E
Opacity 100%
No border

Hover

Button text: Avenir Next
Demi Bold 14px
#000000

Fill #FF588E
Opacity 100%
Border #000000

Fill #BD466D
Opacity 100%
No border

Pressed

Button text: Avenir Next
Demi Bold 14px
#000000

Fill #FF588E
Opacity 100%
No border

Disabled

Button text: Avenir Next
Demi Bold 14px
#979797

Fill #E2E2E2
Opacity 100%
Border #979797

Wireframes
Customer Journey Map

A user wants to purchase a new lipstick that is alcohol, fragrance, methychloroisothiazolinone, and sulfites free.

Final Design
View live prototype
Conclusion & Next Steps

Usability tests were conducted with the final designs, and users were able to complete the task given with a 100% error-free rate.

This project was a big project for me. Dealing with allergies myself, this is a website concept I would find very valuable. The research part about allergies related to beauty products was extremely interesting, and understanding how I could make shopping for products easier for people was very valuable.

With more time to work on this project, I would love to take it even further. I would focus on creating the missing pages and do more user testing to create the best shopping experience possible.

Back to my work