---
title: Firkin Tavern | Web Dev Magic
description: UX Case Study for Firkin Tavern in Ewing, NJ.
image: https://webdevmagic.com/hubfs/Firkin_Tavern.png
---

[![Web Dev Magic Logo](https://webdevmagic.com/hs-fs/hubfs/Web_Dev_Magic_Logo.png?width=90&height=530&name=Web_Dev_Magic_Logo.png "Web Dev Magic Logo")](https://webdevmagic.com/?hsLang=en)

- [Home](https://webdevmagic.com?hsLang=en)
- [Products](https://webdevmagic.com/#binge) 
    - [Binge](https://webdevmagic.com/binge?hsLang=en)
- [My Work](https://webdevmagic.com/#my-work) 
    - Websites 
          - [Katzcy](https://webdevmagic.com/katzcy?hsLang=en)
          - [Princeton Internet Marketing](https://webdevmagic.com/pimnj?hsLang=en)
          - [1SEO.com Digital Agency](https://webdevmagic.com/1seo?hsLang=en)
    - Coding Projects 
          - [Astrology Birth Chart](https://webdevmagic.com/astrology-birth-chart?hsLang=en)
    - UX Case Studies 
          - [Nexus Maximus](https://webdevmagic.com/nexus-maximus?hsLang=en)
          - [Signature](https://webdevmagic.com/signature?hsLang=en)
          - [Papa Johns](https://webdevmagic.com/papa-johns?hsLang=en)
          - [Firkin Tavern](https://webdevmagic.com/firkin-tavern)
- [Services](https://webdevmagic.com/services?hsLang=en) 
    - [Get Quote](https://webdevmagic.com/quote?hsLang=en)
- [Contact](https://webdevmagic.com/#contact) 
    - [About Me](https://webdevmagic.com/#about-me)

# Firkin Tavern

- [Home](https://webdevmagic.com/#my-work)
- [Firkin Tavern](https://webdevmagic.com/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](https://github.com/gilberk1/firkin-tavern) [Demo](http://gilberk1.github.io/firkin-tavern/)

###### 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](https://webdevmagic.com/hubfs/Firkin_Tavern_Sitemap.png)

##### **Sitemap**

![Firkin_Tavern_Personas](https://webdevmagic.com/hubfs/Firkin_Tavern_Personas.png)

##### **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](https://webdevmagic.com/hubfs/Firkin_Tavern_Wireframe.png)

##### **Wireframe**

![Firkin_Tavern_Visual](https://webdevmagic.com/hubfs/Firkin_Tavern_Visual.png)

##### **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

To reach directly out to me or get a quote on a project

- [Hire Me](mailto:info@webdevmagic.com)
- [Get a Quote](https://webdevmagic.com/quote?hsLang=en)

- [Home](https://webdevmagic.com/?hsLang=en)
- [Products](https://webdevmagic.com/#binge)
- [My Work](https://webdevmagic.com/#my-work)
- [Services](https://webdevmagic.com/services?hsLang=en)
- [Contact](https://webdevmagic.com/#contact)

[mailto:info@webdevmagic.com](mailto:info@webdevmagic.com) [tel:5184075934](tel:5184075934) <https://www.linkedin.com/company/web-dev-magic/>

© 2026 Web Dev Magic, LLC. All Rights Reserved.