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 accounts—and those using #thecoffeegallery hashtag—I 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:
The About menu dropdown was not obvious enough.
The business needed separate pages for cafe orders and catering bookings.
A blog post page had been omitted in the first set of wireframes.
The contact form needed adjustment for consistency.
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.