PORTFOLIO MENU




BACK HOME



COSMISTACK ASP LAB COMPASS H&B CAFE CSSA









LAST UPDATED: 11/04/25
H&B CAFE OVERVIEW




ROLE
Freelance Designer/Developer
DATE
Oct ‘23 - Apr ‘24
CLIENT
Hops & Beans Cafe
STACK
Figma, FigJam, Wordpress, Elementor


HOPS & BEANS CAFE










DESIGN DEVELOPMENT



H&B CAFE
Introduction
Making a website for Hops & Beans Cafe.
I designed and built a website for a cafe I worked at as a barista. Offerred to make their website to gain some experience. Worked with the client (cafe owner) over the course of a couple months to ideate, design, and deliver a website that would bring our vision to life. 













HOPS & BEANS CAFE is a local cafe situated within a historic building in the heart of Fremont, CA. It boasts a wide selection of coffee (using ritual beans), beer on tap, and delectable foods. Working there as a barista, I got to see firsthand how much character the place had. The cafe is adorned with a variety of plants, ambient lighting, and filled with diverse seating options. Its comfortable atmosphere is amplified by the building interior’s french-inspired decorative molding.

At the time they didn’t have a finished nor fully-functioning website so I proposed to the owner that I could revamp it. He’d been working on improving the cafe’s marketing and was excited to get started.

The resulting website not only better represented the cafe’s culture but boosted user engagment, increasing unique visitors by 10X. An overwhelming majority of the website’s traffic is organic traffic from google search, signifying strong SEO performance and site ranking. Such results indicate the website successfuly implemented our goals.








1.   The Ideation and Planning



THE GOAL
Focus on ease of use and simplicity while maintaining a timeless brand aesthetic.


THE RANGE OF USERS


Hops & Beans Cafe is locally well-known and frequented by people of all ages → elderly regulars who come for their morning coffee, families who eat lunch when the farmers market is open, students who come to study, adults who come to work remotely, or anyone looking to try out a new local cafe. With such a diverse user group, the website had to be widely marketable and easily accessible by anyone.
THE RESEARCH


Conducted an informal competitive analysis of a variety of cafes, restaurants, and other businesses associated with coffee/beer/food/tea. Created a moodboard with numerous websites of varying styles and layouts (using FigJam).
These helped us to determine the direction of the information architecture and navigation, visual design, and branding.  








2.   The Content and Design



THE INFORMATION ARCHITECTURE
The tabs: home (important), menu (very important), about, and contact.
The home page as a navigational entrypoint had to contain elements that got users to stay, to gauge the overall vibe of the cafe, and to access any important links (like socials, food apps for ordering online, etc.). The menu page served as the crux of the user interaction, necessitating very accessible navigation and an easy distinction between the food and drink menus. We determined the footer would contain operational info (cafe hours and location) and as such would call for a more distinct design.  



THE VISUAL DESIGN ELEMENTS
Key words: coffee, beer, friendly, simple, inviting. I kept these in mind when designing the mockups to decide on color schemes, fonts, layout, and the overall visual design. Muted browns and grays made for a great color pairing, with golden accent colors for well-roundedness. Nexa Rust Sans was used for header texts to align with the branding of the logo. Lato was chosen as an simple yet inviting body text for contrast.







3.   The Design Choices



INCORPORATING MENU PHOTOS
One of the few tricky situations we encountered was related to incorporating photos into the food menu page. The client wanted their professional food photos to be displayed alongside the menu items. The platform we were building it on made it hard to display the photos alongside each menu item in a way that was responsive. Seeing as many users would be viewing the menu on their mobile screens, I knew we’d have to find a workaround. I was able to find a solution by adding image carousels with captions in each section of the menu. This way, responsiveness was ensured, and the photos would still be displayed in an easily accessible format.


OTHER RANDOM CHOICES
Easy navigation considerations: prominent tab buttons on menu page for switching between drink and food menus; back to top buttons at bottom of menu pages











4.   The Development



We kept the website in their pre-existing Wordpress account for easier handoffs. Using Elementor, I was able to save design tokens, create resuable components, and save draft pages, which essentially doubled as my interactive prototypes when iterating on designs with the client.  Wordpress’s built-in analytics (Jetpack) allowed us to see sizable increases in user engagement and impressions, which ensured us that the designs were successfuly implementing our website goals.