Bi-Rite Website
UI Design (Mockups) | Style Guide
Background
overview
The Bi-Rite Family of Businesses is a San Francisco Institution on a mission of creating community through food. In 2018, we kicked off the website redesign to consolidate all five areas of the businesses under one website. The goal was to create a seamless digital brand experience that is cohesive with the guest experience at our retail locations. We also wanted the website to interact with existing ecommerce platforms and be able to account for future state business opportunities, such as full service mail order. Here are some of the additional must-haves that we outlined as a team:
  • Create a space to highlight staff and tell the stories of our vendors

  • Include high taste appeal photography 

  • Provide a resource for food education and cooking inspiration

  • Clearly represent the Bi-Rite brand through thoughtful design systems

  • Make business information easily accessible to current and prospective guests

challenge
Prior to the project, Markets, Creamery, and Catering each had their own website, making them feel disjointed and separate from each other. This created a lack of knowledge around the Bi-Rite brand and prevented customer crossover from occurring naturally. 
My Role/Process
UX design
ML Haynes
visual design
Me
code
Adam Harris
color coding
I created a color guide/system to help visually denote the five different areas of the business (Markets, Catering, Creamery, Cafe, Farm). When navigating the website, the colors provide visual cues to know when you are leaving one area of the business and entering another. For overarching pages and general information about the Bi-Rite Family of Businesses, there is a set of core colors. For pages relating to a single area of the business, there are distinct primary, secondary, and tertiary colors. The differences in color were deliberate, intended to evoke different feelings based on the various services and offerings that each business provides.
hand drawn elements
I included hand drawn elements throughout the site to stay true to the friendly nature of the Bi-Rite brand. This is a unique way to show our retail locations and make them feel like San Francisco landmarks.
Design Implementation