Do some new things. Make some new friends
Social activities sit at the heart of human happiness and satisfaction. But in an increasingly digital world and with external factors such as the Covid-19 pandemic exacerbating the increasing sense of loneliness being sensed by broad swathes of the population, the desire for an online platform that decreases the friction for new human relationships has never been greater.
Furthermore, with an increase in the number of people who have relocated to other parts of the U.S. within the past couple of years, more specifically 20% according to a migration report by North America, a way to make navigating the task of forming new human connections easier was needed.
For this project, it was our goal to create an MVP that would help people generate new connections and make new friends.
Product Manger, Developers
User Persona, User Journey, User Flow, Task Flow, Lo-Fi Sketches, Style Guide, Component Library, High Fidelity Mockups, Prototype
February 2022-March 2022 (6 weeks)
How might we help those who have trouble with making new friends connect with others online before meeting up with them?
Event Buddies: Do Some New Things, Make Some New Friends
Eventbuddy enables people to create organic friendships through mutual shared interests and passions. Eventbuddy aims to remove the initial pressure/risk to introduce yourself in real life and bring you straight to the point of conversation around a common interest.
Those interested in meeting new people would have the ability to spark a conversation with other attendees before attending the event, in addition to the option to continue said conversation on other platforms. While there were several features that our team was interested in implementing, our primary feature focused on giving event attendees the space to introduce themselves and chat with each other through comments after registering for an event.
We aimed to address several pain points users encountered as they attempted to make new friends online:
Pain Point #1 - Lack of Personal Connections with Potential Friends
Users found it difficult to make connections with people they met online and to find mutual interests with them.
An event based platform, where users would have a head start in making connections with others based on common interests.
Dropdown Filters - Users can filter for events according to their location, interests, availability, and preference for remote/in-person events.
Event Cards - Users will be able to browse and select an event according to their preferences.
Event Info - Users can look at some more info about the event as well as the current attendees.
Event Comments - If they choose, users can also navigate to the comments, where they can engage with other people who are attending the same event
Attendee List - Users have the option to look at the list of attendees for the event to get a sense of who else is going. They would have the opportunity to get a sense of who they would be corresponding with if they were to join in on a conversation for an event.
Pain Point #2 - Stale Conversations
Users had to deal with the frustration of having conversations fizzle out due to themselves and a potential friend having trouble maintaining fruitful conversation.
Conversation starters would allow users to respond to a prompt after registering for an event in order to make it easier to foster conversation between fellow event goers.
Comments Section with Conversation Starter - Users can engage in the comments with others after registering for an event.
Pain Point #3 - Questionable intentions from online encounters
Users often found themselves uncertian of whether potential new friends they met online had the same genuine intentions as them.
Profiles - Users can explore the profiles of other attendees and decide whether they’d like to reach out to them to coordinate before an event. They would be able to see a person's interests, background, as well as social media profiles to get a better sense of who they are.
Understanding How People Make Friends
Before jumping into what our solution would be, we spent some time exploring the problem space, which meant gaining a better understanding of how people go about making friends and some of the challenges they’ve faced while doing so.
Because our problem space was a large one, we narrowed our scope to focus on those who were interested in making new friends after moving to a new city. With about 20% increase in the number of people who have relocated within just the past couple of years, we moved forward under the assumption that this would be the scenario where people would come across the most challenges when making friends, as opposed to people being able to make friends through mutuals in a city they’re already familiar with.
Our team held a total of 13 interviews in order to get a better understanding of how people went about making friends after moving to a new city and some of the challenges that came along with that.
Some interesting points that came to light were that:
With these insights brought to the forefront, I developed a user persona because I found that it would be helpful to the product manager and developers on my team to visualize the pain points of our users in one place.
For the purpose of our project, we chose to focus on those moving to new cities due to a career. We found in our research that this segment had the most obstacles when it came to making new friends and were the least likely to be able to make friends through mutual connections, due to the fact that they didn’t know anyone in the city. University students had a foundation of peers who were interested in making friends and so their decision to use online platforms to make friends were utilized as an extra option as opposed to a primary outlet. Those traveling abroad often traveled with others whom they already knew.
To Build or Not to Build
Mapping the data from our user research allowed us to discover opportunities to build solutions that addressed our users’ pain points. After discovering ways we could go about addressing those pain points, we narrowed down those opportunities to a few key things we'd address in our MVP:
Opportunities (before being narrowed down)
Opportunities (after being narrowed down)
Sketches and Lo-Fi Wireframes
Navigating a Few Bumps in the Road
Once we had a few key features figured out, I moved forward with some sketches and then lo-fi wireframes to begin drawing out the solutions we wanted to get across.
While the initial stages of our process felt like smooth sailing overall, it was when I began producing the low fidelity wireframes that we found ourselves needing to take several moments to re-evaluate our user flow and re-prioritize some of our features.
Bump #1: Scaling down the Design
Homepage Sketch and Wireframe (Version #1)
Was a calendar and horizontal filter feasible for the amount of time that we had? Should we think about another way for users to filter for availability and interests?
The incorporation of a full calendar could be moved to the “nice to have” category in exchange for a dropdown filter where users could select a date. Not the most ideal, but the switch would help preserve that time for the incorporation of our main feature: the comments. The horizontal interest filter could simply be exchanged for a dropdown filter.
Homepage Sketch and Wireframe (Version #2)
While there weren't any particular problems with the designs of the rest of the pages at this point, I made some adjustments that would help users navigate the pages more easily
Event Info Page Sketch and Wireframe (Version #1)
The originial idea was to have three tabs where users would be able to browse through some info about the event, the attendees, and some conversation threads between the attendees.
After thinking about whether users would still need to read info about the event after they've registered and decided to move forward to the conversations, I decided that the conversations threads should be on their own page.
Event Info Page Sketch and Wireframe (Version #2)
With the changes to these pages I created a basic task flow with notes to help the developers understand some of the more specific interactions within the design.
Bump #2 - Where Are We Going to Get the Events From?
At this point, the plan was to pull API’s from Eventbrite, so that the main focus on our platform would be on building the communication features for our users, but this posed a problem:
Our user research had told us that people valued being able to find out more information about those they would potential meet with. They wanted to get a sense of the personality and background of the person they were speaking to.
This meant that we needed to gather some information from users and maintain that info on our own platform (i.e incorporate a bit of a sign up process). However, users would already need to have an Eventbrite account in order to register for Eventbrite events, which meant that we needed to figure out how we were going to work out two sign up flows that users would need to undergo.
Sign up flow we had in place during the wireframing stage
This problem ended up being partially solved for us, since our developers weren’t able to retrieve the necessary permissions for the API’s anyway, but now we needed to figure out how we wanted to incorporate events into our platform.
The Solution - Dummy events. The developers were able to create a backend that would allow us to enter our own custom information for events. Once we’d sorted out how the product would function, we proceeded to getting some insight from our users.
Getting Feedback on Our Wireframes
I led usability testing sessions with 4 people, with the following goals in mind:
As we conducted usability testing, to save time, we also began moving into our high fidelity mockups, and made changes according to user feedback along the way.
During this research, we found that:
While the timeframe that we had made it difficult to really analyze what made users hesitant to reach out in the threads, our solution was to encourage users to engage with fellow attendees right after registering. We added a prompt to the confirmation window where users can respond to the conversation starter right after registering for an event.
Photos from before and after changes to the confirmation window were made using user feedback.
As we gathered feedback from users, we encountered one more obstacle that required another quick pivot…
Bump #3 - Thread Designs vs. Time Constraints
The threads that were designed during the lo-fi wireframes were not going to be as simple to incorporate as initially thought, so the original threads turned into a more general comments section, with the prompt adding a more conversational element to the experience.
Photos of the change from a design geared towards threads to a design geared towards comments.
High Fidelity Mockups, Prototypes, and Developer Handoffs
Getting Through the Final Touches
Style Guide and Component Library
Once we had planned our next steps in the process, I began building a component library and style guide as I moved forward into high fidelity mockups and prototyping.
The style guide and component library, consisted of color styles, button states, text inputs, filters, status bars and the typography used throughout the design.
The final design deliverable was a prototype that displayed the primary user flow for the platform.
Thinking Through Future Features
While the focus of this project was to create an MVP for our product, we did think about some things that we would do if we were to move forward with further expanding the product:
Since the original goal was to incorporate threads into the platform that would allow users to directly reply to each others’ comments, but time limits made it necessary to shift that goal, one of the next things incorporated into the platform would be this.
For our MVP, we decided it was best to incorporate a date filter where users can select their availability, but it would be ideal to have a full calendar where users can see all the dates for a month at one time, instead of having to scroll through a dropdown filter to get to their preferred date.
For our MVP, we decided that people wouldn’t feel inclined to reach out to fellow attendees of an event before actually meeting up with them, especially considering that our user research showed that people sometimes had concerns about the person they were corresponding with not being who they say they are, we chose to emphasize a more public and casual way for people to introduce themselves to one another with the option to explore a person’s social media profile if they wanted to message them directly. However going forward, one of the features we would incorporate into the platform is direct messaging, in order to allow for people to coordinate with others if they decide they want to pair up with a fellow attendee for an event.
What I've Learned
Communicating with Developers Early and Often
On previous projects, I’ve worked with design systems which involved using the components and style guide for the team I was working on. This project challenged me to learn how to prepare assets for developers, including how to prepare notes that would help developers understand what certain aspects of the design should look like. I also had the opportunity to communicate with developers starting early on in the process, which helped with understanding how each of the decisions we were making would influence the development process.
Advocating for my Design Decisions
On other projects I’ve worked on, I either worked primarily with other designers, and when I worked on projects that involved other collaborators (project managers, stakeholders, developers, etc.) a good portion of design decisions were advocated for by the design lead. For this project, I had the opportunity to gain some first hand experience with backing my design decisions with the research I’d gathered in order to advocate for the users.