COVID-19 has transformed the experience of shopping like everything else. While e-commerce or online shopping is not a new phenomenon by any means, the inability to go into a store and find a product that fits your needs and matches and complements your personality and physical appearance is certainly an impediment in many ways. One of the
One Week (7 days)
one (wo)Man Army
Figma, Flaticon, Material Design, Canva, Pinterest
The experience of shopping for cosmetics (skincare, haircare, and make-up) differs significantly from shopping for other products like accessories, clothes, and footwear both online and in-store. And this is so because when shopping for cosmetics, buyers think beyond just personal style and identity and consider features like skin concerns, sensitivity, hair and skin type, color, under-tone, health, etc. In-store shopping is an experience in itself and it has several benefits when it comes to shopping for cosmetics, like:
The social experience of a Beauty Counter, Expert help, and retail therapy.
The instant gratification of receiving the product immediately.
The ability to test and try the products before making the purchase.
Being able to connect with the brand and the products on a personal level.
Exploring the experience of shopping for cosmetics online, I discovered the following problems to be particularly pressing relevant and to a larger user base:
1. Building trust with the customers or buyers while they shop online for cosmetics products
Americans spend more than $12 billion per year on beauty and personal care products on the internet, according to global measurement company Nielsen. One of the major factors negatively affecting the cosmetics shopping experience online is the fear of buying and investing in counterfeit products. According to CBS News and the US Customs and Border Protection, counterfeit products cost the cosmetic industry around $75 million on a yearly basis.
2. Showing customers how well the products work without being able to test them for themselves.
3. Teaching customers how to use the products to demonstrate the effectiveness and keep customers coming back.
An interesting study analyzed the shopping behavior buyers in European countries exhibit when shopping for cosmetics products online by considering various factors which are popularly cited by users as "concerns" across the world. A significant bias that exists in the study is that it focuses on only the women buyers in the European countries. A feature that is particularly popular among the buyers while shopping online is User Generated Content and Ratings & Reviews.
Which of these features do you think are the most crucial to have a good experience when buying cosmetics online?
When llooking at images or photos of cosmetics products online, which of these aspects do you need to help you make your purchase decision easier?
How do we design a user-centred accessible online shopping experience for cosmetic product buyers and use it to help buyers make an informed purchase that they are satisfied with?
Following the 5-day sprint process introduced by Jake Knapp in his book Sprint, I ideated and created the design screens for the mobile app prototype.
Before starting the design ideation, I conducted a competitor audit to see what is being done in the space of online cosmetics shopping and get an industry-based perspective on problems and gaps.
Amazon partnered with L'oreal to use their Augmented Reality feature (developed by Modiface) to allow customers to virtually try on different shades of makeup, like lipstick while shopping online.
I started the ideation process by defining a long-term goal I had envisioned and coming up with some sprint questions.
With the long-term goal set & some sprint questions on the board, I created a high-level user map that defines their overall online shopping experience.
A very high-level user story map created to understand basic flow of the app from user perspective
Studying the research & user flow, I came up with some questions to probe the problem space more objectively.
With the problem-space understood and explored to some extent from a user and industry perspective, I delved into coming up with some ideas and solutions for the product with the user in mind. Instead of tackling and ideating for all the solutions at once, I decided to focus on some specific aspects of the user experience and carry those forward for the final design. Because I was working on the project alone, I made the decision based on the competitor audit and the secondary research which I have used as a reflection of what already exists in the market space and to what extent have they been conceptualized and implemented.
I used the Crazy 8's technique to come up with some quick design sketches and then in the end compiled all my ideas as a story. On the right is a snapshot of one of the Crazy 8's exercises where I ideated around matching makeup products to skin color and undertone.
The user-facing features and functionalities I had decided to focus upon for the purpose of this project are as follows:
A home page that sets the tone for an accessible, trustworthy, and simplistic user experience supporting users in making informed decisions for long-term satisfaction and relationship building.
Emulating one of the greatest assets of in-store experience - the coveted Beauty Counter to provide assistance for buyers of all types, ages, and experience in making shopping decisions.
Combining the best of both worlds - technology and personal real-time experience to provide a personalized experience of finding the right product fit for everyone.
Creating some idea sketches gave me clarity on how to proceed and I decided to trace back my steps to the user workflow created earlier in the design ideation process and update it to create a more detailed workflow that touches upon the 3 user-facing features mentioned above.
The user flow depicted above is just one of the many drafts I created and kept updating. These iterations of the step-by-step user-focused workflow shed more light on the more intricate functional aspects to be included as a part of each feature, so I created a storyboard detailing each feature.
Over the course of past few days while I was trying to understand the problem space and ideating for the solution I creating a mood-board to gather some inspiration for the final design screens.
I created some wireframes in Figma using elements from a published mobile wireframing kit to get myself started with the design process.