Heading
Gamifying a purchase flow
Gamifying a purchase flow
Atlas Coffee Club
Q2 2024
Project
Overview
As staff product designer, I was tasked with updating the Atlas Coffee Club subscription purchase flow to an a la carte model, with a gamified feel. As part of the process, I brought my team together in an efficient cross-functional collaboration, building a new insight loop with my customer service, engineering, and operations teammates.
The design ask
Create a gamified top nav that would encourage customers to increase their cart volume. Apply our Design System refresh to the funnel.
Challenges
Subscription businesses have a very high barrier to trust, and getting someone to commit to a long term purchase relationship is tough. We needed to establish credibility quickly and offer clear instructions.
The outcome
I evolved our process that made the process more fun and increased the speed and quality of our feature releases. We matured our Design System with intuitive, iOS-style components.
Inclusive Process
I proactively shared prototypes with our CX team ahead of launch to get their input on messaging content. Dealing them early gave them time to refine messaging prior to new feature releases—and helped build a strong partnership. A technical specialist on their team became a key QA ally, and together we built a lightning-fast Jira + Hotjar process to flag and resolve user issues with engineering teammates.
IOs evolution
I added a juicy beacon animation to a progress bar, making quantity driven discounts pop as you browse. I created a Figma library of interactive components so that we could test accurately and avoid having to build A/B tests live. To add additional speed to launch, I delivered screens as prototypes to my engineering teammates with CSS code snippets to guide them toward building svelte JavaScript animated interactions.
prototyping
I created a high-fidelity interactive prototype to test the new gamified flow. We conducted rapid testing with this Figma prototype, removing live testing build from our engineering team's busy schedule and finessing our product evolution.
Mobile evolution
I designed a new system of iOS style cards, detailing how all of the variants would operate in a new Figma Design System.
Over my first year, we updated our product to an iOS card based component system that offered both a happy path and a "learn more" state.
