“Zenith Coffee Roasters” – Branding and UI/UX Design

Client: Zenith Coffee Roasters (Fictional)

Industry: E-commerce / Food & Beverage

Link: [Link to Behance, Dribbble, or Figma prototype]

Project Overview

Zenith Coffee Roasters is a startup brand focused on selling ethically sourced, single-origin coffee beans online. They needed a complete brand identity and a high-fidelity website design that would communicate their core values of quality, sustainability, and modernity. The project goal was to design a beautiful and user-friendly e-commerce experience from the ground up.

The Challenge

• No Brand Identity: The client had a name but no logo, color palette, or typography, requiring a full brand system to be created.

• Competitive Market: The online coffee space is crowded. The design needed to be unique and memorable to stand out.

• Complex User Journey: The website had to educate users about different coffee origins while also guiding them smoothly toward a purchase.

My Design Process & Solution

I followed a structured UI/UX design process to ensure every decision was deliberate and user-focused.

1. Discovery & Branding: I began with competitor analysis and created a brand identity that included a minimalist logo, an earthy color palette, and a combination of modern sans-serif and classic serif fonts. This established a foundation of sophisticated-yet-approachable branding.

2. User Experience (UX) Design: I mapped out the entire user journey, from landing on the homepage to completing a purchase. I created low-fidelity wireframes to structure the page layouts, focusing on a clear information hierarchy and intuitive navigation.

3. User Interface (UI) Design: Using the established brand guidelines, I designed a high-fidelity, pixel-perfect mockup of the entire website in Figma. I focused on clean typography, beautiful imagery, and ample white space to create a premium, uncluttered feel. I also designed a fully interactive prototype to test the user flow.

Key Design Deliverables

• A complete brand style guide (logo, colors, typography).

• High-fidelity mockups for all key pages (Homepage, Product Page, Checkout).

• An interactive, clickable prototype demonstrating the full user journey.

• A design system with reusable components for easy developer handoff.

Tools Used

• Design & Prototyping: Figma

• Brand Inspiration: Behance, Dribbble

• Collaboration: Miro (for user flow mapping)