Happy Hour Mobile App

Overview

Mobile UX
Interaction Design

Locals or visitors to a city want a way to plan an evening based on specials that a restaurant has to offer. They often have specific times in mind they’d like to around, but are frustrated by the process of digging through websites to find offers. Users want an easy way to discover options and plan their day accordingly.

ROLES

UI Designer, UX Researcher

COLLABORATORS

No items found.

TOOLS USED

Figma

CONTRAINTS

None

DURATION

August 2023 - December 2023

01 Project Overview

Going to restaurants is a very social activity, but an expensive one as well...

This mobile application addresses the need to discover specials available at restaurants. Additionally, it allows users to plan and share outings, whether they are professional and academic groups, or personal friend groups.

No items found.
01.5 Project Overview

What if there was a way to discover local specials and plan social outings?

No items found.
02 User Interviews

Through user interviews, I discovered that people prioritize distance and atmosphere in addition to cost.

I conducted three user interviews which produced three key findings:

💰 Cost was NOT the only factor evaluated–distance was equally as important.
📅 People want to find interesting events in addition to drink deals.
✨ Some users want somewhere safe with a good vibe over somewhere cheap.

No items found.
03 User Flow and Site Map

Developing a flow that minimizes interactions, and maximizes glanceability of key information

As I was developing user flows, I was trying to consider the minimal necessary interactions to be able to browse through a set of listings and add one to the planner. I thought it was necessary to keep the page-to-page interactions minimal in order to keep the focus on discovering local deals.

No items found.
04 Sketching

Ideating feature ideas with an open mind

I gave myself 25 minutes to ideate through ten screens with the user flow in mind. Through this process, I discovered multiple ways to organize the same information, such as the listings on the discover page. In the final design, I merged multiple ideas into on screen.

No items found.
05 Wireframes to High-fidelity

From concept 👉 high-fidelity design

Following the sketches, I created black and white wireframes in Figma with the primary goal of organizing the key information without overwhelming the user.

For instance, the restaurant cards that repeat throughout the UI need to incorporate distance, costs, listing name, and restaurant name.

No items found.
06 Prototyping Interactions

Bringing life to the experience through interactions

With the foundation set through the wireframes and heuristic evaluations, my goal with prototyping interactions in Figma was bringing to life the experience of browsing through options, adding and event, and sharing it with a group.

No items found.
06.1 Decision 1
No items found.

Key Decision #1: Organizing Listings by Distance and Cost

Interviews revealed that cost was not the only concern for users. 


Listings are organized linearly, with an option to filter by distance, cost, or category.

06.2 Key Decision 2
No items found.

Key Decision #2: Preview Access to Deals

To make the browsing experience effective, lots of key information must be accessible at a glance, including restaurant information, distance, and deal listing name.

In order to also include a preview of the deals, I used an "on hold" interaction that expands the restaurant card and displays deals at a glance.

06.3 Decisin 3
No items found.

Key Decision #3: Sharable Plans

Users are given the ability to share an itinerary with others, whether they have the application installed or not.

The application generates an expiring link that can be sent to friends.