Heading
Visual Storytelling
Visual Storytelling
Atlas Coffee Club
2022-2024
Project
Overview
Like architects, I create my ideal design systems and then compromise to fit time and team constraints. In this case study, I revisit the visual evolution I kick-started at Atlas Coffee Club and play with ways I’d ideally evolve it—moving it in a human-centered, visually luscious direction.
The design evolution
When I joined the Atlas team as their first staff Product Designer I was given a lean, startup style brand toolkit in Figma and asked to apply it quickly to a product refresh, without a full brand overhaul. Below I share updates I would make to mature the visual storytelling for Atlas including the brand marks, that need a glow up to become readable and sexy. I play out some of my work that addresses the core brand goal: creating a global coffee adventure for subscribers, with a rich diversity of coffee origins.
Freshness as a point of difference
As I gathered the human stories from my teammates, I learned that we sourced and delivered coffee in the season it's grown in, and worked with my PM teammates to highlight that compelling brand difference in our communications.
Having successfully launched Nespresso pods during my time, Atlas entered a more premium market space, and I see this freshness story as an important signal to prospective subscribers that we deliver exceptionally high quality coffee.
.png)
Human storytelling
I'm passionate about multicultural exploration, and got my team excited to share stories from our coffee growing communities. Our research taught us that coffee origin was a top reason our customers subscribed–our most valuable customers came to us curious, and loved our stories of the people and places behind the wildly different and delicious coffees we delivered to them.
sustaining community
While at Atlas, I guided my team to create an "About" page, and to share our sustainable practices in it. I worked with our sourcing team closely to gather data, images and details from our long term grower partnerships-a main ingredient in delivering exceptional coffee quality.
system evolution
Over 18 months at Askable, I built a scalable Figma component system that supported our migration to Shopify. I worked closely with my engineering counterparts to design a new style system that was optimized for iOS and Tailwind CSS, using a code reference library to align with Google Material Style UI.
.png)
Making it delicious
I loved infusing the new brand system with lush colors of coffee origin together with mobile friendly, iOS optimized components. Our new style system was particularly helpful in dense screen scenarios like the product detail page. In moving forward I would play this out in all of our surfaces, removing hard blacks and dull browns.
A worthy logo
Rebranding wasn’t in scope for our visual refresh while I was on the Atlas team, but I flagged that the logo needed a refresh, and that it lost legibility at small sizes. As a follow on in this case study, I played with our circular mark and a line version–a lightweight logo update that would be more readable. I also played with trajectory lines and arrows, evoking the energy of global exploration.
