Primark – Case Study

Primark's Official Website
  • For this Case study, I will identify 5 problem areas within the website journey experience across mobile and desktop screen sizes for Primark’s e-commerce website.
  • I will showcase how I use design thinking to solve these problems and demonstrate my ability in responsive design for Primark’s website.
  • The reason I chose Primark’s website is because prior to the pandemic, they did not have a website, but when Lockdown restrictions started, Primark eventually introduced their new website, but they have adamantly refused to launch a delivery operation to give customer’s the option to get their products delivered to them, despite acknowledging the growing role online is playing in the digital age.
  • I have also noticed some issues that I came across when I was using browsing on their website which I’ll address below in the problem statement.

Problem statement

Primark’s customers needs to be able to have a seamless experience in order to browse, find & purchase products on their website & remove friction to help attract & retain online visitors. 

A Customer said on Trustpilot: “There was no stock and the website was entirely incorrect.…the fact you can not order online is equally annoying. I will look at other retailers where i can get better information on products… fed up with Primark’s customer service” – Click here

 

Primark’s Trustpilot rating:

Issues with Accessibility & Inclusion

Primark also failed to consider customer’s with visual impairment when they chose the colours contrasts for their typography against numerous image backgrounds on their site. Below is an example:

Research Phase

Primark’s Competitor Analysis

Insights into the competitor’s customer-base:

  • Primark’s competitor’s typically targets less affluent customer base and markets itself as a brand that is focused on producing trendy products within a budget constraint through outsourcing manufacturing. They do this so they can able to offer affordable clothing to an audience of under the age group of 35 years.
  • Primark’s strengths is the it is much cheaper than it’s competitor’s, so may attract customer’s who are attracted to lower prices and bargaining affordability.
Red route analysis:

Red routes are the critical tasks that deliver the most value to Primark’s users. These routes are the foundational user journeys in order to accomplish their goal on Primark’s website. In this exercise I have found out most users use the navigation bar

Survey

I found out that 65% of participants have expressed that they are highly unlikely to return to Primark’s website, this is very concerning and shows that Primark’s website may not be fit for purpose because it is unable to retain majority of the users who visit their website.

User interviews

I have conducted user interviews and a questionnaire to gather some qualitative data. Additionally some user’s have been selected during my visit at one of Primark’s retail shops in London

`Research Summary Insights:

  • Most of our participants were female between 26–44
  • The main criteria for buying from Primark is Price
  • Main issue raised was inability to reserve items, users can only check stock levels with no guarantee the item they want will still be there
User persona

From our research, we have found that Primark’s primary target audience are women, although they have products catering to both male & females, their marketing is geared towards women more.

Journey Mapping

I created a user journey map which showcases a timeline of all touch points on Primark’s website between the user and a product, starting from the Home page, then going to the product page by using the navigation menu and lastly to the store selector where the user has to check which store has the available stock for the item they wish to purchase .

As you can see on the Home page the fonts aren’t consistent and it’s hard to read some fonts when they’re over images.

Limited amount of search filters and no option to use advanced search filter feature

User’s from our survey has expressed disappointment that the store selector only allows them to check to see the available stock, but does not allow them to make a purchase.

Review on Primark’s website for responsiveness

It is important for every website to have a responsive website that displays their web application in variety of formats to accommodate various screen sizes that fit nicely onto your tablet or mobile phone or Desktop.

I also noticed similar issues to what the user’s from the survey I carried out, below are things I’ve noticed when I was reviewing their website for responsiveness.

  • Fonts are difficult to read when they’re over images which can be seen from the above photo
  • Photos are too pixelated and poor quality which dampens the aesthetic feel of the website
  • When browsing the website on a mobile, the Call to Action buttons are hard to see over the images due to not using colour contrasts adequately

Ideation phase

“Don’t Reinvent the Wheel, Use a Framework”
Brainstorming using a Mind-mapping Diagram

I used a mind mapping strategy, which is a visual method to represent ideas and concepts. It is a tool that helps with structuring information. It helped me to better analyse, comprehend, synthesize, recall and generate new ideas which was . Below is the result from the Brainstorm session I carried out:

Crazy 8s

I also done some Crazy 8’s, which is a core Design Sprint method. It is a fast sketching exercise that challenges people to sketch eight distinct ideas in eight minutes. The goal is to push beyond my first ideas, frequently the least innovative, and to generate a wide variety of solutions to the problems we trying to solve.

Straw man proposal

Additionally, I ran some Straw man proposal to get some constructive feedback from users in a group-setting to gather feedback and gain further insight through the group’s comments, reactions and views on the ideas generated from the Crazy 8’s and Mind-mapping. This helped me refine the concepts and enabled me to build a foundation for the wire- framing aspect of this case study

Wire-framing phase

A combination of the ideas from the research, Mind-mapping and Crazy 8s were selected and developed into Low Fidelity and Mid Fidelity Wireframes. At each fidelity stage the design was assessed to see if it’s still suitable and meets the users needs. I created both Mobile & desktop versions to ensure the application has responsive design to allow the website content to flow freely across all screen resolutions and sizes, and renders it to look great on both mobile and desktop devices. Below are some screenshots showcasing both the Low & Medium fidelity wire frames:

Low fidelity wire-framing
Mid-fidelity wire-framing:
High-fidelity wire-framing

UI phase

Key points
  • With the layout, it was important to make sure that the purpose of the website should be communicated throughout the web-pages, so I created a thin small banner next to the navigation to inform user’s that they can only Click & Collect products using the website.
  • I wanted to make sure that the information architecture meets the needs of the user’s by making it easier for them to browse the navigation menu without them having to carry many actions to check each page category. In the final design, they will be able to click & hover on the navigation menu, instead of how Primark’s website is currently setup which is time-consuming, but with this new
  • I used the hierarchy of information to rank design elements and influence the order that users view them
  • With certain images that had white text, I made sure to use overlays against white fonts because I wanted to make the design more accessible to people with visual impairments
  • I decided to place a banner at the top of the screen on each page, which would have information to help Educate users understand how to use Primarks website and to make certain they know they can only Check stock availability or use Click and collect
  • Following Parkinson law, I made a preselect view nearest available store option to make is easier for Customer find nearest stores based on their location, this will help cut down on time spent by users on searching for stores that are nearby them

Primark - Redesign Mobile application

Primark - Case Study

Leave a Comment

Your email address will not be published. Required fields are marked *