RESUME
FOLIO
ABOUT
HOME

Hi, I'm Caleb Edison.

I am an interdisciplinary 2D and 3D designer who crafts immersive virtual experiences.

CASE STUDY - BAR ORDERING APP

Pub & winebar menu and tab management system

OVERVIEW

Project Background

For this project I was tasked with building a mobile ordering app for "Felix's Bend Pub & Winebar". Bars and pubs tend to have a distinct bottleneck in the ordering process during peak hours, and it struck me as odd that there wasn't already a universal app for this sort of thing. It seemed obvious, why didn't more places have something similar set up?

FOUNDATIONAL RESEARCH

Secondary Research and Interviews

I was able to find a few apps which didn't seem to have that much of an adoption rate and prohibitive price structures. Some of the best information initially came from doing independent research into the idea itself. Research from UC Berkeley found that 81 percent of survey respondents said they would be likely or very likely to use a tab management mobile app. Moreover in the same research 80% of establishments claimed to be active or very active on social media. Initial followup user research confirmed that people were open to the idea especially if it would mean they would get their drinks quicker, or other perks like a rewards program.

INFORMATION ARCHITECTURE

Preliminary Sitemap

This was the initial draft of how things could be organized.

Image of a Sitemap outlining initial feature ideas

IDEATE

Evolution of the Design

This was translated into early wireframes, mockups, and once the initial form and layout seemed solid and met with approval, refined into a first generation Interactive Prototype.

Image of a initial Wireframes
Image of Refined Mockups

IDEATE

Evolution of the Design

Image of UI Style Guidelines and Sticker sheet

INTERACTION DESIGN

Collapsible Animation

An animated GIF showing a drink menu item.  As the plus icon is clicked, the icon itself rotates to becomes the X close button as the entire panel expands to show details for ordering that drink.

Figma didn't have native handling for the complex type of animation desired for the collapsible menu. I wanted the plus icon, when clicked, to rotate in an arc and the + inside to turn 45° and become the X that would close the submenu. In order to accomplish this in Figma, a hidden frame was used almost like a fulcrum or pivot, and then rotated and positioned so that the smart animation would not just move the button, but instead rotate it's entire container 180°.

An image showing the hidden frame used as a fulcrum to facilitate this 
 animation within Figma

TESTING

Hands-on Prototype Testing with Endusers

This project is still undergoing user testing. You can help out! Just run through the following quick User Test so I can see how intuitive it is.