In this case study I will be identifying and solving problem areas within the Virgin Mobile website, across mobile and desktop. This will reduce the hassle associated with the user experience in mobile ecommerce. Virgin Mobile came into existence in 1999 as the first mobile virtual network operator in the world. I thought it would be intriguing to delve into the design of such a popular and pioneering brand.
Introduction
The buying and selling of mobile phones began physically, in retail. Eventually this market became automated and mobile phones are now available to purchase online. As more people have access to the internet, it makes sense to be where your customers are by establishing an online presence. E-commerce improves a business’ revenue through improved efficiency, increased trust, business exposure, faster payments and conversion rates. From just 2015–2016, mobile conversion increased by 30% (bigcommerce.co.uk).
While e-commerce has definitely increased the customer base of mobile phone platforms, it has decreased the number of loyal customers. With saturated choice and access online, many users view mobile phone platforms as replaceable and often indistinguishable. This is emphasised by the very similar user interface and a trend of unsatisfactory user experience across competitor websites. After a poor site experience, 79% of online shoppers state that they are less likely to support a site again. By designing a more innovative and engaging experience for Virgin Mobile, it will be differentiated from its industry competitors. This will attract more traffic to the website through new and returning customers, increasing revenue and customer referrals. Clearly, this signifies the effect of good design on the success of a business.
Outline of the Brief
The main objective of the brief is to enhance the user experience when it comes to buying a mobile phone online. Choose an ecommerce mobile phone platform. Identify 5 problem areas within the website journey experience. Use your analytical skills and design thinking to solve these problems and demonstrate your ability into responsive design across mobile and desktop screen sizes. This should be targeted towards all user demographics that require a mobile phone.
Deliverables
- 3 pages — a home page and 2 other pages of your choosing
- Responsive mobile and desktop compatible screens
- A written case study explaining the processes and outcome.
Pain Points/Problem
Ideally, purchasing a mobile phone online should be a straightforward experience. When problems do occur, websites often direct people to contact call centres. This can be costly for the company, causing backlogs and caller frustration from being put on hold or transferred. Also, changing from website to phone call disrupts the user experience and may cause the person to switch to a competitor website. Due to Covid-19, the Virgin Mobile site has stated “Some of our call centres are closed, so please only call if you need to. Instead, please use the help available online.” Although this keeps the experience within the website, the aim is to reduce the number of scenarios where people need to seek help at all.
Hypotheses
- Micro-design changes will improve the user-flow and reduce the number of calls made to the call centre
- Implementing non-traditional UI features will create a more exciting website experience
Design Approach
My primary role is UX Researcher — I will be researching how Virgin Mobile compares to similar products in the industry, how customers perceive the brand experience and how well it appeals to their target market. I’ll be looking into how I can innovate the flow of how people purchase life experiences. As a UI Designer I will be repurposing these insights into strategic responsive design.
My design approach begins by empathising, then defining, ideating, prototyping and finally testing. I believe that empathy is an integral part of this case study. As a researcher I need to understand the emotions of the users by asking them questions to define their frustrations with their journey through these websites. This will enable me to brainstorm ideas to solve these problems and then narrow them down to the most effective. Lastly I will develop this into high-fidelity wireframes. Although I will not be testing my prototype, feedback collected from user-testing would highlight features that could be iterated and refined to further accomodate the needs of the target audience.
My empathic design methodology is particularly inspired by designer and inventor Clara Gaggero Westaway. Her objective is to explore how technology can feel human and accessible to everyone. This viewpoint is especially relevant as my designs need to be suitable and accessible for a broad demographic — everyone that requires a mobile phone.
Research Phase: Business research
Firstly I identified problem areas within the Virgin Mobile homepage and provided solutions. To view the mobile screen, I minimised the normal screen on the desktop. However when I went to my phone to see the actual mobile view, the information architecture was not the same, which was surprising. This further emphasised the need for responsive and consistent design across all platforms.
This exercise made me more aware of accessibility guidelines. I gathered that seemingly small oversights in design can reduce the user’s trust of a business, even subconsciously. Also uniformity is essential for the user to achieve a defined goal efficiently.
Competitor Analysis
In order to enhance the user experience when it comes to buying a mobile phone online, we need to understand the existing mobile phone industry. Collecting quantitative and qualitative data about rival companies and products is a source of evidence for my UX design strategy. Identifying the user frustrations of other platforms will show me how Virgin Mobile can provide solutions where others lack and highlight industry trends. This is also applicable to the website interface and information architecture.
I identified O2, Three and T-Mobile as Direct Competitors. I looked at the year each business was established, the target market, the number of users and the company revenue as parameters indicative of each businesses’ success and popularity. The brief requires me to redesign the home page and 2 other pages of my choosing. From my research so far, I’ve concluded that the product page and the help/customer service page contribute most to the experience of buying a mobile phone online. Therefore I have compared product page features and help page features, as well as navigation bar headings (homepage).
Lastly I looked at common complaints to make sure that the user feedback is considered here. I decided to collect this qualitative research from Twitter because “where mobile providers responded to customer contacts using social media, Facebook and Twitter were the most frequently used platforms.” (Ofcom Service Quality Report 2019). In my personal experience I have seen that many people use Twitter to complain as it is an app built for conversation. From this we can also get an insight into the likelihood of mobile referrals.
“As soon as design decisions are based on “that’s how company X does it”, we are ignoring the fundamental role of design in the first place: to improve the product with your user in the centre.” — Alan Smith
I also looked at Virgin Mobile’s existing reputation through Ofcom’s Comparing Service Quality Report 2019. I chose Ofcom (The Office of Communication) as my source because it is a trustworthy government-approved communications regulator in the UK, regulating mobiles, telecoms, TV, radio and more. This will provide quantitative data on Virgin’s current user experience, which works well alongside the above customer complaints (qualitative). My findings:
- Virgin Mobile generated the most complaints per 100,000 subscribers (41)
- Virgin Mobile customers had the shortest average call waiting time (45 seconds)
- Virgin Mobile customers were less likely than average to be satisfied with how their complaint was handled
In summary, calling centres seem to be customers’ preferred method of contact because of its directness. It seems that they view calling as more helpful because they feel that speaking with employees will get their problems solved faster than on a website. I aim to see how I can replicate this directness on the website, possibly by improving the live chat feature. This will improve how satisfied customers are with how their complaints are handled.
Indirect Competitor Analysis
I selected the Apple Store and the Google Store as indirect competitors because they are multinational technology companies that market their services and products particuarly well. The main design focus here is their product pages. I aim to challenge the status quo for UX design in the mobile ecommerce industry by taking inspiration from these two businesses. This will reveal opportunities that direct competitors might have overlooked.
Even though large product images worked well on desktop, on mobile view they took up a lot of screen space. It took me quite a while to scroll down to the bottom of the page. Other users may find this frustrating and benefit from categories being added to the navigation bar to break up the information and make navigation faster.
From exploring indirect competitors I have found that the popular trends are progressive onboarding, animation and white space. They contribute to an overall aesthetic focus that retains functionality which is something that the Virgin Mobile website should adopt.
User Research
Interview
I chose to assign a task to my participant, to complete on the Virgin Mobile website. This task was recorded remotely over Zoom, so that I could see how long it took them to reach their goal and so I could compare what they did (behavioural research) to what they say they did (attitudinal research) in the follow-up interview. The interview was to understand their goals and problems, ensuring that I don’t design based on assumptions.
Task: Using the Virgin Mobile website, purchase a Huawei P40 mobile phone in the darkest colour with a 24 month contract and a monthly cost of £37. (This task allows me to see the participant’s interaction with both the homepage and the product page).
User-flow
I used lucidchart.com to map out the user flow of Ayokunle’s journey. A user flow is a series of actions that a user takes to achieve a goal through the different pages of a website. It maps out a complete task from beginning to end, allowing me to comprehensively inspect details of the user journey which would otherwise have gone unnoticed.
Defining Developments
From my research and empathy phase, I have summarised the main user frustrations from the Virgin Mobile website. These are the critical barriers to the user experience when it comes to buying a mobile phone online, according to the users themselves. These will directly inform my ideation sessions where I will brainstorm ideas to ease these frustrations.
Ideation
Mindmap
I created a mindmap addressing the user frustrations in bold in the table above. It includes solutions that I would like to develop, based on my research and secondary sources.
As one of my hypotheses was that ‘Implementing non-traditional UI features will create a more exciting website experience’, I also looked to shopping and social websites for design solutions. This is because those online platforms are usually optimised for excitement in the user journey. and implemented features from them. The brand websites that I was inspired by were: Glossier, BeautyBay, Fenty Beauty, Instagram and Bitmoji.
Crazy Eights
I visualised the ideas from my mindmap into low-fidelity wireframes using Crazy Eights. This is a popular design sprint method where the objective is to sketch eight ideas in eight minutes. I chose Crazy Eights as my main ideation technique because I wanted to sketch as many ideas as I could in a short timeframe. The more ideas, the more options for refinement. Mixing and matching different elements will ultimately improve my design outcome. I created eight sketches in total of the home page, product page and help page for desktop and mobile dimensions.
Further Development: Sketching & Wireframes
My final wireframes are informed redesigns of the Homepage, Product Page and Help Page of the Virgin Mobile website, each created using Figma. Figma is a web-based vector graphics editor and prototyping tool.
Home Page — Desktop and Mobile
Product Page — Desktop and Mobile
Help Page — Desktop and Mobile
UI Phase
Style guide
I decided to stick with Virgin Mobile’s original brand colours so that it would be identifiable and not cause any confusion for returning customers. As red is quite an alarming colour, I used it as an accent colour and to signify important information. The main colour palette signifies professionalism and sophistication (black/grey) and a fresh start (white). I adhered to Miller’s Law and Hick’s Law by ensuring that my navigation bar (home page) and carousel feature (product page) contained less than seven elements, because the average person can only keep 7 (plus or minus 2) items in their working memory. I also adhered to the Law of Common Region, the Aesthetic Usability Effect and the Law of Proximity. Regarding my typography choices, I chose Open Sans because Sans Serif fonts are associated with stability and friendliness which goes well with the atmosphere that I was trying to create with my designs.
Conclusion
I especially enjoyed this case study because of its investigative nature. Examining each point of the user journey in detail made me appreciate the design and research process a lot more. The main change came in my ideation, when I began to look at websites outside of my competitors and non-competitors list. I’m glad that I did this because it made me aware of more UI desing trends that work efficiently and could be integrated into my designs. The result was a dynamic layout which I believe would produce a more exciting website experience, without compromising on the accessibility and main functions. To build on this project I would like to incorporate Apple and Google’s animation style into the product page because I think this would be a real asset to the sales of Virgin’s products and services.
