Ready to purchase?

🛒 Shopping Cart case study | iOS White Label App v1.0, April 2018

Conversion Matters

For any e-commerce application, transaction conversion rate is always one of the top KPIs. Shopping Cart is our critical touchpoint where customers collect the products they would like to purchase. The items in Shopping Cart is only one step away from the Checkout flow, making its user experience even more important from a business perspective.

Therefore, I worked closely with the Product Manager to prioritize the Shopping Cart feature design at the very beginning of the iOS White Label project.

Feature Kickoff

The first step of my process is a Feature Kickoff. This is a brainstorming session conducted together with key stakeholders from UO, Free People and Anthropologie's creative department and marketing teams. Since some of the stakeholders were not familiar with the native app experience, I presented 3 legacy apps' Shopping Cart functionalities as a talking point.

At first glance none of the apps shared the same UX design. Free People & Anthropologie both had the swipe gesture on item cells to expose more action buttons while UO was the only one fully exposing all item controls. UO & Anthropologie were both structured with 2 tabs for Cart and Save for Later while Free People's Save for Later items are displayed below the Cart. During the discussion some questions became more intriguing to all of the keyholders:

• What made us choose this design at the first place?

• Which app's workflows are the most efficient?

• What are some of the top friction points to our customers?

The kickoff meeting successfully resulted in preliminary assumptions and ideas for improvement. Now, how might we answer those questions and validate our suggested directions?

Feature Exploration

I first reached out to our UX Researcher Lizz Cuzzacrea to see if we could run a usability testing for the legacy apps. Lizz happily organized a remote, unmoderated evaluation via UserTesting with 30 US participants from 3 brands’ customer database. We measured Task Success/Error Rate, Ease of Use, Frustration Moments and Overall Satisfaction.

Our customers turned out to be surprisingly vocal about their first impressions. Their biggest struggle, as you could hear from the video clip below, was that the swipe gesture of Free People & Anthropologie was not easy to discover. They had a hard time removing or editing an item from Shopping Cart.

Other outstanding feedback were:

• Customers appreciated confirming action upfront, rather than “Undo” afterwards.

• Edit view was confusing across 3 apps due to its similar look to the product page.

• Tabbed Save for Later view was preferred compared to stacking below Shopping Cart due to quicker access.

I then turned to the brand analytics team to see if they could pull up any customer behavioral data regarding the Shopping Cart experience. UO's legacy app had CoreMetrics tagging which clearly informed the highest to lowest usage user actions. The ranking was later proven to be highly influential to my UX design.

Lastly I partnered with our Product Analyst Alex Hasselburglar on a competitive landscape analysis. Alex looked into 30 native apps covering 21 direct competitors and 9 large retailers, and presented an in-depth breakdown of common Shopping Cart UI patterns. This report served as a solid foundation of the criteria that meets customers' general expectation for a retail experience.

Design Iteration

Equipped with quantitative and qualitative insights, I determined the overall objectives of this feature as below.

• User Objective: easily review and manage all the items I’d like to purchase

• Business Objective: promote streamlined user task completion

• Design Objective: resolve known friction points, for example the Edit view confusion

The main item cells are intended to empower quick access to the 3 highest engagement actions - Remove, Edit and Save for Later - by exposing those CTA buttons rather than hiding behind a swipe gesture. After few rounds of iteration I landed on the final design below which accounts for all possible product types such as a Gift Card and Made To Order item.

This layout is pretty similar to the legacy UO app's design. However the legacy UO app suffered from exposing too much inline controls such as Gift Wrap, cluttering the item cells. Noticing that Gift Wrap functionality only took up ~1% of the legacy app usage, I consolidated all Gift Wrap access points to a global management page where the customer can review all eligible items and apply the selection in one place.

Another problem I focused on addressing was the Edit Item action. All 3 legacy apps' Edit view caused cognitive burden due to their almost identical layout with the actual Product Detail Page. Customers were confused whether their action would add a duplicate item to Cart or not.

My approach was to afford streamlined SKU control abilities while not taking over the complete screen height. This concept was inspired by the Android Bottom Sheet pattern - by exposing part of the background view, the customer could be more aware that this is a stand-alone task.

In the new design, not only does the modal animate to push back the background view but also most importantly, the position and ratio of item information and SKU controls are intentionally differentiated from the new White Label Product Detail Page in order to avoid task confusion.

During this phase, I reviewed the UX design with the brand creative teams a few times to align on creative priorities and interaction patterns. All of the final UX design was approved by brands before moving forward to engineering estimates.

Requirement Finalization

Once the general layout of major workflows are defined I continued to flesh out the detailed workflows of each section. Based on the usability testing feedback I provided upfront information for each non-reversible Cart action. This could be delivered in the form of an iOS default action sheet (Remove/Cancel), or a customizable alert view in order to contain more information. After a successful action is completed I presented a non-intrusive toast banner message to confirm.

The complex nature of Shopping Cart lays in the fact that the availabilities of each product could vary from time to time. I partnered with the Product Manager to document and design all error handling methods for each one of these edge cases:

• Item is completely out of stock

• Item is no longer available for In-Store Pick Up

• Made To Order item is no longer available

• Item quantity no longer meets original request

• Item's In-Store Pick Up timeframe has changed

Release Preparation

Wrapping up the feature UX design, I passed the wireframes over to each brand's UI designers. They would then apply their pre-defined UI Style Guide globally. During this final phase I sat down with the UI designers for a thorough visual QA & UAT of each brand's Beta application. Sometimes we had to tweak the White Label design here and there to account for the best visual representation and provide better accessibility.

Performance Evaluation

After the successful launch of White Label app with UO in April 2018, we conducted a General Experience Study in May to collect customer feedback about the brand new White Label app. The study was remote and unmoderated with 40 UO participants.

I'm grateful to learn that customers mostly described the Shopping Cart feature I designed as "easy" and "intuitive". The customers also pointed out some suggestions for potential improvements specifically around the newly designed Gift Wrap Options page. After all, there is never a "perfect" design - I could always work towards a "better" one though.