
TOOLS
Sketch
Abode CS
Photography
ROLES
UX Design
Strategy
Brand Identity
Art Direction
THE CARRIAGE HOUSE INN
Restaurant Rebrand, Website Design and Customizable Food Ordering System Concept
INTRODUCTION

-
Brand needs to be updated to align with the new menu
-
Needs to appeal to a younger crowd, while still retaining their aging faithful patrons
-
Needs to be more approachable and accessible to widen their appeal, while still traditional at its core
CHALLENGE
SUMMARY
The Carriage House Inn offers neo-traditional upscale fare for rural Pennsylvanians. It is the finest dining experience in the area, having long offered primarily upscale surf & turf items.
Under newly autonomous ownership, they have hired a new executive chef and rebuilt the menu from scratch, the first time any significant changes have been made to the food in decades.
With these changes they seek a much-needed expansion of their existing customer base, without losing their long-time loyal patrons.

-
Create a modernized aesthetic for the brand that stays true to its traditional roots
-
Complement the menu's push of meals to go and create an online ordering system that showcases menu's many custom options
-
Ensure website's ordering system is easy to use for its existing patrons who may be less tech-savvy
SOLUTION

1. DISCOVERY & PLANNING
Defining the target audience to help ensure an effective project
ROLES
-
Retirees
-
Foodies
-
Busy businesspeople
DEMOGRAPHICS
-
Gender - Even
-
Education - High school/College graduates
-
Occupations - Successful businesspeople, retirees
-
Age - Senior
-
Location - Rural
PSYCHOGRAPHICS
-
Gender - Even
-
Education - High school and college graduates
-
Occupations - Successful businesspeople, retirees
-
Age - Primarily senior
-
Location - Rural
USER PERSONAS
Creating reliable and realistic representations of key audience segments for reference. Charlotte represented their current primary customer base, while Nikki and James represented segments they were seeking to appeal more to.
REACTIVE VS. PROACTIVE
REACTIVE VS. PROACTIVE
REACTIVE VS. PROACTIVE
MONEY CONSCIOUS
MONEY CONSCIOUS
MONEY CONSCIOUS
TECH SAVVY
USER PERSONAS



CHARLOTTE
Retiree, 68
-
Former accountant
-
Owns house in town
-
Husband passed away
-
Enjoys classic fare
NIKKI
Young foodie, 29
-
Waitress at local restaurant
-
Single
-
Rents apartment with a friend
-
Appreciates great food of all kinds
JAMES
Busy professional, 46
-
Successful salesman
-
Owns home in area and vacation property
-
Married with two children
-
Busy lifestyle with little time to spare
GOALS
-
Continuing to enjoy way of life
NEEDS
-
Hassle-free ways to enjoy her long-time favorite restaurant
GOALS
-
Finding elevated cuisine
GOALS
-
Simplifying daily responsibilities
NEEDS
-
Struggles to find good food and locations to enjoy with friends
NEEDS
-
Fast and simple food options for himself and his family
RISK TAKER
TECH SAVVY
TECH SAVVY
RISK TAKER
RISK TAKER
USER NEEDS
-
Find out if the restaurant delivers to their area
-
Order online
-
Find out if the restaurant is open
-
Customize the order or pick from a list of options
-
Follow the order after it has been placed
-
Be easy to use for less tech savvy clients
CLIENT NEEDS
-
To sell food online that will be delivered
-
Provide a system for order customization
-
Appear professional and sophisticated
-
Communicate upscale
-
Communicate reliability
-
Communicate ease of use
WEBSITE SCOPE
CONTENT REQUIREMENTS
-
Food menu with customizable options
-
Hours
-
Delivery radius info
-
Pick up info
-
Pricing
-
Images of menu items
-
About Us: History & Mission Statement
-
Contact (Address & Phone)
-
FAQ
-
Easy info structure to ease use for less tech savvy clients
FUNCTIONALITY REQUIREMENTS
-
Menu with customizable options
-
Add items to shopping cart
-
Check out as guest
-
Create account/Log in
-
View past orders
Identifying the needs of both users and client to ensure all content and functionality needs will be met
2. INFORMATION ARCHITECTURE
USER FLOWS

Protoyping content structure and user flows to creative an optimized and intuitive user experience.
Initial user flows are shown, along with later structure alterations when the site went from concept to reality and actually needed to combine two websites into one.
Wireframes break down all the details of how the custom ordering system would work.
WIREFRAMES
Desktop Homepage
Mobile Homepage
Ordering System
4. BRAND IDENTITY
MOOD BOARD

An in-depth breakdown into the background of the branding process.
I had a good idea of where I wanted to go with the brand, and creating a modernized take with classical design elements seemed very appropriate.
But doing background research along the way provides plenty of inspiration and helps create a better result.
Finding inspiration to help set the stage to build a new brand from the ground up, I sought out similar restaurants in other markets around the country, as well as examples of design and visual elements I already had in mind that would help to create a unique modern classic aesthetic.
LOGOS
Main business logo
Decorative logo
(In house menus only)
Simplified logo
Main secondary logo
Simplified secondary logo
Decorative secondary logo
Once the main font was chosen, creating the logo was initially straight-forward, but eventually for the secondary logo a new H was created from scratch and reintegrated into the original.
And while the CH logo represented the brand well, as it is colloquially known as Carriage House, the owner still felt most comfortable with the full name shown. So an additional logo was created, incorporating the full name with the CH. It has become a main logo where appropriate, but because of its size limiting its use, it is still considered secondary.
WEBSITE LAYOUTS
Homepage
Mobile homepage
Secondary page example



CUSTOM ORDERING SYSTEM CONCEPT






1. Order now button
2. Category select
3. Custom selections
4. Cart confirmation
5. Payment details
6. Order confirmation
After breaking down the background information and underlying structure, the prototypes were fleshed out and brought to life with an appropriate brand identity.
Decorative header
Bold font
Regular font
Italic font
Header example
GLYPHS
Accent example
STYLIZED UNDERLINES
Page header accents
Section header
FONT LAYOUT EXAMPLE
COLORS
For the primary colors, a parchment color was an easy choice. For the main color, navy and maroon options were discussed with the owner for buy in. While navy was featured inside, maroon was a main color of the building itself, and could also be used intuitively for CTAs on the website.
Primary colors
Secondary colors
The main decorative font was chosen for its amazing versatility, in addition to being easy to read. And while I also had an ultra condensed font in mind, finding one with excellent legibility as well was tough.
Using three fonts was a bit antiquated, but it seemed appropriate here, and the two secondary fonts meshed pretty seemlessly.
FONTS
IMAGERY



Food photos: Bright and clean
Atmosphere photos: Parchment color incorporated for a semi-antique look



GRAPHIC ASSETS
Parchment texture background