SocialCity
Social City is a new startup venture by ex-ByteDance product manager, Andrew Oh. The application has since been launched on the App Store, focused on promoting interactions between tech individuals.
As a team of 5 UX designers, we spent 4 weeks working remotely with our client to conduct user interviews to gain insights on our users' needs and designed a mobile-first prototype for their content platform.
The app that was about to be launched had checking-in and event hosting as the main action for user retention.
1️⃣ The app has a lack of clarity in online/offline statuses and location sharing options.
2️⃣ Current users are unable to instinctively know of the type of events that are displayed on the main user map interface.
3️⃣ There is inherently a lack of filters to help establish clear categorisation of types of events and user flow.
We then based our research based on the following points:
2️⃣ Improve and test map user interface.
3️⃣ Have clear indications of users' last-seen within the UI so that users know how to approach online/offline users or users who were last-seen.
4️⃣ To map out the users’ journey of how the user navigates through the map.
5️⃣ To identify other users’ pain points when using the map.
Through the user research process, we were also able to identify key phases within the experience of a user.
These included critical painpoints like:
- Status Confusion: Users don't understand online/offline indicators
- Privacy Concerns: Location sharing feels unsafe
- Interface Clarity: Zoomed in/out map experience is confusing
- Feature Discovery: Meet Now toggle and filters are not intuitive
- Information Overload: Too much noise in profile pages
Exploring Map & Features
- Implement greyscale profile picture with grey outer rim for offline status (already understood by users)
- Deploy minimalist green icon with white inner rim for online status (preferred by most users)
- Add zoom-responsive icons that expand/contract as user zooms in/out with categorical icons for user profiles and features
Connecting & Meeting
- Implement Meet Now toggle with dismissible banner that fades away and toast message confirmation
- Add messaging window with read receipts to establish accuracy and credibility while safeguarding privacy
- Merge filter tabs in header for easier access to reduce multiple clicks between categories
Building Community
- Enhance friends page with location and timestamps only for connected users (addressing security and privacy concerns)
- Improve event information by highlighting necessary details on map and merging carousel with popup functionality
- Provide substantial profile information only to clear unnecessary noise and maintain privacy interests
A) Colour Psychology for Status Visibility
All users intuitively understood online and offline statuses. A lower opacity profile image with a grey rim indicated inactivity, while full opacity with a green rim signaled activity.B) Minimalism for Better User Experience
Users preferred a minimalist icon for online/offline statuses: a simple color-band ring around the profile image, avoiding misleading visuals.
C) User Autonomy in Experience
Users found it crucial to easily locate themselves on the map UI. Redesigns centered profile pictures on the map to clearly show location. Users can also interact with the map (pinch to zoom) and effectively filter event categories.
D) Optimized Real Estate & Copy for Clean UI
Users suggested certain UI functionalities be collapsible or embedded. Specifically, the 'Latest Check-Ins' tab could collapse, and categorical event filters could move to a separate page. Copywriting on profile and event pages was also streamlined to be more friendly and inclusive.
E) Additional Colours for Event Categories
Users expressed interest in different color schemes to easily categorize and identify event types. The team addressed this by briefly refining branding guidelines, leading to the final colorway in the designs.
F) Peer Pressure: Friends' Online Statuses
Inspired by Snapchat, we enhanced the friends' page by providing location and timestamps only to connected friends, increasing its value and encouraging meet-ups. This also addresses user privacy concerns, ensuring data is shared only with friends.
With the mid-fidelity wireframe prototype, we conducted usability testing with 10 participants across 3 sessions to gather feedback and iterate on the design. The mid-fidelity approach was necessitated by the asset specifications provided by the client.
Following testing, we implemented immediate improvements and presented remaining recommendations to the client for future development consideration.
Additionally, we developed a comprehensive design system for the map interface to enhance user comprehension of app functionality and optimize navigation efficiency.
- Together, within the timeframe of 4 weeks, we’d:
- • Competitive analysis mapping core functionality across multiple platforms
- • Live status indicators for online/offline location sharing
- • Meet Now toggle for instant availability signaling
- • Responsive map interface optimized for multi-zoom interactions
- • Streamlined user flows for map navigation and access
- • Enhanced filtering system with refined event categorization and profile clarity
- • Inverted color scheme implementation to reduce visual noise and cognitive load
- • Strategic color differentiation establishing clear event type hierarchy
- • Improved meetup organization through simplified usability workflows
Thank you for reading till the end.