this is bubble text that says "Angelspot" Text : "UX/UI Case Study By Grace Meyer"this is a photo of the woman on the splash page but with shading
Project Prompt
Develop an idea for an app inspired by people's travel habits.
suitcase icon 24x24 pixels greyairplane icon 24x24 px grey
forward or to the right arrow 19px x 14px grey
cocktail icon 25x24 pixels greybeach icon with palm tree half circle and then ocean wave 25 x 24 px grey
Context: There are plenty of apps covering booking flights and hotel rooms. I deviated from that stage and focused on planning after arrival.
My Response
I was interested in, "What attracts or deters people from entering a venue for the first time?"While drafting the interview plan, I focused on targeting individuals aged 20s to mid-30s seeking bars or night-out spots while traveling.
Research Objectives
What has proven successful in choosing a night out venue?
What does the process of choosing look like for you?
How, where, when do you choose a bar?
What are the pain points?
Tools Used
figma iconmiro logoillustrator icon
Project Sections
Empathize   with users through In-depth Interviews (discover pain points)
Define the problem and walk through possible scenarios
Ideate a solution by brainstorming features
Prototype designs, test them, iterate, test again, iterate, test....
Hi-Fidelity design making because every project in the real world has a deadline
What I Did
UX Researcher
I created an interview plan, conducted in-depth interviews, and synthesized user data into diagrams (affinity diagram, empathy map, user persona).
UX Designer
I ideated key features for the app, created a user task flow diagram, sketched wireframes, and made mid-fidelity designs in Figma.
UI Designer
I prototyped the designs in Figma, and implemented design elements from my style guide.
Design Process
two diamonds with the steps in the double diamond method with arrows going to and from different sections
My project's completion didn't strictly adhere to the double diamond method. Instead, it followed a cycle of multiple revisions and do-overs, driven by involving users and adapting the product based upon their feedback. The following bulleted list outlines the constants within my project. The following factors remained despite many stages of revisions:
Throughout the project, further user insights guided my refinements in the app's task flows and UI elements based on continued iterations. I documented iterations based on user insights within user testing.

01 Empathize & Define


In-Depth Interview Overview
  • 1. During the interview stage, I created a research plan and executed the interviews with a partner
  • 2. I did seven interviews with people in their early to mid-20s discussing their night-out planning habits
  • 3. I asked the interviewees a total of 17 questions each
  • 4. The insights below are quotes from users that later helped form my problem statement
Key User Insight 01
Interview Question:
What are the hardest parts of choosing a bar to go in a new area?
I think the worst part of searching for a new bar is not being able to tell if the atmosphere or people there will put me on edge. As a woman, I feel I have to be on guard when I go out.
Maria 22, Eugene, OR, University Student, She/her
Key User Insight 02
Interview Question:
While on your most recent trip, how did you determine which bar to walk into?
"Before my friends and I went to Portugal we asked for night out recommendations from a friend who had traveled there. They told us to go to Pink Street. When we got to Pink Street, we looked for people around our age and followed where they were headed."
Elle 25, NYC, NY, Clinical Specialist, She/her
Key User Insight 03
Interview Question:
What does the process of choosing a bar look like for you?
"I do a double deep dive online search before I decide to go to a bar or club. I look up the general area I am going to be in through Google. Then if I see something I'm interested in I go to their Instagram to get more info on the aesthetic appeal."
Jess 24, Portland, OR, Retail, She/her
User Persona
What is a user persona?

The creation of a realistic yet fictional identity based on researching your initial target market. User personas help UX designers explore the characteristics of someone who relates to the ideated market. They help guide designers through user-based solutions.

Alex Kelly
picture of Alex Kelly drawn digital image
Bio
Alex lives in Denver, Colorado, and works at Proof PR firm, assisting small businesses in health and wellness. She values others' opinions but occasionally feels burnt out trying to please everyone. As the go-to planner for events, she seeks a fun and easy way to involve her friends in the planning process
Age
25
Pronouns
She/her
Status
Single
Occupation
Public Relations
Location
Denver, Colorado
Brands
Huck coffee logo brand from Denver, CoSpotify logo ACLU (American Civil Liberties Union) logoAir bnb logo
Personality
Introversion
Extroversion
Sensing
Intuition
Thinking
Feeling
Judging
Perceiving
Frustrations
  • Feels scattered in  new situations, especially social events
  • Fears of being taken advantage of at bars if she comes off as overly friendly or welcoming
  • Wants to connect with others on nights out but has a hard time initiating conversation
Core Needs
  • To find friends that also have a strong sense of justice.
  • The ability to be her authentic self without fearing judgment.
  • New experiences that help her to grow more confident and independent.
Competitor analysis

Strengths

Weaknesses

Strengths

  • Motivating people to review: Yelp motivates users to review by recognizing avid reviewers, rewarding them for their frequent contributions.
  • Motivating businesses to join: Because they are the #1 review service, they have the power to make or break a business's reputation.

Weaknesses

  • Biased responses: People tend to use Yelp more for personal complaints, often based on their individual experiences and behavior
  • Complaints from small business owners: Yelp pressures small businesses to pay them for a membership. Once they pay the bad reviews no longer show up first.
Trip Advisor Logo in #424245 grey

Strengths

  • Specific focus on travel: With a niche focus on travel, they've become the top choice for hotel and flight bookings.
  • Supporting the success of hotels: They offer promotional features for hotels to advertise directly on their platform, allowing users to book rooms directly from TripAdvisor

Weaknesses

  • Promotes companies that they own: They acquired Viator, a company specializing in activity bookings. Viator listings are prioritized over others on the platform.
  • Businesses lack control of their profile: A review on TripAdvisor pointed out a key flaw: businesses cannot opt to remove their presence from the platform.
BarChick Logo in #424245 grey

Strengths

  • Specific focus and target market: They focus on women travelers who enjoy nightlife but face challenges finding quality bars
  • Wide variety of city guides: They operate a website featuring guides to the top bars in major cities.

Weaknesses

  • Failure in launching an app: They once offered an SMS service to help women find bars round-the-clock. Although they had plans for an app, it's no longer available in app stores
Mission statement
We believe in creating a bar-finding app for young adults, particularly women & LGBTQIA+ individuals who enjoy going out. The key focus is to create a safe space for people to give honest reviews of local bars.

The Obstacles to Achieving the Goal: Mission Statement Problems

02 Ideate

Feature ideation
I Like ... I Wish ... What If? Most Noted Ideas
To begin a more formal structured brainstorm on features for my app, I used Miro to sticky note my ideas under the three given sections I Like, I Wish, and What if?
View other users' reviews
(user-generated content)
Customize content through filtering
Rank bars based on your comfort level
Get directions after allowing location access
The four original chosen features:
The four features above are the ones I built out because I knew that it was feasible and they supported solving my problem statement. The key feature is the user-generated reviews with a comfort ranking component that promotes a sense of safety and oneness among women and members of the LGBTQIA+ community.
The three user insights driving my feature decisions were:
  • People like to know about others' experiences especially when they percieve them as similar to themselves
  • People want to be informed on environmental factors of a venue before choosing to go there
  • Women and the LGBTQIA+ community have a higher safety risk when trying out new bars
Core feature updates
  • Revisiting this project after a break, I've decided to optimize the built-out features to address issues stemming from the mission statement
  • The filtering experience aids users in selecting preferred bars, but it's a generic feature found in many applications. Similarly, mapping oneself to a destination is familiar and intuitive.
  • What new features could address the challenges of attracting initial users and encouraging them to leave reviews?
  • How can we build trust among users? Does this involve PR and establishing relationships with local bars, or can aspects of the app itself inherently communicate the value of leaving reviews?
Storyboard

1

Alex and Kate drive together to Seattle for a short weekend trip. They want to relax, but they also plan to let loose to relieve work stresses.
space needle line art drawing black/ grey
They decide they will go out on Saturday night but they do not know where to go. Because they are unfamiliar with the area they want to do a deep dive search on the bars in the area.

2

Alex Kelly says I don't know any bars in the area
Alex and Bella decide to search the internet for a way to get more insight into what the bar scene is like in Seattle. They are looking for pictures of bars that look like they have a cool atmosphere.

3

Alex and her friend looking at her phone planning the night out
While searching the internet, they are on a site that suggests they download the app AngelSpot. Alex downloads the app and sets up an account.

4

The second screen after the first image with angelspot text and the brand character angel with the same shade of red the same text in the same ultra hyper font but with a smaller circle encircling the characters hand holding the cocktail glass with options for login and signup below it shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt the create an account page of the app where you enter your full namee and password twice before pressing next shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt
Alex adds filters based on her preferences. She wants a place that has gaming like an arcade and is within walking distance.

5

a mockup of filters floating out of the screen on the app's homepage. It is displayed on a device. The iphone 15 titanium black model. The model faces forward
They choose Unicorn Bar. The night out is successful after following the app's recommendations for a welcoming and safe environment.

6

A written review overlay with filled out review contents on an iphone 15 titanium black forward facing mockup thanks for writing a review page with a smiley icon on an iphone 15 titanium black forward facing mockup
Prototyping
Picking the three core processes:

After deciding on the function and design of the home page as a search page, I started working in Figma to map out how many frames I would need to design. I knew to have at least two capabilities:

1

customizable bar search process

2

Leave-a-review

1. Bar search process pre-testing

shows step 1 and 2 of the find a n
find bar 2 shows steps 2 and 3 of adding filters to customize your search
find a bar 3 has steps 4 and 5 where you look at the different categories and choose to view arcade bars
find a bar 4 with steps 6 and 7 that has you click Unicorn bar profile and then go to view the directions to the bar
find a bar 5 with steps 8 and 9 where the user is within the map and can choose a transportation method for the directions
find a bar 6 which gives a summary of what has been done to finish off the process finding a bar and determining if you can walk there

2. Leave a review pre-testing

leave a review 1 step 1 where you click the review icon in the navigation bar
step 2 of reviewing where the user selects the bar they are reviewing after entry and proceeds to start writing the review on the review page
In leave a review 3 the user writes a review gives a star rating and then leaves dial ratings for comfort community and crowding
the user decides to post an image to their review in review number 4 slide
the user writes a caption for the photo that they add to the review in review slide 5
review slide 6 has the user add tags to the review and then finish it off by posting it

03 Test & Iterate

User Testing Rounds 1 & 2
check list icon 36px 32px grey

What were the testing tasks?

For the first round of testing, I wanted the users to go through the three processes I displayed in the last section. I changed the steps to the simple directions shown to the right to test usability.


1. Create an account


2. Find Unicorn's bar profile

3. View the map within the profile

4. Leave a review

strategy icon with arrow x and o 36px by 36px grey

How were the tests conducted?

Round 1:

  • 4 different prototype flows 1 per each task
  • 3 in-person tests users navigated the prototype on my computer
  • 4 more people through Reddit forums

Round 2:

  • From 4 different prototype flows to 2 main flows
  • Familiarized my sister with the 2 processes
  • Brought her laptop to a gathering  
  • Friends clicked through prototypes 
  • Talked with my sister on the phone, took notes on the key pain points and successes
icon of a curious face with a microscope over its one eye like it is investigating something

Who participated?

Round 1:

  • Tested wireframe prototype with peers in the target demographic (women in their mid-twenties)
  • Sought anonymous feedback on Reddit
  • Posted my prototype with tasks on r/FigmaDesign and r/design_critiques

Round 2:

  • Sister administered tests for me
  • Gender breakdown: 8 females, 3 males
  • Careers represented: public relations, advertising, cybersecurity, software engineering
  • Participants: 11 friends aged 25-27, residing in New York

Round 1 results summary

Summary of undocumented iterations

In round one users struggled most with the review process. Before covering those pain points, I'd like to highlight the smaller adjustments I made in round 1:

  • Restructured my Figma file setup (organized components by user task)
  • Revamped the wording  of the onboarding process and tested whether it made sense
X eyes and sad face emoji 34 px by 34 px grey

Pain points of the review process

  • Too many pages to click through and too many steps before posting
  • Frustration filling out more than one or two dial ratings (Screens 1 & 3)
  • The add a tag button and add a photo button are not noticeable(Screens 2 & 3)
  • Information overload when filled out review content collects on screen
the old review process and the 3 dial ratings on an iPhone screen
the old review process wireframes with the written review section open
a review from the old review section pre-testing where the three dials have been filled out
star eyes emoji 34 px by 34 px grey

The solution

  • 4 page review process reduced to one page by condensing the additional review features into icons within a menu (Screens 1, 2, & 3)
  • From 3 dial ratings to one encapsulating comfortability rating (Screen 4)
  • The icons turn from grey to red to mark that they have been filled out (Screen 4 & 5)
  • When a red icon is clicked an overlay with your inputs show up (Screen 5)
  • Press next and all review contents show up with a post review button (Screen 6)
the review page with no written review or filled out components the keyboard is up so the navigation is to the right shows what a phone screen looks like when you have written a review and have opened the right-side navigation within the review section when open it gives the names of the icons to symbolize the components you can add to your reviewfully written out review with the side navigation on the bottom because the keyboard is down no longer covering up the bottom half of the screenshows the comfort rating process and how it shows up as an overlay shows the dial rating process for the leave-a-review section it displays it on an iPhone 15 the dial rating is a comfort ratingshows the components of a fully filled-out review that is being previewed on an iPhone screen with the option to post the review
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey

Round 2 results summary

X eyes and sad face emoji 34 px by 34 px grey

Pain points 2

  • The onboarding process feels disjointed and has awkward language
  • Inability to go back and change the preferred bar aesthetic again after filling out the onboarding intake
  • Lack of consistency throughout onboarding ex. the batteries do not fit the theme
  • No information is shown about the users that are leaving the reviews
what do you like page of the app that has photos of different bar aesthetics to choose from It is a mockup on a iphone 15 titanium black model with no tiltIt is a mockup on a iphone 15 titanium black model with no tilt The screen shows the app page with batteries and asks for you to rate your energy level based on battery charge levels
star eyes emoji 34 px by 34 px grey

The solution

  • Moved the content from the onboarding pages to an overlay that comes up when clicking on "Curate your Night." This way preferences can be changed as frequently as the user desires
  • Got rid of the batteries and chose dials instead for a simpler more neutral look
  • Changed the reviews that show up on the bar profile to have a button to view the user's profile
  • Designed a user profile and included the information suggested to me such as age, pronouns, and location
shows a phone screen with the text welcome to angel spot and a cocktail glass with a cherry in it the image is black and white iPhone image of screen of the app that asks you to curate your night based on photos of different bar themes the second part of curate your night or set the vibe section shows up on a device asking you to use dials to give a percentage of how bright busy you want the environment to be etc.shows Sophie Dawtry's profile page on a phone as an example of what a user profile page looks like it shows the recent reviews they have left and basic info on them
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey
Style Guide
Primary
#D91304
#AE0F03
#D91304(0.3)
Secondary
#C0D904
#197591
#FF6257
Neutrals
#353537
#424245
(0.9)
(0.8)
(0.7)
(0.6)
(0.4)
(0.3)
(0.2)
#D9D9D9
#D9D9D9(0.5)
#D9D9D9(0.2)
F5F5F7(0.002)
#E6E6E6
#E6E6E6(0.8)
#E6E6E6(0.6)
#E6E6E6(0.5)
#FFFFFF(0.1)
#F5F5F7(0.2)
#F5F5F7(0.4)
#F5F5F7(0.5)
#F5F5F7(0.6)
#F5F5F7(0.8)
#F5F5F7(0.9)
#F5F5F7
#FFFFFF(0.65)
shows ultra hyper font examplegives description for brand text 60 pt font ultra hyper font
heading 1 descriptionheading 2 descriptionheading 3 descriptionheading 4 descriptiongives description for heading 5gives the information on heading 6
PL text is 17 pt font in sf pro text
regular PL text 17pt fontmedium PL text 17pt fontsemibold PL text 17pt fontPL letters showing bold weight of 17pt font
says that pm text is all 16pt and different variations based on font weight
regular weight 16 pt fontmedium weight 16pt fontsemibold 16pt font shown with two letters pmbold 16pt font shown with two letters pm
says that ps font is size 15pt downloaded as an svg to show sf pro text on all devices
regular weight 15 pt font shown with ps lettersmedium 15 pt font shown with ps letterssemibold 15pt font shown with the letters psshows the size of paragraph text 15 pt that has been boldened
an external link icon grey 30x30 pixels
External
phone number icon that people use to symbolize the companies or persons number is next to it
Phone
message icon cutout or subtracted from a 38 by 38 px circle
Message
exclamation icon
Warning
save item icon circle with icon cutout 38 by 38 pixels
Share
a forward or backward arrow facing left grey rounded stroke 18 by 30 pixels
Arrow
two arrows side by side one facing up the other down to symbolize reversing 38x33 px grey
Reverse
an x icon 28 by 27 pixels grey
Close
a filter icon a sifter 28 by 28 px grey
Filter
a filter icon shown by a sifter and a line through it showing it is to turn off filters 32 x 34 px grey
Filter off
a check box that has been checked and has a rounded stroke checkmark 32 x32px grey
Checkbox
a reverse or redo icon shown by an arrow that twists around into a circle 26pxX28px
Refresh
a paintbrush icon 34 x 30 pixels grey
Paintbrush
a search icon a magnifying glass 30 x 31 pixels grey
Search
a profile icon a face with eyes looking to the side and no mouth 30 x 31 px grey
Profile
a pen icon used for the review icon within the app 32. by 33 pixels
Review
a filled in star icon 30 by 30 pixels grey
Star
a dollar sign icon 20 x 33 px grey
Dollar
a beerstein full of a foamy brew icon 28 by 31 pixels grey
Beer
a martini/ cocktail glass icon 32 by 43 px grey
Cocktail
a microphone icon 30 x 30 px
Microphone
a wine glass icon 26 x 36 px grey
Wine
a skeleton head icon 26px x 31 px grey
Skull
a billiard ball 30x31 px grey
Billiard ball
beach icon half circle sun umbrella stuck in it 40x37 px grey
Beach
an old style radio icon 32 by 30 pixels grey
Radio
sports icon containing a football in front of a basketball 62px x 31px
Basketball & football
a skyline icon some buildings next to one another to represent rooftop bar category 56px by 30px grey
Skyline
3 different guitars next to one another 38px x 30 px
Guitars
theater mask icon 46x 31 px
Theater masks
a gaming controller icon 48 px by 30 px grey
Controler
tiki icon two sticks of bamboo 34px x 51 px
Bamboo
corndog icon 32 x 31 px
Corn dog
a rainbow icon in all grey 50 x 34 px
Rainbow
a map icon 24x32 px
Map
walking icon human figure symbol in the act of walking 24x44px grey
Walk
the ride share icon a human with there hand up 26x50 px grey
Rideshare
car icon 38x30 px grey
Drive
a bus or tram icon that represents choosing public transport within a map application 22x30px grey
Public transport
a bed icon 28x19px grey
Bed
comfort icon contains happy face sinking into a cloud in grey 37x31px
Content face
photo icon of mountains and sun in a box to show a photo frame
Photos
a camera icon grey 28x28 pixels
Camera
a rounded star icon with stroke no fill 32 x 33 px grey
Star
hashtag or pound symbol
tag
Tag
Grid

I chose an iPhone 14/15 pro as the base breakpoint of my design with:

  • 393 px x 852 px
  • 460 ppi
  • 4 columns
  • 24 px gutters
  • 16 px margins
a blank frame of an iphone shown just as a rectangle with gutters marked in blue and margins highlighted in yellow

04 Final design

Final Design

Prototype core processes

What features did I stick with?

1. Bar search process
  • Rank your comfort level at the bar
  • Share photos of your experience
  • Help users find your review by adding tags
  • Inform others with a written review
2. Leave review process
  • Customize content with filtering
  • Map yourself to the bar of your choice
  • View and react to users' reviews  
  • Follow other users'

183

components

50+

Screens

3

months

Prototype Instructions
black arrow down that flips up to show the of an accordian
  • Clickable areas will be highlighted in blue when you click other non-clickable parts of the screen
  • After clicking "Add location" press Seattle
  • Press "Customize search" when ready press done
  • Under the "By category" section click the arcade button
  • After scrolling through, press Unicorn's profile tile
  • From the profile page you can go to the review section by pressing "Add review," view the map by clicking "View directions," and see a user profile page by clicking "View profile" on Sophie Dawtry's review

Scroll or swipe on the sides of the prototype or the navigation bar to move if you are stuck

Sign-up/sign-in

AngelSpot intro page that is a reddish orange shade it has the main girl character an angel with the text AngelSpot above her in Ultra Hyper font she is a line drawing but with filled in hair, cocktail, and shoes, she is drawn in a cartoony style. Behind/around her is the same shade of red rectangle filling the whole frame besides a large circle cutout in the middle where the figure rests between the top and bottom of the circle shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt The second screen after the first image with angelspot text and the brand character angel with the same shade of red the same text in the same ultra hyper font but with a smaller circle encircling the characters hand holding the cocktail glass with options for login and signup below it shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt The password entry page of the app for users that have signed up with the same email in the past it has a forgot password link shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt The enter email page of the app where the system determines whether you have an account with the email you entered or not after you press next it sends you to 1 of two pages shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt the create an account page of the app where you enter your full namee and password twice before pressing next shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt another introductory page that has a black and white color palette there is a cocktail glass with a cherry that has the text above it "welcoome to AngelSpot" iphone 15 titanium black model facing forward with no tilt The ios pop up shows up asking if you are willing to share your location with the app iphone 15 titanium black model facing forward with no tilt You are on the home page before adding your current location it gives you bar suggestions based on your previous location Denver You are on the category page within the search page and have scrolled down the search bar sticks to the top of the page under the status bar shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey

Find a bar

Pre filtering

suggeested you have scrolled down while on your suggested content page on a mockup device iphone 15 titanium blackThe beginning of the category page is showing where the by category side of the slider shows that the suggested for you is gray therefore inactive shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt you click on the search button and the keyboard pops up the search bar switches to the active version on a mockup device iphone 15 titanium blackcategories page scrolled down search bar sticks to the top
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey

Find a bar

Post filtering

you have entered your location as Seattle and the suggested page then gives you content based in Seattle on a mockup device iphone 15 titanium blackyou have scrolled and see the other suggested bars in Seattle the search bar sticks to the top and has an opaque blurred background on a mockup device iphone 15 titanium blackYou are on the category page within the search page and have scrolled down the search bar sticks to the top of the page under the status bar shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom you have hovered or are clicking on the arcade icon tile on an iphone 15 titanium black model facing forward with no tilt You have selected Arcade within the category options and the arcade bar profile tiles are showing the filter tags have been filled out and lay above the profile tile content You are on the category page within the search page and have scrolled down the search bar sticks to the top of the page under the status bar shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt You have scrolled down on the arcade page after choosing the arcade category you see other photos of the raygun Lounge located in seattle You are on the category page within the search page and have scrolled down the search bar sticks to the top of the page under the status bar shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt You have opened the filtering overlay and selected to "Set the vibe" you see photos of different bar aesthetics or themes with the type labeled below them You are on the category page within the search page and have scrolled down the search bar sticks to the top of the page under the status bar shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt Within the filtering options overlay you have selected "set the vibe" and are about to set your environmental preferences such as brightness level using a percentage dial with a stepper on an iphone 15 titanium black model facing forward with no tilt
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey

Find a bar

Bar profile

The top of Unicorn bar's profile page with a photo of the wall art call to action buttons and general bar info iphone 15 titanium black model facing forward with no tilt unicorn bar profile page at beginning of scroll on an iphone 15 titanium black model facing forward with no tilt Unicorn bar profile page scrolled down slightly to get directions button with map above it iphone 15 titanium black model facing forward with no tilt Map page with footer closed that says your fastest route via the map has a line showing the path from unicorn bar to your location iphone 15 titanium black model facing forward with no tilt Map with directions to Unicorn bar open and public transportation selected as the method of transportation iphone 15 titanium black model facing forward with no tilt change location overlay is up and the text in the search or input bar is highlighted ready to be deleted for a new location to be put in iphone 15 titanium black model facing forward with no tilt The right before scrolling down into the review section that shows the what to expect sections last subsection pertaining to the environment of the bar iphone 15 titanium black model facing forward with no tilt review section of the Unicorn Bar profile page where multiple different reviews from different people are shown in this case the screen fits two user reviews iphone 15 titanium black model facing forward with no tilt User profile page start before scrolling down shows recent reviews they have left number of followers and other bio info like age and where the user is from iphone 15 titanium black model facing forward with no tilt user profile page after the user has scrolled down to view more of the reviews that have been left by that user iphone 15 titanium black model facing forward with no tilt The bottom of Unicorn Profile page where the most popular menu items both food and drink are shown in a horizontal scroll iphone 15 titanium black model facing forward with no tilt
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey

Leave a review

The first page you see after you press the review icon in the navigation bar it has an input bar and a keyboard up so you can enter a bar that you are hoping to review iphone 15 titanium black model facing forward with no tilt You have typed in the location you hope to review which is Unicorn bar Unicorn bar shows up below for you to click on it so you can begin your review shows the look of the homepage content when you have scrolled down showing the search bar sticking at the top and two bar profile content cards with the navigation fixed at the bottom on an iphone 15 titanium black model facing forward with no tilt Page of the app where you are in the review about to start writing the review content the keyboard is up and the navigation of review components is moved to the right side iphone 15 titanium black model facing forward with no tilt Shows the review you are currently creating all of the written review content is shown and the review navigation is on the bottom because the keyboard is not up iphone 15 titanium black model facing forward with no tilt You are in the review section of the app and have written the review now you opened the side navigation to reveal the meaning of the icons the keyboard is up so the navigation is on the right side on an iphone 15 titanium black model facing forward with no tilt before or during giving a star rating within the review section page on a mockup device iphone 15 titanium blackThe phone screen shows what comes up when you have given a star rating and click on the star rating icon the amount of stars you gave shows up on a mockup device iphone 15 titanium blackThe phone screen shows what it looks like after you have clicked on comfort rating button there is a dial for you to drag and a percent that goes up as you drag it on a mockup device iphone 15 titanium blackthe phone screen shows what happens when you click the comfort rating button after you have left the rating it shows the rating you gave and asks if you want to redo it on a mockup device iphone 15 titanium black
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey
Arrow symbol pointing towards right used to show scrolling functionality. 424245 grey
Conclusion

How I integrated user insights into my design solutions

Context: Maria responds to the most challenging part of finding a bar in a new area (Key user insight 1):

"Not being able to tell if the atmosphere and people there will put me on edge"
User insight #1 solutions:
Down arrow with white stroke and rounded edges
  • Users review's contain a comfort rating to help people decide whether to visit a place based on others' experiences.
  • The 'Set the vibe' feature within the filtering options lets you set your environmental preferences like noise level, brightness, and crowding.
  • On the bar's profile page, in addition to the primary call to action, there's a secondary option to report the bar, enabling users to raise concerns about unsafe situations
  • The bar profile includes an 'Environment' subsection in the 'What to expect' section, offering detailed insights into the atmosphere

Context: Elle speaks on how she and her friends decided which bars to walk in on their trip to Portugal.

"We looked for people around our age and followed where they were headed"
User insight #2 solutions:
Down arrow with white stroke and rounded edges
  • Users can follow one another
  • On User profile pages there is bio information such as the person's age and where they are from
  • People can interact with others reviews by liking, disliking, saving, and commenting on them
  • Users past reviews are visible on their profiles for people to see what a specific person has thought of certain bars

Context: Jess explains her bar-finding process

"I do a double deep dive online search before I decide to go to a bar or club. First, I check general information on Google, then I visit their Instagram to see the bar's aesthetic. "
User insight #3 solutions:
Down arrow with white stroke and rounded edges
  • The bar profile tiles on the search/discovery pages primarily feature a photo or photos of the bar, along with tags indicating the bar's aesthetic
  • On the 'Set the vibe' filter page, users can specify their preferred aesthetic, customizing the types of bars displayed on their suggested page.

What I still want to add