End to End Application
UX/UI Design
User Research
Branding
Prototype and User Testing
4 Weeks
Tools: Figma, FigJam, Zoom, Otter AI, Bing Copilot
Project Overview
The primary objective of this project is to understand the pain points and users needs associated with discovering happy hour options in their local areas. By gaining insights into users' behaviors, preferences, and pain points, the aim is to design a user-friendly mobile application that simplifies the process of finding and exploring happy hour offerings, thereby enhancing the user experience and increasing patronage for local businesses.
Problem
Insight #3
Participants prefer confirmation from other users regarding the quality and atmosphere of venues, valuing unbiased reviews highly.
4 out of 6 participants rely heavily on user reviews and ratings to make decisions and feel that these should be prominently featured and easy to access.
Insight #4
5 out of 6 participants wanted more advanced filtering options to sort venues by price, type of ambiance, type of cuisine, and special offers.
Information Sought
Happy Hour Timings and Menu Offerings: Clear information on when happy hours occur and what they include is highly sought after.
Non-Alcoholic Options and Unique Food: There is an interest in venues offering non-alcoholic drinks and unique food items.
Ambiance and Noise Levels: Knowing the noise levels and whether a venue is conversation-friendly is important to many participants.
Entertainment: Entertainment such as games, trivia, and music was often mentioned as information sought after.
Discovery
Research Goal
My primary goal was to understand user behavior and preferences when searching for happy hour options in local areas. I aimed to gain insights into how often users look for these deals, the main purposes behind their searches, and the specific information they seek. Additionally, I seeked to explore user engagement with happy hour offerings, uncovering the methods and channels they currently use for discovery and what encourages or discourages their participation.
Learning about potential users
The research phase for this project consisted of 6 interviews with an age range of 34-75.
Can you describe the specific information you typically look for when choosing a happy hour venue?
How do you usually discover happy hour deals or promotions in your area?
Can you recall a specific instance where you felt frustrated or confused during your search?
If yes, can you please explain in detail?
What challenges or difficulties have you faced while searching for happy hour information?
Do you use other platforms to find happy hour deals? If yes, which ones, If no, why?
If yes to above, Can you share the positives and negatives of those platforms and areas of improvement?
Have you attended any happy hours based on your searches? If yes, how did they live up to your expectations? If not, why?
Is there anything about the current methods that encourages or discourages your participation?
Key takeaways
It was important to discover how users currently search for happy hours and the biggest key takeaway was that users weren’t satisfied with their current discovery methods.
Insight #1
The exercise revealed a clear demand for a user-friendly, reliable app that offers real-time, location-specific information on happy hour deals. Key desired features include detailed menus and prices, noise level indicators, user reviews, and notifications.
4 out of 6 participants mentioned difficulties navigating existing apps, emphasizing the need for a more intuitive and user-friendly interface.
Insight #2
6 out of 6 participants expressed frustration with outdated or inaccurate information about happy hour timings and specials on current platforms.
What else is out there?
Competitive Analysis
Following the interviews, I completed a competitive analysis of other happy hour apps.
The goal of this stage was to understand how other applications providing for happy hour discoveries.
In many towns and cities, individuals looking for a happy hour experience face the cumbersome task of searching through multiple platforms to find relevant information. This process is time-consuming, inefficient, and often leads to frustration as users struggle to gather accurate details about happy hour deals, timings, and venue ambiance. As a result, potential customers may miss out on opportunities to discover new establishments or enjoy discounted offerings, while businesses may struggle to attract patrons due to limited visibility.
Research
Key takeaways
6 out of 6 competitors lacked a simplified discovery feature that are geo located and nationally recognized.
4 of the 6 of the apps available were regional or rolled out in a handful of cities.
5 of the 6 of the apps available required lengthy on-boarding.
Information provided was often outdated and inaccurate.
Defining the user
Based on key findings from the research phase, I defined two user personas, One persona to represent individuals looking for a lively happy hour and the other looking for a quieter happy hour to socialize with friends.
User and Business Goals
After developing my personas, I defined both the business and user goals of the app and it’s users to help identify common goals.
What should be added to the MVP?
Once I defined the goals, I was able to create a prioritized list of features for the MVP based on the information I gathered so far.
From concept to working prototype.
Creating the framework
Next, I created a site map and user flow to form the skeleton of the app.
User Flow: Happy Hour Discovery
Finding a Happy Hour User wants to Attend.
Feeling confident It Is Accurate.
Filtering search.
Turning sketches into wireframes
Before starting any digital work, I sketched out ideas for different variations of how a user would experience the app.
Home screen exploration. Search exploration. Search results exploration.
Lo-fidelity user testing
Participants explored lo-fidelity sketches and shared their initial thoughts and feelings to preliminary layouts for home, search and filter screens. After the lo-Fidelity usability test i I realized the desire for simplicity.
Insight #1
I discovered that users want to access search results quickly with minimal on boarding.
6 out 6 participants expressed the need to be able to access the search page right away being critical.
Insight #2
Having the app feature geolocation was crucial to finding results in a timely manner.
6 out of 6 would rather have geolocation automatically on versus manually adding a location to a search.
Design
Creating a brand
The color and branding choices for the Cheers app are designed to evoke a sense of fun, excitement, and community, reflecting the vibrant and social nature of happy hour gatherings. The bright, inviting colors and playful yet modern design elements aim to attract users and create an engaging, memorable experience.
Typography using the font family SF Pro was chosen to be in alignment with Apples iOS platform.
UI Component kit
To effectively create multiple screens and to efficiently perform iterations during the design process, a comprehensive UI component kit was developed. This kit serves as a valuable resource for designers and developers alike if the project were to have future collaborations .
Hi-fidelity prototype
A welcoming home screen that effectively explains the app's features and benefits to users, accompanied by a clear call to action (CTA) that encourages them to begin their journey with the application. Large red font was chosen to stand out.
The screen for the happy hour details features an simple organized layout as desired by 5 out of 6 participants. Various icons and vibrant colors were strategically employed to effectively highlight the special offers available during the detailed happy hour time.
Search results are shown with the map since 6 out of 6 users preferred map and list results equally. Essential information like time and specials available are easily scrollable. I made the list results small but clickable in order to show more details.
An alert screen notifies users that their location is not currently being shared, and it also provides them with the option to perform a search manually if they prefer. I ghosted out the search map and results indicating what is to come.
The second take at a filter feature offers a variety of options that were expressed as desirable during the interview process. These categories encompass several important aspects, including: Food preferences, Drinks selections, Venue Features that enhance experience, Price ranges to accommodate different budgets, and Proximity to ensure convenience for guests.
This initial attempt at creating a filter option was designed specifically to prevent users from having to endlessly scroll through content, only to later find out that opening and closing multiple tabs would lead to an even greater level of frustration.
Does it work?
User Testing
After the initial prototype was complete, it was tested via Zoom with 5 participants.
Each participant was asked to complete the following tasks:
Discover a happy hour you would attend in your area.
Find necessary details of your discovered happy hour.
Filter your search for happy hours in your area
Results
All tasks were completely successfully in a timely manner, although insights were gathered on ways to improve the overall experience
5 out of 5 participants disliked the “endless” scroll of the filter.
4 out of 5 participants had minor difficulties with easily locating “Apply Filter” button.
3 out of 5 felt aspects of the filter need to be more accessible, specifically the radio switches and the length of scroll.
2 out of 5 did not recognize the filter icon right away.
Iterations
Revisions are shown in order of priority. The filter screen being the most important iteration because it was pain point for 5 out of 5 of the participants of the usability test. The home screen is next because its the face of the app and should set a welcoming tone, 3 out of 5 participants felt it could use some work. The detail screen and search results screens are last since only 2 out of 5 participants addressed the need for visual iteration
Filter screen
The filter was redesigned after all usability participants 5 out of 5 felt it was too long and required excessive scrolling. The new design fits on a single screen with drop downs to reduce scrolling. Radio buttons were replaced with check boxes for easier use. The “Apply Filter” button was moved to a central location for better accessibility.
Before
Before
Detail screen
The happy hour detail screen underwent UI changes in response to participants' feedback about feeling distracted by the color and clutter. Following their input, the color was eliminated, resulting in a simplified version that enhanced readability.
2 out of 5 users expressed the feeling of the detail screen needing some clarity.
After
After
Home
The home screen underwent modifications to enhance its visual appeal following insights from usability tests. The text was revamped to ensure simplicity and improved hierarchy, while the primary image was updated to a brighter and more joyful one.
3 out of 5 users expressed the feeling of the home screen text needing improved visual hierarchy
Before
After
Search results
The horizontal filter results were modified to display vertically, enhancing both scrollability and accessibility on the filter results screen. The adjustment ensures a more intuitive user experience when navigating through the filtered content.
2 out of 5 users shared that the horizontal scroll seemed not in line with the rest of the screen.
Before
After
Next steps
Next version improvements would include:
Developing a saved favorites section.
Creating a real time seating availability.
Ensuring that the app is supported by participating restaurants, in a manner that is business and users best interest.