Leon Coffee House

Helping a small business cafe with their site

https://www.leoncoffeehouse.com/
My Role
UX/UI Designer
Stakeholder Interview
Competitive Analysis
Design System
Team
4 Designers
4 Developers
1 Project Lead
Tool
Figma
Timeline
3 Months
Introduction

Leon Coffee House

Our client for this project was Leon Coffee House - a family-owned business that is among Seattle's only Mexican coffee shops. It first opened in November 2021.

Our Objective

Put Leon Coffee House on the Map

Prior to our involvement, Leon Coffee House's only platform was through their social media especially Instagram. While their business was able to build a following, this approach prevented new customers from discovering their business. They needed a solution to not only expand their online presence but also reinforce their brand visibility. When creating this solution, we needed to focus on the following core objectives:

1. Reinforce their brand identity
2. Increase visibility of their menu and location access  
3. Redirect customers to their social media
Research Phase

Meeting with the client

Before designing the site, our team met with the owner of Leon Coffee House to better understand their wants and needs. Here’s what they had to say:

Brand & Style

"should be lively and have an inviting atmosphere"

"showcase Latino heritage"

"nice, soft, cutesy color palette"

"branding should stem from the logo"

Features

"getting to our Instagram should be easy"

"menu kept simple, but also highlight waffles and latte"

"display location and hours"

"must show off the cafe interior and atmosphere"

Who does Leon Coffee House serve?

In this project, the type of customers seen in Leon Coffee House are usually college-aged students.

Prototyping & Design

Getting the layout right

After getting a sense of what the client wants and their coffee drinkers, it was time to imagine how the website will come together. Drafting low-fidelity mockups, we began to visualize various website layouts and visual elements. This was the first step into seeing how a user would be browsing through the site.