Process Work

What is Flipside?

Flipside is a 1970’s themed karaoke bar and restaurant that allows guests to engage in karaoke competitions and enjoy the psychedelic and musical atmosphere of the 70’s. Guests are supposed to feel as though they have stepped back in time, a time when music was heavily influential and the groovy patterns were the decor of almost every home and business. Flipside’s voice is one encaptures the 70’s vibe– groovy, funky, and chill.

Flipside started off as a branding project for my Branding Systems class, and was further expanded with the mobile app for my Interactive ll class.

Click here to view the final version of this project.

Word Lists and Ideas

This project started off as a Branding Systems assignment, where we were to create a restaurant or bar and develop a brand system for it. I wanted to create a restaurant with a theme that represents the vibrant, psychedelic, musical era of the 1970’s. I started off by creating wordlists to narrow down the possible names and adjectives to describe the brand.

‘Flipside’ became the restaurant name from the phrase “catch you on the flipside,” because of it’s popular connotation with the 1970’s,

flipside wordlist 1.png
flipside wordlist 2.png
 

Logo Exploration

For the logo I went through many popular fonts of the 1970’s and experimented with them. However, I wanted the logo to give off the funky, musical vibes of the time, and be able to be flipped and still readable, as a play on the name. To do this, I started drawing the logos in a circular form so it could be flipped and read from any angle.

The final logo design was inspired by psychedelic art of the time and the famous peace symbol, popular in the 1960’s and 70’s. The colors were chosen as oranges and turquoise blues were commonly used colors at the time.

flipside-logos-1-min.png
flipside-logos-5.png
flipside-logos-3-min.png
 
flipside-logos-2-min.png
flipside-logos-4-min.png
fs process OG logo@3x.png
 

Branding

Typography and Color Palette

The logo type was Pie Pie, and adjusted to fit in a circular shape. I also worked with the form of the letters to give them the smooth, flow-y feel of type used on psychedelic music posters of the 70’s. The stationary and business card’s header type is Franklin Gothic Demi Condensed and body type is Verdana.

The color palette also consists of colors you’d typically see in patterns, wallpapers, and posters of the 70’s.

fs type and cp@3x-8-min.png
 

Brand Assets and Icons

For Flipside’s branding, I wanted to create a pattern that is restaurant or food themed, and used in 70’s styled patterns. This pattern would be used on menus, packaging, business cards, posters, and stationary. Although, some of these assets were not fully expanded on by the end of the project, you can see how these patterns would have been used on the menu and stationary.

The menu icons seen in the Flipside app were based off popular icons and relics of the 70’s. The home button is an old radio, the order food button is an old register, the karaoke button is a mix tape, and the profile/rewards button is a pair of disco sun glasses.

 
flipside-icons-sketch-min.png
flipside-icons-min.png
 
fs patterns and icons@3x-8-min (1).png
menu-sketch-1-min (1).png
menu-sketch-2-min (1).png
fs stationary letter@3x-8.png
fs envelope front@3x-8.png
fs envelope back@3x-8.png
fs busi cards@3x-8.png
 

UX/UI

App Exploration

The Flipside app was an Interactive ll project, where we were to create a mobile app that could not be replaced with a mobile site. To expand the app beyond ordering food and earning reward points, I added the feature for guests to sign up for karaoke and vote on their favorite singers during the karaoke contest. I began exploring what guests needs and wants are by interviewing random people who enjoy karaoke and asking what they would enjoy out of an app like this, if they would use it, what they would use it for, how often, etc. I created three think-feels-does-says lists and a ‘needs statements’ list to explore the different options for different kinds of guests.

After figuring out what I needed to include within the app, I drew out a map branching out the different functions the app could perform. I began Flipside’s app design after figuring out which app screens were essential.

20140301_Trade-151_0124-copy.jpg
20140301_Trade-151_0124-copy.jpg
flipside-app-map-min.png
flipside-app-screen-sketch-1-min.png
flipside-app-screen-sketch-2-min.png
flipside-app-screen-sketch-3-min.png
Next
Next