Improving the meetup feature for a geosocial app
Client
Ex-ByteDance and Grab Product Manager, Andrew Oh founded mobile app Social City, which was launched in the App Store in July 2021.
The Problem
Social City allows users to join local hangouts, discover and recommend new places. Based on existing research with users aged 23 to 35, the current meetup feature was not clear, as only 20% of users said they would use it to discover new people.
Timeline
1 month
Completion Date
Jun 2021
Role
UX Designer
Scope of Work
Heuristic Evaluation, Prototyping, UI Design, User Interviews, Usability Testing, Design System
Goal & Objectives
How might we improve the existing design so that users can better utilise the function to discover and meet new people?
Identify and evaluate usability issues and pain points that users are facing in the meetup function
Propose a redesign of the meetup function
1. Understand
Digesting existing user research
19 user interviews had been conducted by the client on the current interface. Key insights found were:
Users want to meet for meaningful purposes such as networking, making friends, dating or casually doing a hobby with someone (see a museum, do sports etc.)
80% of users preferred their meetups to be spontaneous, therefore either on the same or the next day
Users prefer small group meetups of up to 4 people
Best practices from competitors
We conducted a competitor analysis across 4 other map-based platforms that users frequent to look for meetups, food or activities to do (Zig, Snapchat, Google Maps, Swarm). The analysis found that:
Most apps (3 of 4) use clear filters to allow users to find events on the map
All apps have responsive map elements i.e. number of icons reduces upon certain scale of zoom on the map
Most apps (3 of 4) offer snippets of the event on the map when its icon is tapped - in the form of carousel banners or bottom sheet pull-ups
2. Uncover
Deconstructing the screens: Key Findings
User’s online/offline statuses
Not clearly indicated through one’s profile icons
Toggling statuses
Not obvious to users that they could tap on one’s profile icon to appear online and available for meetups
Event Filter
Filtering via the Public View button was not very intuitive to users
Viewing individual users’ profiles
Could potentially be overwhelming once more users are on the app
User Testing
A series of 3 user testings were conducted and the feedback obtained from users echoed most of the findings from our heuristic evaluation.
3. Redesign
Home Screen
Filter Button - Unclear what is “Public View”
Removed the filter icon. A toggle switch is used in place of the earlier button to indicate to users that they are viewing either public or friends’ profiles.
Additionally, the sub-navigation bar allows users to filter events/people on the map by one or more meetup categories.
Unclear User Status
Default status is offline indicated by the grey rim around user’s profile.
Online status is indicated with a universally recognised green colour, in a similar rim and dot as commonly used social apps.
Events Screen
Event Overlay
Hierarchy of information and corresponding font sizes re-ordered according to level of importance, header first then tags
Representative image added to the overlay as a visual summary of the event
Lightbox overlay retains user’s attention to event tapped onto
UI Improvements
Apart from hierarchy of information and font sizes
Buttons were refined to have a consistent corner radius and event location colour a consistent shade of blue
4. Test & Refine
Usability Testing
With the mid-fi wireframe prototype, a series of 7 usability testings were conducted to receive users’ feedback and to improve features before moving into the hi-fi prototype.
We implemented the quick changes and proposed the remaining strategy feedback to our client for consideration and future implementation.
Key Implemented Features
Different colourways for different event types
To help users quickly identify the type of meetup that is on the map, the icons were grouped by colour. Orange for social, pink for dating and purple for networking. User and friends’ online statuses were still depicted with a green rim, and the app’s default colour was switched a dark blue so as not to be compete for attention with the event icons.
Standard UI elements and a Design System
This helps to provide consistency within the design team and benefits developers downstream with a complete reference guide for all variations of existing UI elements (e.g. size/colour of headers, body text, icons).
Future Considerations
Link events to Calendar
To increase the success rate of users turning up for meetings, a prompt to save the meeting to user’s personal calendar, and even reminders to be set can be included
Trust & Safety
As the premise of the app involves users meeting up with each other, it is important that users on the app are verified individuals
Certain features that allow users to call for help or what to do in an emergency situation should be included
Reflections
Within the timeframe given, we implemented a design system and standardised the information hierarchy within the app. The client was pleased with the proposal and for the app launch that around 80% of our designs were incorporated in the first version of the app.
There were various concerns users felt a meetup app should address, and one such area of concern was trust and safety. We feel that more can be done in this area especially to cultivate a safe and trustworthy environment for users, that would ultimately help the app retain more users and grow a stable community that finds meaning in using the app.
“The team exceeded expectations. The designers provided immediate value by showing their resourcefulness, and the designs were well-validated and well-designed to fit the style of the app.”