Project

// Single Project

Project Details

A closer look at the project and the process behind it

Project Description

“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)

Related Projects

Sohaib HASSAN

Your vision into life