Project: Bag and Checkout redesign
Platform: iOS and Android
The Challenge: The bag and checkout experience was very dated and difficult to navigate through. We wanted a more streamlined process to get more users to convert without much frustration.
Role: UX Designer, UI Designer for Checkout
Solution
App users are our most loyal customers and delivering a seamless experience to them helps build trust and increase ROI. Giving the users quicker options to checkout and clear and concise sections helped to clean up a lot of confusion and customer frustration. We now have clear places to add promo codes, sign in and use rewards, and add gift cards.
Bag
Once a user is logged in, we wanted to personalize the experience by stating their name, total points, and points for next reward, this is also the area where a user can redeem their money rewards towards their purchase. We also gave the users the option to checkout earlier with Pay Pal and Apple Pay - in this first iteration we hope to train the user to look here for a faster checkout, so that we may update that area with a quick checkout using our own brand credit card.
Checkout
The idea for checkout was to break down information into cards, giving the user a quick overview of all of their information. Incase a user still was not logged in at this point, we wanted to serve a small banner at the top of the page for logging in. Baymard suggests that most users who complete checkout as a guest have highest percentage of creating an account at order confirmation. We let the user know this is possible on the confirmation screen as well as informing them that they can still redeem their points for the order they just placed.
Checkout - ui
I created a card based system for each section of information, using icons when appropriate. I pulled some of our design elements from other experiences we’ve worked on to keep parity between pages.