Night Shift Storefront Sign Mockup

Night Shift Breakfast Co.

Introducing Night Shift Breakfast Co! We make delicious late-night food with a breakfast twist by creating unique menu items merging savory and sweet flavors in a casual takeout/sit-down atmosphere. Open until 2AM, we are breaking boundaries on what it means to eat breakfast.

UX/UI, Branding, Packaging

Style Tile

Night Shift Style Tile

Website Design

Websites are one of the most important branding elements a restaurant has.

Many restaurants either do not have a website, or have very confusing user flows that can leave the potential customer wondering where to click for the information they need. Web design was my primary focus for the brand.

Web Design

Night Shift Website Home/Menu Mockup Pages on Blue Background
Night Shift Website Hours/Story/Contact Mockup Pages on Blue Background

After researching a bunch of restaurant websites, I came to the conclusion that most of them did not understand usability or flow at all. Who can blame them?

I brainstormed some fundamental information that every restaurant website should have; a home page, menu, location, about us statement, and contact info. I created a fairly simple user flow to demonstrate these points for a more intuitive user experience.

Painpoints

When beginning the wireframing process, my primary focus was the online menu. The main drive for people to search restaurant websites is to look at the menu so I wanted to make it as accessible and easy to read as possible.

I also prototyped a feature in the menu when users can click a food category and the page jumps to that section on the menu.

Wireframing

Night Shift Website Menu Page Lo-Fi Wireframes
Night Shift Website Home Page Lo-Fi Wireframes
Night Shift Website Our Story Page Lo-Fi Wireframes

Menu Design

Night Shift Menu Mockup Backside
Night Shift Menu Mockup Front Side
Night Shift Drinks Menu Mockup

Rather than serving normal breakfast foods, Night Shift specializes in Breakfast for dinner fusion, merging iconic sweet and savory morning dishes with the late night bar food people know and love. I created two main menu items, Pancake Tacos and Bagel Flights to be Night Shift’s signature dishes along with a mocktail menu for bar crawlers to end their nights with.

Lets Eat!

Night Shift is a takeout-centered restaurant, with some seating included inside for casual eating. I wanted my menu to reflect the atmosphere and make sense for my intended customer experience. So, I chose to do smaller, handheld paper menus and a menu board for easy customer viewing. I decided on a table method to break up the space and make decision making easier on the customers since my menu options are meant for mixing and matching flavors. I used this layout to showcase my brand pattern and colors without compromising readability and space.

Menu Design

Night Shift  Store Wall Menu Mockup

Package Design

Night Shift Bagel Flight Packaging Mockup
Night Shift Pancake Taco Packaging Mockup

Night Shift’s Signature Pancake Tacos consist of your favorite breakfast items inside a fluffy buttermilk pancake “taco shell”. Mix and match sweet and savory flavors like bacon egg and cheese, and banana peanut butter chocolate to create the perfect “taco” spread. Also keep a lookout for our special seasonal flavors. They change monthly and are chosen via customer votes on our website!

Pancake Tacos

Night Shift’s Bagel Flights give you the choice of two of our fresh bagels and two of our signature cream cheese based Whipped Dips. Mix and match our sweet and savory flavors to create your perfect flight!

Bagel Flights

*Pancake taco image generation done by Google Gemini.

Night Shift Bagel Flight Dyeline Unfolded and Folded on Grey Background.
Night Shift Pancake Taco Dyeline Unfolded and Folded on Grey Background.

Advertising Design

Night Shift Billboard Advertisement Featuring Bagel Flights

My restaurant is based in Philadelphia. So, I kept that in mind when thinking where good advertising opportunities would be.

I also was influenced by the type of customers I wanted to attract. My target audience were people who loved late nights, whether they were getting off of work or finishing their night out. I used this to my advantage by placing advertisements on subway cars and bright screens on city streets.

Advertising:

Night Shift Street Screen Advertisement Featuring Seasonal Pancake Tacos
Night Shift Subway Advertisement Featuring Tagline

Social Media

Night Shift Instagram Profile and Posts Display Mockups, Light and Dark Mode
Night Shift Instagram Phone Screen Mockup Display

I learned so much about the process of branding from this project. I also learned a lot about myself as a designer.

It required me to experiment with different mediums of design by introducing me to some new programs like Adobe Stager and Adobe Fantastic Fold. This experimentation helped me hone in on what aspects I love about this career. It was a very valuable experience for me.

Photoshop

Adobe Fantastic Fold

Illustrator

Figma

Adobe Stager

Google Gemini

Software Used:

Bryan Satalino

Instructor: