OAKLEY CIAO POS PRODUCT STUDY
Built different.
Overview
Oakley is a luxury performance brand specializing in crafting top-of-the-line activewear for athletes all over the world, with a product lineup that consists of lifestyle and sports performance eyewear, apparel and accessories.
The Problem
On average, the normal checkout process for customers takes 4 minutes to complete. Oakley's current purchasing flow provides many great features, however users report that most of these are not necessary for most customer’s needs, while still being required to complete a transaction.
The Goal
Produce an refreshed purchasing solution that aligns with the needs of Oakley's Sales Associates, allowing them to complete customer transactions quickly and efficiently, while ultimately helping to maintain the elite customer experience patrons of the brand expect.
My Role
UX Designer leading Research, Prototyping and Testing efforts to develop a product refresh for CIAO.
My Responsibilities
UX Research, Usability Studies, Wireframes, Lo-Fidelity Screens and High-Fidelity Prototypes
Project Duration
February 2023 – April 2024
User Research
Research involved interviews with Retail Associates at an Oakley storefront in Scottsdale and Tempe, Arizona. These associates frequent the program when working with paying customers. This group will be referred to as the user throughout this case study. These users, adept with the program, were quick to provide numerous pain points of the current CIAO platform, including their own complaints and those of customers. The main ones are listed below.
Pain Points
Time to Completion
For customers completing a general purchase, users on average spend roughly 4 minutes completing the transaction. This is exacerbated when Custom or Prescription orders are requested by customers. When multiple customers form a line, they can end up waiting to purchase for long periods.
Customer Trust
Customers often comment on the amount of information they are asked to provide up front before completing their purchase. Since it is a method of signing customers up for their own personalized accounts, some find it off-putting when they are asked to share their email or phone number.
Lack of Automation
Some systems, such as discount code input, are not automated. This contributes to longer transaction times, as users are required to reference and enter discount codes manually. Most users noted that doing this has, at times, sowed distrust in customers, leading them to be questioned.
Considerations and Challenges
Mobile First
A Nested System
Oakley storefronts utilize a traditional register for cash transactions, in addition to iPads for remote orders (Smart Shopper) and credit card purchases. These iPads are paired with a card reader via Bluetooth, allowing Associates to move about the store freely. Since data shows most in-store purchases to be with credit cards, the brand has expressed a desire for Associates to use the iPads more frequently—driving our team to prioritize the platform first.
Oakley utilizes CIAO nested inside of a larger purchasing system called XStore. Associates must first log into XStore before utilizing CIAO’s interface, and then finish transactions with it. If XStore were a book cover, CIAO would be the pages. Shareholders expressed their desire to continue using XStore, posing a challenge for our team to consider how this updated product would coincide with it.
XStore Sample Screens
The Design
Revisiting the User Flow
Corroborating pain points outlined by our user group, CIAO’s current user flow utilizes multiple screens, with users reporting to navigate through six different CIAO screens in order to complete simple orders. Many of these screens accomplish only one function essential to completing a transaction, rendering the system bloated—causing slower screen loading times and leading to delayed transaction times.
The Status Quo
CIAO, as it currently exists, consists of unbranded white pages that loosely follow a consistent UI system. While users learn to use them efficiently, they still find some tasks hard to accomplish simply based on the lack of cohesion between windows.
Current CIAO Sample Screens
Simplifying the Approach
Condensing screens allowed us to strip the interface down to only a few windows, while still effectively providing the core functionality that is expected of users. By revisiting the User Flow, our team was able to cut the number of screens down by half.
A Refreshed Look
The proposed UI for the improved CIAO platform follows Oakley’s design system, reflecting the interface found on the brand’s website by using the same icons, buttons and color libraries. This was an obvious choice to ensure visual consistency between the two platforms. Additionally, our team streamlined the account search function and the ability to add protection plans to select products, allowing users to quickly adapt to their customer’s needs.
Testing the Design
Usability Study Findings
For this project, a single usability study was conducted focusing on the ticket purchasing flow as it appears on the desktop-size variation of the site. Below are key findings from that study.
Improved Navigation
Users pointed out that while navigation was versatile, key functionality to allow users to freely move around the transaction process and adapt quickly to customer needs, was missing.
Order Review
A major gripe of users was the ability to quickly edit or remove items already scanned and in the queue, and the ability to add Oakley Protection Plans to scanned eyewear product codes.
Returning Customers
Oakley has a massive fan following amongst collectors and regular consumers. Users requested exploring additional tactics to save time for these types of patrons, for when they return for their next purchase.
To help improve navigation, an Exit button was added to the top-left corner of the header. This would allow users to exit both CIAO and XStore, taking them back to the login screen.
Further improvements to navigation. Back buttons and a process timeline were both added to allow users to move backwards and forwards, in addition to jumping between sections. Additional functionality (Add More Items, select or remove customer order) was also provided on the Purchase Review screen.
For returning customers who already have an account with Oakley, an Order History button was added to allow users the ability to quickly pull up previous receipt numbers and items purchased. The Edit button was condensed down to an icon.
Building on the functionality for adding Oakley Protection Plans (OPPs), the Order Queue screen was adjusted to allow users to quickly reference which products have OPPs attached to them, and the plan types. This is reinforced with similar functionality on the Purchase Review screen (highlighted in a diagram shown above).
Refined Screens
Going Forward
Takeaways
Initial Impact
Target testers were quick to note their enthusiasm for the condensed number of screens. While more testing is needed, checkout times utilizing the new layout undercut the original 4 minute par set by the original system.
What was learned
Improved navigation played the largest role in updating the platform for the better. While it is a benefit to integrate the style established by the Oakley website and brand, functionality hinged heavily on effectively simplifying the current transaction process.
Next Steps
1. Rx Integration
Following the establishment of a user flow and product that serves the core functions of users, features that pertain to Prescription and Smart Shopper orders will be integrated.
2. Discount Automation
Since the CIAO POS system will still be nested within XStore, it is important to add automated discounts to the final tender screen, removing the need for inputting discount codes.
3. Further Testing
Once additional features and a responsive build are are complete, additional user testing will be conducted to ensure consistency between platforms, and a streamlined flow.
FILED UNDER: USER EXPERIENCE, BET YOU THOUGHT THIS PROJECT WAS WAY COOLER WHEN YOU FIRST CLICKED ON IT