top of page
A story of Crafting Convenience: through time efficiency and 360° visual exploration in Café Comfort.
OnePlus 10T.png

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

Home.png
Sample (2).png
Reservation.png

Inspiration

pexels-mart-lmj-2564081.jpg
pexels-volkan-vardar-3887985.jpg
pexels-rachel-claire-5491041.jpg
pexels-caeli-team-3714960.jpg
pexels-maria-orlova-4916558.jpg
pexels-lina-kivaka-1813466.jpg

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.

Typography.png

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.

OnePlus 10T.png
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

Onboarding2.png
O.png
Onboarding3.png

See a 360 view of the cafe

h.png
h2.jpg
H3.jpg
CS.jpg
VR.png

Reserve a seat in cafe

VR.png
a1.jpg
a3.jpg
a5.jpg

Edit reservation, during reservation process

h5.jpg
a1.jpg
a3.jpg
J.jpg

Current reservation and account page

Account_deets.jpg

Prototype in Motion

I crafted a hi-fidelity prototype to show the overall user experience combined with the implementations of the style guide

Reach out to me

  • Linkedin
  • Outlook Email
  • Gmail
bottom of page