Justin Noah
UX Designer

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.My Role in the ProjectUX Research • UI Design • Prototyping • User Testing • Design Systems

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.

My Role in the Project
UX Research • UI Design • Prototyping • User Testing • Design Systems

Social x City


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.

View Hi-Fid Mobile Prototype >

Project Scope

The Problem


The Social City app targeted highly sociable people and expats or working professionals in tech aged 23-35. The app that was about to be launched had checking-in and event hosting as the main action for user retention.

However,:

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.

Research Scope


SocialxCity had done an initial round of research so we started off based on what they already had and expanded on it.

We then based our research based on the following points:

1) Ensuring users are aware of status changes (live or last seen)

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/challenges/obstacles when using the map

The Goal

HMW recreate a user-friendly map interface so that it allows clear indication of different functions of interaction together with a clear function for the sharing of online/offline modes?

*It should be noted that because of limitations of time and resources, that the amount of users that the team has tested with remains as a small group of the targeted audience which aligns with the desired personas of the application.

Research & Testing

Round 1. Qualitative Research

We started the project with a combination of research methods:
user interviews, heuristic evaluation, and usability tests.

Heuristic Evaluation

We conducted a heuristic evaluation of the current state of the app based on the 10 Usability Heuristics by Prof Jacob Nielson. We found out that it was very difficult to navigate through the app and there were many inconsistencies within the map's user interface. These are some of the key observations. >>>

A more detailed breakdown can be seen in the slides below.

Results from Usability Heuristics Evaluation:

1) No clear visibility of system status, in particular online/offline modes.

2) No clear system's matching with the real world, with copywriting that are not targeted.

3) Navigation difficulties through the app.

4) Lack of consistency and standards in the design components used.

5) No definite security statuses through the chat functions.

Usability Tests

In drafting out our research plans, we conducted an initial round of 5 usability tests remotely via Zoom. These consisted of expats or working professionals in tech aged 23-35 residing in Singapore.

We wanted to understand how users would share their live location so that they have control over their privacy, and how aware they were of their visibility to others on the map.

We also wanted to improve the general user experience of the map's UI. These are some of the insights we found from the usability tests, some of which echoed our heuristic evaluation:

Results from Usability Tests:

1) No prominent indication to user that location sharing is turned off.

2) Users are not able to figure out if they are are sharing their location to other people on the app.

3) Icons are not clearly defined when the map is zoomed in and out.

4) The map didn’t provide substantial information, in particular the kind of meetups that were available.

5) Event filter settings aren’t clearly defined.

6) Events page consisted of too much blue tabs that confused the users.

Qualitative Research: A series of remote 5 initial interviews done via Zoom.

Qualitative Research: A series of remote 5 initial interviews done via Zoom.

Round 2. Qualitative Research

After the first part of our research, we wanted to the usability of the prototypes that were established after the first round of user interviews and usability tests, in particular, users' behaviours in specific task completion while navigating through the prototype.

Qualitative Research: A second round of 5 remote interviews done via Zoom.

Qualitative Research: A second round of 5 remote interviews done via Zoom.

Usability Tests


We conducted a second round of 5 user interviews based on the target group identified by the client. These consisted of expats or working professionals aged 23-35 residing in Singapore. We asked them about specific task-related questions throughout the interviews.


Common talking points include:
Online/Offline Statuses, Filtering of Recent Events, Viewing Profiles, Profiles for Networking, Making New Friends, Checking Friends' Last-Seen, Checking Nearby Activities, Confidence in Navigability.

Analysis

1) Sorting the Data

We gathered all the data from the qualitative research methods onto Miro, synthesised the data and saw the key insights from the patterns in our research.

***NOTE: It should be noted that the team worked with the initial prototype from the client in developing design iteration, that was tested, analysed, redesigned before going into iteration 2, which then culminated in the final designs.

Affinity Mapping of User Interviews (Iteration 1)

Affinity Mapping of User Interviews (Iteration 1)

Affinity Mapping of User Interviews (Iteration 2)

Affinity Mapping of User Interviews (Iteration 2)

2) Key Insights (both Iterations 1 & 2)

A) Psychology of Colours to Influence different Visibility of System Statuses

All interviewed users understood offline statuses with the profile image at a lower opacity with a grey rim indicating inactivity. All users interviewed also understood online statuses with the profile image at full opacity with a green rim indicating activity.

B) Minimalism of Design decisions provide Better User Experiences

With regards to online/offline statuses, all users preferred a minimalist icon with the simplicity of colour-band as a ring around the profile image without any additional visuals, which can be misleading.

C) Importance of Autonomy in User Experience

All users interviewed found it important to locate themselves on the map User Interface easily. Moving into the redesigns, key profile pictures are then centred in the middle of the map to clearly indicate user's location. Users are also able to interact with the map interface as they need to with a 'pinch' to expand or minimise the map. They are also able to effectively filter for different types of events categorically.

D) Optimisation of Real Estate and Copy to keep UI Clean and Clearly indicative of Functions

Certain functionalities of the User Interface were thought to be collapsible or exist within embedded information architecture of the app. This in particular, were:

a. The 'Latest Check-Ins' tab could be collapsed when not in use
b. The categorical filters for types of events could reside within a separate page when a button is tapped on.
c. Copywriting on user's profile page and event pages to be streamlined to be more friendly and inclusive.

E) Additional Colours to Streamline Categories of Different Event Types

All users pointed out the interest in different colour ways, to see different colours that would easily help to categorise and identify event types.

The team then decided worked on this by briefly retouching the branding guidelines, resulting in the final colorway in the designs.

F) Peer Pressure: Friends' Online Statuses

In Snapchat, users are more likely to ask each other to meet up when they are aware of their friends' online statuses. We’ve thus made the accessing of friends’ page more valuable by providing location and timestamps only with people you’re connected with.

This also takes into account some of the security issues and concerns that all users have had in terms of privacy and the sharing of data only with people they are friends with.

Design
A. Offline Status, B. Online Status, C. Meet Now Enabled.

A. Offline Status, B. Online Status, C. Meet Now Enabled.

Problem Statement Pt 1:
Clear Function for the Sharing of Online/Offline Modes


The team eventually proposed the following redesigns based off the users' feedback:

1. A greyscale profile picture with grey outer rim for the offline status, as it was understood by all users that their location sharing was turned off.

2. Most preferred a minimalist green icon as it was already clear to them from the colour what the status was, and the white inner rim enhanced the visibility of the green outer rim.

3. The meet now function can be toggled on with the dismissible banner, that fades away with the toast message indicating that users have successfully enabled 'Meet Now'.

Recommendation for 2A: Zoomed Out vs. Zoomed In View

Recommendation for 2A: Zoomed Out vs. Zoomed In View

Problem Statement Pt 2:
On Zoomed In vs Zoomed Out Interfaces:


Our final recommendation for Problem 2A proposed for icons on the map which expands as the user zooms in and out of the map. Each icon also represents a certain feature (user profiles and categorical icons) that a user can further explore should they be interested.

Recommendation for 2B: 'Meet Now' Toggle + Filter Menu:

Recommendation for 2B: 'Meet Now' Toggle + Filter Menu:

Problem Statement Pt 2:
On 'Meet Now' Toggle + Filter Menu:


Our final recommendation for Problem 2B proposed for a merger of both options A and B as the final suggestion to the client. With the filter tabs on the header, the user can select the Meet Now option for an easier access. This also lessen multiple clicks to access different categories or subject of interests, as with users like Giovanni's comment, “Would be nice to have one to show me friends, events, separately and one all together”, which strongly supports the merger of the two options.

Our Recommendation: Succinct Interest Types, Removal of Follower Count, Last Seen Status for Credibility

Our Recommendation: Succinct Interest Types, Removal of Follower Count, Last Seen Status for Credibility

Problem Statement Pt 2:
Accessing User Profiles


Our recommendation included only showing substantial information on the profile page in order to clear the unnecessary noise within the page.

The messaging window with read receipts also establish accuracy and credibility of information that belongs to each profile, safeguarding the privacy interests of the users that are on the app.

Our Recommendation: Popup referenced from iterations 1 and 2, Concise events page with map shortcuts

Our Recommendation: Popup referenced from iterations 1 and 2, Concise events page with map shortcuts

Problem Statement Pt 2:
Accessing Events Page


In moving into the final iteration, we made the the event information more findable and valuable by highlighting and providing the necessary information on the map itself by merging what existed in the carousel with the popup in iterations 1 and 2. 60% of our users, and users like Gab felt that the "Event page is nice, good details and information is concise" and users like Clement even pointed out the addition of the address link to Google maps, in which was a good feature that was highlighted.

Our Recommendation: Accessing Friends Page Ideal User Flow

Our Recommendation: Accessing Friends Page Ideal User Flow

Problem Statement Pt 2:
Accessing Friends Page


In moving into the final recommendation, the team made accessing friends’ page more valuable by providing location and timestamps only with people you’re connected with, taking into account some of the security issues and concerns that all users have had in terms of privacy and the sharing of data only with people they are friends with.

Consideration for Design Systems

The design system has been proven to allow for effective communication to the developer the ideal way to style a component. This benefits developers by giving them a complete reference guide for all variations of existing UI elements.

This will also help provide consistency helping businesses integrate it across your enterprise without slowing down the process.

Considering such, the team then took our existing designs and made standardisations throughout the commonly used components to establish a design system that can be scalable in the design of SocialxCity.

Design Systems:
Alternative Colorways

During our interviews, we also had users who pointed out the interest in different colour ways, with many users' comment emphasising on having different style of colours within the app, identifying the need for clearer classifications of event types.

Alternative Colourway for the Design System for Social x City, which span across active/inactive states for many classes of buttons

Alternative Colourway for the Design System for Social x City, which span across active/inactive states for many classes of buttons

Summary

Usability Testing

With the mid-fi wireframe prototype and given the project limitations, we conducted a series of 3 usability testings comprising a total of 10 users to get feedback and to improve in multiple iterations. We started at a mid-fi level because of the fidelity of the assets that were handed to us from the client.

We implemented the quick changes and proposed the remaining feedback to our client for consideration and future implementation.

We also created a design system for the map user interface, to better help users with knowing the functionalities of the app for smoother navigations.

View Hi-Fid Mobile Prototype >

Implemented

  • Multiple competitors' analyses to gauge and map functionalities

  • Sharing of live, online and offline locations

  • Meet-now functionalities

  • Smoother zoomed in and zoomed ouy responsive map interface

  • Improved user flow to accessing the map UI

  • Clearer event filters and user profile details

  • Clear use of inverted colours to minimise visual distraction within the user experience

  • New colourways to differentiate event type and to streamline hierarchy

  • Easier usability in enhancing organising meetups


Future Recommendations

  • Need for brand identity, colours that belong to the app in particular.

  • Learning: The app needs to focus on building a community. Creating a nice and safe environment for all users.

  • Good to have: Link event details to calendar, and only show relevant notifications.

  • In a post-COVID world, scale of meetups could be bigger. At the same time, selective meetups may want to be intimate instead.

1-Min Video Walkthrough of SocialxCity

Client

Social City

My Role

UX Research
UI Design
Prototyping
User Testing
Design Systems

The Team

Aisa Mae Vicedo
Ann Meryl Choo
Justin Noah Chua
Magdalene Chai
Siva Shankeran

Duration

4 Weeks