COFFEE GALLERY

Role:

UX/UI Designer

Project duration:

December 2021 to January 2022

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Background

A long term establishment in Altadena, California, Coffee Gallery has served its community since 1998 by providing a resource favored by many in the neighborhood. It has always been a hub for locals to meet, catch up, and to be productive. As a working cafe, they have tailored their hours and menu to accommodate a loyal customer base with a tendency to stay for extended study and work sessions.

The problem:

The current website has no call to action and no way for customers to place orders for takeout or pickup. On mobile devices, the website is not displayed correctly and is largely non-functional. Furthermore, little to no language establishing their identity and history is prominent on the website.

The goal:

Increase sales by getting more takeout and pickup orders through desktop and mobile website.

Customers need an easy online ordering option to minimize in-person interactions and have expressed an interest in the ability to choose a method of placing orders that better meets their current needs.

The Solution:

By making the online ordering function most prominent on the desktop and mobile website, Coffee Gallery can better meet the needs of their community as well as drive more business to their takeout and pickup services. Adding strategically placed copy that illustrates their brand identity will further emphasize their role and history in the community, encouraging new and existing customers to support them on web and mobile platforms.

Approach

Understanding the User

I conducted a competitive analysis, created personas, and mapped user flows to understand the users I’m designing for.

Competitive Analysis

Taking into consideration local coffee-centric businesses as well as larger coffee companies, three particular websites offer insight into industry standards while demonstrating varying levels of success in the usability and efficiency of their design.

One of the best cafe/roaster websites out there. It’s clean, curated, and trendy. Above all it features immediate access to purchasing options in the main menu bar as well as its recurring calls to action throughout the length of the page. High quality photos and consistent style guide complete the look

Many expected features but execution is less graceful here. Call to action and shop access are present but get lost amid visual clutter. The promo banner and cart options at the top of the page keep drawing your eye away from the purchasing options below. Additionally, the logo has  text that competes with the main menu bar and takes up nearly half the screen real estate. Only a downward scroll gives the eye a respite from the these elements.

They have not improved their online presence to make it easier for customers to place online orders or understand the company’s brand. While an option to purchase gift cards online exists, this otherwise minimally functional, single-page website leaves nearly everything else to be desired.

Personas

To gather initial data as a frame of reference, I compiled a list of characteristics and demographic information from Coffee Gallery's instagram followers.

Similarly, I also noted characteristics of Coffee Gallery's Facebook followers and then combined this with the Instagram user information.

Having analyzed their social media followers across Coffee Gallery's two primary accountsand those using #thecoffeegallery hashtagI was able to sort characteristics of actual customers into four personas to help inform the design process.

User Flows

To understand the existing sites architecture better I started by creating a flowchart for the current Coffee Gallery website. From there I was able to see what pages could be consolidated or grouped together.

Existing Flow

Proposed Flow

Starting the Design

Brainstorming

Began with exploratory sketches to try various permutations of the layout. In this process I found that the design became more effective with greater simplicity. This lead me to choose a more concise layout.

Existing Website

Final Choice

Paper Wireframes

Having settled on a direction for the layout, I then incorporated each page and its function into an early set of wires. Consistency became a challenge as the site would be using third party services embedded in two key pages.

Home

Order

Catering

Menu

Blog

About

Low Fidelity Wireframes

A paired down version of the websites wireframes were used to run a cursory usability test with three participants.

The focus of the usability test was to gauge whether navigation was intuitive and to gather feedback about any areas of concern or confusion.

Low Fidelity Wireframes

After testing the initial set of low fidelity wireframe with three users, it quickly became apparent that some design changes were needed:

Mood Board

High Fidelity Prototype

The prototypes includes stock assets and mockups of third party services to give a complete picture of intended functionality.

Many coffee shops and other restaurants opted for using ChowNow during the pandemic because of their more equitable business model and commission free pricing structure.

Using ChowNow for ordering makes the most business sense for CoffeeGallery to get set up for online orders quickly and efficiently.

Mobile Prototype

After the first usability study revealed a user preference for picking “guided tour” due to both familiarity and it’s placement as the first option, I changed the home sreen order and saw a shift in users choosing “map mode” more often in the second usability study.

Takeaways

Impact

The new website design allows users to place orders online, giving the business access to a new revenue stream from busy customers on the go as well as those wishing to place orders while working or studying at the cafe longer. 

What I learned

I was excited to explore solutions for a business that I know well.

The lack of parameters and data, however, made design decisions difficult to evaluate for effectiveness and created challenges in extrapolating conclusions for user personas.

Having gone through this exercise, I was able to see that real-world projects will be much more valuable to me as a designer.

Thank you for your time reviewing my work!


Let's start a conversation:

michal.wisniowski@gmail.com