Sephora
Sephora
A new experience to shop for luxury beauty products
A new experience to shop for luxury beauty products
Client
Personal project
My Role
Visual + Motion designer
Team
Just me!
Duration
3 weeks
Background
This was a project I did to redesign the visual aesthetic and interaction design of the popular online beauty marketplace Sephora.
I was inspired by the Artist page on Apple Music that shows all the music of a particular artist and wanted to create a similar experience on Sephora for beauty brands. Typically products are laid out by type (lipstick, blush, etc.) but I wanted to try something new by emphasizing the brand because Sephora prides itself in being a seller of premium brands.
Why redesign sephora?
As a long time user of Sephora, I felt that their digital presence didn't reflect the high-end platform that they advertise themselves to be.
Sephora is known for selling brands that are expensive, luxurious and exclusive. The mobile & desktop interfaces were quite bare and left me wanting to see more pops of colour that were reflective of the luxury brands that sell on it. I also saw potential to introduce motion design at various points on the app to uplift the user experience.
01 Defining a strategy
From the Sephora mission statement, I identified select phrases that conveyed the idea of Sephora as a brand and transformed these phrases into a strategy to inform the visual design aesthetic.
Carefully curated brands
Highlight the high-fashion brand campaigns and give a modern feel to the entire platform.
Every stroke, swipe and dab reveal possibility
Inviting enough to make users want to try things at Sephora. Include minimum negative white space and use colours that give a luxurious feel to the brand.
An unparalleled assortment of prestige products
Promote the exclusivity of products with a clean typeface & photography style.
02 Creating a moodboard
I made a moodboard to set the tone for the look & feel I was aiming for.
03 Mobile screens
I created an entire user journey that spanned screens such as the app loader, brand page, product detail and even a foundation quiz. I created the screens in Sketch and imported them into InVision Studio to add the motion design effects.
Play the video below to see the prototype I created! This was my first attempt at motion design, so pls excuse some of the glitchy parts
Individual screens
04 In-store kiosk
This was created keeping in mind those customers who come into the store for consultations with Sephora Beauty Advisors. Even though Sephora has a significant online presence, there are still customers who prefer to purchase only in-store and the new experience should extend to that segment as well. The kiosk allows checking-in to booked appointments or booking an appointment on-the-spot.
Designed in Sketch and prototyped in InVision.
Check-in to your session or book one on the spot
Select a time
Confirmation
05 Brand posters
I created posters in Photoshop to showcase the redesign. These could work as flyers, in-store on large displays or even in print-ads.
Reflection & conclusion
With this project, I learnt the role visual design plays in reflecting the mission and values of a brand. It is so important (and SO difficult) to spend time developing the visual design aesthetic to convey what the brand means to millions of users.
Another key takeaway from working on this project was motion design. While static design elements lay the foundation of the work, animation adds an extra dimension to make it a cohesive experience for users. This was my first ever attempt at motion design and it was difficult primarily because it involved having to think about specific areas where I could introduce it. I also had to learn how to work with tools like InVision Studio and used a variety of methods including GIFs, static positioning and parallax effect, among others.
If I could do it all over again..
- Conduct User Research: A combination of user interviews & usability testing would have led to better data-driven insights to create features that could take this redesign to a different level. It would also help pin-point where motion design would work better.
- Develop a Design System: Building one would add to the consistency of the visual design and create a more cohesive brand experience.
- Include Web: The website is also a large part of the Sephora experience and I would have liked to create a version in sync with the new brand guidelines.