Savor

A warm and organic brand and mobile-focused website for a conscientious whole foods restaurant

Scope

  • Branding
  • UI/ UX Design

My Role

  • Art Direction
  • Graphic Design
  • Brand Strategy
  • User Experience
  • Information Architecture
  • User Interface Design
  • Web Design

Deliverables

  • Logo Design
  • Style Guide/ Design System
  • Web Design
Savor Logo Savor Website

Project Overview

Savor is a restaurant that specializes in delicious, nurturing, and nutritionally rich dishes featuring predominantly locally sourced ingredients.

The goal for this project was to develop a visual brand identity system and to prototype a web presence to entice prospective customers while meeting existing customer's needs.

Overview of Strategy

A thorough discovery process provides the foundational information needed to learn about the business and the customer. Customer research was conducted to get more in depth understanding of the user needs and to validate and challenge the assumptions at the start of the project.

Reviewing competitors and conducting a comparative and competitive analysis was also very important to identify how other businesses have approached solving similar problems and to learn from their successes and weaknesses.

Conducting research to gather user experience and visual inspiration to help inform UX and UI decisions was extremely helpful since reinventing the wheel can be inefficient and often ineffective.

And lastly, delivering the branded and designed landing pages by prototyping and testing the solutions in an iterative process, increasing in fidelity as successful solutions were found.

Persona

Persona: This persona was generated as a result of the research conducted for this project. The main pain point of the user was identified. In this case, the customer has dietary restrictions and has a hard time feeling safe when eating out, because in order to find out exactly what is in each dish it often requires them to ask the restaurant staff to make multiple trips to the kitchen, causing delays in meals and a lot of social anxiety.

Competitive and comparative analysis

Competitive and comparative analysis: Research found that other restaurants do list the general ingredients in each dish, however, few provide detailed ingredient lists and nutritional information (i.e. Chipotle, Modern Market). In addition, none were found that provided an accurate ingredient list, making timely updates to the menu accounting for last-minute ingredient substitutions resulting from supply issues, for example.

UI/ Web Design Process

UX & UI Design: Here's an abbreviated view of the process from low-fidelity to high-fidelity of the prototype for the future mobile-focused website.

Brand Development

Good visual branding effectively communicates the ethos and values of the company and connects them to their audience, whether they are already committed or are potential customers.

Brand Voice & Personality

Uncovering the brand voice and personality: Savor should sound conscientious and trustworthy because the target audience wants to feel safe and know that they can count on the information provided to them. Savor should look natural and organic while still being clean and modern because it will help to focus the attention on the information provided. Savor should feel warm and nurturing because it will provide additional confidence and safety to the target audience.

Mood Board

Mood Board: After exploring and experimenting with a few options based on the brand voice and personality, this direction was selected as it was most successful at meeting the nurturing, warm, organic, clean, and modern qualities that best communicated the brand voice and personality and had the most affinity with the target audience.

Logo Design

Logo Design Process: Here's an abbreviated view of the logo design process, from rough sketches to final logo variations.

Visual/ UI Design

The UI components lean more heavily on black and white, while the remaining colors in the scheme are used to deliberately bring attention to certain elements and calls to action or to allow the photography and illustrations to stand out.

Brand Development: Imagery

Imagery: The resulting visual branding utilizes organic shapes, and line illustrations, in a predominantly soft color scheme. Custom illustrations and icons are paired with photography that stands out showcasing the food and the space.

Brand Development: Typography and color

Typography and Colors: A soft pastel color scheme that features primarily warm tones was selected for its nurturing and safety-inducing qualities, but it also includes a black for contrast. The illustrative visual elements and color scheme are contrasted by a bold typeface that allows for the word "Savor" and headlines to stand out and includes a lighter secondary typeface that resembles the lines of the illustrations, unifying the typography with the other design elements.

The Results

The challenge was to position Savor as the place to go for ingredient transparency and delicious food and to better serve Savor's customers by offering them a a clean, usable, and mobile-focused landing page that provides a digital version of the menu with a list of all of the ingredients and nutritional information for each dish.

The resulting mobile-first home and menu landing pages feature content and layouts that were created intentionally in response to user needs. The visually rich menu page showcases each dish while providing just enough information, with shorthand icons where appropriate, until the user clicks to see as much details as they need, without being cluttered or overwhelming.

Savor Web Design and UI Design