Barhop Buddy
A travel and review app designed to guide newcomers through Philadelphia's vibrant nightlife & downtown entertainment.
Role
UI/UX Designer, Branding
Project Duration
12 weeks
01. Discover & Define
Initial Thinking
Target Users
Introverts looking to work their way into the bar scene
Travelers unfamiliar with Philadelphia nightlife
Competitive Analysis
Research Methods
Existing Systems
Quantitative research (survey)
Qualitative research (user testing)
Strengths
Brand Recognition
User-Generated Content
Diverse Offerings
Trip Advisor
Weaknesses
Dependence on User-Generated Content
Overwhelming UI
Opportunities
Mobile Experience
New Travel Services
Feed Personalization
Threats
Economic Changes
Global Events
Bots and Fake Reviews
Rotten Tomatoes
Strengths
Brand Recognition
Large Database
Screen Accessibility
Weaknesses
Strong Bias
Negative Reviews
Spam Content
Opportunities
Content Generation
Feed Personalization
Threats
Changes in Media
Regulatory Issues
Requirements
Product
This app is for exploring Philadelphia’s nightlife and leaving reviews.
Users can explore areas based on location, leave detailed reviews on crowds and noise, and create custom collections.
User
Primary User: A person interested in city bars and venues between the ages of 21-35.
Satisfying travel information, reviews, and itinerary creation.
Technical
Designed for mobile app usage across multiple screen sizes.
Business
Competitors: Trip Advisor, Rotten Tomatoes
To stand out, Barhop Buddy asks for reviews on crowds and noises in locations. The app also contains a fun, engaging bunny mascot.
100%
Bars, Events, & More
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%
Filters Please!
Eighty-five percent of survey participants expressed a strong desire for a detailed filtration and categorization system.
User Personas
Persona 1: Nayah Haynes
20 years old | Undergraduate Student | Friendly, Creative
User Statement: “I’d like an experience that helps me learn about and find bars that fit my wants for a fun 21st birthday celebration!”
Pain Points
No knowledge of bars or drinks
Wants to find a younger crowd
End Goal
Be able to find an exciting downtown bar with other college students
Persona 2: Chris Parella
29 years old | Operations Analyst | Reserved, Critical
User Statement: “I’d like an experience that provides a personalized itinerary to help me explore Philadelphia's nightlife for the first time this week."
Pain Points
Visiting from New York
Doesn’t like loud music or tight spots
End Goal
Find at least 4 bars to check out
during his trip that cater to his needs
User Journeys
Detailed user journeys/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 Buddy.
Journey 1. Searching For and Saving a Bar to a Collection
Journey 2: Reviewing a Recently Visited Bar
02. Explore & Ideate
Low-Fidelity Wireframes
Journey 1: Searching For and Saving a Bar to a Collection
Notes: Survey responses revealed that many users felt overwhelmed by typical travel and review app interfaces. To address this, the explore and bar pages were designed with simple, clearly labeled navigation (ratings, categories, hours, etc). Users also expressed a need for a location list specific to Philadelphia and the ability to categorize places for custom itineraries, which directly informed the layout and quick save feature, located on both the homepage and within the more detailed location page.
Journey 2: Reviewing a Bar
Notes: Survey responses revealed that many users felt apprehensive trusting other travel and review apps due to their lack of reviews and clarity on location specific details, such as crowds, noise levels, and overall atmospheres. This led to barhop prioritizing reviews specific to these features, which introduced mandatory noise and crowd meters before written reviews.
User Testing
User tests were conducted for each prototype. I broke down each case into a summarized problem and solution.
Problem
Improved Visual Layout
Necessary information was put below every bar page, highlighting every bar’s name, highlighted tags, price range, type of bar, rating between 1-5 stars, and closing hour.
This change allowed users to quickly be able to select bars based on their preference, without having to click in and out of multiple pages to find basic information.
Unclear Hierarchy
Users had difficulty navigating when key information was placed inside the container rather than below it.
Users responded more quickly when the information was positioned beneath the page buttons and images.
Solution
Problem
Streamlined Navigation and Filter
The page was redesigned as “Saved,” with a vertical scroll layout for easier browsing. A filter button was introduced to streamline navigation, and a “Create Collection” feature was added to help users organize saved items into themed lists or custom itineraries.
Cluttered Saved Page
Users struggled to navigate the original “Wishlist” page due to its horizontal scroll and lack of filtering options. As more bars were saved, the interface became cluttered, requiring too much scrolling to locate specific items.
Solution
Problem
Streamlined Navigation and Filter
The page was redesigned as “Saved,” with a vertical scroll layout for easier browsing. A filter button was introduced to streamline navigation, and a “Create Collection” feature was added to help users organize saved items into themed lists or custom itineraries.
Cluttered Saved Page
Users struggled to navigate the original “Wishlist” page due to its horizontal scroll and lack of filtering options. As more bars were saved, the interface became cluttered, requiring too much scrolling to locate specific items.
Solution
03. Branding & UI Design
Style Tile
Notes: Barhop Buddy features a dark purple and black color palette, designed to create a quiet and calming environment. This dark background is visually soothing to reduce the user’s eye strain in dimly lit and dark spaces. Throughout the app, there are pops of color, mascot stickers, and interactive meters. These features are intentionally designed to connect with the audience in a way that welcomes curiosity and exploration.
UI Design
04. Final 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
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.
Final Notes *
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?