Firkin Tavern

OVERVIEW

Firkin Tavern is a restaurant/bar located in Ewing, NJ that was in need of a new website that gave a current, aesthetic, and user friendly feeling towards its target audience.

Ranging from September to December in 2015, I created this new website, which was tablet and mobile responsive, while I was in my graduate program at Philadelphia University.

Code Demo
DEFINE

The main goal was to find a way to represent the content on the current website in a way that:
  • matches the brand of the restaurant/bar
  • is more receptive to the target audience
  • showcases the business in an inviting light

DISCOVER

The problem lies in the structure of the website, the navigation, the brand, etc. Each component was based off:
  • Competitive Research with Triumph Brewery - showed me the strengths on Triumph’s website, that I wanted to focus on for Firkin’s new website
  • Personas Created for Firkin Tavern - gave a face for who I was designing for, so I could consider them
  • New Sitemap & User Flow - helped give me an idea of how I should create navigation on the website.
  • User Testing & Card Sorting - confirmed my layouts related to my possible website

Firkin_Tavern_Sitemap
Sitemap
Firkin_Tavern_Personas
User Personas
DESIGN

Once I was able to identify all the issues that needed to be tackled with the website, I was able to create:
  • Wireframes - user tested by 10 users that were within my user group
  • Visual Designs - created in Photoshop with different interaction states
  • Coded Demonstration - developed in HTML, CSS, and Javascript

Firkin_Tavern_Wireframe
Wireframe
Firkin_Tavern_Visual
Visual Design
NEW

Skills Acquired

Being that this was the first website that I had gone through the design process with, I can say that I learned a lot.

SKILL 01

Audit

To audit a website and analyze the findings

SKILL 02

Target Audience

To find my target audience and connect with them

SKILL 03

Wireframes

Create wireframes for a usable UI

SKILL 04

User Testing

Test my designs through user testing

SKILL 05

Design

Design my site in Photoshop and show different interaction states

SKILL 06

Develop

Develop a website from start to finish in HTML, CSS, & Javascript

Let's Create Something

If you would like to collaborate on a project or hire me to create / maintain your sites