| Date | October 2021 |
| Roles | UX Design and Research, Branding, UI Design |
| Tools | Adobe Suite, Google Suite, Figma |
| Deliverables | UI Stickersheet, Interactive Prototype |
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.
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.
IDEATE
Evolution of the Design
INTERACTION DESIGN
Collapsible Animation
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°.
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.
