Gamified Purchase Flow
Gamified Purchase Flow
Atlas Coffee Club
Q2 2024
Project
Overview
As staff Product Designer, I designed a major update to the Atlas Coffee Club subscription purchase flow–moving us from a single sku delivery to an à la carte model with a gamified feel. As part of the process, I brought my team together in a cross-functional collaboration that resulted in a delicious new purchase funnel.
The design ask
Create a gamified experience, including a dynamic top nav that would encourage customers to increase their cart volume. Apply our new 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 spearheaded a new CX collaboration in ways that made the process more fun and increased the quality of our feature releases. I worked closely with my engineering teamates, and we matured our Design System with intuitive, iOS-style components.
Team wins
"Marilee took the initiative to onboard our entire team effectively, ensuring a unified and streamlined design process...The results speak for themselves: significant lifts in monetization metrics over the previous year." ~Michael, Founder
"It's clear to me that Marilee has a passion for site accessibility, design, usability, and takes the feedback of customers seriously, always looking to improve the experience."
~ Jenny, CX QA Specialist
IOs evolution
I added to the Figma design system I created, expanding our library of mobile friendly card components. These new card interactions supported both a quick scan and an enriched detail view of our products. I shared code snippets with my engineering counterparts to ensure the interactions were fluid and enjoyable, matching norms established in iOS apps.
Exploring gamification
Dynamic savings progress bar: To motivate higher quantity purchases, I explored a dynamically updating tally bar. I designed variations on a bar that would remain sticky at top of screen, with a beacon animation to catch and engage the users eye as they shop.
Ensuring task completion: In cruising around this new purchase flow, you might navigate away from this funnel. I challenged myself to solve for way to entice shoppers back into this funnel to complete their purchase task. I wanted to do this playfully, and explored Lottie animations that would glow with a pithy "Your perfect coffee order is waiting" message.
.png)
a quick build
Working closely with Devs: I love to work closely with my engineering teammates early and often to define and refine new juicy interactions. My design work is only as good as my engineers understanding of it.
In this case, lottie animation was a lightweight solution my team had not built in the past. To make things easy for them, I shared the seamless code integrations with Lottie files, and we shipped the animated flow quickly.
Challenge
How might we motivate customers to adopt a gamified “buy more, save more” model and increase their cart size?
Wireframe Solution
We restructured the portal IA to emphasize our most frequent customer actions, and highlight actions that our data correlated with long-term retention.
