Meetup Map

Location-based Meets

Meetup is a social platform that allows users to set up online groups and organize in-person hangouts or meet ups. Currently, it has a fast-growing user base of people wanting to meet others with similar interests. While it clearly targets users by categories of interest, we acknowledged that users also have time or distance restraints that had not been addressed when searching for meetups to attend.

This was a project developed for a Human Computer Interaction course at UBC. The team was comprised of 5 individuals with backgrounds in computer science, business, and media studies. I was given the role of lead UI designer while we all shared equal contributions in the UX research process including pilot testing, user testing, data analysis, and reporting.

Client

UBC

Project Type

User Research
Prototyping
UI Design

Project Year

2018

Deliverables

High-fidelity Prototype
UX Research Report
App Redesign

The Problem

In our analysis of the app, we realized that it did account for how people arrived at the meetups. In some scenarios, it would be a problem in that people may not be able to attend meetups due to time and distance restraints. Another possible case, people visiting or new to a city may not be aware of the proximity between the meetup and their current location. Currently, Meetup displays a map and tags the location of the event but requires users to determine for themselves whether they can attend, how far they are from the event, and where they are relative to the event via a Google Maps integration feature. In coming up with this design solution to the problem we have outlined, we also aimed to reiterate on our design idea of implementing a map interface. Certain parts and features of the map would have to be carefully considered such as button placement, visibility of icons and objects, and the overall usability and experience of using the interface.

Our UX Goal: To develop an interface that supports finding meetups by location or proximity to the user

Research

Our intended users for this interface would be people who are interested in nearby meetups, have some restraints regarding use of transportation, are unfamiliar with the city or meetup locations, or are concerned about event locations.

We interviewed 5 students from the University of British Columbia:

80% of participants were undergraduates
20% of participants were graduate students
40% were new to UBC and were interested in learning about more social events around campus
60% were familiar with other mobile applications (e.g. Facebook) that allowed discovery of events nearby
none of our participants had experience using Meetup before

From our interviews and user research, we developed the following persona

User Testing

Think Aloud Protocol

Our evaluation involved an observational ‘think-aloud’ study, where participants were observed and evaluated as they performed a series of given tasks. The tasks in our evaluation were as follows:

1. Finding three interesting meetups on the map
2. Confirming attendance to 1 of the 3 meetups chosen in the previous task
3. Searching for a meetup that is outside the current view frame of the map

Participants were to read a scenario before starting the tasks to help them get into the mindset of a student wanting to find meetups in the UBC area, that worked with their restricted schedule. The observational study was followed by an online questionnaire regarding participants’ experience using the interface.

Redesign Prototype

We developed the following prototype to further test our design solution and iterate on any changes that would have to be made, big or small.

In the design of the prototype, we decided to augment the current Meetup mobile application with our new map-based interface in order to simulate a higher degree of realism. We followed the design principles learned in class, such as using colour gradients to increase the discoverability of buttons that lay over images. We decided to design our map to resemble other popular map-based applications, such as Google Maps, Snapchat, and Yelp, to increase user learnability. This also reflects in the transferability of intuition of existing map-based interfaces. We hypothesized that previous usage of similar map-based interfaces could help speed up the learning process for our new interface
The vertical scope of our prototype was very limited in that it could not “remember” any user input (e.g. after a user bookmarked an event, the event would not appear in the bookmarks page). However, we implemented some dynamic behaviour such as icons changing colour when the user clicked on it

Finding Meetups by Location

The Map View is the default screen where users begin their discovery process. Here they can pan around the map and search for meetups based on location. Icons represent Meetups and can be selected to display Meetup tiles that preview some information about the Meetup, such as the date, time, and a short description. Users can also filter the displayed Meetups by category or within a certain time frame via the Map View.

Attending Meetups

Individual Meetup pages are accessed by clicking on Meetup Tiles. They hold all the details about the Meetup including a map showing its location, a list of other attendees, and comments section for those interested or going. We implemented a sticky call to action button that floats above the page so users can decide to whether they wish to attend at any point of the process.

Saving Meetups

Users can also save Meetups by tapping on the top-right bookmark icon. Saved Meetups are designated by a red bookmark icon and appear in the Saved Meetups Page which can be accessed through the Map View. We found that during the discovery process, many users preferred highlighting certain Meetups that interested them then returning to them later to decide which ones they would attend. By allowing users to save Meetups, we eliminated the need for users to remember which Meetups they were interested in and allowed them easily find those saved Meetups.

Our Findings

1. Lack of personalization to the user

From the evaluation, we realized that app personalization (i.e. presenting users with experiences customized to their specific interests, demographics, etc. – rather than a broad “one-size-fits-all" experience) was an important user requirement.

One participant commented that the experience of browsing and searching for Meetups would have been more enjoyable and convenient if the map interface had highlighted ‘recommended’ Meetups on the map, based on their hobbies and interests. They noted that providing recommended content could streamline the process of discovering interesting Meetups since users would have the option to simply find and browse through their recommended events, rather than go through everything on the map.

During the design process, our group had decided to remove the ‘recommended Meetups’ feature from our early prototype because we thought that it was an unnecessary feature in regards to browsing and searching for Meetups. After the evaluation, however, we realized that personalized experience was an important and valuable factor for many participants.

2. Map-interface is too cluttered

Upon analysis of the data and feedback, we noticed all participants commented that the font size of Meetup titles were too small and most complained that the Meetups icons were clustered too closely together.

Although this deficiency may have been less of a problem had the participants been able to zoom into the map, we realized that we should make the text bigger and perhaps collapse nearby Meetups into a single icon until the user zoomed in to prevent over-cluttering the interface.

3. Saving Meetups feature is well-designed and intuitive

Participants liked how the bookmark icon looked like a real bookmark and were able to bookmark Meetups and access the ‘Saved Meetups’ without any guidance. Our group put a lot of thought into the design of this feature and from our participants’ feedback, we believe that it paid off in the end.

Another major strength of our interface was its simplicity and ease of use. All participants were able to complete the evaluation tasks with little-to-no instruction. We also received positive feedback about our choice to design a map-based interface.

Participants thought that it was an effective way to find nearby events and a more enjoyable and engaging way to browse compared to scrolling through a list.

Lessons and Takeaways

This was my first foray into human-computer interaction research and methods. It was definitely a great learning experience on numerous levels: from learning to work on a team, all from different backgrounds and areas of expertise, to using the formal lessons and frameworks taught in class in real world applications. I was also given the opportunity to use my design skills to bring to life my teams ideas in the form of our high-fidelity prototype.

I learned to work within an existing app’s brand identity in employing those design cues into my own design solution. I realized that in the field of UI/UX, it’s important to practice and develop skills in interacting with people during testing and surveying. It’s important to recognize that how we ask questions, what questions we ask, and the environment in which we perform these studies all play key roles in eliciting accurate and unbiased responses.

This project and my previous experience participating in a Blockathon has taught me to focus on the other aspects of digital solutions, such as the user experience and generating feedback, while still having a great understanding of the limits and feasability for development.