Google UX Design Certificate — Case Study: Custom Phone Case Responsive Web (Casetom)
In this article, I will share the second (out of three) case study project that I worked on while taking the Google UX Design course. I will follow the Google UX Design structure for outlining this case study.
Design Prompt
Design a flow to order custom phone cases.
Project Overview
1. The product
Casetom is a custom phone case website that offers custom phone case services easily, efficiently, and available for various types of phones. Casetom target teen to young adult who wants to appear stylish and protect their phone.
2. Project duration
July 2022 to August 2022.
3. The problem
Available phone cases online shops have inefficient systems for custom phone cases, poor image quality, confusing checkout processes, and are only available for some phone brands.
4. The goal
Design Casetom website that allows users to easily customize their phone case that is available for many phone brands, doesn’t need to worry about poor image quality, and clear checkout process.
5. My role
UX designer, UX researcher. Designing Casetom app from conception to finished.
6. Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
Understanding the user
1. User research
Summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users treat online shopping or browsing phone case online as a fun and relaxing activity when they need a break from school or work. However, many of them were not satisfied with the provided design. They want to have a special phone case for them according to the design they want. But many phone case online shops have inefficient systems for custom phone cases, poor image quality, confusing checkout processes, and are only available for some phone brands.
Pain points
- Lack of features: Platforms for ordering phone cases still lack of features which makes it difficult for users.
- Navigation: Shopping website designs are often busy, which results in confusing navigation.
- Experience: Online shopping websites don’t provide an engaging browsing experience.
- Accessibility: Many other people have difficulty with apps that only support one language.
2. Persona
3. Problem statement
Giselle is an employee who likes shopping and making art who needs to buy and easily custom phone cases with good quality because they want custom phone cases that fit their design taste.
4. User journey map
I created a user journey map of Giselle’s experience to help identify possible pain points and improvement opportunities.
5. Competitive audit
The competitive audit goal is to compare the experience of buying and customizing phone cases with each competitor’s app.
6. Ideation
I did a quick ideation exercise with crazy eight methods to come up with ideas. My focus was specifically on making the simple flow to custom phone case features.
Starting the design
1. Sitemap
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple, easy, but still informative to users.
2. Paper wireframe
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. I prioritized an easy and informative ordering process to help users save time but still get detailed information about the product clearly.
Because users can access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
3. Digital wireframe
Using a completed set of paper wireframes, I convert it to digital wireframe. The primary user flow was adding items and customized items to the cart and then checking out.
4. Low-fidelity prototype
Using a completed set of digital wireframes, I added some details to define and create a low-fidelity prototype. The primary user flow was adding items and customized items to the cart and then checking out.
5. Usability studies
Research goals
Determine if users can complete core tasks within the prototype of the custom phone case website. Determine if the custom phone case website is difficult to use.
Parameter
- Study type: Unmoderated usability study
- Location: Indonesia, remote
- Participants: 5 participants
- Length: 5–10 minutes
Findings
- Complete Checkout: Once at the complete checkout screen, users can’t see detailed information about what they just input.
Refining the design
1. Mockups
Usability studies show that users want to review the data that has been inputted. So that in the new design, I display the data that has been inputted by the user during the checkout process.
Key mockups
2. High-fidelity prototype
The high-fidelity prototype improved based on usability study.
3. Accessibility
- Used both icons and text to help make navigation easier.
- Provided multiple languages to users who have language limitations.
- Used detailed and high-quality images for better experiences.
Going forward
1. Takeaways
Impact
The Casetom app makes users complete the process easily. Users shared it has a good visual design and is more engaging with the images.
What I learned
The most important takeaway for me is to be able to create designs that are easy to apply to the web and mobile interface. And must adjust the design according to the characteristics of each device.
2. Next steps
- Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
- Identify any additional areas of need and ideate on new features.
