background shape 1background shapebackground shape

UX Design Study

Meetup

Meetup is a social networking app that facilitates offline group meetings in various localities around the world.

Korail thumbnail

Introduction

Meetup is a social networking app that facilitates offline group meetings in various localities around the world. Users can create or join groups based on shared interests, such as hobbies, career fields, or personal development goals. The app helps organize events, making it easier for people to connect and engage in activities they enjoy.

However, there are aspects that confuse users, particularly the ‘Explore’ and ‘Home’ pages. Additionally, accessing the ‘Profile’ page is challenging since it can only be found on the ‘Home’ and ‘Connection’ pages. The profile feature is important in this app because some events require updated profile photos to join, and events are suggested based on users' interests.

The goal of this case study is to solve these problems and redesign the UX to enhance user accessibility and reduce confusion. I also focused on fixing small details to improve the overall user experience.

Redesign

Explore

Original

Meetup original explore screens

The first page that appears right after logging in is the explore page. It shows a map, some events, and various categories. However, it shows the same categories of events to all users (Career & Business, Outdoors & Adventure, Learning, Health & Wellness, and Tech). This makes it feel like the app doesn’t consider users’ preferences. Since users set their interests and locations when they sign up, they might expect this page to show events related to their interests.

In addition, there is no button to access the profile page directly. Users have to go to either the home page or the connection page to get there.

New

Meetup new explore page
  1. The user’s location is placed at the top of the explore page. Users can change their location from there.
  2. Notification is moved to the top bar from the the bottom navigation.
  3. Events are suggested based on the user's location and interests. This allows users to find events they want to join without searching.
  4. Use the full screen width for event cards to improve scrolling behavior.
  5. Profile is added to the bottom navigation bar so that users can access there directly.

Home

Original

Meetup original home screens

Users can view suggested events by clicking the 'View Suggested Events' button. This feature shows events one by one, and users swipe left (don't save) or right (save) to see the next event on the list. Once users swipe left, they cannot go back and check that event again.

Additionally, in the calendar section, the 'All' list is confusing. Users might think it shows a combined list of 'Going,' 'Saved,' and 'Past' events. However, it actually displays events hosted by groups the user has joined, even if the user hasn't saved or joined those specific events.

New

Meetup new home page
  1. Change the section title to 'Your Events' instead of 'Your Calendar' to clarify the contents of this section. This section will show events where users have already taken action.
  2. An event that the user saved.
  3. An event that the user is going to join
  4. An event that the user joined in the past.
  5. Create a separate section for the user’s groups. This section will show events hosted by the groups the user has joined.

Event Detail

Original

Meetup original event detail screens

The user might not know what this section is without a title.

If the user wants to join an event but finds that certain conditions such as time or location do not match, they would likely want to find similar events first.

New

Meetup new event detail page
  1. Add an image slider to show more about the event to users.
  2. Add the title "Group" and include an arrow icon to indicate there are more pages.
  3. Display similar events first, followed by upcoming events.

Group Detail

Original

Meetup original group detail screens

Users need to scroll to the top to join the group. The row of profile icons is confusing because it appears there are no more pages to check additional members.

This circle and number are unclear in their meaning.

Even though it is not active, users would want to know what it is. Using blur makes it hard to figure out.  And the readability of justified alignment is not very good.

New

Meetup new group detail page
  1. Add the page title "Group," just like on the event detail page, to make it clear to users that they are on the group page.
  2. Add a three-dot icon to indicate there are more profiles.
    Display a short description of the group.
  3. Fix the 'Join this group' button at the bottom to improve accessibility.
  4. Change the circle to text to show how many people are going.
  5. Remove the blur effect and change the color to gray so that users can read it.
  6. Apply left alignment to improve readability.

Search

Original

Meetup original search screens

Users can find the filter on the search result page.

Long category list with one column.

New

Meetup new search page
  1. Filter button is placed on the search page to allow users filter and search at the same time.
  2. Use a 3-column category list to reduce scrolling.

Profile

Original

Meetup original profile screens

The numbers don’t have any function. They look like they will lead to related pages or sections.

The 'Add from 5k more' button doesn’t really have a function, and its text meaning is not clear. Additionally, in the 'About Me' and 'I'm Looking To' sections, the chip design might make users think they have already added their information.

Additionally, users can edit their profile by clicking those check icons. However, using these icons is confusing because they look like simple check marks.

New

Meetup new profile page
  1. Once the user click the number, it will scroll to related sections.
  2. Add buttons to add the user’s information instead of chips.
  3. Remove the ‘Add from 5k more’ button and place a ‘+’ icon so that users can add interests directly.
  4. Add buttons to add the user’s information instead of chips.
  5. Add text area instead of ‘add bio’ button.
  6. Use right-angle icons to improve accessibility.
TOP
Copy Script