04 CoolCases UX Report

Came up with a fictitious brick and mortar store selling phone cases, and transitioning it to an online store to generate more information and sales. A full UX report is done, featuring sketches, wireframes and the prototype.

Sector E-commerce

Challenge The company would like to bring their business to online, so as to have more exposure and appeal to a wider customer market

My Role UX Lead, Ideation, Wireframing, Prototyping, Usability Testing

Project Time 1 Month

Project Brief

The research seeks to delve into the end-to-end process of how users decide on purchasing phone cases online. It also uncovers the tools users use to decide on purchasing phone cases, and understands prior experiences of purchasing phone cases, their emotions; and identifies barriers encountered. It aims to learn about the improvements participant might make to their current decision-making process.

The problem is observed from a human perspective, and insights are derived at the empathy stage.

The problem is then restated and addressed at the ideation stage of the UX project; by synthesising the insights and turning it into a more focused statement.

Although these users who buy phone cases regularly has particular preferences and likely to buy similar phone case types, it is found that users are likely to face difficulties as they like to explore and navigate around websites. This is because there are a lot of options to choose from and they have a slightly hard time to filter out those that they do not want. They tend to buy phone cases due to getting peer-pressured by social media and seeing what is on trend, and what phone cases their favourite idol is using. On this basis, this form recommendations for our prototypes

The above design thinking process was used throughout the project.

Empathy Phase

Conducting User interviews would be the best way. Participants are asked a set of open and explorative questions, to gather insights on their perceived experiences, opinions and attitudes towards purchasing phone case online. This will be a decontextualized testing which users have not purchased products from CoolCases before.

These participants chosen for the user interview were chosen with a selected criteria in mind, following with the type of screening questions. The table is shown below:

These participants were recruited because they were most likely to be the eventual target customers of CoolCases. These potential online buyers of phone cases are not yet customers of CoolCases but could realistically be in the future due to (1) their spending power (2) they need a case for their phones.

We can tap into their motivations for ordering phone cases online by targeting users who identify pursuing mental wellness as their preference. Their inputs on their thought process in purchasing phone cases online could provide insights on how to better design the website to meet their needs and provide an enjoyable experience.

The Interview

Interview questions were asked starting with an introduction, perceptions of owning a phone case, their experience and thought process on choosing a phone case and their overall purchase experience.

Interview Analysis & Insights

Most interviewees only purchase phone cases immediately after buying a new phone.
Most of the interviewees would choose to purchase phone cases that have a very strong protection over design factor.
Only a handful buys newer phone cases after awhile due to the old phone case being damaged or discolored.
Colour-wise, most would prefer to buy a black one as the tendency to get discoloured is the least amongst all colour.
There wereonly two interviewees who would go for limited edition cases as the design feels unique and have the premium feel over phone cases that are already on the shelves. These two interviewees also prefer to have their names engraved into the phones as an added touch of individuality.

Define Phase

A few How Might We (HMW) Statements were made so that I understood what is needed to be done for this UX Project.

Initial:

How might we design our website experience for people aged 25 – 44 years old so that they will purchase phone cases from us?

How might we encourage phone users aged 25 – 44 years old, to purchase our phone cases through the design of the website experience?

How might we convince phone users to make a purchase solely based on its designs through the design of the website experience, so that they would purchase it online?

Finalized:

How might we offer phone users an intuitive website experience that is very eye-catching and functional, so that they would purchase phone cases on our website?

Ideate Phase

Ideas were generated as I listed down what needs to be in the e-commerce website so as to create an intuitive website experience that is very eye-catching and functional for the user, so that they would purchase phone cases on the website.

Sketching

Paper sketches were created so as to better visualise what would be in the final prototype and to also make adjustments along the way. These sketches were created in three different stages, namely: Explorative, Refined and Finalized sketches. 4 sketches were done for each stage, with 1 sketch to signify the layout of 1 page of the prototype

Explorative Sketches

In explorative sketches, I brought to life ideas from the ideas generated from the list I created beforehand.

Refined Sketches

In refined sketches, I added in a few other key elements.

Finalized Sketches

In finalized sketches, I revised the refined sketches and added in a few other key elements that would be included in the wireframes and prototype.

Wireframing

Wireframes URL: https://v24djo.axshare.com

Wireframes were created following the finalized version of the paper sketches. The wireframes were created using Axure RP software.

Collections Page Wireframe

About Us Page Wireframe

Prototype Phase

Prototype URL: https://bliepb.axshare.com

The prototype was created following the completion of wireframes. The prototype was created using Axure RP Software.

Customize Page Prototype

Homepage Prototype

Testing Phase

A Usability Test plan was created with the purpose to identify the usability problems that customers may encounter using the site and also how satisfied users are with the website.

I had a few goals in mind with the purpose of this is to define what needs to be tested on the CoolCases website. The following shows a step-by-step way to do this:

Step 1: Review the purpose of the usability testing above.
Step 2: Identify important areas to be tested based on your review of the website
Step 3: Specify a goal for each important area that needs to be tested

Therefore the tests are as followed:
Test 1: Are first time users able to navigate around the pages without any problems? (This test goal is seeking to validate if new users are able navigate around the website without any problems and if they are not able to why?

Test 2: Are first time users able to place an order on a specific item? (This test goal is seeking to validate if new users are able to navigate around the “CUSTOMIZE” page to place an order without any problems and if they are not able to why?

Test 3: Are first time users able to subscribe to the CoolCases newsletter? (This test goal is seeking to validate if new users are able to navigate around the website to find the newsletter email input function and clicking on submit without any problems and if they are not able to why?

Usability Tasks / Scenarios

Tasks and scenarios were created for the users to complete, where data would be collected at each session.

Task 1:

Go to coolcases.com website, navigate to any sections of the website (not including homepage) and find two ways to go back to the homepage in under 2 clicks.

Task 2:

Your mother just bought the new Apple iPhone 13 pro max and would like to purchase a phone case for it. She has asked you to buy a pink colour one for her and it must have the best protection (Ultra).

Task 3:

Subscribe to the newsletter.

Data would also be collected

The following are the data to be collected for this test session:

Task Time
Completion Rate
No. Of Errors/ Mistakes
Usability Problems
Task level questionnaire (Ease of Use)
Test Level questionnaire (Satisfaction rating)

Test Results

Results of the Usability Testing were recorded in tables.

Issues & Recommendations

I discovered the issues during the usability tests and recommended actions needed to be done to the prototype.