SHEIN:
A Concept Redesign
Brief: Identify 5 problem areas within the customers journey from your chosen website and use your design thinking to solve these problem and demonstrate your ability into responsive design.
Time frame: 2 Weeks
Role: UX Research & UI Design
Tools: Figma, Google forms
Who is Shein?
Shein is an international, fast fashion e-commerce brand that aims to be a "one stop shop" targeting young women and teens. They strive to offer on-trend styles that "won't break the bank". According to the UK's office of national statistics...
62% of women purchase clothing online and up to 69% are between the ages 16-34.
Shein's Current Interface.
Problem Statement.
Online shoppers mainly use E-commerce sites for convenience, with a cluttered interface it may take longer for users to make purchasing decisions.
If we reduce the content, create an interface that reflects the simplicity of the logo and design a clear customer journey then people will be able to make quicker and more efficient purchases.
Hick's Law.
Hick's law suggests that increasing the number of choices increases the time it takes to make a decision.
By reducing the number of options and information the website becomes more user friendly as the user is not bombarded with work they do not necessarily need to do when trying to navigate through a website.
The Re-design & Research.
Survey Findings.
I sent 20 participants a survey using google forms and found:
-
The majority of participants shop online for "convenience", "ease" and "Quickness".
-
Most users either search for a specific item when on the website or shop by category.
-
55% of users often do not consider purchasing recommended clothing/items when suggested.
I found that most users a seek fashion inspiration from social platforms including the below:
I found that most users a seek fashion inspiration from social platforms including the below:
Here are some of the specific changes the users wanted to see:
Competitors.
I compared 3 direct competitors and 1 indirect, they were selected based on where the users from my research shopped.
My Approach & Solutions
5 Pain Points to tackle...
-
Implement clear call to actions throughout the journey
-
Declutter the homepage and introduce clear content grouping
-
Introduce functionality found on social media platforms as this is what our target market is familiar with
-
Revive the accessibility of text and images
-
Create consistent UI with a mini design system to cater to the changes I will make
User Personas were used to condense my findings:
Ideation & Testing
Mind Mapping.
I used this to outline the main elements and features I would like to include in my design.
Crazy Eights & A/B testing.
The Crazy 8's session to help me map out the features I wanted to include.
I chose the two most appropriate screens and completed an A/B testing with 6 volunteers to decide on the final potential layouts.
Wireframes.
Some Key Changes...
-
I have reduced category choices due to duplicated information on original website
-
Increased the image sizes
-
Consolidated the filter section
-
Prioritised the search bar and visual search
-
Reduced the footer content by including a drop down button for more information
-
Reduced scrolling time by reducing content throughout each page
Strawman Proposal & The Solution.
I gained feedback from regular Shein users and my mentor before creating my final designs and generated a discussion about any changes or further development through a strawman proposal that I have summarised below.
Additional Changes...
-
I have reduced the content further by making the choice of department a drop down menu increasing white space
-
The search bar has been prioritised even more and made central to fit the user need of shopping for a "specific" item
-
The visual search feature has been included on desktop, ultimately leading to the user download the app and make quicker shopping decisions via their mobile device
-
A detailed tutorial for the visual search has been added, with these instructions customers are more likely to use it more frequently
Mobile.
Prototype.
The Design System.
Accessibility.
-
Colour contrast was considered and I met the design requirements using the A11y - Color Contrast checker and received an AAA result
-
I have designed a focus state for the users who use a screen reader
-
I have included a microphone in the search bar for voice activation
-
Reducing the amount of text over images
-
Reduced the footer content by including a drop down button for more information
-
I have also incorporated a dark mode feature on the app to meet certain views needs
Overview & Reflection.
During this design process I was able to explore and implement different design processes, laws and fundamentals which gave me results that I was truly happy with. I was able to develop new techniques while working in figma and used this as an opportunity to show this within my designs.
Upon reflection, if I had had more time to explore this brief further I would have committed to doing some more research including face to face interviews, card sorting and product testing to ensure the users needs were met and the redesign aligned with the businesses growth and sales goals. I would have also kept some of my initial high fidelity designs to show how I got to the final solution before my revisions.
