Back

"CASEtomize" Website/App (Cross-Platform - Responsive)

- CASE STUDY -

MY ROLE: UX/UI Designer and UX Researcher leading the “CASEtomize” website design from conception to delivery.

RESPONSIBILITIES: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

THE PROBLEM: Most online customization websites have difficult browsing options, inefficient tools for sorting and filtering reviews, and confusing customization and checkout processes.

THE GOAL: Design a website for “CASEtomize” that offers easy online browsing tools and intuitive customization options to give users a stress-free shopping experience, so they can find and customize the right phone case for them.

USER RESEARCH SUMMARY

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was young moms, who are also busy professionals, who want to find and customize the right phone case to match their personality.

They want a simple way to access customer reviews, detailed descriptions, and a variety of product image views. This user group had experienced complex, overwhelming, and time-consuming shopping experiences in the past. Other user problems included not being able to filter through different types of reviews and trying to navigate through an inefficient checkout process. These users are looking for a stress-free, online shopping experience that is simple, intuitive, and offers a vast array of basic customization tools and options.

USER RESEARCH PAIN POINTS

PERSONA: MARIA

Problem Statement: Maria is a busy, professional employee and mom who needs easy online shopping tools and intuitive customization options because they want a stress-free shopping experience to find and customize the right phone case.

USER JOURNEY MAP

Mapping Maria’s user journey revealed how helpful it would be for users to have access to a website with intuitive customization options to personalize a phone case using their own image(s) and text.

SITEMAP

PAPER WIREFRAMES

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, customization, and checkout flow in mind.

The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.

PAPER WIREFRAMES SCREEN SIZE VARIATIONS

Because CASEtomize’s customers 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.

DIGITAL WIREFRAMES

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.

DIGITAL WIREFRAMES SCREEN SIZE VARIATIONS

I created different screen size variations to accommodate various screen sizes.

The examples to the right show the home page viewed from a desktop and mobile phone device. I wanted to maximize space with the mobile version by using an image carousel and placing the headline text and call-to-action button below the main hero image.

LOW-FIDELITY PROTOTYPE

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of checking phone case reviews, customizing a case, ordering an add-on, and checking out.

At this point, I had received feedback on my designs about things like placement of buttons and adding product images to the shopping cart. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

CASEtomize Low-Fidelity Prototype

USABILITY STUDY: PARAMETERS AND FINDINGS

MOCKUPS

Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was adding images of the ordered items in the shopping cart. This allowed users to visually verify the products being purchased. I also placed the payment button in the ”Order Summary” box, so users didn’t have to scroll down to finalize their order.

Based on the feedback I received during the usability study, I added customer pictures/videos and “verified purchase” labels on the reviews. This allowed users to feel more confident about their purchase choices.

I also added a ”back to top” link to help guide users back through the customization steps.

MOCKUPS: ORIGINAL SCREEN SIZE

MOCKUPS: SCREEN SIZE VARIATIONS

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.