cartandcheckout.png

Cart & Checkout - Ulta Beauty

Research, UX Design
Web - Responsive

 

CART & CHECKOUT

Streamlined Ulta Beauty's cart and checkout process to decrease abandoned carts and increase conversion rates.

 
 

Original Cart and Checkout Process

 
Untitled-3.png
oldcheckout.png
 
 
 

Key Goal
Redesign and optimize the existing cart and checkout process for the web while also making the experience AA-compliant.

Devices
Web - Responsive

Responsibilities
Research, UX Design, Frontend Development Consultation

 
 
whiteboarding.jpg
 
 

01. Roles & Responsibilities

I took over as the lead UX Architect for this project after the initial research and wireframing had already begun. I worked with one other UXA, UI Designer, a team of onshore developers, and offshore developers. I created interactive prototypes and conducted user testing to analyze our initial designs. Once the wireframes were created and annotated, I provided consultation support for the frontend development team to aid with the ADA compliancy and training of junior-level frontend developers.

 
 
 
Screen Shot 2020-03-04 at 2.20.54 PM.png
 
 
 

02. The Process

Ulta was looking to increase conversions and decrease abandoned carts by moving away from their old stepped-out checkout process. To elevate the experience for everyone, we were also aiming for the cart and checkout to be Ulta’s first ADA-compliant (AA Level WCAG Compliance) project.

I was started on the project after the initial research and cart wireframes had been completed, I began my process with whiteboarding sessions to rapidly generate designs for checkout. We were on a very tight deadline working almost in sync with developers with little time for user testing. Working as quickly as possible, I took the designs and brought them to life by making interactive prototypes. I wrote scripts for testing to put our designs in front of users for unmoderated user testing. Even though we were on a tight deadline, it was extremely important to test our designs since the cart and checkout are exposed to tens of millions of guests. After the designs went through testing and were proven, I created the annotated wireframes.

Untitled-1.jpg

ADA compliancy was extremely important for this project. A big part of being ADA compliant is having a site that works properly for a guest that uses a screen reader. This focus was a completely new topic for Ulta’s development and QA team. I provided them with guidelines and best practices while they developed the experience.

Applied Coupon - Before & After

oldcoupon.jpg
Screen Shot 2020-03-04 at 3.27.31 PM.png
 
 
 

03. Outcomes

The original cart and checkout were released to Ulta’s tens of millions of guests in early 2018. It successfully boosted conversions and continues to outperform their old experience. Since its initial release I’ve continued to work on further iterations to continue to push the design.

 
 

Final Product

 
screencapture-ulta-bag-2020-03-04-14_53_29.jpg
 
mock+(1).gif