Evaluating, strategizing, and designing an updated checkout experience for OptiPak, an international B2B e-commerce organization producing branded merchandise for clients in the optical industry.
Optipak - Product Design Lead
The brief
I had the opportunity to work with key stakeholders, engineering and marketing department leads to reimagine a checkout experience that engaged users and helped them design their own custom branded merchandise.
To kick off this 6 month redesign project, I audited their end-to-end checkout funnel and sought end-user feedback to strategize and design an intuitive checkout experience that resolved critical usability issues, and increased conversion rates.
Check out the final design here.
-
Problem
OptiPak was experiencing a surge in cart abandonments and frustrated users calling in to complete online order processing over the phone.
Audits revealed critical usability failures that made it practically impossible for any order type to be processed in their online portal.
-
Process
I conducted internal and external usability tests of the existing site, and interviewed clients who had called in or cancelled an order in the last 6 months
Potential solutions were explored through the development of user journey maps, task flows, and architecture workshops.
-
Outcome
Slashed mobile checkout task abandonment by 30%, and increased sales conversions of primary order type by 12%.
Designed original error prevention measures, responsive primary checkout task flow, and updated brand style guide and design system.
User research data revealed several technical and behavioral blockers that were derailing the checkout process.
Users have inherent “print-on-demand” skepticism. They rely on user reviews, product galleries, and true-to-life prototype renders in the product portal to validate proof-of-concept to convert. OptiPak’s outdated visual design and critical usability failures were driving users to their direct competitors.
User checkout test results
-
63%
Task abandonment rate - nearly 2/3 of mobile test participants failed to progress past uploading a logo in the product editing flow.
-
32%
Successfully navigated to the site on their first attempt - OptiPak’s biggest competitor popped up first on a Google search…for Optipak.
-
78%
Error rate - Across both desktop and mobile, users stated product findability and inconsistent signifier states left them feeling lost.
It was revealed in usability tests that most drop-offs were happening at the logo upload stage of checkout.
Without clear guidelines or error prevention measures in place, unsupported file types broke formatting across mobile in a way which removed access to task navigation. Both mobile and desktop users were unable to replace files and would abandon the task. This technical limitation was the result of an outdated plug-in on OptiPak’s CMS, and was resolved with a code review.
But that still left us with drop-offs caused by navigation and visual design.
Users still struggled with
Continuity errors
Signifiers, links, and hover states lacked design unity. Too many CTA’s utilized styles outside the brand that users assumed were meant to communicate error or disabled states
Task accessibility
New users were unable to access crucial trust-building content like product details and galleries. OptiPak was keeping vital conversion info behind a 48 hour account verification.
Existing users couldn’t place re-orders online. They either needed to call in or go through the entire product flow each time an order was placed.
Clarity & goals
Various design techniques were referenced across the site, but were absent from individual product pages and the design portal. Different order types and their respective processes wasn’t clearly communicated to users.
“What’s debossing?” should probably be the tagline for this entire project.
How might we engage users and build trust while still maintaining industry privacy standards?
Form reinforcing function
Collaborating with engineers and operations leads, we centered our solution strategy around
How to diversify and visually prioritize checkout flow entry points.
How to build trust and engage users without accounts, while keeping privileged product information behind verified registration.
How to drive re-orders, batch orders, and high ROI products.
Applying the user’s voice
I lead the construction of 3 potential task flow charts and user journeys to begin roughing out the structural solutions to user’s biggest pain points. The task flow layout we decided to green-light for development represented a “closed loop” approach to product customization, which effectively bridged many of the gaps across order types for new and established users.
Key features were
Sticky “start designing” utility allowed users to choose their order of operations.
Progressive disclosure: breaking up the product customization task into smaller bites let us showcase value and allow new users “test drive” the experience. They would then be prompted to create an account in order to checkout.
File library and re-order additions.
Given that OptiPak’s experience was not formatted for mobile, I started my sketch definition with a mobile-first approach. Referencing user test data, some of our highest ROI solutions were centered around error-prevention; these sketches showcase early considerations for cart management, branded confirmation modals, and expanded flow entry points.
Early solution concepts:
A running tab kept users informed on how their decisions affected their order in real time.
Error prevention modal: several users had abandoned checkout as a result of accidental cart edits. Asking users to confirm cart edits saved roughly 4% of all failed conversions.
Early ideation for 3rd party file management support, and expanded customization technique menus.
Validating with end-users and internal teams
I repeated my initial usability test plan with 4 of my original end-user participants and internal team members to test out the new layout and checkout funnel experience, and the results were overwhelmingly positive.
Test participants loved the idea of a 3rd party file integration schema, and were able to navigate through the funnel with a roughly 70% improvement rate on mis-clicks and navigational errors.
Insights & iterations
With a massive volume of products to sort through, including a sticky “start designing” entry point circumvented the content sprawl users experienced, and afforded prime real estate to suggest high ROI items.
However several wireframe test participants felt they were missing a middle ground, viewing both “get started” and “search” weren’t viable approaches for users who had a rough idea of what they were looking for.
To mitigate polarizing users and resolve an existing pain point in the existing filter feature, I iterated on the filter items and visual feedback to keep users anchored within the catalog and customization process.
Measuring success with prototype testing
-
70%
of users discovered new customization techniques that they didn’t know OptiPak offered. The inclusion of the “techniques” sidebar in the product portal answered the age old question: “what the heck is de-bossing, and how can I get it?”
-
87%
of users were able to clearly identify their target order types during first-round prototype tests, as opposed to a mere 20% during original usability tests.
-
100%
of end-users supported the having the option to import files 3rd party managers like Google or Dropbox, since busy business owners didn’t always have their assets readily on-hand.
Putting it all together
I developed high-fidelity prototypes across two breakpoints for the end-to-end experience. In addition to the architecture and layout update, these prototypes also reflect a unified brand presence and updated UI assets I developed in response to user pain points caused by poor visual design choices.
I’ll be featuring a deep dive on the OptiPak design system and visual overhaul in a separate case study, but check out the gallery below to check out how the final prototype turned out.
Design system development
Recorded walkthrough of the prototyped home-to-checkout flow
Next steps
Elements of my design solutions were applied to the live site before handoff, with the entire experience being built currently on OptiPak’s new platform.
The implemented changes to the live site have been hugely successful at improving metrics across mobile and desktop; things like the new mobile menu and content organization schema, and error prevention modals in the user’s cart.
Since launch:
30% reduction in task abandonment during checkout.
12% sales conversion improvement.
I am really looking forward to seeing how metrics stack up after their new platform launch. I’m in talks with OptiPak to potentially sign another scope of work to track analytics and delegate updates to their platform partners as needed.