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?

Final Notes