2024
Barhop Buddy
A travel and review app designed to guide newcomers through Philadelphia's vibrant nightlife.
Role
UI/UX Designer, Branding
Project Duration
12 weeks
Type of Project
Personal Project
Let exploring downtown nightlife become a fun, stress-free adventure.
01. Discover & Define
Initial Thinking
Target Users
01. Inroverts looking to work their way into the bar scene
02. Travelers unfamiliar with Philadelphia nightlife
Research Methods
01. Existing Systems
02. Quantitative research (survey)
03. Qualitative research (user testing)
Competitive Analysis
Trip Advisor and Rotten Tomatoes were carefully analyzed for their well-known review features.
01.
Trip Advisor
Strengths
Brand Recognition
Extensive User-Generated Content
Diverse Offerings & Features
Weaknesses
Dependence on User-Generated Content
Overwhelming User Interface
Regulatory International Challenges
Opportunities
Enhanced Mobile Experience
New Travel Services
Feed Personalization
Threats
Economic Changes
Global Events
Bots and Fake Reviews
Generative research and surveys revealed that travel and planning apps are often broad and overwhelming, failing to meet specific needs. Young surveyors, particularly introverts, shared feeling intimidated by Philadelphia's nightlife. Designing an app focused on nightlife, with transparent details like audience, crowd size, and volume levels, creates a welcoming and stress-free experience for nightlife exploration.
100%
All survey participants supported the idea of expanding the app beyond traditional bars. They expressed interest in including nighttime venues and activities featuring a bar. Additional comments were left noting how this would make for a less intimidating experience.
85%
Eighty-Five percent of survey participants expressed a strong desire for a detailed filtration and categorization system.
Persona 1 — Maria Woods
✦ “I want to go out and celebrate my 21st, I need to find somewhere fun!”
User Personas
The primary users, young adult introverts, are eager to explore city life but feel overwhelmed by the excessive information on travel guide apps.
I developed two user personas— one female and one male — each representing different spectrums of introversion, location, age within the young adult range, and primary goals.
Persona 2 — Chris Parella
✦ “I’d love to create a custom itinerary that’ll allow me to network and wind down.”
Empathy Maps
Before mapping out the journeys, I created empathy maps for my users.
User Flows
Detailed, written user flows were created to show the process of completing a search, save, and review task from both a user who found a website advertising the app and a user who already has an account with Barhop.
01.
Searching & Saving a Bar
02.
Locating & Reviewing a Bar
02. Explore & Ideate
Wireframes
Initial Planning & Low-Fidelity Screens
Iterations of low-fidelity wireframes were created for the prototype.
This phase experimented with the boldness of the design in size, layout, and hierarchy to effectively engage an audience on the introverted spectrum. This approach allowed for quick experimentation and adaptability based on feedback.
Mid-Fidelity Screens
After finalizing the main screen layouts, I began seeking testing feedback.
User Testing Insights
01.
02.
03.
Layout Approach
Users preferred smaller images with information and tags displayed below them, rather than within the images.
Wishlist vs Saved
Users favored a text-centered over image-centered collection, as well as for the title to be changed from “Wishlist” to “Saved”
Filters and Tags
Users enjoyed organized filters and tags when navigating the app
03. Branding & UI Design
Branding
Logo
The lowercase "b," shaped like a rabbit, merges the word "bar" with the brand's bunny mascot, using a playful serif font to convey a sense of charm and approachability that aligns with the brand's identity.
Color & Typography
Designed to resemble the night sky, the color palette features cool-toned shades of black, gray, and purple. The clean and geometric sans typeface, ITC Avant Garde Gothic, enhances the apps readability and reflects its modern approach.
UI Design
Visual Accessibility
Barhop Buddy’s dark mode aesthetic is not only visually appealing but also designed to suit the nightlife context, reducing eye strain in low-light environments. Vibrant purple accents are used for interactive elements like buttons and highlights, guiding user attention.
Rounded edges and clean typography enhance the overall approachability of the interface. The addition of a playful bunny mascot creates an engaging and friendly tone, helping introverted users feel more comfortable navigating the app.
Reaching the Target Audience
Barhop Buddy is built to address the needs of young adults possibly new to city nightlife. The “Noise Meter” and “Crowd Meter” provide clear, visual indicators of bar ambiance, assisting users in saving bars that best match their comfort level.
The app’s map and search tool integrate detailed filtering options specific to personal experience, with each bar having custom tags and key features. Gamified features, such as the achievements found on users’ profiles, encourage user engagement, making the app feel rewarding and personalized.
04. Reflection
Project Takeaways
Communication with Testers
Interviewing and user testing takeaways were beneficial in each stage of the process. Due to the specific target audience and range on the introversion spectrum, this consistent communication provided insight into every possible outlook and experience and helped shape the app’s design.
Research and Competitors
Designing a prototype for a navigation-centered app required detailed research on locations around the city and their available information. Spending extensive time on travel app analyses and businesses downtown made prototyping and designing map-based features smoother.
Gamification Goal
The project began with a goal to include a gamified feature to build an audience, and while the initial direction of a more literal game changed, the decision to design an achievement system attached to the mascot and bunny branding became a fun way to make the app more interactive and stand out from its competitors.
This project underwent various design changes and involved thorough research and user testing to reach its full potential. It showcases my aim to demonstrate high-level experiences and visions for an app.
Given more time, I would like to flesh out the events feature of the app. How could the app update current events on a daily or weekly basis? Who would they have to partner with to achieve this?