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 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.
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.
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
*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.
We started the project with a combination of research methods:
user interviews, heuristic evaluation, and usability tests.
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:
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:
Qualitative Research: A series of remote 5 initial interviews done via Zoom.
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.
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.
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 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.
A. Offline Status, B. Online Status, C. Meet Now Enabled.
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
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:
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 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
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
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.
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.
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
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.
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
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.
Social City
UX Research
UI Design
Prototyping
User Testing
Design Systems
Aisa Mae Vicedo
Ann Meryl Choo
Justin Noah Chua
Magdalene Chai
Siva Shankeran
4 Weeks