Lush Cosmetics Webpage - Redesign
My goal for this project is to design a solution to help increase conversion rates and referrals.
Lush Cosmetics, created in 1995, is an ethical skincare and beauty brand.
Lush has always been at the forefront of innovative products. They stand by only using natural ingredients and banning any animal testing.
The shopping experience has changed dramatically throughout the past 2 years.
We once would relish the days when we would set up a whole day to go shopping now within 2 minutes, we can make a purchase.
Shoppers are now fast pace decision-makers with no time to spare.
A shift in the shopping climate means that everyone who would usually come into the shops now orders for home delivery.
After covid, employers realised how to adapt their work environment by creating remote working. This then increases the likelihood of customers ordering online.
"When you walk into any of their department stores you get hit with all these beautiful smells and amazing visual merchandising. You’re also immediately greeted with a smile and a warm welcome. You truly feel like you're a family member when you walk into the store."
Competitor Research
Qualitative User Interviews
- How much time do you typically spend on the website?
I spend about 10 mins on the website checking out the products. I know what I like.
- What do you like about how you currently make a purchase on the site?
I like the website it is fairly easy to navigate to the products I like.
- What is the biggest pain point?
The biggest pain point is if the site crashes !!
- How much time do you typically spend on the website?
Around 20 mins
- What do you like about how you currently make a purchase on the site?
I really like the way the Products are described. I know exactly what ingredients are being used.
- What is the biggest pain point?
There isn’t really one!
- How much time do you typically spend on the website?
I would say on a day I want to just have a look probably 20 mins. But I usually know what I want to buy, so around 10 mins.
- What do you like about how you currently make a purchase on the site?
I like the easy navigation of products. The way they show best sellers etc. Makes it a lot easier to find what I’m after.
- What is the biggest pain point?
Not so much a pain point but I feel as if the website is missing something to give it a wow factor.
- How much time do you typically spend on the website?
Between 10-20 mins
- What do you like about how you currently make a purchase on the site?
I like how quick and easy it is.
- What is the biggest pain point?
Nothing i think the site is fine.
Quantitative User Research
Key Findings
- The users like the way the website was able to work in a quick and easy way.
- They really liked the easy navigation around the site. They could find best sellers etc very quickly.
- They also found the product descriptions to be very helpful.
Information Architecture
Ideation
Low Fidelity Wireframe
My first initial sketch ideas used information gathered from user research.
Things that I needed to consider whilst doing my initial designs;
The driving force will be keeping the branding colours the same.
Adding photography and images.
Mid Fidelity Wireframe
From my initial low-fidelity sketches I drew up these mid-fidelity wireframes on Figma.
I used a 4 x 12 grid system to base my designs to ensure consistency throughout my designs.
I tried out two different variations for each design segment because I wanted to give these options to my users to test and find out which ones they prefer.
Whilst creating these designs I used the ideas of Jacobs’s law (users prefer to use sites that are similar to other sites) so I based some of the designs on sites I’ve already visited.
High Fidelity Wireframes
This is the design stage where things like images and colours come into play. It then really starts to feel like your ideas come to life. It is important to consider certain areas whilst in this design stage. Some of these are as followed;
Does this adhere to the accessibility checklist?
Does this still represent the brand?
Is this designed in a way that works with UX laws etc, Jakob’s Law?
Lush Cosmetics Webpage Prototype
User Testing Interviews
What do you think of the Redesign of the Lush website?
I really like the white background I think it really helps put all the attention on the wonderful products.
Can you see yourself ever using this product?
Yes, it’s very easy to navigate.
Was there anything surprising or unexpected about this product?
I loved the animation. Thought that was fun.
Was there anything missing from this product that you expected?
Don’t think so!
What do you think of the Redesign of the Lush website?
I like how simple it looks. It looks very clean.
Can you see yourself ever using this product?
Yes! it looks easy to navigate.
Was there anything surprising or unexpected about this product?
Nothing surprising. It feels like its Lush website!
Was there anything missing from this product that you expected?
I would have liked to have seen the basket page and how to navigate that.
Key Findings
- The users like the way the website was simple and easy to navigate.
- They really liked the animation on the landing page
- They also made a comment that it ‘felt like a lush website’ to me this is upholding banding identity.
- They wanted more details with further pages to see how they would navigate that.
- They also like the white background as it then put all the attention onto the product.
Accessibility Testing
It’s really important to follow the accessibility checklist to ensure all areas have been considered whilst making a design. Because of this checklist, I went back through my designs and made some changes.
Some of the changes I made are having my clickable headers unlined and I made sure that there is a suitable box that hoovers around the item to show you that it is a clickable link.
I ran the website’s main colours through the adobe contrast checker to see if the site would be accessible for people with certain disabilities. The results i found were pretty good as all parts passed the test!
Final Designs
I took screenshots of Lush’s Logo and their own tailored font.
Other than those two fonts they mainly use Helvetica at a regular weight and around the 16px minimum as per the accessibility checklist.
I added the arrows as I think they really showcase the brand’s style.
The colour system used is mainly between two colours black and white. I wanted to keep it simple and wanted the products to be the colour! I think this helped with the user testing as they preferred the simple use of colours.
Aesthetic- Usability Effect
Users often perceive aesthetically pleasing design as a design that’s more usable.
When doing user interviews one of the users said that one of their pain points was when the site crashes. With this in mind, I tried to keep to the UX law of the Aesthetic Usability Effect as surveys have shown that People are more tolerant of minor usability issues when the design of a product or service is aesthetically pleasing.
Jakobs Law
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
When doing user research a lot of the results gave me the indication that they really liked the site as it was. So I decided to keep a lot of things the same. This also works with Jakob’s Law. When making changes, minimise discord by empowering users to continue using a familiar version for a limited time
Final Thoughts
My final thoughts on this project are… that the work is never done!
There is so much more I’d like to explore with the brand. I would quite like to expand the animation features throughout the site and not just on the landing page.
Animation and motion graphics spark such a good reaction with users I feel it would really work with the brand in leveraging their potential income and making it an unforgettable experience when shopping online.
Another area I want to go into more detail would be the user flow. I believe I just scratched the surface with my design.
Project work- Kimberly Hill
Photographs- https://www.lush.com/uk/en
Illustrations- Kimberly Hill