The Brief:
Implement design thinking to improve user online shopping experience by solving user website journey problems focusing on functionality across desktop and mobile screen sizes.
Deliverable:
3 mobile and desktop compatible screens (Responsive)
Home page and two other pages
My Role: UX Research, UI Designer
Duration: 2 weeks
Tool used: Figma, Invision freehand, Google forms
This was a solo project. I was responsible for all of the design concept.
E-commerce allows consumers and businesses to buy and sell goods and services over the Internet, thanks to the diversity of access options available via computers, smartphones, and other smart devices. Ecommerce operates in four market groups, which are- business-to-business, business-to-consumer, consumer-to-consumer, and consumer-to-business.
In the last decade, online retail has grown in popularity in the United Kingdom. The value of online retail sales in the UK is expected to reach slightly below 100 billion GBP (2020), following the outbreak of the coronavirus (COVID-19). In the previous year, online sales accounted for almost 19% of total retail sales in the United Kingdom. Non-essential retailers were forced to close and people were instructed to stay at home during the height of the pandemic, consumers turned to online ordering as a safer way to shop during stay-at-home orders. It is now predicted that online sales will remain high even after the pandemic, as people have become more accustomed to online shopping - causing a bigger demand for retailers.
I chose Pull&Bear as my case study company because it is one of the quieter stores in the UK, despite being part of the Inditex group, which is known for popular brands like Zara and Bershka. I recently visited the website while browsing, I encountered navigation issues on the desktop version of the site, as well as issues with web responsiveness. As a user, I left the site almost immediately. Consequently, poor site responsiveness and navigation may cause users to avoid purchasing from Pull & Bear, resulting in a high bounce rate and low conversion rate, both of which are bad for business.
Pull&Bear has 74% negative Trustpilot reviews, though the majority of complaints are on customer service concerns such as returning items and receiving refunds, items being out of stock and inventory not being updated, it is evident that website functionality, such as product browsing and navigation is also a difficulty for customers, which is an important aspect of the online shopping experience. It is critical to have an easy-to-use website because a poorly designed website can push customers away.
Users spend the majority of their time on other websites. This indicates that users like sites to function in the same way as all the other sites they are already familiar with. Pull&Bear can benefit from existing models by using Jacobs law. Pull&Bear's current business plan is to stand out by compromising user experience in the interest of aesthetics.
For the first part of my research, I conducted a competitor analysis to gain a better understanding of the market, competitors' weaknesses and strengths, as well as insight into the userbase. Direct and indirect competitors are the two types of competitors. Direct competitors are companies that sell the same products and services, and customers frequently compare quality and pricing. Indirect competitors only provide the same or similar products and services in a few categories, and their ultimate goals are usually different.From my findings, Mango and Berskha are direct competitors of Pull&Bear, while ASOS is an indirect competitor.
Although they have implemented the law of common region by putting borders around the sections, the sections are extremely close to one other, and the amount of information on the landing page may still be overwhelming for users, especially because they have included both still and moving visuals. One recurring issue I've had is the cursor triggering the menu when it goes to the area, which can interfere with product browsing. Another thing I noticed on the product page that could be an issue is that the user has to scroll up and down the page to view the images rather than having a carousel and allowing users to view them by clicking left or right on the image or simply clicking the image.
I carried out a red route analysis, this method enables users to define what they consider of value to critical tasks within the journey. Using real customer data will ultimately help guide my usability testing, and target essential features within the design.
I chose features from Pull&Bear and competitor sites that I thought were most essential to a strong fashion eCommerce site and related to the case study. I asked regular customers to rank these features based on how frequently they use them. The data reveals that the search button and Wishlist functionalities are always used, which confirms my assumptions, and login/signup and delivery/returns are used frequently. These are the features that make online shopping a little more convenient.
I decided to use the survey as my data collection method which is a quantitative approach that allows me to quickly generate the data and gain relatively significant insights from the results. I used google forms for my questionnaires. The goal of the survey is to collect enough data to identify the pain points users come across and to understand customers buying experiences and journey. To obtain as much accurate data as possible, I took care not to make any assumptions and to ask questions that were not biased.
The evidence highlights that the majority of users found it challenging navigating the website, which supports my hypothesis, and over 80% of users' favourite feature is user-generated reviews, which I aim to integrate. Furthermore, the majority of users visit the landing page first, however they have noted that the Pull&Bear landing page is hard on the eyes and that the products are not well presented. In summary, the pain points identified were that the site is cluttered, difficult to browse, challenging to find products and help.
The crazy 8s method is used to lead an effective design sprint, in which ideas should be generated more quickly because you have more information to work with (from business and user research). The key advantage of this method is that it does not require the input of designers. To fulfil the activity's purpose, I set a timer for 8 minutes spending at least 1 minute per design.
This approach is part of lean UX, whereby all hypotheses are stated and discussed to rapidly improve design solutions. This could include product managers, UI designers as well as frontend developers within this ideation session to understand all technical constraints that are part of the project. To carry out the straw man proposal approach, simply gather all your collages and carry out a 10 minutes iteration on designs independently. I spent 10 minutes designing the homepage and refining it, I found it easy to do so because of the crazy 8s activity I did before.
Keeping my research findings in mind, I selected three concepts from my crazy 8s that I can develop. The three pages I will redesign for desktop and mobile are the landing page, product category, and product page.
.png)
Design principles are guidelines that will assist in the development of designs and the making of important decisions throughout the project. Design principles assist in determining the product's values and making decisions that maintain the integrity of those values.
Jacobs Law- Users spend the majority of their time on other websites. This indicates that users like sites to function in the same way as all the other sites they are already familiar with. Pull&Bear can benefit from existing models by using Jacobs law. Pull&Bear's current business plan is to stand out by compromising user experience in the interest of aesthetics.
Law of Common Region- The common region provides a clear framework and helps users in immediately understanding the relationships between elements and sections. To create a common region, I put borders around my sections. A background behind an element or set of elements can also be used to establish a common region.
Millers Law- Content is broken down into smaller parts to make it easier for users to process, understand, and retain it. It's important to remember that short-term memory capacity varies depending on prior knowledge and current context.
I picked the Roboto typeface (sans serif) because it's free, readable, and similar to the font used by Pull&Bear. To establish hierarchy, I used a variety of font sizes and styles (Bold, SemiBold, Medium and Regular).I picked a simple colour palette because the colours would come from the products, such as clothing, and I was reluctant that introducing other colours would conflict with the products.
Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web. I used high contrasting colours for users with visual impairment. A feature I've considered implementing, potentially in the settings, is the ability to modify the font size to suit their needs. Nonetheless, I used the Figma mirror on my phone to double-check elements like icons to ensure they are large enough to tap on easily and effectively. I used images/banners with text elements so that users who use screen readers could access content and the screen readers could pick up the texts.
The screenshots below highlight the Color Contrast Checker Figma plugin, which assisted in checking that the colours and typefaces matched accessibility guidelines.
Overall, this case study taught me a lot. I was able to empathise with users and understand how to design for them rather than myself. I am pleased with the results of my study; I enjoyed exploring all of the processes of UX research, which assisted me in creating an optimal product for users and served as a useful exercise for my design thinking.If I had more time or if I were to release it to the public, I would add alt text for user accessibility. More research, such as A/B testing and looking into web analytics to measure and analyse user behaviour, would help me identify any pain points.
