Problem Statement
As a student, with less time in hand, going to my favorite cafe and then finding a seat in the cafe has been a real struggle. This has caused me to miss the assignment deadline. So, I decided to create an app that makes it easy to pre-book cafe spaces, saving me time and my day. This case study shares my journey in developing a user-friendly solution to the cafe overcrowding issue even at Northeastern, during peak hours.
I further challenged myself to incorporate an immersive experience in the app and see how the design turns out
Challenges:
Design a cafe seat reservation with a 360-degree view experience/
Tools used:
Figma, LucidChart, and Canva,
Team:
Solo
Time:
1 month [Sep- Oct 2023]
Wireframes
I first started by crafting wireframes, to emphasize user flows, feature prioritization and understand data flow
Inspiration
Style Guide
The color palette I used was, something people often relate to cafe spaces, I went ahead with using neutral colors and a subtle palette for the app.
Primary colors- background, text, etc
Secondary color- components background color, text etc
Tertiary color- Action buttons
Design Specifications and App Layout
To craft a visually captivating and intuitive app layout that strikes the perfect balance between functionality and aesthetics. I have used color pallette that is neutral at the same time relatable for cafe goers and cafe lovers.
Brand logo
NavBar
Background-color: #FFFFFF
Dimensions: 430 x 78
Sub-heading
font type: Inter
font size: 16 px
Heading
font type: Inter
font size: 20 px
Background-board
color: #EFEFEF
Dimensions: 321 x 273
Body text
font type: Inter
font size: 10 px
Action button
color: #C20202
Use: Show reservation unavailable
Action button
color: #038627
Use: Show reservation available
Action button
color: #3A0D76
Use: To see the cafe in VR
UI Designs
Since the goal of this project, was to design an experience and interface for seat reservation in a cafe, I went ahead and dived directly into the same.
On-boarding screens
See a 360 view of the cafe
Reserve a seat in cafe
Edit reservation, during reservation process
Current reservation and account page