Case Study 2 — eCommerce Mobile phone Platform
--
Introduction
I was given a 2 week brief through Love Circular, centred on solving 5 problems within an eCommerce mobile phone platform of my choice.
Timeline: Two weeks
Role: UX Research, UX Design, UI Design
Research tools: Maze
Design tools: InVision Freehand
Mobile Phones and Ecommerce
With the ever-evolving technology available at our finger tips, today’s mobile phone is virtually an extension of its owner. From interlinked financial information to biometric data access, the mobile phone has it all. A far-cry from the bulky Motorola handheld mobile phones launched in 1973.
As the technology evolved, so did the number of manufacturers. Today’s smartphone market is dominated by Android and Apple devices. Finding a substantial and diverse offering of these two giants in the same place requires visiting dedicated mobile phone retail spaces.
The advent of Covid-19 has placed an increased emphasis on the eCommerce arm of these retail spaces.
The Brief
The brief was to identify five problem areas within the website journey experience of an eCommerce mobile phone platform, across mobile and desktop screen sizes. I was then required to solve these problem and incorporate a responsive design solution.
My resulting updated design had to comply with aesthetic usability laws and UX methodologies, ensuring functionality. The platform also had to feel like a fun and engaging environment where users would be able to educate themselves on promos, clearance deals, products and delivery schedules. Creating a hassle-free space to shop for a new phone via a clean and robust user journey was paramount.
The required and expected KPI’s:
- Increase in sales for all mobile phones types
- Less enquires calls for the contact centre
- Encouraged referrals to friends and family members
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 outcome.
The Problem
As the coronavirus continues to pose serious challenges to businesses worldwide, effective UX has become even more important recently. This is is because lockdown measures have pushed even more people into eCommerce; placing less and less emphasis on brick and mortar shopping. ‘UK ecommerce predictions upgraded from £73.6bn to £78.9bn due to COVID-19’ — PR NewsWire.
My chosen platform, Carphone Warehouse, had evidently failed to refine its eCommerce offering in line with the post covid world coined as ‘the new normal’. A look at https://www.carphonewarehouse.com/ revealed several violations of UX and UI fundamentals (the details of which I dissected in my research phase). The outcome was a site that felt archaic and disconnected from the standards expected by users in a fast-paced, post covid world.
My Role — Expanded
As the UX Researcher, UX Designer and UI Designer, my involvement in this project started from the outset. From diving into and deconstructing the brief in the Define stage, understanding the user and the competition in the Research stage to ideating, wireframing and prototyping in the Design stage.
Due to the speculative nature of this project, the Production and Analyze stages played smaller roles in my process. Nevertheless, I always factor in the production phase as the handover stage to front and back-end development, whilst the Analyze stage is the post launch phase where further user feedback is collected for refinements.
Hypothesis
My hypothesis was that tackling and fixing the UX/UI transgressions present on https://www.carphonewarehouse.com/ would substantially improve the user journey and subsequently increase ROI. This is because ‘good UX investments enhance customer satisfaction. Satisfied customers are loyal; they trust a company’s products, and they want to come back for more’ — Interaction Design Foundation
Business Research
Identifying The Issues
For my initial research, I dissected the Carphone Warehouse website. I used InVision Freehand as it allowed me to annotate the pages and store my work online. I looked at both the desktop site (red annotations) and the mobile site (blue annotation). Below are my findings:
Desktop Site Issues
- The ‘Categories’ icons had poor hover states. The icons didn’t change colour and only moved very slightly. There was very subtle underline of the icon’s subtitle when hovering. This would be easily missed by visually impaired users.
- The ‘Support & Services’ tab took users to a different website and url where they no longer had access to their cart, or any of the other options in the initial menu. This is done with no warning or option to open a new tab. This would lead to frustration and inconvenience.
- The chatbot was on the left of the screen instead of the right. This added unnecessary processing time. This should have stayed on the right where users were used to seeing it on other platforms. This went against Jakob’s law of familiarity.
- The ‘Compare’ section was messy and defied the aesthetic usability principle. This demoted the user’s esteem of the brand.
- The CTA Contrast ratio was 2.94.1.1 in the ‘Compare’ section. A fail on every front and below WCAG 2.0 standards.
Mobile Site Issues
- There were 9 different offers worth of scrolling to get to next section below the initial CTA’s on the homepage. This could be a source of user frustration. This could be simplified into a side scrolling panel to allow those who want to skip to get there quickly
- There was no auto-complete feature in the search bar. This is a very important feature which is expected as a minimum by users in 2020. It helps save typing time and therefore adds to user convenience.
- The 404 error page wasn’t helpful enough as it didn’t offer the option to move forward. It was also completely unbranded and felt very final. There should have been an option to put the error code in an email/ users’ notes for further follow up. There should also have been an option to view a different product, an option to go back and an option to continue to site or sitemap
- The ‘deals’ section of the site misused the law of common regions. There was no common denominator for these different phones that were grouped together
- Within the ‘deals’ section of the site, the pagination element anchored at the bottom of each content box which is meant to allow the user to cycle through the different offers, was obsolete. It didn’t flow with the cursor/ didn’t flow at all.
Competitor Analysis
My competitor research helped me identify common features amongst direct and indirect competitors. I looked at desktop and mobile sites to understand what competitors were offering, as well as what the industry standards were.
Common Themes:
- Category icons — these are usually found close to the top menu and tell the users about the different categories of products that the platform offers. There’s a discrepancy across platforms on the visibility and accessibility fo these icons
- ‘My account’ is a common section across direct and indirect competitor that allows users to keep tabs of their transactions and orders with the platform. It was interesting to see that Carphone Warehouse does not have a ‘My account’ section, opting instead to send users offsite to track deliveries. This is a feature that could be added in to keep users on site
- The ‘search’ function is present across all platforms on the homepage. An interesting principle that could be included here (based on user research) could be the application of Hick’s law. This would entail simplifying the user’s journey by emphasising and highlighting the search bar. This could be coupled with the autocomplete feature for maximum effect
- The ‘Best Deals’ CTA is also a common feature across several competitor sites. Carphone Warehouse’s desktop ‘Best Deals’ CTA sits amongst various other attention grabbing CTA’s. This reduces the importance of ‘Best Deals’ as it gets lost amongst the other options.
User Research
Armed with the knowledge and understanding of how Carphone Warehouse and its competitors were designed, I decided to dive into user research.
Survey
I surveyed 9 users to get an understanding of why they purchased (or didn’t purchase) mobile phones online and their overall experience of it.
Below are some of the questions I as asked my participants:
- What do you like about buying a mobile phone online?
- What do you dislike about buying a mobile phone online?
- Rate the overall experience of buying a mobile phone online (1 to 10 rating scale)
- Why did you give it that rating?
Findings from the survey:
- 70% of those who took the survey were millennials, whilst 30% were Gen Z
- 30% of survey takers enjoyed shopping online due to the ability to take their time, whilst a further 30% enjoyed the convenience of not having to travel to shop
- 30% indicated being overwhelmed by too many options as a reason for disliking shopping online
- Quizzed about the online shopping experience, users said it was the “easiest thing to do but only if you know what phone you want to buy”.
Interviews/ User Journey Observation
I then tasked a 16 year old boy and a 47 year old woman with purchasing a mobile phone of their choice through the Carphone Warehouse website. I recorded the screens and followed their thought process as they discussed their pain points, preferences and goals as they navigated through the site. I chose to observe the user flow of these two users as it diversified the age range of my research phase (taking into account that Carphone Warehouse is for all user demographics that require a mobile phone).
The 47 year old user quickly identified the pop up live chat service as a pain point. “I don’t want anything to do with them”. This occurred after placing a phone in her shopping cart and proceeding to the customisation stage.
After this stage, the user’s concern turned to the the delivery icon on the screen. “I need to see how long it will take to reach me. It doesn’t show me”. Although the icon stated that ordering by 9pm would guarantee next day delivery, the user didn’t feel sufficiently informed. An amendment to reflect ebay’s estimated delivery day and date feature would resolve this issue.
The user’s next issue was with the View Deals CTA. Its size and prominence at this stage along the process was misleading as it appeared to be the next logical step in the purchasing funnel. However, clicking the View Deals button presented the user with other iPhone deals. These were confusing as adding them to the basket resulted in two phones. “It’s only one phone that I’m buying, not two. I didn’t know this was another one”. Ultimately, upon removing the second phone from the cart and heading back to the customisation section, there was no button for progression into the checkout process. As such, the participant ended her session as she grew frustrated.
Tasking the 16 year old user with the same goal revealed the below pain points:
- Old phone Trade In value didn’t reveal whether the amount would go towards the initial price of the phone or one of the monthly contract bills
- Pressing ‘back’ from View Deals page showed the user a different screen momentarily and confused
- Monthly bill capping request at checkout process was not explained and required moving onto another page to get an explanation of it. Forcing the user to click ‘back’ to return to basket.
- The screen covering pop up overlay was assumed to be an advert and immediately dismissed (it was actually an offer!)
Flowchart
From this conversation and user flow observation, I drew up a flowchart to pinpoint the pain points throughout the process of purchasing an iPhone.
User Persona
Maria, 30, Doctor at private hospital. Engaged. Earns £40,000 per annum.
About
Maria is a doctor who lives in Manchester. She enjoys pamper days at all inclusive spas to unwind from her fast paced, high intensity and high pressured job. Maria also enjoys travelling, staying active and going out for meals with friends.
Goals
- Have her wedding ceremony next year (an intimate one as Covid-19 is not going away anytime soon)
- Pay off her mortgage within the next 10 years
- At least one sunny holiday each year
Personality
- Enjoys convenience and ability to get things done on the go and remotely as she works long hours
- Time poor but financially conscious so she enjoys getting a good deal whenever possible
- Naturally decisive, confident/steadfast and committed once her decision’s been made
Pain Points
- Unreliable/ inconvenient/ limited delivery options when shopping online
- Unnecessary pop ups that delay her from completing the task at hand when on a website
- Being overwhelmed by too much information/ too many options all at once
Creating a user persona at this stage helped with the design and product UX as it helped me empathise with the user. As such, it allowed me to understand the user needs, experiences, behaviours and goals (source: interaction-design.org)
Ideation
For my ideation session, I employed the mind-mapping technique. I set out to solve the issues faced on both mobile and desktop, with each rectangle representing a device and each circle representing the location of the issue on the site. The green font represented the solution whilst the blue/red font represented the issue.
I tackled the initial problems highlighted within my first review of the site, as well the new issue discovered through user research and competitor analysis. This allowed me to tackle the most pressing issues on the site as dictated by users.
Wireframes
The low fidelity wireframe allowed me to quickly sketch out my ideas and incorporate the refinements deducted from my research and insights. I used InVision Freehand to execute and annotate the low fidelity wireframe.
As mentioned earlier in this case study, I opted to apply Hick’s Law in simplifying the journey by extending the search bar and removing the surrounding CTA’s once engaged. Furthermore, I added the auto-complete feature.
As the brief required a responsive design, I designed for both mobile and desktop. I used the iPhone SE as my base due to the relative ease/ convenience of upscaling the UI from a smaller screen to a bigger one.
Between the low fidelity and mid fidelity wireframe, I opted to reduce the live chat feature to a simpler and smaller bar on the bottom right corner. This is because user research revealed a generally negative sentiment towards the pop up chat feature which occupied the entire screen.
UI Phase
In the UI/ high fidelity wireframe phase, I was able to demonstrate the improved hover states for the category icon, opting for increased size and a change in colour. I was also able to showcase the improved contrast ratio to 5.35:1 from 3.91:1 across the Covid CTA, and the Live Chat icon and the background.
The style guide included highlights the typeface, colours and icons utilised to improve the UI of the homepage.
Conclusion
In conclusion, I conducted thorough research and set about refining the Carphone Warehouse site to create an improved, responsive User Experience. My research and ideation phase revealed pain points other than the initial issues that I had highlighted. Throughout my process, I demonstrated how all those issues could be tackled and rectified to improve the user Experience.
Proving or disproving my hypothesis would have required an insight into Carphone Warehouse’s revenue pre and post application of the changes recommended. As this was a speculative project, my hypothesis could not be tested at this time.
Self Assessment
In hindsight, tackling more than the 5 issues required by the brief took a lot longer than expected. This had an impact on the number of pages I was able to deliver. On the other hand, this allowed to spot and create solutions for some of the most pressing and imperative problems identified by the users. An additional couple of days would have allowed me to create the prototypes for all the solutions that I devised.
Learnings
At the research and ideation stages, limit the solutions to the basic requirements of the brief, returning to explore other issues/avenues after the initial solutions are prototyped.
An easily accessible Carphone Warehouse style guide/ design system would have made the high fidelity wireframe/ UI section of this project a lot easier to tackle. However, in the absence of those documents, I made use of a suitable typeface and created similar icons to communicate my vision as accurately as possible.
Thank you for reading. You can follow my journey on Instagram and LinkedIn
