Canvas Checkout 2.0
As part of VF's Canvas initiative to merge 3 brands onto a single shared platform, the cart and checkout experience was given a facelift to better meet business and brand needs as well as provide an improved customer journey.
​
I was the lead UX Designer for this project and collaborated with researchers, engineers, and brand partners to achieve the final result.
Project Goals
Streamlined UX
Our researchers found that the main concern for our users during checkout is to reach the end goal as quickly and seamlessly as possible. This looks like removing any unnecessary decision points or visual clutter as well as optimizing autofill.
Multi-brand Usability
When designing for the Canvas platform we need to keep the needs of three brands (The North Face, Vans, and Timberland) in mind. Solutions need to be not only possible but beneficial for all brands.
Accessibility
Previous platform was not meeting legal Accessibility requirements. In order to serve our customers as well as avoid any legal issues we need to ensure all components and experiences meet the accessibility needs of our consumers.
Design Approach
As part of the 'Canvas' Design System we have an unbranded version of all our design components that serve as a way for us to design without brand bias. We essentially design in grayscale wireframes until designs are close to final approval. Each screen can then be skinned with brand colors and components, customized copy to the brand, and any unique UX required (i.e. Vans needs designs for their Customs shoes that The North Face and Timberland don't need).
For the Checkout project, we started with high level research based on usability tests of three general concepts. From there we synthesized our research and decided on a final direction. We ideated within the final direction, incorporating more detail and business needs, meeting with brand and engineering partners, and thinking through edge cases to land on the final base designs below.
Cart
My first focus in cart is to simplify the UI of each product card while also providing all the expected information and actions. Then optimizing the Order Summary values and totals with the same goals in mind.
Cart Items
-
In order to maintain maximum content within the mobile viewport we condensed secondary product card actions into a dropdown menu
-
Utilize a modal in order to switch delivery methods at the item level instead of radio buttons to reduce cognitive load on mobile users
-
​Updated Quantity control from a dropdown menu to a stepper
Order Summary
-
Combining the promo code section with the Order Summary and leaving exposed (previously in a dropdown) alleviates user confusion finding where to input promo codes as reported in previous UI
-
40% of our mobile consumers use Apple Pay so we made it easy to find directly under the Checkout CTA
-
Use of clear terminology and informative tooltips in the order summary helps users understand that these are tentative values and to expect updates to their total as they enter checkout
Shipping
Our biggest goal for checkout was to condense all steps onto one page, eliminating the previous setup of each step being outlined as its own page.
Shipping & Delivery Section
-
Account Sign In/Register prompt at the top of the screen for guest users to promote loyalty programs
-
Standard required Shipping Address fields per locale with improved autofill function and accessibility compliance
-
Option to sign up for brand emails within shipping form for guests
Order Summary
-
Order Summary includes a condensed version of the products in the cart with a link to return to edit the cart
-
Values are more detailed once user inputs their shipping address and selects a delivery method
-
Promo code field functions the same as cart and will carry through any discounts added while in cart
Payment
As part of our streamlining efforts, we wanted to eliminate our 'review' step. So in the payment step we worked to ensure users would have all the info they need to feel comfortable placing an order directly from this step.
-
Read only version of shipping information for users to reference, correct, or go back to edit
-
Estimated delivery date displayed for the selected shipping method
-
Payment section includes a 'same as shipping' checkbox for billing address to reduce time spent filling in information for consumers
-
Express payment options listed with single 'place order' CTA
Order Summary
-
Order Summary includes a condensed version of the products in the cart with a link to return to edit the cart
-
Values are more detailed once user inputs their shipping address and selects a delivery method
-
Promo code field functions the same as cart and will carry through any discounts added while in cart
Conclusion
We successfully merged three brands onto a single platform with a new and improved checkout experience. I led the design efforts including creating the mockups and presentations, and later partnering with engineering in the build process to advise on UX standards and conduct design reviews. Throughout this process I acted as a liaison between the brands and engineering, ensuring we had a feasible and functional end product that ultimately served both brand needs and user needs.
In the Wild
 |  |  |  |
|---|---|---|---|
 |  |