Heading
Gamified subscription
Gamified subscription
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 an cross-functional collaboration, building a new development insight loop with my customer service, engineering, and product teammates. And making a delicious new funnel as a result.
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
"Design review meetings are consistently a gold standard for team collaboration."
~Luke, Director of Product
CX collaboration
I proactively shared prototypes with our Customer Experience (CX) team ahead of launch to get their input on messaging content. Dealing them early gave them time to refine messaging and right size content prior to the engineering build—and helped build a strong partnership.
A technical specialist on the CX team became a close QA ally to me as we evolved the platform, and together we built a lightning-fast Jira + Hotjar process to flag and resolve user issues with engineering teammates.
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)
Ensuring 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.
