Go With Me: Meeting People At Events

Tools Used

Figma, Miro

Timeline

1 month

Role

UI/UX Designer

When people move to a new city or town, fear and social anxiety can keep them from making new friends. I set out to help people get out and do activities in-person while making new friends.

The Challenge

Project Goals

Create a solution to increase the conversion of accepted invites to event attendees.

Utilizing a human-centered design approach, I took this project through full implementation of classic Design Thinking process.

My Process

01

I began my research by conducting a competitive analysis on 3 industry leaders: Meetup, Facebook, and Eventbrite. I completed a thorough analysis of what works well & what does not work well with the platforms, and made recommendations for what to implement in my designs.

Research Questions:

Understanding Why People Sign Up For An Event, But Do Not Attend

Research & Synthesis

  • What problems do people currently face when trying to make new friends?

  • What does the process that people take to make new friends look like?

  • What causes a person to commit to attending an event?

I created a research plan, and created a survey to qualify 5 candidates for user interviews with the objective being:
Identify the struggles that people who have recently moved to a new city face while trying to meet new people.

Discovering The 1 Common Theme From The User Research

I detailed the Likes, Dislikes, and Action Items of 3 industry leaders- MeetUp, Facebook & Eventbrite. This document is the competitive analysis for Eventbrite.

Through the use of an affinity map in Miro, I was able to visually see the emerging themes from my user interviews, from which I found very few common themes. The case I was presented with suggested a hypothesis that the users may not be getting effective communication about the upcoming events (i.e. email, reminders, etc). However, the research I conducted did not support this.

I discovered that people were more likely to attend an event if they knew other people who were going.

I chose to write 1 job story using the Jobs To Be Done framework in order to define the main tasks that each user would want to accomplish. This would help me come up with solutions for the user flows.

Summarizing The Pain Point That Would Drive This Project

Problem Statement

02

The Problem Statement for this project was already defined by the project owner, as:

Information Architecture, UI & Prototype Testing

03

While creating the user flows, I asked questions like “If a user wants to find friends to go to an event with, what information would they need in order to be successful, and how would they input that information?”; and “What is the order of steps the user needs to take to be successful?”

Building Out The Steps A User Needs To Take To Make New Friends

User Flow to Sign Up For An Event

User Flow to Find a Friend to go to an event with

Wireframes Allowed Me To Set The Building Blocks For My Screens

In the one-month timeline, I created low fidelity wireframes to layout the first look & feel of the product.

I created wireframes in Figma to be used in a low fidelity prototype. I chose to use familiar elements, using inspiration from the action items in my competitive analysis.

Once I completed the wireframes, I turned them into a low fidelity prototype. While creating these screens, I inputted additional text to decrease the learning curve as users flow through the prototype during usability testing.

Turning Wireframes Into A Low Fidelity Prototype

The low fidelity screens included more details and text that would allow a usability test participant to easily flow through a prototype.

  • You just moved to a new city and you want to make some new friends by attending an event. Use the app to find an event to sign up for, and then register for that event.

  • Now that you have signed up for an event, find a friend you’d like to go to that event with who enjoys yoga & camping, and send them a message.

Utilizing Figma, I tested 5 participants with the goal of seeing if buttons & icons were easy-to-understand, if participants were easily able to get to the next step, and if they could complete the 2 tasks assigned to them.
Usability Test Tasks:

Testing My Low Fidelity Prototype & Making Key Recommendations

Usability Testing Top Findings & Recommendations

Participants understood what the app was for & what they could do here. However, they did not understand that they could meet people through this app until they got to the event confirmation screen.

I recommended adding an onboarding flow to familiarize users with the app upon launch.

Some participants found that the bottom navigation bar was redundant on the home screen since the features were the same as what was laid out on the screen.

I recommended rethinking the features that are listed in the bottom navigation bar to determine if they are necessary. Putting the notifications and account settings in the bottom navigation bar would alleviate this.

On the Connect To Event Attendees screen, users initially wanted to scroll through the attendees or search attendees. They eventually found the filter button, but it was a last choice.

I recommended making the filter button bigger and more noticeable so that users would see that they could filter attendees to find someone they’d like to meet.

Developing The Look & Feel Of The Product

Using the brand attributes, personality & target users, I created a moodboard & style guide to develop the look & feel of the product.

I created the high fidelity screens mainly utilizing the primary color- Fuzzy Wuzzy. I designed the screens with familiarity in mind, and to convey the brand attributes of optimism, humor & caring. The screens are vibrant and utilize familiar icons & flows.

Using The Data To Produce High Fidelity Screens

This screen would automatically dissolve into the next screen, but can also be skipped by clicking or scrolling.

This screen provides an overview of the flow to find events to go to.

This screen provides an overview of connecting with attendees via messaging.

This screen provides an overview of the flow to find friends to go to an event with.

Based on the usability test findings, I decided to remove the homescreen and instead have users land on the Explore Events screen upon launch.

Usability Testing With A Live Prototype

04

Adding Key Screens While Creating A Prototype For Usability Testing

Using Figma, I turned my high fidelity screens into a prototype to prepare for usability testing.

I needed to add additional screens, such as when filtering attendee interests, the prototype would need to highlight the already selected interests & the save button would need to change from inactive to active. These additions would allow the user to more easily flow through the app.

I created a usability test plan with the objective of identifying pain points that users would encounter while using the app that would stop them from achieving their goals, and provide opportunities for improvement.

I held 1 round of 5 moderated usability tests, each lasting about 20 minutes, including a short introduction, an interview, 3 task performances, and a debriefing. I added a performance task for completing the onboarding flow.

Testing The Prototype In Order To Identify Pain Points In The App

Usability Testing Top Findings & Recommendations

Participants did not understand that the onboarding screens were previews rather than functional features. I recommended redesigning these screens to make them more clearly understood as previews rather than interactable screens.

I recommended removing the arrows indicating that a user could click to interact with the feature. I also recommended adding a carousel that makes it clear to the user that they would swipe to the next screen.

I recommended having the contact information autofill, but also providing an option to edit the guest information in case users needed to change contact info for an event.

Participants assumed that since they were already logged in to the app that their contact information would autofill during the checkout process.

FINDINGS & LESSONS LEARNED

Based on the high fidelity prototype usability testing, I discovered that overall, participants enjoyed the app and found it clear, straightforward and easy to use.

Test Participants Found The App Easy To Use, Engaging & Straightforward

Findings

  • “It’s like a beautiful mix of a dating app & instagram”.

  • “…definitely feels familiar in the way the UI is laid out, like how you contact people, but I haven’t seen an app or a UI like this, so it’s vey exciting to go through because it’s not anything I’ve seen before.”

  • “Everything connected logically in my brain & so the flows went really easily.”

  • “It would be great to make friends in this way.”

Usability Test Quotes:

Since this app was designed to convey a sense of friendliness & caring, I decided to rely on industry standards to design the screens to feel familiar. If users felt comfortable using the app, they would be more trusting to meet people through the app & attend the in-person events.

When I designed the low fidelity prototype, I thought that including a home screen was standard for any app. However, when users had trouble understanding what the app was about upon launch, I decided to add an onboarding flow & looked at industry standards to build it.

If I were to do this project again, I would recruit a more balanced mix of genders for the initial user interviews since the target users are an equal mix of male & females. I would be curious to see if this would have had an impact on the solution idea.

Look At Industry Standards In Order To Design Familiar Screens & Flows

Lessons Learned