SHEIN
REDESIGN

What is Shein.com?

SHEIN AUGUST 2022 HOMEPAGE

SHEIN is an online eCommerce store founded in 2008, which has an annual revenue of a 16billion USD. The company sells women, men's, children's and home products.

SHEIN uses a "fast fashion" business model in which fashion trends are identified and replicated in a short space of time.

TARGET AUDIENCE

Parents with children under the age of 15

Females aged between 12 – 21

Project Overview:

BRIEF:

To solve users issue by redesigning “SHEIN.CO.UK"

ROLE:

UX Designer, UI Designer, UX Researcher

METHOD:

The Double Diamond Method

PROJECT DURATION:

3 Weeks. 1 week of research + 2 weeks of design

TOOLS:

Figma, Canva, Freehand

DELIVERABLES:

3 mobile apps and desktop screens.

My process

Discover

What is the problem?

Define

What are the needs of my user?

Develop

How many ideas can I think of ?

Deliver

What is my final solution ?

Why are users having issues with SHEIN.com?

Discover: Finding the problem

Step 1 : Conduct user research

Within the discovery step of my process, I decided to conduct an online questionnaire.

As this was a case study, my user pool was limited to those willing to take the questionnaire from social media. If this project was real, I would hope to have a larger pool of candidates to take the survey. To reduce bias (as I knew many of the respondents), I ensured the survey was anonymous, refrained from leading questions and used neutral words.

I aimed to collect data which displayed the user's experience on SHEIN.COM and other e-commerce which were their competitors.

Below are the findings from a few questions within my questionnaire:

Q1 :What is your first action when using an Ecommerce store?

Q6: When browsing products, what are the most important factors for you? Select 1–3 options.

Q8: If you answered yes, is there anything that frustrates you when shopping on the SHEIN.COM website?

" Too many options and looks messy"

"Amount of photos per items, it's confusing"

"The constant pop-ups"

"The amount of discounts"

"Too many options"

- 5/25 Respondants

Q10: Is there anything you would change to improve SHEIN.COM?

"The Layout"

"Clearer search names"

"Reduce flashiness and pop-ups"

"Mute the colours"

"The colours of the webiste"

"The order, it's messy"

- 6/25 Respondants

Conclusion:

SHEIN is seen as messy and confusing
SHEIN have too many options to browse through
The discount/voucher pop-ups are distracting
Most users browse through the category tabs first
"Filter by" and "Product Reviews" are the most important factors

The Problem:

Users reported that the homepage of SHEIN felt like a large ad—filled with visual clutter and lacking organisation. I, therefore, did my own browsing of the website to pinpoint the issue which had arisen.

Header:

Cluttered with many call to action features.

Category and sub-categories are displayed at the same time.

Discounts:

Scattered over the website. There isnt a designated place in which all discounts are collated.

Copy:

Fonts, buttons and graphics lack brand identity

Overall:

It's a visual mess. Too many colours,graphics, fonts and themes.

Call to Action:

At the top and bottom of the page.

SHEIN's Homepage August 2022

The Goal:

Define: What are all the needs of my user?

To simplify SHEIN.COM with a clean-cut redesign to improve clarity and functionality. A focus on search options which need to be displayed to create easy navigation.

Step 2: Competitor Analysis

I decided to conduct a competitor analysis to find any features that SHEIN lacked.

I chose "Prettylittlething.com" and "Boohoo.com" as direct competitors as they have the same target audience as SHEIN.COM.

I chose "Bershka.com" as my indirect competitor since they're also a popular eCommerce site, despite having a different target audience.

Competitor Analysis Findings:

SHEIN lacked brand identity. I wasn't able to say "that (X) is what SHEIN is about"

SHEIN was promoting too many fashion lines at once.BOOHOO/PRETTYLITTLETHING was explicitly promoting summer/spring wear. SHEIN was promoting spring/summer wear, back-to-school clothes and a massive sale they were having at the time.

SHEIN'S large catalogue led to slow navigation. It was difficult to browse through the website in under an hour.

Filtering was complicated. BOOHOO'S dress filters were labelled; midi, maxi etc. While SHEIN'S filters were: preppy, boho etc. It wasn't clear what each of these dresses where or what they looked like.

This was reflected in the customer reviews. As it has the lowest ranking out of the four websites.

Click to enlarge

Step 3: User Personas

The busy woman

The influencer

The student

Three personas were crafted based off common SHEIN users which I identified through the questionnaire. These personas highlighted the problem areas that needed to be improved.

(Click to enlarge the profiles to find out more).

Step 4: Mind map

I decided to mind map my ideas for the SHEIN redesign. I aimed to brainstorm ideas which reduced the "busyness" of SHEIN to create easy navigation. I used the needs of the personas and the results from the competitor analysis to influence my decisions.

I was able to see which features were required within the app to ensure all user's needs were met.

I found that the mind mapping method was effective as it mimics the way our brain strings information together. I was able to expand and explore my ideas easily with this method, which helped with the ideation process.

** Click to Enlarge **

"How many ideas can I think of to solve the problem?"

Develop: Ideation methods

Step 5: Wireframes

Crazy Eights/Low-fidelity

I sketched 8 different design solutions for each category. Each design took one minute to sketch to allow for quick, free-flowing thoughts.

These are the results for the homepage, category and product page. These were used for my low-fidelity wireframes.

With my mid-fidelity wireframes I focused on which layout was most practical from my low-fidelty stage. I also chose my colour theme and icons.

(You can see more of this within my design style guide)

Mid-Fidelity

High-Fidelity

With my high-fidelity wireframe I fine tuned all my choices. I was able to:

Choose colours to create brand identity.
Ensured the mobile app and the website had synergy
Chose fonts that were used througout the website/app
Created pages which where organised and informative

Deliver : Final Interfaces, design guides and fundamentals

The Solution

"Was I able to simplify SHEIN'S mobile app and website with a clean-cut redesign to improve clarity and functionality. ?"

Final Interfaces

+ Problem Focus:

Hicks Law

"An increased number of choices means that the time is taken to decide by the user increases."

The original homepage had multiple options for discounts that would overload the cognitive ability of the user.

To remedy this, I moved all discounts to a scrolling banner at the top of the page.

Users will therefore be able to understand what criteria they'd have to meet to be eligible for each discount.

Subheadings are hidden until one of the main headings is hovered over.

This was to declutter the header to create a clean homepage.

I chose one typeface to use on both the app and website, with varying sizes and weights to create an identity for the brand.

Law of Common Region

"Elements will be perceived as a group if they share an area with a defined boundary"

Borders and boxes have been added to separate different types of information and to indicate which areas are relevant to each other.

Jakob's Law

"Sites should work the same as the other sites"

Through research, I found that respondents also used Prettylittlething, Boohoo and Isawitfirst, which all used similar themes, typefaces and call to action.

Due to this, I chose a similar colour theme and general look to SHEIN's competitors.

Product details, customer reviews and delivery options have been moved to the same area on the page.

Users had to scroll up and down the page to find information on the products previously.

I changed the filters from ambiguous description such as "Preppy and Boho" to clear labels like "Maxi and Midi" to reduce user confusion.

I explicitly detailed how many items are found at the top of the product page.

This was a missing feature on the original webpage, that users found frustrating.

"Is my redesign easy to replicate?"

Style Guide

Below is the style guide I created for SHEIN.CO.UK. I aimed to ensure complete uniformity in style and formatting.

I opted for a small colour palette to keep in line with my "simple" redesign. Pink was chosen to symbolise femininity and youthfulness. I partnered it with Grey as it creates a welcoming and comfortable feel when paired together.

Accessibility

Throughout the design process, I was careful to keep accessibility guidelines in mind.

In terms of the colours used throughout the designs, I ensured I had a good contrast between colours so that they were accessible to users with visual disabilities.

I used Open CC Checker to check the contrast. I was able to experience what colourblind users would see if they were to navigate the website.

Reflection

For this project, I redesigned the current SHEIN website and app.

I aimed to improve the user experience by updating the interface. I changed many areas that were causing user issues. This was the layout of screens, filtering options and the overall brand identity.

I enjoyed working on this case study, as I was able to fix the problems of a major e-commerce brand. I learnt the importance of user research and competitor analysis, as I felt this was vital for the ideation process.

I do believe my strength was in the research processes however, I would have liked to have a larger size of respondents. Although due to time constraints, this wasn’t possible for this project.

I would use A/B Testing if I could launch this project. I need to understand and confirm what issues may exist after I changed the design. I'd be able to do this by further observing the user's journey.

SHEIN REDESIGN