calista

Web Design

Project Overview

Calista is an upscale luxury fashion company that sells clothes on their mobile-web experience that needs to enhance their browsing and checkout experience to greatly improve the product's usability. Data shows that 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. Additionally, 70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase any item on their site. The projects objective was to design a guest checkout to solve for this. The only requirement for the guest checkout that it must capture the user's email. By completing this project the goal is to improve the conversion from browse to completion of checkout to increase revenue on Calista's mobile-web experience.

Deliverables

User Research Insights

Affinity Map

Personas

Wireflow

Sketches

Low Fidelity Wireframes

High Fidelity Wireframes

Usability testing and Iterations

Prototype

Completed

March 2024

Collaborators

Elle Mahoney

Tools

Figma

My Role

UI Design

UX Research

Usability Testing



Context

Calista is an upscale luxury fashion company that sells clothes on their mobile-web experience that needs to enhance their browsing and checkout experience. The project's objective was to design a guest checkout to solve for the current poor user experience. The goal is to improve the conversion from browse to completion of checkout in order to increase revenue on Calista's mobile-web experience.

Problem

Data shows that 50% of users open on on average 7 item pages and then abandon the site without moving any items into their cart. In addition, the recent data also shows 70% of users who place an item in their cart do not purchase. Users abandon the cart at the regristration page. Currently Calista, requires users to make an account before they can complete their purchase.

How might we improve the conversion from browse to completion of checkout to increase revenue on the product's e-commerce experience?

solution

Calista's goal is to increase the number of consumers fully completing checkout. The company would like to give the users an enjoyable and frictionless e-commerce experience and increase their revenue.

  • Incorporating the option of guest checkout will greatly decrease the users pain point when it comes to the check out process.
  • To make sure business needs, users will be encourage in new and effective ways to sign up for Calista's Insider membership.
  • Additionally, relevant information will be highlighted to help best inform the user of which pieces of the clothing collection best meets their needs.

Defining The Process

UX Research Methods and Insights

Secondary Research

My research began by reading qualitative psychological research papers about the typical experience of an e-commerce user, specifically during the checkout process. The other topics investigated at this stage was, what motivates a user to complete their purchase, why users abandon their cart, one page checkout, and what the benefits of guest checkout are. The research further persisted the need for Calista to simplify their checkout process by incorporating guest checkout, one page checkout, and other helpful tactics.

  • The easiest and best way for checkout (i.e., one page check out or guest checkout) will bring the user the best possible experience.
  • Data reported that 40-50% of possible transactions were canceled once the user is asked to create an account.
  • Asking the user to create an account is the leading cause for users not going through with their purchase.
  • The four main barriers for consumers completing their purchases are: district, lack of resources, low availability of desired products, and poor computer literacy.
  • Most successful way to increase users motivation to buy are: incentives, availability of deferred payments, and personalization/humanization of the website.
  • To prevent users' frustrations with creating an account provide an immediate benefit and inform the user signing up  takes an limited amount of time.
  • Users' expect the checkout process to take less than 4 minutes.
  • Other e-commerce companies have also found success by implementing one page check out process.

User Surveys and/Or Informational Interviews

I surveyed 16 users about their personal experience with e-commerce shopping, the survey focuses on the completion of checkout process.

  • 56% of users report only signing up for an account if it's required and if they have shopped at multiple times.
  • 56.3% of users reported that they suspect the checkout process should always take less than five minutes to complete.
  • Out of all the users who participate within the study, only 18% reported signing up for accounts if required to checkout. The rest of the users reported not finishing with the checkout process rather than making an account.
  • The most appealing incentives for signing up for an account were exclusive deals, promotions, and gifts reported by participants.

‍

Insights

Themes

Users expect for the checkout process to take less than 4 minutes.
Guest checkout allows the user to complete their checkout without having to make an account.
One page checkout also helps users complete checkout by significantly increasing efficiency and decreasing checkout time.
The leading cause of users abandoning their cart is being required to sign up for an account.
Encourage users to create an account by providing immediate benefits.

Affinity Maps

Personas

Red Routes

Wireframing and User Testing

Sketches

My first step into depicting the solution was creating some rough sketches of the screens from my red routes. This was an low-cost way that helped me learn about certain constraints of the app.

Low Fidelity Wireframes

Once the sketches had been finished, I moved on to creating the low-fidelity wireframes on Figma.

Visual Design

Style Guide

Usability Testing

Once the high fidelity wireframes were completed, I created a completely interactive prototype with Figma. I interviewed 6 participants, and decided to do A/B testing in order to discover the effectiveness of a pop up feature that prompts the user to sign up for an account. Test (A) included 3 participants who would see the popup screen when they reached the homepage of Calista. Test (B) included 3 users who would not see any pop up screen at any time. Each interview will last about 30 minutes and will be conducted remotely.

Final Outcome

Other Projects

POSTUP

UNPLUG