Hops & Beans Website
A case study of a website design and build for Hops & Beans Cafe.
Role
Designer + Developer
Timeline
Oct 2023 - April 2024
Client
Hops & Beans Cafe
Tools
Figma, Figjam, Wordpress, Elementor
About
Hops & Beans is a locally-owned cafe within a historical building that serves craft coffee, beer, and a great selection of foods. When I worked there as a barista, the cafe lacked a fully functioning and designed website – so I offered up my skills. Having an established rapport with the cafe owner (client) and anecdotal experience from the cafe gave me a great starting point for building out the website.
Timeline
CONTENT
The Goal
Focus on ease of use and simplicity while maintaining a timeless brand aesthetic.
The Users & Accessibility
Hops & Beans Cafe is locally well-known, and is thus frequented by people of all ages → elderly regulars who come for their morning coffee, families who eat lunch when the farmers market is open on Sundays, students who come to study, adults who come to work remotely, or anyone looking to try out a new cafe.
With such a diverse target user group, the website had to be widely marketable and easily accessible by anyone.
Here are some of the specific design elements that ensured that:
- Spacing: Intentional use of white space to visually aid in the hierarchy and categorization of elements.
- Motion: Limited and simple use of motion in certain elements.
- Color: Colors adhering to WCAG's AAA contrast ratio.
- Concise: Information is concise and easily navigable.
The Information Architecture
The Nav Menu tabs were determined first, and the subsequent important information was funneled into each page accordingly.
RESEARCH
Competitive Analysis & Moodboards
I conducted an informal competitive analysis of a wide variety of other websites ranging from cafes to restaurants to conglomerates and everything in between.
I compiled some of websites with varying styles and layouts into a moodboard to aid in my discussions with the client on determining the direction of the visual design of the website.
DESIGN
The Branding
The design was meant to be timeless in its aesthetic, modern and versatile in its design, and somehow encompass the charm of the cafe (or notably its brick exterior).
The Visual Design
Color: The main text and header color are a deep shade of reddish brown to emulate the warmth of coffee as well as the building’s charming brick exterior. The other colors were chosen in the same family to ensure a clean look.
Typography: Nexa rust sans demo font is used as the header and highlight font, which was taken from a previously commissed logo by the client. Lato is the body text font which is highly readable and ties in seamlessly with the header.
Buttons & Tabs: These clickable elements were designed to indicate a similar use case: outline with no fill on normal, and inverted colors/fill on hover.
BUILD
Wordpress and Elementor
The original website was built in Wordpress using Elementor, so I familiarized myself with the same platform and started building out each page. I added some of the design system components into the platform’s global elements to make the workflow easier.
Elementor itself is a fairly intuitive and comprehensive plugin. This made it easier for me to build draft pages using my design mockups, and use those pages as prototypes as opposed to building them out in Figma first.
Eliminating an extra step of my usual design process greatly improved the efficiency of my workflow, and helped to identify and circumvent any development limitations simultaneously.
THOUGHTS
This project gave me a lot of practice and experience with managing timelines and knowing how to effectively communicate my design understandings, while also understanding the client’s goals and making sure to find the best intersection of the two. I'm also grateful at the opportunity I had to acquire new skills in Wordpress.