Bacon & Butter has been serving award-winning, California farm to fork breakfast, lunch, and brunch in Sacramento since 2012. I partnered with a web developer to build them a new website that better highlighted all of their delicious, farm-to-fork menu offerings, made it easier to navigate to their online ordering system and store, and showcased their award-winning brand.
Scope: 3 months
Software used: Adobe Illustrator
Team of stakeholders:
Donald Brower (Web Developer)
Amber Michel (Co-Owner of Bacon and Butter)
My role: UX/UI Designer
Donald Brower (Web Developer)
Amber Michel (Co-Owner of Bacon and Butter)
My role: UX/UI Designer
Check out the live site: baconandbuttersac.com
Mobile Wireframes
I started by building mobile-first wireframes. On the homepage (left) I made sure their mission and hours of operation were top line, above the fold for users to see first thing. Additionally, I made sure the Order Online button was visible right away because online orders are the most important CTA of the website.
The Food Menu includes several items that would easily lead to endless scrolling for mobile users, so I incorporated carousel sections in each category to allow users to scroll horizontally and not get lost on the page.
The Food Menu includes several items that would easily lead to endless scrolling for mobile users, so I incorporated carousel sections in each category to allow users to scroll horizontally and not get lost on the page.
I simplified the Shop page to a basic card layout, with images in order to highlight the items for sale.
Professional images of their food offerings are incorporated throughout the site to entice users with their delicious offerings.
Home Page
Food Menu
Store
Mobile Mockups
In building the UI I didn't have much to go off of. I looked to the brand's existing logo mark for a sense of color choice, but ultimately relied on the restaurants decor as inspiration. The restaurant has an industrial farmhouse interior, so I drew inspiration from that kind of design style. I wanted the site to feel like an old-fashioned menu with lots of lines/sectioning and antique elements, typewriter typography, and simplicity. As a final easter egg, I made the hamburger menu into a stack of pancakes with syrup.
Desktop Mockups
Once the mobile mockups were shipped, I built out the desktop versions, incorporating much of the same functionality, like the Food Menu's carousels and the Shop's card layout, just expanding into the horizontal space.
Amber and the rest of the Bacon and Butter team were thrilled with the new website. We successfully achieved our goals: highlighting their delicious, farm-to-fork menu offerings, simplifying navigation to their online ordering system and store, and showcasing their award-winning brand. I loved working on a design project for a local business that shares my own values of serving the best, organic, farm-to-fork food! It's also been a delight to order food from a website I built.
