Hi Five
2021
A community of people to gush about your favorite musicians with. Never miss out on a show or fear going to a concert alone ever again.
Overview
Tools
Figma • Pencil & paper • Optimal workshop • Miro
The Solution
A place that fosters discussion about music, where the anxiety of reaching out to your “friend-crush” is relieved.
My Role
UX research • UX design • Identity design
The Challenge
Making friends with similar interests & finding community gets more intimidating as we mature.
Design Process
During a 3 week double diamond design process I employed a variety of research methods to design the information architecture and influence the branding guidelines of my app, Hi Five.
Business Requirements
Day one was all about getting as clean an idea as possible of the big picture. I recognized pretty quickly that delving into social media as a student designer, I could end up way in over my head. Using my knowledge of usability heuristics, I drafted some rough preliminary user flows to get an idea of how a user might interact with an event-based friend matching app.
Finally, I gathered all the goals and aspirations of the project and condensed them down to their most essential parts, like:
An event searching tool
A messaging tool
A user matching function
A tool for verifying user profiles
A way to RSVP & Save events
Target audience profile
Before I began designing, conducting user surveys allowed me to define a target audience & test my assumptions. This data was pivotal for making informed decisions for the persona & journey map & created a network of potential participants with whom to conduct further research
Data sampled from a pool of 65 participants
Key Psychographics
Preferred Channels
iOS Devices
Instagram, bumble, tinder, Spotify, Apple Music, Discogs
Age range varies highly
• Millennial - 25 to 40
• Gen Z - 18 to 24
• Incomes $0 to $40k
• Full time employed
• Students
• Values: Safety, privacy, engaging conversation, fun, feeling connected, ease of use
• Habits: Travels to see their favorite musicians, pays for ad free music listening
• Wants to: Improve their social life, meet new people, see live music with friends
Challenges
Approaching people they’re interested in being friends with & missing out on experiences
Competitive AnalysiS
I conducted a landscape analysis to get a feel for how the rest of the industry was positioned. To organize and compare these competitors, I arranged them by popularity, and took note of how each competitor addressed the core features of this app.
While Tinder was the obvious choice for popularity, Bumble is the most popular matching app that has ventured out of the romantic space and into the platonic space. Hey! Vina is lesser-known but has a lot of core similarities, which made it the most direct competition for this project. Though their online presence and user base is less established- Their app is fun, customizable & interactive.
Similar to my requirements, they have user matching thru swiping & tapping gestures, mandatory profile verification, and event planning functions.
User’s Love:
Interest groups
Personality quizzes
No time limits for messaging matches
Not so much:
Inability to set home location
Poor customer service
Faulty blocking functions
Paywalls for basic features
A Main Challenge
After compiling research I was able to zero in on a main challenge based on:
User pain points & delights identified in competitor reviews
User sentiments expressed in surveys
That challenge was to create a product that drove human connection and fostered community through user’s common interests and a built-in sense of safety.
Persona
I evaluated my user demographics & user psychographics to create an ideal primary user persona
ROBYN • 23 • Philly Taproom bartender
She is a serious music enthusiast with an impressive band t-shirt collection & the record collection to match.
Willing to meet up with users after chatting for a few weeks
As a recent college graduate, she’s finding out how difficult making new friends can be when you’re no longer making friends via proximity.
She sprung for tickets to a show in Richmond, VA but none of her friends (not even her boyfriend) can go with her.
I mapped out business requirements along with journey/experience mapping of personas to develop the content strategy of the app
Goals & Expectations
Expects to start meeting & chatting with people fairly quickly
Hopes she doesn’t run into any jerks
Hopes she clicks well enough with someone to go to the show with
“Cursive is going on tour!”
Asks her boyfriend & friend group if they will go with her, they have no idea who that band is and say “uh, no”
Thinks about going on her own....but feels lame going to a concert by herself
Sees an ad for Hi Five on instagram
Creates an account & links her Spotify
Sets her location & preferences
Writes a short bio with lots of emojis to complete her profile
Searches for Cursive concert pages
RSVPs to the show nearest her in Richmond, VA
Looks through the list of other attendees
starts swiping through users who have similar musical interests as her
Gets a few message notifications to her phone
Talks to someone who likes cursive for the first time since high school.
Sets up a zoom chat with her new friend to talk about their favorite Cursive albums
Content Strategy
My MVP needed to deliver 2 basic functions: Allow users to find & RSVP to events, and to match users with each other based on event attendance. So now That I have my target audience well defined I returned to user flows and refined the details
Drafting & organizing user stories as well as roughly sketching some user flows beforehand was helpful because it helped me identify some challenges early on. Onboarding will be 100% necessary. How will we capture this information in a way that isn’t tedious for the user? How might we build in potential safety features along the way?
Another one of those challenges would be the number of decisions or actions available on each screen and how to label or describe those actions. I realized I was also maybe biting off more than I could chew and this is the point where I pivoted to focus solely on a music community.
I decided to lean on the user's mental model of popular social media applications & A pattern emerged, forming basic information architecture that forms the underlying structure for the app. I was initially having some trouble wrapping my head around what to include as the foundation of my app. The world of social media spans a vast landscape of feature-rich products so to regain my footing I started arranging and rearranging actions that would fit into a primary compatibility matching flow until it started making the most sense.
User Flows
User matching flow
an onboarding flow was another feature that was absolutely necessary as part of the user’s account creation process.. This
Enables users to understand the functions of the product
Offer’s the opportunity for users to select their favorite artists and to opt in to link with music accounts
I went with a chatbot onboarding feature to make signing up engaging. This was also our opportunity to bake in some key safety features for user’s security
Onboarding flow
One way that we solved for user safety & security was through an in depth account creation process, with questions about music taste, this onboarding process would finish with profile photo verification. A more involved sign up process typically results in fewer fake “troll” accounts & a level of identity verification will ideally foster a sense of accountability for user’s actions in their community
Ideation; Brainstorming & sketching Ideas
Digital Wireframes
Testing round 1
So far, The interface was fairly straightforward. I wanted to be sure users would instinctively know where to take actions like reporting and blocking if they needed to as well as challenge the design of my icons and see how the average user recognized them (or didn’t ) in order to navigate the interface and accomplish key goals. Though the looks were still clunky the icons performed surprisingly well!
“Where would you click to match with other users?
“Where would you click to block or report Robyn?”
At the onset of the 1st interview sessions for my wireframes, I presented interviewees with 2 sets of preference tests. The tests targeted reactions to changes in wording, and I also asked about layouts and what the users might think of the purpose of certain word choices. This test was so insightful for interpreting how users perceive the functions of the app.
Branding & identity
With round one of testing under my belt. I had some results on what was working for my user and what was not working. I Stepped back to brainstorm how I wanted to head into adding visual design and brand identity.
I spent some time soaking in vintage record labels for simple logo inspiration. but I had issues with my color pallet which was becoming overworked. I initially used a very 70s color palette, to channel my keywords lots of yellow with an accent of orange and a little bit of green.
It was not working. I was overthinking it. So again I simplified and went with a monochrome palette of a soft, friendly purple with a touch orange for an unexpected burst of energy, and a softly rounded text for all of my copy. Checking WCAG standards for color contrast along the way.
High Fidelity Prototype
For this iteration of the app I streamlined the event cards &made the search function more prominent on the event home page. I upped my body copy font point size to 16, ensured large touch points. I added labels to my navigation bar and made it more clearly animated to ensure even more accessibility. I took my high fidelity prototype into another round of testing to further challenge my design
User Testing Round 2
For my second round of testing, I wanted to test three major aspects of the app, including overall impressions, rating task completion (perception) and navigation.
Overall impressions were very well interpreted. Users responded with terms like “modern,” “clean,” and “straightforward.”
Users’ perceptions of certain functionalities were great as well; The navigation bar continued to perform as intended, safety functions like blocking/reporting and icon clarity (tested earlier with preference testing and first click testing). Usability interviews confirmed the results from these previous tests and helped to more specifically define the direction I was headed in
Navigation was good as well, although locating favorite events page nested inside of the profile needed improvement, which could have been improved with better icons in a more expected placement & location.
Users also had issues perceiving the “unread messages indicator.” Overall, users didn’t have a hard time completing tasks. For many tasks, users took the exact flow path as intended and confirmed that the simple route I chose was maybe the best method. Additionally, ideas for further user customizations through product integrations like Spotify & Discogs came about as well.
Unread messages before
Unread messages after
CONCLUSION
Looking Ahead
For future iterations:
Design for other viewports to take advantage of larger screens
More robust interactions (gestures, animations, etc)
Potential partner integrations
A fully coded prototype would be cool
For the next iteration of the prototype, I would to see:
Expand events page functions to include Favorites and past events
Design a user feedback function to contribute to a gamified reputation system to further encourage user accountability
Develop engaging body copy that aligns with the brand identity
Completely prototype and test an onboarding flow
This project was a whirlwind and I had a lot of fun. It was incredibly rewarding to trust the process and my instincts as the project unfolded. One of my favorite parts was carefully unpacking the target audience problem and using data to make key decisions. A social media app was definitely more challenging to design than I first anticipated because of the tools available, time frame, and scope.
I am very excited to continue development in the next iteration.