The Problem

Background

Empire Roasters and Records is a small coffee shop in Seattle’s Columbia City neighborhood. They sell both Coffee and Vinyl records. It was named after a street called the Empire street. When I visited Empire, I got to experience the vibe of the place and its aesthetics. The following words describe the brand:

MY ROLE

UI Design, Branding, Logo Design, UX Design, Prototyping, Wireframing, Branding

DURATION

5 weeks, November - December 2023

TEAM MEMBERS

Lakshmi Narayana

The primary communication goals for the redesign were set:

  1. Coherence

  2. Alignment with the brand

  3. Easier Navigation

  4. Better Organization

Ideation and Sketching

I first made a mood-board to visualize my idea and used it as a reference to come up with a team for the brand.

I generated logo concepts through brainstorming and initiated the sketching phase.

Iteration

After generating the concepts, I started to make the initial versions of the logo.

V1

Final Prototype

The idea was to play around with coffee and records but this version had detailed minute graphics which makes it not scale-friendly.

I tried to remove the minute graphics and tried to make it a little more organic and hand-drawn. But it felt more like a picture than a logo.

A more scalable logo. Also aligns with the original idea.

Reflections

The current online website of the shop is to be redesigned due to the following things:

  • Lacked Coherence: The pages throughout the website were not cohesive.

  • Did not align with the brand: The colors used in the website did not exactly align with the vibe of the shop.

  • Lacked organization: The website as a whole lacked organization and visual hierarchy.

Communication Goals

V2

V3 - Final Version

Prototyping

Low Fidelity Wireframes

Style Guide

Task Flow

The user can navigate to the menu directly from the homepage. The menu is grouped based on food categories which makes it easier for the user to navigate.

Easier Navigation and Organization

The main objective of the redesign was to adress the following issues:

Coherence

Unlike the original design, this interface is cohesive throughout all pages.

Brand Identity

The colours and the iconography aligns with the brand.

This project helped me understand the importance of visual hierarchy and the importance of practicality of a design. One major thing I followed throughout the process was to question myself if the design was practical. This helped me eliminate a lot of initial ideas ultimately moving towards a practical outcome. If I had more time I would’ve worked on the transitions of the prototype and overall design.