Redesign an e-commerce website for a French organic skincare brand — Source de Provence
In order to keep practicing my UI skills after bootcamp, I’m consistently looking for interesting projects to work on. One of my fellow designer reached out to me and asked if I’m interested in working together to redesign a responsive website for a natural skincare brand called “Source de Provence”, she sent me the link of their actual website and the minute I opened it I told her ‘I’m in!’.
I cannot say that I know this brand very well but I do have some positive impressions on its image. I’ve this feeling that it comes from the south of France and all of the products are organic and natural. But unfortunately its website doesn’t show the same high standard as the brand itself. It’s really a pity that through the digital presence it’s not glamorizing the brand but in some way it harms the image. As a designer, it’s always my pleasure to help improve the performance and the aesthetics of a digital product. My goal is to help the brand get into a win-win situation through our work:
The customers could have a better and more accurate understanding of the brand’s visions through the new website. Once they’re convinced by the brand and its products, the brand will have more clients and will be able to provide more and more products with good qualities.
Project goal & requirements
We then had a kick off meeting with the stakeholder, what he wanted from us was really simple:
to redesign the website in using their existed graphic chart and colours, the website should reflect the high standard of the brand’s visions and ambiance.
Also we’ve got one interesting information from this meeting is that there’s a new boutique is under construction and the stakeholder really like the design of this boutique. He wanted us to use some design elements from this new shop.
We (2 UX designers ) set the design sprint for 1 week and we’ll focus more on the UI part for this project.
Market Research
We began with a market research on the different range of natural / bio / organic skincare brands, according to their range and products specificities we divided them into different categories on this positioning map.
SDP (Source de Provence) is natural and high range compare to the other competitors. Its ideal position should be somewhere between Trudon & Byredo once clients are more convinced by its value and price.
We also did an audit on the other competitors’ websites and there isn’t many differences except for chat box or expert advices.
As for branding comparison, here’s a brief analysis of these skincare brands.
Problem Statement of the users
To empathise with SDP’s current users, we dug into its actual social media platform to see what reviews did users give. Then we categorised these reviews into 3 groups : brand, product, website.
With all the collected information from the target users, we transformed it into this problem statement:
Skincare Users need to find a way to understand both the brand’s eco-system vision and the value of organic ingredients made in Provence because users are not convinced by the price and they don’t know much about the quality.
Moscow Method
To solve the users problems of not knowing the brand’s vision and the value of organic ingredients made in Provence, we decided that there should be more content and photos about brand ambiance and history on the website.
Also it could have a chat box, or some kind of personnalisation service.
Sitemap
With the help of Moscow method, we then created this sitemap. As this is a premium brand, we wanted it to be minimalist and straight-forward.
According to its products, there’ll be 5 main categories: fragrances, skincare, collection by scent, gifts and the SDP universe. On the nav menu, there’ll be 3 icons: search, login and cart.
Low-fi sketches
For the homepage, we decided to use the picture of the new shop.
Mid-fi wireframes
On each page, we added this “where are they from?” content to provide SDP’s natural organic ambiance. The arcade shape of the ambiance image was inspired by the interior design of the Parisian new boutique. Users can also go to the SDP universe to get more information about the brand and its ingredients.
On the product page, we used some icons on the right of the image so that users will directly have an idea about the use of the product.
Visual Competitive Analysis
After we finished the mid-fi wireframes, we then conducted an visual competitive analysis on Acqua di Parma and Darphin.
Moodboard
For SDP, as its ingredients are 99% natural come from Provence, we came up with a brand attribut of Pure, Natural, Organic, Provence, Premium. The moodboard shows the the southern France, the source water, nature and Versaillaise architecture.
Colours
For the colour palette, we chose the colours from their graphic chart and logo.
Style Guide
By atomic design, we created this style guide with all the icons / buttons and the templates we designed for our hi-fi version.
High-fi prototypes
Here we are, finally our high-fi prototypes!
Takeaways & Next Steps
My biggest takeaway from this project is that do not start to make components before high-fi! We made lots of components on mid-fi already and then we realised if we continue to use the same for high-fi our mid-fi would be gone…Anyway, as we did many modifications on high-fi, some groups were not duplicated from the original component anymore so it became a total mess. It could really make our life easier if we used component in a smarter way.
For the next step, it’ll need to replace the pictures with good quality pictures from the stakeholder and also to input text contents for the brand ambiance part. Then, to upload all the products they sell with the correct price on the website. Last but not the least, to collaborate with web devs to make the website come to life!
