a User-centered recreation of eCommerce website and rebrand for A small coffee roastery.

 

Timeline

4 Months

Tools

Figma, FigJam, Illustrator, and Photoshop

 

project overview

Golden Triangle Coffee is a one-man run coffee roastery in Cleveland, Ohio. They utilize a unique roasting technique that results in higher quality beans. The business is expanding at an amazing pace with their main marketing coming through their platform on TikTok.

 

the Problem

The visual identity was almost non-existent and portrayed the brand in a way that didn’t match the quality of their product. The website further cemented a disconnect among users since the layout and information architecture was overwhelming and unclear.

Though their reach is large, users and potential customers don’t feel confident making a purchase from the website when they’re confused on what and where to click to view products and find coffee information.

 

Solution

I created a mobile website and brand system that:

  1. Allows the visual identity to serve how the roastery wants to be perceived.

  2. Creates a sense of recognition for users when they interact with any part of this brand, digital or physical.

  3. Empowers customers to feel confident while interacting with the website.

 

design process

The process began with creating personas and understanding my clients’ target audience. This was key to create a brand identity and web experience that complimented each other. Through research and testing, a mobile prototype was crafted to bring an optimal experience for those interacting with the brand online.

Site map & user flows

 
 
 

Wireframes

 
 
 

components and local variables

Atoms such as icons, logos, typography, and color were defined in the first steps of creating the site. Color, spacing, and corner radius are all created as tokens utilizing Figma’s new Local Variables functionality.

I built various buttons, fields, and other interactive components to enhance users’ experience with such ease, applying previously defined attributes to components. This gives a strong sense of immersion and allows for users to understand the brand on a deeper level.

Examples of medium-large components built with atoms and local variables

 
 

Screen examples

 
 
 
 

Branding

I was hired by Golden Triangle Coffee to create a new mark as they are expanding their business. The mark needed to be one that was bold, eye-catching, and full of whimsy. Color and typography was also customized to serve the identity effectively.

 
 
 
 

Packaging Design

Final thoughts

This was a thoroughly rewarding experience. I feel I accomplished the goals set for this brand’s identity and website. I’m extremely grateful to have been hired by this Golden Triangle to create this logomark. The brand originally was not working well and what I created helps elevate it to align with customer perception. I believe a polished brand cuts through the noise and their customers have responded positively to the new mark. Implementing a brand effectively into a web experienc

The creation of the mobile site was so much fun and challenged me to think in ways that I wasn’t always practicing. Creating logic behind tokens and components for optimal use was one of the most satisfying parts that I experienced in the creation of this site. Now, I start my projects thinking about how to break down large components into smaller, reusable atoms and tokens.

The next steps for the site include designing even more responsive variables and adapting the experience across desktop and tablet experiences.