Product Design & Localisation

A UX Remote Role @ Pop Social Inc. |📍Austin, TX
Context
My team and I are aspiring UX designers who are hungry to learn, and thought it is a great idea to look towards a market overseas where UX practices are much more developed and established. The US startup was also very welcoming and adventurous, willing to guide us on this journey and help us achieve our personal learning goals!
Duration
The remote stint was spread over 3 months, where my team and I have ideated and developed seven app features, four of which I had conceptualised and executed.
Purpose
We started with the intention to access the viability of launching the Pop Social app in Singapore and potentially other Asian markets. Along the way, our research and ideas have also sparked new conversations and, ultimately, new features that were implemented for the U.S. market as well!
Project Objective
Redesign the UIUX of conversation chats (a.k.a. chat bubble screens) to drive Pop’s mission of creating deeper connections between people.
Scope
My team and I have analysed the PopSocial app through a series of design sprints and constant iterations with the team in Austin (TX), in the context of a new user as well as a frequent user with a focus on the former.
This portfolio currently details one of four features - 'Starred Messages' - that I have conceptualised. The other features (Reply, Reaction and Stickers) have been shipped and would be ready for viewing soon - stay tuned! :)
Deliverables
Low to high fidelity wireframes, Product Requirement Document
Methodologies & Tools used
  • UX Research: Desk Research (Journals), Competitor Analysis
  • Product Requirement Document: User Story & Needs, User Journey Map, Persona, Challenges & Pain Points, Solutions, Initial Roadmap & Product Prioritisation
  • Rapid wireframing: Figma
My role
UX / Interaction Designer
Meet my team!
Nicole Ng, Ong Hui Ting, Hayley

Research & Context

USER REVIEWS  •  LITERATURE REVIEWS
Who is the user?
Project Brief
Team effort
Similarly to the US market, the users are busy university undergraduates in Singapore who wish to find/meet new friends locally.
What are their needs?
Overarching user need
TEAM work
Common need: To discover people and new friends based on interests and personalities first (instead of looks or other superficial characteristics)
Competitor Review
Research
Personal work
Overarching Strategy
How to achieve project objective
TEAM work
  • Develop feature(s) that can bring people closer together through a smooth chatting and swiping experience, with as little effort as possible.
  • Develop features that can increase engagement between users, who usually start off as strangers, and incentivize them to communicate more frequently and meaningfully.

Understand

Who  •  What  •  Competitors  •  Strategy
User Needs
Targeted user need(s) - from project brief
PERSONAL effort
Users want smooth, engaging and fun conversations that can grow in depth, allowing users to grow from strangers to friends and potentially meeting up in the future.
Context
PERSONAL effort
As engagement begins and messages become increasingly voluminous, users might face difficulty in finding specific information about the other party among a sea of past messages, especially if conversations have gotten really long and/or people are taking too long to respond to each other.
Strategy
#1 / 2 of Overarching Strategy
PERSONAL effort
The approach used for this feature is in line with our first strategy: 'Develop feature(s) that can bring people closer together through a smooth chatting and swiping experience, with as little effort as possible'.
User Story
What problem(s) does the user face in the chatting experience?
PERSONAL effort
“I somehow recall that Poppy likes to drink bubble tea, but which brand was it again? Let me search our chat to find out.” (After a long time of searching ..) “Oh gosh i can’t find it, there’s just too many messages! If only i had saved that information somewhere…”
Key Issue
How might we improve the engagement among users?
PERSONAL effort
Hypothesis: Users might have been facing difficulty in finding specific information about the other party among a sea of past messages, thus resulting in a bumpier chat experience. This could be especially true if conversations have gotten really lengthy, and/or people are taking too long to respond to each other.

Diverge

Envision  •  Ideation  •  feedback  •  iteration
Envision
Explore possibilities
PERSONAL effort
I intended for the app to be able to facilitate the search of messages, rather than making users rely on their memory and ability to recall. I wanted users to be able to really chat freely with a peace of mind, knowing that they can come back to an important piece of information easily in the future.
Solutions
Ideate & develop lots of solutions
PERSONAL effort
As such, I believe users need a way to 'remember' and 'recall' important information whenever required. This led to the idea of using 'starred messages' to achieve this goal.
I looked at two aspects of this user need. Firstly, the action of 'starring' the message needs to be rather intuitive. Secondly, the starred messages need to be easily retrievable. This led to the birth of Solution 1, where I have envisioned these key functions for the Starred Messages feature:
  • Ability to ‘star’ or favourite a message for future reference in the ‘Starred’ tab
  • Ability to customise colours for each category of message
  • Ability to view or retrieve any starred message within the chat
  • Animated starring (Eg Stars fly up and fade out)
Solution 1
A. 'Starring' & Categorising
PERSONAL effort
The 'long hold' behaviour followed by a selection menu appearing at the top on the mobile app was a common practice based on research of the local (SG) market. With the Singaporean user in mind, I have designed this solution to reflect the behaviour of starring a message that users might already be used to in their daily lives, while adhering to the brand guide as well.
I envisioned the starring options to be at the top of the screen, together with other common functions, so as to reduce clutter and retain visibility of the chat screen.
B. Retrieval
PERSONAL effort
This step was tricky as the Pop app did not have a way for users to tap onto the other party's profile name directly (through the chat interface) to view shared content, such as shared photos and links, which is considered a must-have in the industry here.
As such, I leveraged (what I thought was) existing infrastructure*, such as the colourful right menu panel, to house the following functions:
  • Retrieval of starred messages, and (possibly) also include shared media (images) and links
  • Categorisation of starred messages
Notable Feedback
From Austin and SG teams
TEAM effort
"I love this idea of searchable tags - I can find out who else i’ve chatted with likes Gongcha too!"

"Hmm seems like there are too many steps involved.. Is it possible to simplify it further?"

"Starring options (at the top of screen) could be better situated, considering that most people are right-handed."
Possible Limitation(s)
Food for thought
PERSONAL effort
The success of this feature depends on the long term vision of Pop, where this feature might not be a priority.
Eg: Is Pop a platform for people to build long-lasting relationships and chat frequently, or simply get to know many people very quickly but not as deeply?
Solution 2
A. 'Starring' & Categorising
TEAM effort
Feedback from the week's huddle where I presented solution 1 led us to ideating Solution 2. Taking the team's feedback into consideration, we have brainstormed and iterated the design to make the chat experience smoother and more intuitive. For instance, we've made a pop-up category-selection box to replace the previous 'starring' interaction, that would be possibly more visually appealing.

In this solution, we have also provided an alternative way of categorising the starred messages, where one less step is required should the user not want to categorise it specifically. For instance, the user might want to star the message generically, and this solution would only require one tap on the star icon, as compared to solution 1 where an additional step (selecting from the dropdown) is required.

We have also decided to keep the star button (top panel) at the same spot tentatively, given that all four buttons are merely conceptual and currently do not exist in the app yet. In the event that the other three buttons are implemented in the future as well, we believe the usage of the star icon might be less frequent than the typical 'forward', 'reply' and 'copy' buttons. As such, keeping in mind the right-handed majority of users, the star icon should remain further away compared to the other more frequently-used buttons. Should those buttons be omitted, the best spot for the star button would be flushed right.
B. Retrieval
TEAM effort
In order to make the starred messages more easily accessible, we've incorporated the retrieval of starred messages on the profile card of the other party. As seen in the wireframe below, we have envisioned that it would be placed at the bottom (below the user's information), which is consistent with Pop's current information architecture and layout.

Decide

final feedback  •  decision  •  rationale
Final Feedback
PERSONAL effort
After rigorous discussion with the team, we have concluded that the Starred Messages feature has potential, but is currently not the highest priority for Pop Social.

During the design and iteration process, I have posed this question to the Austin team and CEO: "Is Pop a platform for people to build long-lasting relationships and chat frequently, or simply get to know many people very quickly but not as deeply?".
The final feedback was that Pop's focus can be said to be leaning towards the latter.

This was an anticipated response which I fully agree and understand as well! As such, this marks the tentative end to this feature, which has been shelved for future review by the Austin team. :)

Below is my high fidelity visualisation of the feature if it were to be rolled out in the future.

Reflections

The UX Iterative Process  •  User-Obsessed  •  Better Communicator
What an eye-opening experience working closely with the team in Austin under the amazing guidance of Yoon, alongside my A-team in Singapore (Nicole, Hui Ting and Hayley)! 🥳 With little to no official exposure in UX prior to this, 2020 has been all about stepping out of my comfort zone.

This remote role allowed me to gain valuable skills & great exposure to how UX works in U.S., which are definitely applicable in my future endeavours no matter where I go! 🙂 Graduating in April'21, and now armed with a richer applied knowledge of UX, I'm excited to embark on the next phase of my life → the full-time job search!

Tap the button below for a short snippet of my key takeaways)
VIEW KEY TAKEAWAYS ➜

Thank you for reading!

Share your thoughts with me

📚🍦🍰🐹
Let's Collaborate!

Interested in working with me? Feel free to reach out! 😊

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.