RAILTON
This project is under iterative design, therefore the final product is not yet available to view.
&OtherStories: E-commerce Case Study
Brief: Identify problem areas within the customer journey from the website &OtherStories across both mobile and desktop platforms. Use design thinking to solve these problem to create a functional e-commerce platform that complies with UX methodologies.
My role: UX/UI Designer and UX Researcher
Timeline: 2 weeks
Introduction
The growth of e-commerce sales over the past 10 years has been driven by the increasing popularity of online marketplaces, the rise of mobile commerce, and the convenience of online shopping. The COVID-19 pandemic has had a significant impact on e-commerce globally. With the implementation of social distancing measures and lockdowns in many countries, consumers have increasingly turned to online shopping as a safer and more convenient alternative to stores.
7 in 10 consumers (67%) now shop via their mobile devices more often than they did two years ago.
Clothing and footwear was the most popular online shopping category in the UK in 2020, with 48% of online shoppers making a purchase in this category.
.png)
Online sales in the UK accounted for 33.2% of all retail sales in 2020, up from 19.1% in 2019. (Office for National Statistics)
Problem: The current fashion e-commerce site has an outdated design, poor navigation, and long-winded checkout process. Customers find it difficult to navigate and locate products, leading to frustration and a poor user experience, resulting in cart abandonment and lost sales. The lack of visual appeal and poor functionality is also failing to engage new customers and build brand loyalty, causing a negative impact on the company's reputation.
Aim: To redesign the company's desktop and mobile version of the site to create a visually appealing and user-friendly platform that enhances the customer experience, increases engagement, and drives sales conversions. The redesign will focus on improving the design and function of the landing page, product fining and checkout process, ensuring that customers have an enjoyable shopping experience from start to finish.
Design Process
Empathise
User Personas:
To begin my research process, I had to first understand the user I was designing for to create user personas that accurately reflect the user's goals and frustrations. I utilised social media platforms such as Instagram to conduct a deep dive into the brand's consumers by browsing through the company's tagged posts and selecting public profiles to learn more about their lifestyle. I combined this with gathering information about general online shopper habits based on their demographic to create a comprehensive profile that reflects the user's unique needs and desires. This allowed me to come up with two user personas.
.png)
Research
Competitor Analysis:
I chose three brands that share a similar target audience and are within a similar price range. When scoping these websites, I particularly looked for positive and negative aspects of the user journey, information architecture, information hierarchy, and overall design.
Key Takeaways:
Once I was able to compare the site to it’s competitor’s, I made the following initial observations:
The typography was my first concern when browsing the website. There were too many different fonts on the page that didn’t complement each other. There was also no use of colour to highlight ‘Last Chance’ items.
I immediately noticed how unsettling the excess negative space was which isn’t common in fashion e-commerce sites.
The navigation bar on the side of the page although easily accessible, interfered with the overall layout of the page and the font choice made the website look and feel outdated.
The checkout process felt long-winded and needed sequential navigation to allow for a quick and easy checkout experience. It was also not easy to differentiate between different delivery options.
Usability Testing
Now let’s get into what the users had to say. To understand user pain points, I conduct a usability testing assess how users navigate through the website when provided with different tasks. I then prompted them with further questions after each task to understand how they felt throughout the process. This was the most ideal method for me for me to evaluate how users interact with the website, understand their frustrations, discover their thoughts on user interface, and find possible opportunities for improvement on the site.
The four main areas I wanted to research as part of the user journey were:
Product browsing and search
Product page fining
Interaction with home page
Checkout process
To do this, I focused on three types of task based questions and followed up with questions to understand how the user feels throughout the process and assess how easy they found the tasks.
Broad task: This involves giving the the user free reign to discover the site and prompt them to talk through their initial impressions and address the purpose of the elements and information presented.
Specific task: This task involves finding a specific product to assess how they navigate through the website to find the product and to monitor their browsing experience.
Complete a process: Go through a complete user journey from browsing, selecting a product,and proceeding to checkout.
User Information:
.png)
Test Goals:
1. To assess whether the brand’s identity and values are reflected in the design of the webpage
2. To understand how the user navigates through the website when searching for a product and and if any problems arise
3. To monitor how the user engages with the elements and information presented
Ideate
Affinity Mapping:
Once I was able to make notes from the usability testing, I created an affinity map to collect the qualitative data onto sticky notes and group them according to theme. I prioritised the most recurring data and collected key takeaways from each grouping to produce problem statements.
.png)
Empathy Mapping:
Interview Insights
Poor choice of typography
The main fonts used by this website is ‘Times New Roman’ and ‘Courier New. Serif fonts read well in print but loses clarity on the screen and are better for print on paper. The website also throw in a third type face in the mix ‘Helvetica Nue’. Having two or three different typefaces on the same page will dramatically decrease legibility.
The website looks untrustworthy
I learned there was a strong branding issue. Users who were familiar with the brand did not feel as if their online presence reflected the in-store feel and users who were not familiar with the brand did not believe the website looked trustworthy.
"I would not have continued browsing if I came across this website.“
"They look new to the game"
The average user gave the site a 3/5 on the trustworthiness scale.
Limited filter/sort options
Users felt there wasn't as many filter options as they would like and couldn’t understand the function behind some of them i.e "Designed in". Users also felt it important to sort by product type, and did not want to scroll through items they weren’t looking for. Some users also found that the search bar as well as the filter options were not successful in displaying relevant products or suggesting similar products.
“I have seen a silver ring but this item didn’t show when I used the filter option to shop by colour."
“I searched maxi knitted dress and it showed no results, but I seem some here”
Long checkout process
Users found it difficult to find delivery information and the text at checkout was difficult to read. Users were frustrated because they knew the site offered express delivery yet this option was not available by the time they got to checkout. Users also wanted more clarity on the number of available pickup locations.