END-TO-END MOBILE APP
END-TO-END MOBILE APP
Barhop Buddy
Overview
Overview
A travel and review app designed to guide newcomers through Philadelphia's vibrant nightlife & downtown entertainment.
A calming health tracking app designed for users with dysautonomia
and heart/blood pressure regulation issues.
A calming health tracking app designed
for users with dysautonomia and heart/blood
pressure regulation issues.
Role
Role
UI/UX Designer
Brand Designer
UI/UX Designer
Brand Designer
Timeframe
Timeframe
12 weeks
12 weeks
Tools
Tools
Figma
Illustrator
Google Forms
Figma
Illustrator
Google Forms
Problem Statement
Problem Statement
People exploring city nightlife lack a simple, reliable way to discover spaces with clear, transparent insights into sensory environments, making it difficult to choose spaces that match their preferences and comfort.
A calming health tracking app designed for users with dysautonomia
and heart/blood pressure regulation issues.
A calming health tracking app designed for users with dysautonomia and heart/blood pressure regulation issues.
Competitor Research
Competitor Research
The market currently lacks a travel and review app dedicated to transparently displaying local nightlife scenes.
The market currently lacks a travel and review app dedicated to transparently displaying local nightlife scenes.
The market currently lacks a travel and review app dedicated to transparently displaying local nightlife scenes.
I began my research by searching for one direct and one indirect competitor. I decided on Trip Advisor for it's similarity in being a travel and review app, and on Rotten Tomatoes for it's relevant rating system.
I began my research by searching for one direct and one indirect competitor. I decided on Trip Advisor for it's similarity in being a travel and review app, and on Rotten Tomatoes for it's relevant rating system.
Trip Advisor
Trip Advisor
Visible
A travel platform where users share reviews and ratings to help others choose hotels, restaurants, and experiences
A travel platform where users share reviews and ratings to help others choose hotels, restaurants, and experiences
Target Audience
Travelers planning trips and vacations
Users seeking trusted reviews for hotels, restaurants, and activities
Frequent travelers looking for recommendations
Target Audience
Travelers planning trips and vacations
Users seeking trusted reviews for hotels, restaurants, and activities
Frequent travelers looking for recommendations
Initial Insights
Trust focused
Focused on discovery
Complex UX
Initial Insights
Trust focused
Focused on discovery
Complex UX
Rotten Tomatoes
Rotten Tomatoes
A platform where critics and audiences rate and review movies and TV shows,
A platform where critics and audiences rate and review movies and TV shows,
Target Audience
Movie and TV show viewers looking for new media
Users who value critic and audience opinions
Casual viewers looking for quick ratings
Target Audience
Movie and TV show viewers looking for new media
Users who value critic and audience opinions
Casual viewers looking for quick ratings
Initial Insights
Quick validation
Low-effort browsing UX
Rating-driven
Initial Insights
Quick validation
Low-effort browsing UX
Rating-driven
SWOT Analysis
SWOT Analysis
My insights and findings were summarized into a SWOT Analysis, where I discovered their shared strength of bringing in daily active users, but opposite pain points of having too much or not enough data to concisely highlight health trends.
My insights and findings were summarized into a SWOT Analysis, where I discovered their shared strength of bringing in daily active users, but opposite pain points of having too much or not enough data to concisely highlight health trends.
App
App
Trip Advisor
Trip Advisor
Rotten Tomatoes
Rotten Tomatoes
Strengths
Strengths
Brand Recognition
User-Generated Content
Diverse Offerings
Brand Recognition
Large Database
Screen Accessibility
Weaknesses
Weaknesses
Dependence on User-Generated Content
Overwhelming UI
Strong Bias
Negative Reviews
Spam Content
Opportunities
Opportunities
Opportun-ities
Mobile Experience
New Travel Services
Feed Personalization
Content Generation
Feed Personalization
Threats
Threats
Economic Changes
Global Events
Bots and Fake Reviews
Changes in Media
Regulatory Issues
Key Insight
Key Insight
Despite differences in focus and quantity of data presented, both TripAdvisor and Rotten Tomatoes offer well-designed experiences that help users learn from others and make more informed decisions.
Problem Statement
Problem Statement
From this research I derived a problem statement to guide the next phase of my project:
From this research I derived a problem statement to guide the next phase of my project:
People exploring city nightlife lack a simple, reliable way to discover spaces with clear, transparent insights into sensory environments, making it difficult to choose spaces that match their preferences and comfort.
User Research
User Research
Potential users seek an experience that allows them to locate a variety of city nightlife spaces, create a custom itinerary, and easily find detailed descriptions, filters, and reviews.
Potential users seek an experience that allows them to locate a variety of city nightlife spaces, create a custom itinerary, and easily find detailed descriptions, filters, and reviews.
Potential users seek an experience that allows them to locate a variety of city nightlife spaces, create a custom itinerary, and easily find detailed descriptions, filters, and reviews.
I surveyed a total of 12 people, both local and non-local to Philadelphia, to gather information on what they would look for in a travel and review app of Philadelphia's nightlife.
M & F, 21-35 years old
M & F, 21-35 years old
User Interviews
User Interviews
Surveyors were given the option to participate in a 5-10 minute interview at the end of the research survey. In these interviews, they were asked about their preferences in more detail.
Surveyors were given the option to participate in a 5-10 minute interview at the end of the research survey. In these interviews, they were asked about their preferences in more detail.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum."
Key Insights I gained from user testing:
Key Insights I gained from user testing:
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet quam fringilla libero rutrum lobortis. Nam id vulputate odio. Cras molestie quis ante et vestibulum.
User Personas
User Personas
The target user is a young adult who is curious in exploring what Philadelphia's nightlife has to offer.
The target user is a young adult who is curious in exploring what Philadelphia's nightlife has to offer.
Two personas were designed to target the main travel and review app pain points that concluded from testing
Users unfamiliar with bars and late night venues struggle to find spaces that cater to their comfort levels and needs.
Users traveling from outside the area struggle to find relevant information and create realistic and personal travel itineraries.
Two personas were designed to target the main travel and review app pain points that concluded from testing
Users unfamiliar with bars and late night venues struggle to find spaces that cater to their comfort levels and needs.
Users traveling from outside the area struggle to find relevant information and create realistic and personal travel itineraries.
Nayah Haynes: “Nightlife Newcomer"
Nayah Haynes: “Nightlife Newcomer"
Nayah Haynes: “Nightlife Newcomer"
21 years old, Undergraduate Student, She/Her
21 years old, Undergraduate Student, She/Her
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!”
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
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.
End Goal
Be able to find an exciting downtown bar with other college students.
Chris Parella: "Explorative Traveler"
Chris Parella: "Explorative Traveler"
29 years old, Operations Analyst, She/Her
29 years old, Operations Analyst, She/Her
User Statement
“I’d like an experience that provides a personalized itinerary to help me explore Philadelphia's nightlife for the first time.”
User Statement
“I’d like an experience that provides a personalized itinerary to help me explore Philadelphia's nightlife for the first time.”
Pain Points
Visiting from New York
Doesn't like loud music or tight spots
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.
End Goal
Find at least 4 bars to check out during his trip that cater to his needs.
Information Architecture
Information Architecture
Prioritized a detailed filtering and location navigation system, as well as a transparent review experience to build trust with users.
Prioritized a detailed filtering and location navigation system, as well as a transparent review experience to build trust with users.
Prioritized a detailed filtering and location navigation system, as well as a transparent review experience to build trust with users.
Feature Flows
Searching For Bar With Map and Filters
Searching For Bar With Map and Filters
Nayah Haynes, "Nightlife Newcomer"
Nayah Haynes, "Nightlife Newcomer"
This flow addresses Sophie’s pain point of committing to one app by existing as an engaging onboarding process, with a clear example of what the daily experience would look like.
This flow addresses Sophie’s pain point of committing to one app by existing as an engaging onboarding process, with a clear example of what the daily experience would look like.
Directly Searching For a Bar and Saving to a Collection
Chris Parella, "Explorative Traveler"
Chris Parella, "Explorative Traveler"
This flow addresses Sophie’s pain point of committing to one app by existing as an engaging onboarding process, with a clear example of what the daily experience would look like.
This flow addresses Sophie’s pain point of committing to one app by existing as an engaging onboarding process, with a clear example of what the daily experience would look like.
Reviewing a Bar
Chris Parella, "Explorative Traveler"
Chris Parella, "Explorative Traveler"
This flow addresses Sophie’s pain point of lacking a structured way to check-in on her health by providing an organized experience to routinely log symptoms and daily habit.
This flow addresses Sophie’s pain point of lacking a structured way to check-in on her health by providing an organized experience to routinely log symptoms and daily habit.
User Flows
User Flows
I made sure to design an experience that didn't leave users feeling endlessly overwhelmed and quick to drop off.
I made sure to design an experience that didn't leave users feeling endlessly overwhelmed and quick to drop off.
"Searching For Bar With Map and Filters" Flow ⤴
"Searching For Bar With Map and Filters" Flow ⤴
Mid-Fidelity Wireframes
Mid-Fidelity Wireframes
Designed mid-fidelity wireframes, focusing on mapping out features in a way that shows how they impact the overall trend database.
Designed mid-fidelity wireframes, focusing on mapping out features in a way that shows how they impact the overall trend database.
Designed mid-fidelity wireframes, focusing on mapping out features in a way that shows how they impact the overall trend database.
Developed intentional onboarding features that targeted both user persona's pain points.
Directly Searching For a Bar and Saving to a Collection
Chris Parella, "Explorative Traveler"
I then developed the daily-check in as how it would be found in the onboarding tutorial.
For a returning user, "Let's Try Out a Check-in would become "Checking-in" ↴
Daily Check-in
Sophie Fitzpatrick, “Proactive Patient”
Browsing Health Data
Kate Rivera, “Pattern Seeker”
Viewing History & Trends
Kate Rivera, “Pattern Seeker”
Visual Design
Visual Design
Chose pastel pinks, oranges, and blues as the primary brand colors to be gentle on eyes and differentiate from standard, clinical health platforms.
Chose pastel pinks, oranges, and blues as the primary brand colors to be gentle on eyes and differentiate from standard, clinical health platforms.
Chose pastel pinks, oranges, and blues as the primary brand colors to be gentle on eyes and differentiate from standard, clinical health platforms.
Usability Testing
Usability Testing
Narrowing down on the user pain points increased positive engagement.
Narrowing down on the user pain points increased positive engagement.
Narrowing down on the user pain points increased positive engagement.
I conducted 1 round of usability testing with 5 testers. Each user went through medium-fidelity journeys designed to be based off the flow charts above. All 5/5 users were able to successfully onboard, check-in, and review trends.
I conducted 1 round of usability testing with 5 testers. Each user went through medium-fidelity journeys designed to be based off the flow charts above. All 5/5 users were able to successfully onboard, check-in, and review trends.
However, significant changes were made in each flow to give more control to the users and clarify the steps and duration of processes within the app.
However, significant changes were made in each flow to give more control to the users and clarify the steps and duration of processes within the app.
Onboarding: Improving Information Architecture
First Round
Problem: Lack of Symptom Filtering
Users wanted the ability to filter through symptom categories. Without this feature, they felt they had to keep scrolling.
Solution: Categorized Filters
Filtering options were added, allowing users to browse and select relevant symptoms. This change helped users clearly see what the app included without unnecessary scrolling.
*Adding these categories helped with addressing Sophie’s pain point of feeling overwhelmed during health app onboarding.
First Round
Problem: Lack of Symptom Filtering
Users wanted the ability to filter through symptom categories. Without this feature, they felt they had to keep scrolling.
Solution: Categorized Filters
Filtering options were added, allowing users to browse and select relevant symptoms. This change helped users clearly see what the app included without unnecessary scrolling.
*Adding these categories helped with addressing Sophie’s pain point of feeling overwhelmed during health app onboarding.
Onboarding: Adding Flexibility
First Round
Problem: Flow Friction
Some users did not want to complete a check-in immediately during onboarding, but there was no option to opt out.
Users expressed uneasiness about the length of a check-in.
Solution: Flexible Onboarding Journey
A “Skip for now” button was added, allowing users to bypass the initial check-in.
A small bar was added as well to show that there are four screens to be completed during a check-in.
*A check-in progress bar and skip button addressed the pain point of lengthy onboarding experiences.
First Round
Problem: Flow Friction
Some users did not want to complete a check-in immediately during onboarding, but there was no option to opt out.
Users expressed uneasiness about the length of a check-in.
Solution: Flexible Onboarding Journey
A “Skip for now” button was added, allowing users to bypass the initial check-in.
A small bar was added as well to show that there are four screens to be completed during a check-in.
*A check-in progress bar and skip button addressed the pain point of lengthy onboarding experiences.
Browsing: Clearer Information
First Round
Problem: Limited Data Visibility
On the data pages, such as the heart rate page, users wanted to review more than a single day’s (or week’s) metrics at a time.
Users wanted a less alarming color, they felt a red-based orange expressed urgency.
Solution: Expanded Data Options
Additional timeframes were introduced, allowing users to switch between daily, weekly, and monthly trends. This gave users a clearer picture of their overall patterns.
The chart color was shifted towards orange.
*Incorporating an organized but large vital history database helped address Sophie’s need to be able to locate all her information in one location.
First Round
Problem: Limited Data Visibility
On the data pages, such as the heart rate page, users wanted to review more than a single day’s (or week’s) metrics at a time.
Users wanted a less alarming color, they felt a red-based orange expressed urgency.
Solution: Expanded Data Options
Additional timeframes were introduced, allowing users to switch between daily, weekly, and monthly trends. This gave users a clearer picture of their overall patterns.
The chart color was shifted towards orange.
*Incorporating an organized but large vital history database helped address Sophie’s need to be able to locate all her information in one location.
Final Designs
Final Designs
Redesigned the website with clear navigation, strong visual and informational hierarchy, and improved product discovery,
Redesigned the website with clear navigation, strong visual and informational hierarchy, and improved product discovery,
Video Walkthrough
Video Walkthrough
Final Designs
Final Designs
Introducing Vitalize, a mobile app that makes tracking your personal health data and habits easier.
Introducing Vitalize, a mobile app that makes tracking your personal health data and habits easier.
Introducing Vitalize, a mobile app that makes tracking your personal health data and habits easier.
Welcoming Onboarding
The final onboarding screens are designed to feel both welcoming and comforting
Progress bars and skip buttons are included to reduce pressure
Subtext is utilized to speak the user through the process
Check-In Centered
An optional check-in sample is displayed to users in the onboarding so they understand the overall experience.
The homepage is centered around the check-in feature, also highlighting daily vitals with constant updating
Check-In Centered
An optional check-in sample is displayed to users in the onboarding so they understand the overall experience.
The homepage is centered around the check-in feature, also highlighting daily vitals with constant updating
Simple & Familiar
Symptom questions reflect real-world health assessments
Important, but simple, questions are asked about the user’s habits
Simple & Familiar
Symptom questions reflect real-world health assessments
Important, but simple, questions are asked about the user’s habits
Interactive Data
Vitals reflect familiar health charts and are designed to be easy to read
Charts contain interactive elements related to common blood pressure / health condition symptoms
Users can explore daily, weekly and monthly vital history from the homepage
Interactive Data
Vitals reflect familiar health charts and are designed to be easy to read
Charts contain interactive elements related to common blood pressure / health condition symptoms
Users can explore daily, weekly and monthly vital history from the homepage
Organized History
Previous check-in’s, health data past 1 year, and trend insights can be easily located through the nav bar
Hearts are used to show completion on a calendar and can be looked into
Users can source a full list of health data to go in and out of different vital history
Organized History
Previous check-in’s, health data past 1 year, and trend insights can be easily located through the nav bar
Hearts are used to show completion on a calendar and can be looked into
Users can source a full list of health data to go in and out of different vital history
Key Takeaways
Key Takeaways
Communication with Testers
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.
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
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.
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
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.
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.
Reflection
Reflection
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?