Heading
Mobile-First Evolution
Mobile-First Evolution
Atlas Coffee Club
Q1-Q4 2024
Project
Overview
As a Senior Staff Product Designer at Atlas Coffee Club, I redesigned our customer subscription portal to be mobile-friendly, visually consistent, and easier to navigate. The update provided a streamlined path for iOS users and a richer route to explore the growing communities behind each month’s coffee—delivering on our promise of a global tasting journey.
The design ask
Iterate on our new design system to refresh the customer portal, evolving it for Shopify and Tailwind CSS/React. Make it easy for customers to customize their subscription in ways that build loyalty and drive retention and subscription volume growth.
Challenges we overcame
We faced inconsistent nomenclature across key functions of our subscription business, which required thoughtful refinement to improve clarity and usability. Additionally, our CSS styles had not been codified, leading to confusion for our external engineering team. We also needed to elevate storytelling that resonated with our ideal long-term customers, reinforcing the sense that Atlas was a brand aligned with their aesthetic and values.
The outcome
Over the course of a year, we completed several rounds of evolution—creating clear documentation and defining a cohesive content structure within our new portal design system. We added compelling origin stories and crafted messaging that allowed customers to see themselves reflected in the brand. Together, these efforts drove exceptional subscription growth through portal upsells and significantly improved customer engagement.
pushing through complexity
This refresh of our logged-in product was a complex undertaking. Atlas had multiple layers of product development from 12 years as a subscription business.
Until I joined the team, the product had not yet matured into a modern, mobile-friendly state. We needed to work with strategic efficiency to create an intuitive and engaging subscription experience on our tight timeline.
Assessing the product
I mapped our information architecture with a usability lens and made recommendations that would move us into cohesive Shopify/React framework friendly system.
I used this clarity to win alignment with my product owner and create the basis for sprint planning. I then re-hauled the navigation informational structure, distilled the dashboard content, and edited nomenclature to match iOS norms.
Improving the core action path
I collaborated closely with the product owner to codify and clarify our nomenclature, aligning it with standard e-commerce terms such as "Dashboard" and "Subscription." I differentiated user account categories—such as contact and payment details—placing them clearly within an "Account" section.
To reduce clutter, I advocated moving this information into a mobile-friendly kebab menu, prominently highlighting core subscription actions at the top of the Dashboard. Finally, I mapped out a consistent nomenclature system that aligned with established iOS and e-commerce naming conventions.
Retention analysis: Origin stories win
Our team performed retention and click-rate analyses, examining user behavior to identify patterns associated with higher retention and churn over the past 6 and 12 months.
Our analysis taught us that customers who engaged with portal features such as noting coffee details and browsing their past coffee origin countries had significantly better retention. This was a strong green light to emphasize storytelling about coffee origins throughout the customer journey. I designed new cards to highlight the beauty of our origin regions, and ensured that they were easy to use on a phone.
A/ B Testing wins
I guided our storytelling in a customer-centered direction, with the hypothesis that if you show your target audience a tantalizing moment they recognize themselves in, and they’ll dive in—deepening their connection to the brand and fueling growth.
We conducted several rounds of A/B testing against our prior Ads, and our first Variant drove triple digit cart volume growth with the new Ad images and layout.
I worked with my Product Owner and Creative team member to create a library of images that would have a similar impact, and we continued to see outstanding upsell growth.
mobile-first evolution
I evolved our portal architecture as part of our Shopify iOS transition, designing a card based, mobile-first design system that made it easy and enjoyable for customers to navigate on the go.
As part of this design system work, I codified our Tailwind CSS styles in collaboration with our engineering team–improving consistency and efficiency across both existing and new features.
Since subscription adjustments are centered around forms, I audited the gestalts for our forms interactions and used a code reference library to align with the prevailing norms of Google Material Style forms.
By streamlining the content structure and introducing compelling visuals, we significantly increased engagement and upsell rates.
