Droves
Make friends - attend events
in Droves
Social App Design
Gregory Guma
2021
Make friends - attend events
in Droves
Social App Design
Gregory Guma
2021
Droves is an event-finding social app that helps people find things to do and make friends in person.
The business team has recently found that event RSVPs through the app are not converting to attendees. Their numbers show that on average only 20% of people who RSVP actually wind up at the event.
The company has also found that many of its users suffer from anxiety, which affects at least 40 million American adults. (ADAA)
Role — Product Designer (with mentorship from Michelle Park, & Nate Chen)
Timeline — 4 weeks
Tools — Figma, Figjam, Miro
Deliverables — Competitor Analysis, Interviews, SME Interview, Secondary Research, Personas, Storyboard, User Flows, Sketching, Paper Prototype, Wireframes, High Fidelity Mockups, Branding & Style Guide, UI Animations, Prototyping, User Testing, Edge Cases
Increase the conversion of RSVPs into actual event attendees.
The solution was the creation of a “Buddy Matching” feature to help users make friends before an event. The social pressure of being accountable to a buddy decreases the likelihood of RSVP no-shows.
This feature matches people attending the same event based on interests and user preferences.
Having someone to attend an event with that they already know and are accountable to encourages increased event attendance and facilitates friend-making.
This feature is especially beneficial to people who recently moved into an area or to those with social anxiety — as the buddy matching process reduces friction inherent in friend-making and event attendance.
I used a soft qualifier to find people to participate in initial interviews since I was looking for anyone who had been to an event, RSVPd to an event, or been involved in planning events. It seemed reasonable to assume that the experience of attending an event was nearly universal and that a more thorough screener was unnecessary. It was important to the project to hear from regular people in their 20s and 30s about their experiences with events - good and bad.
From my interviews, I was able to gain insight into major event attendance pain points. On top of a wealth of life experience - three of my five participants reported experiencing social anxiety, and all participants had experienced moving to a new city on their own during their lives. These experiences allowed me deeper insight into two important user groups: people with anxiety, and people who recently moved to a new city.
To make sense of everything I learned from interviews I utilized an affinity map to organize ideas and insights from my interviewees.
I was able to speak with a professor who holds a Ph.D. in Social work. The objective of this interview was to learn more about social anxiety, how it affects people’s lives, and the kinds of interventions used to help people overcome the symptoms of their anxiety.
Common behaviors of people with social anxiety
Types of interventions
Behavioral techniques
Social proof & social pressure are important motivators
Overcoming social anxiety
To build a buddy matching solution for the event attendance problem I needed to do another round of research into Apps that center around making friends. The BFF feature on bumble is a prime example of a friend-making feature in a popular app so I spent time analyzing the flow of bumble’s friend-making process and reading articles about people’s experiences with the service. I also briefly reviewed several other apps that are supposed to help users make friends.
Friendship chemistry
Friend-making app pain points
Research showed that there were four major archetypes of Droves' personas - people who are socially anxious, safety conscious, new to an area, and trying to make friends.
While there is a lot of overlap between archetypes and their goals, the needs of each persona varied in distinct ways. For example, Hannah wants to make new friends but, as interviewees reported, women have safety concerns that impact event attendance which a solution would need to address.
The storyboard helped me to figure out what my user's journey was going to look like in a holistic sense. It allowed me to visualize the context of use, and better understand how an event finding and friendship making app fits into the lives of my personas and helps them achieve their goals of finding things to do and making friends. I was also able to better visualize the emotional impact of the journey from being home alone to having a friend to go to an event with.
User flows were essential for understanding the screens and actions/inputs that would be required to get my users from the homepage of the app, to RSVPing to an event, to a conversation with a new buddy.
This step was especially important in starting to uncover some of the critical difficulties and edge cases that would need to be solved to help users achieve their goal of making friends.
A big challenge was figuring out what steps making friends in an app would entail, especially since one of the key personas suffers from social anxiety. The buddy making process would have to make special considerations regarding pain points uncovered during research, most importantly those that trigger users' anxiety such as starting a conversation with a stranger.
Even though I had a road map for the event finding and Friend making flow the specific details of the screens I'd need were still unclear.
I had already decided to remove several steps that are present in dating/friendship finding apps such as swiping, and that users were not going to get a choice of who they would be matched with beyond setting up some parameters in the account creation process. I had also decided that beyond picking which event to go to, the only choices users would have to make would be which icebreaker to send and which buddy match they would message first.
The challenge was to figure out how to get users from RSVPing to speaking with their matches in such a way that they would understand what was happening. In my initial sketches, I came up with a few screens that would bring users into buddy matching and present them with a loading animation before turning into a screen that presented their two new buddy matches. This screen allowed users to see their buddies' profiles, see the icebreaker their buddies sent, and send a message.
After sketching, I created a paper prototype in Figma to find out how people responded to the buddy matching process and app on a conceptual level as proof of concept, and to test the preliminary UI & flow.
Testing revealed that people were receptive to the app and were able to complete the tasks they were given. Several test participants were also initial interviewees. I felt it was important to test this design with people I had interviewed because I would be able to gauge whether the prototype addressed their event attendance related pain points.
However, even though participants were very receptive to Droves, there was confusion during the icebreaker selection and buddy matching process. Participants felt it was unclear what the buddy-making process entailed, whether they would be answering the icebreaker they chose, that they were matched with two buddies, and felt a little lost when leaving the initial meet your new buddies screen.
Redesigns would have to address this confusion and attempt to better explain what the icebreakers were for, clarify that users would be matched with two buddies, and visually orient users in the transitions between steps/screens.
During redesigns, changes were made to the copy emphasizing buddy making and the explainer text was clarified. To maintain visual consistency I also added avatar bubbles to the buddy making and chat screens. Big changes to the chat screen kept both matches in view once a chat was started in hopes that users would understand that they were indeed matched with two people and that they should message both people.
After creating a mid-fidelity prototype in Figma with changes based on the first round of testing, it was time to see if the changes to the design had eliminated the friction and confusion that participants experienced in the paper prototype tests. While testing showed that friction had been reduced substantially it was clear that there was still work to be done.
A theme in the confusion and friction of test participants was that they felt there was too much going on in the buddy matching process. There were three different screens that users had to pass through with unique elements before being taken to the Messages tab. I wondered if there was a way to make an element that is consistent through all of these screens while conveying that the user was being matched with buddies, and then allowing them to message matches. After some brainstorming, I realized that it might be possible to use the event messages card from the messages tab to show the entire process.
For the high fidelity designs of Droves, I put together a lightweight branding and style-guide as a reference to determine the typography, primary color, logo, and sample UI elements.
Orange was chosen because of its positive associations of energy, vitality, cheer, excitement, adventure, warmth, and good health. (colormatters.com)
The typeface, Inter was chosen for its easy readability in UIs and its character. Inter is versatile enough to fit into all of the title, body, and button roles required for an app UI while having a playful-yet-serious quality which provides a good contrast to the cute, rounded, Toucan-Puffin mascot without being overshadowed or overwhelmed.
The name Droves was chosen because it conjures and image of large numbers of people flocking to events, which is further reinforced by the mascot a combination of a Toucan and a Puffin, two very social species of birds that flock together in groups and form lasting bonds between individuals.
UI animations do triple duty in droves. They serve as tools to keep users oriented through the various flows, display system status to let users know that the system is processing their requests, and finally to reinforce Droves' branding.
The animation of the 'transforming card' is especially important. The transformations indicate to the user that the app is working on matching them with a buddy. In effect, the card is telling users a story as it warps and unfolds, building excitement about the new friends they are going to make.
The final step in the process was to see whether all of the testing, iteration, research, and ideation paid off. With the addition of imagery, color, and a slew of animations the High-Fidelity prototype of Droves was ready to test.
Keeping buddy matching and chatting confined to the same UI element kept users oriented within the app. This change made matching more aligned with the “Recognition rather than Recall” heuristic.
Key copy changes
Even if a UI element seems self-explanatory, requiring users to learn several new UI elements in quick succession like in the original buddy matching flow is overwhelming. The change to the transforming card kept users oriented in the flow and allowed them the time to understand the function of the card which reduced cognitive load substantially.
Changing “send” to “ask” on the icebreaker screen, and “make” to “match” in reference to the buddy matching flow had a major effect on test participants. Participants went from being confused about who buddies were and how icebreakers worked to understanding that there would be a matching process and that they would be asking their new buddies the icebreaker they chose instead of answering it themselves. This underscored how big of a difference a single word can make in the User Experience.
Somewhat counterintuitively - giving users less control over the selection of icebreakers and buddy matching was a good thing. In user testing participants commented on how it was nice that there weren’t many icebreakers to choose from and that they got to pick their icebreaker before being matched with their buddies. They expressed feelings that picking beforehand stopped them from overthinking their decision and reduced the stress of matching with new people.
When total RSVPs leave an event with an extra person they will be matched as a bonus buddy with an avid Droves user.
Ask if users would expand outside of their account buddy preferences for this event
When an event is under a certain number of RSVPs users will not be matched with buddies until the total number of RSVPs increases. When a certain number of RSVPs are reached, users will match their first buddy. When the number increases again they will be matched with their second buddy.
If a buddy doesn’t respond in 24 hours they will appear inactive to their match until they respond.
Depending on the length of inactivity a user may be matched with a bonus buddy to compensate for their inactive match.
