Carphone Warehouse — A UX/UI case study
Re-designing the Carphone Warehouse website
Introduction
I was given a 2-week brief which required us to re-design the website of a mobile phone provider website. We were asked to identify problems within the website journey experience across mobile and desktop screen sizes. As a UX/UI designer use your design thinking to solve these problems and demonstrate your ability into responsive design.
Project duration: 2 weeks
Roles: Researcher, UX designer, UI designer
Research tools: Google meet, Maze
Design tools: Figma, Illustrator, In-design, After effects, Photoshop
What it should achieve
- Increase in sales for all mobile phones types
- Encouraged referrals to friends and family members
- A functional eCommerce platform that compiles with UX methodologies
Deliverables
- 3 pages: home page and 2 other pages of your choosing.
- Mobile and Desktop compatible screens (Responsive).
- A written case study explaining the processes and outcomes.
Discovery
I followed the double diamond design process which is: Discover, Define, Develop, and Test. As this project is a re-design my role will be mainly that of a researcher than a UI designer. I will be focusing on improving the users’ experience as well as information architecture.
Carphone Warehouse
I set out to find information about Carphone Warehouse. From dixoncarphones’ 2018/2019 report (the company carphone warehouse reside under) I was able to gather some data about their online growth.
The report states than “ online sales are growing faster and faster than the online market…less than a third of sales are online today”, they acknowledge that there is room for online growth and this will start with improvements on their website to increase conversion rates of sales.
“We are already accelerating our online growth. First, by making it easy for customers. We are making it easier for customers to find, buy, and get what is right for them.” — https://www.dixonscarphone.com/sites/dixons-carphone/files/results%20and%20presentation/20190709-dixons-carphone-plc-ara-final.pdf
Although they stated they will be making improvements ( I’m assuming some improvements were made since the report was published) on their website, I believe there is still room for improvements to be made, I will explore the flaws on the website.
The Problem
The range of services that Carphone Warehouse offer means that there is a lot of information to present to users. The way this information is presented needs to be clear and easy to digest for all users, both old and young, abled, and disabled. Navigating to the pages also needs to be seamless. For my research and re-design, I will be focusing on the homepage, navigation, and the product page for pay monthly deals. I will analyse the existing pages and use my findings to fuel my user research.
How might we improve the user experience of the website as well as the usability in such a way that the re-design is still in line with the brand guidelines?
Website analysis
I carried out a website analysis of their current website, I was able to identify some problems with the website both on desktop and on mobile.
Competitor analysis
I conducted direct competitor analysis with three websites that offer a similar service to Carphone Warehouse: mobile phone direct, EE, and Vodaphone. I wanted to compare the design of the site as well as the ease of use as they all hold a lot of information so having a system that is organised and easy for any user to follow is important.
I also conducted indirect competitor analysis with Apple and Samsung as they sell phones and tech devices but unlike the other websites, they don’t sell phone or sim contracts.
From the in-direct competitor analysis, Apple and Samsung have a more modern and clean design than EE, Vodaphone, mobile phones direct, and carphone warehouse. This could be because apple and Samsung are singular brands whereas the other house devices from a variety of brands. Things that can be taken away from apple and Samsungs websites are the modern design, use of imagery and text, and balanced use of colours.
Task analysis
I then carried out a task analysis with 2 people to get an understanding of the user experience of the website, any issues users may have with the interface and to assess how easy it is to find the necessary information. I asked one user to use their phone and the other to use a laptop as the layout varies depending on the screen size.
I chose to do a task analysis as it allowed me to ask questions about the process and watch them interact with the website and gather insight. I carried out the task analysis remotely using google meet, I also recorded the sessions so that I could revisit the users’ journey throughout the project.
Both users I interviewed were 22 year old women who are tech savy.
Pain points
From the task analysis, I was able to gather the following pain points for the mobile and desktop design.
- The homepage is cluttered – the information architecture on the homepage is not efficient there’s also overuse of colours
- There’s an overload of information on the home page
- The homepage design is outdated
- Mobile navigation can be simplified
- It’s tedious having to navigate to a different page to view phone deals
Define
User personas
To ensure I was designing for the intended user I created two user personas each with different goals, frustrations, and background.
Develop
User journey map
I made a user journey map to establish the journey a user would take on the website as well as how they would feel during each stage. I aim to improve their experience through my re-design.
Brand identity
As this is a re-design I will be using the same colour palette and typography as the existing website. I didn’t have access to all the fonts that were used so I found fonts that closely matched the ones used on the website.
Crazy 8s
Following my research, I moved on to doing crazy 8s (I sketched 1 wireframe for a minute and repeated this 8 times) for the homepage as from my user research it was evident that the Information Architecture could be improved. I moved the cards with the different deals to the top of the page in a carousel so users could view each deal one at a time. From my user research, it was clear that users found the homepage too overwhelming both in content and the colours used. During my crazy 8 sessions, my focus was on the structure/layout of the page. My aim was to reduce the number of information users see at one time.
Low fidelity wireframes
After doing crazy 8s for the home page I then sketched low fidelity wireframes of the product page and navigation.
From my user research, I found that the user believed the navigation layout could be improved, so I split the navigation into two screens.
My user research showed that users were frustrated that they had to go to a different page to view phone deals, so I’ve included them on the product page making it easier for users to access all the information they need to make a purchase.
Mid fidelity wireframes
Mobile
Desktop
Testing
User testing
I showed the mid-fidelity wireframes to one of the users from the task analysis. I used maze to set up the user testing. I asked further questions about how they found the task as well as any design critique they had.
I found doing user testing at this stage useful as it allowed me to validate my designs as my focus is the structure and layout of information.
Desktop wireframes
Task: look at the mobile phone options:
- The user described the process as “easy peasy”
- She stated that she knew what she was doing — it was intuitive
Task: look at iPhone deals and add a deal to your basket:
- The user found doing this straightforward and she states that she prefers my proposed layout of contract deals compared to the original website
- They also state that the layout of information is handy as they don’t have to toggle between pages
On the desktop design the user had a 100% success rate and was able to complete all tasks with ease.
Mobile wireframes
Task: look at the mobile phone options:
- The user states she likes that there are fewer options
Task: look at iPhone deals and add a deal to your basket:
- The user describes the process as being easy and streamlined
- The user states that doing this task on the Carphone Warehouse website original took x10 times longer to do.
How do you feel about the layout of the homepage?
- The layout is very clear
- The user states that Carphones’ Warehouse home page was too busy but my proposed layout is more manageable as there are smaller chunks of information
- The user states that there is “no sensory overload” — good for people with dyslexia
From my user testing, I was able to consolidate my designs and get feedback on any areas that could be improved. The user was happy with the design and layout of each page and didn’t point out any changes that could be made.
Final solutions
Mobile
From my user research, the home page was the most problematic page as users felt overwhelmed with information and colours.
I organised the information so that it is easy to digest, I used carousels so information can be viewed in smaller chunks allowing the user to really read the content on the page. I also changed the top picks card and included the details of a deal, this allows users to get a general idea of the price point and contract details.
I simplified the navigation by having separate pages for each nav option, allowing users to digest smaller chunks of information at a time.
From my user research, it was clear users were frustrated by the fact the deals were on another page. I included the contract deals directly on the page, having the deals on the same page allows users to toggle through contract deals, upgrade deals, sim only plans, phone specs, and reviews.
Desktop
I simplified the homepage making use of carousels.
For the desktop version, users can hover over the main nav items to view the subcategories.
I simplified the deals on the page and stuck to using one colour (red) for deals. I also grouped them together so it’s clear to users where they can find the deals.
Learning
Conclusion
I have enjoyed working on this case study as it’s made me dive deeper into UX research and information architecture. I was able to focus on the UX side as I had existing design components I was working with. I enjoyed going through the task analysis with users as I was able to gather pain points that were based on the users' journey/experience. I also found doing a user journey map useful as it helped me identify key areas where the users' journey is subpar.
It was interesting to see the issues on the carphone warehouse website considering that they’re a large company. I was able to identify issues with the design and user journey that could be turning customers away in turn causing the business to lose out on business.
Overall I think the project went very well I designed with empathy, prioritising the users’ experience over design flair.
Key things I learned:
- Although using using capital letters will draw the users attention if used in excess it can be overwhelming
- Users want information quickly and with ease
- Overuse of colour can deter users
