Loading ...

Responses by Michael Janiak, creative director and cofounder; Erica Randhawa, senior art director; Jenny Ta, senior user-experience designer; Johanna Tannerfors, director of project management; and Isaac Newton, managing director and cofounder, Pattern.

Background: Founder-led, third-wave coffee producer Equator Coffees approached us to help redesign its direct-to-consumer experience and elevate its digital brand aesthetic to stand out in an increasingly competitive coffee market. Equator’s purpose for the site was to continue to grow as a premium coffee seller while bringing new energy to its e-commerce business, all with a continued focus on making a positive impact: from Equator’s retail shops to the communities where it sources coffee beans.

As a brand that has long prided itself on balancing the highest level of quality and craft with an inclusive approach that weaves itself in the fabric of each community it serves, Equator wanted to reach a wide range of people, ranging from Michelin-starred chefs, coffee enthusiasts, casual coffee drinkers, creatives and artists, and outdoor adventure seekers—all with different needs and wants, but who all share a common desire for community and the shared communal experience that coffee can create. The new Equator site is the key lynchpin in its digital brand strategy and an important new focus for the overall business moving forward.

Design core: A simple filtering system demystifies the product line and enables users to shop by whichever elements are most important to them, from tasting notes to origin to roast level. Subscription is made easy. Users can set up a recurring shipment of their favorite roast directly from the product detail page or they can follow the subscription flow for a recommendation.  Overall, we created an engaging, balanced experience that goes beyond commerce by enabling users to discover the brand’s mission and community as they shop.

On the design side, bold color, large-scale type and impactful imagery help make the Equator site leave a lasting impression on visitors. Aside from the bold red color, we borrowed additional cues from Equator’s packaging like clean iconography to ensure synergy between online and in-store channels. Clear visualization of elements, like roast level and tasting notes, enables the user to easily differentiate between products.

Favorite details: We are particularly proud of the product detail page because we managed to make a large amount of information easy to digest while still maintaining the integrity of the branding. Whether the user is new to coffee and wants a simple overview of the blend, or they’re more of a connoisseur, we have a wide range of detail to cater to each consumer. Smaller details like how the filters slide out and how the page loads as the user scrolls made a huge impact on the overall experience.

Challenges: There were two big challenges for us. The first was designing the overall experience in a way that revealed the story, source, process and details around each coffee in more and more depth as customers navigated toward specific categories and products. This “progressive reveal” approach required a lot of design iteration across customer journeys in parallel with rigorous content planning.

The second was designing a visual filtering system that presented itself as engaging and inclusive no matter how much or how little you know about coffee. We wanted the system to act less like “filters” and more like a built-in, visual, discovery journey. Categorizing all of the pertinent product attributes into a model, design system and experience that was powerful enough to scale across Equator’s present and future offerings, while still coming across as playful and being useful—this presented a major challenge and took a significant amount of both design and engineering effort to achieve the right solution.

Diverging paths: This isn’t something that we would do differently, but if there’s something we think we can take even further, it’s the impactful red product photography. We would love to see some new photoshoots that really explore the dynamic isometric layouts. This is where the branding really shines, in our opinion!

New paradigms: Coffee holds a very particular, very special place in culture. It can be the connective glue and shared experience that builds amazing communities and fosters life-changing conversation and connection.

So many coffee companies are mimicking wine companies, focusing almost exclusively on things, like origin and terroir. We knew that if we could flip that concept around and meet people where they are by leading with the communal experience that people know in their everyday lives—the cup of coffee with a friend or a fresh bag for their home—we could draw people into the Equator world in a way that was more meaningful while revealing the story, purpose and mission of Equator to them over time.

Navigation structure: An overarching goal of the site’s navigation design was to go in the opposite direction of many third-wave coffee brands that give off an exclusive and precious vibe. We wanted to present Equator’s coffees as both highly desirable and of the highest quality, while simplifying the language and categorization to be accessible and understandable to anyone. We also consciously allocated more space to things like the subscription discovery experience, cafe locations and the brand story and B Corp impact, as these areas drive not just revenue to the top line via sales but also serve to build Equator’s brand value in the market over the long term.

Special navigation features: We crafted some visual elements into the navigation menus on the desktop version to give users a sense of story and place—and an experience that goes beyond just a list of links.

Technology: The site runs on Shopify Plus with a lightweight PWA responsive front end. We worked hard to ensure subscriptions were seamless, and used the Recharge app and its public APIs to develop the logic that powers the user flow and the recommended match customers get when they engage with the questions.


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In