TOPIC GROUP

Better organize your large group chats by creating different sections for discussing specific subjects. Revolutionize the way we communicate on the platform.

ROLE

Product Designer

DURATION

Apr - Jun 2023 (Base Message version)

Oct - Nov 2023 (XSpace Message version)

TOOLS

Figma

Miro

TEAM

X Team

00

OVERVIEW

What's Topic group?

“Topic group” is a feature built when the app was launched for the first time, however, it was almost invisible and infrequently used in chats because the app is feature-rich and “topic group” was not very well-developed.

It was not until early 2023 that the feature appeared again on our annual strategic plan. Improving the discoverability, usability, and user experience of Base Message was our top priority. Known as “topic group”, This useful tool brings together team members who have similar interests, enabling them to discuss various subjects without getting distracted by irrelevant information. This consequently will help users streamline conversations and make them more manageable. 

As a product designer, I collaborated with the XSpace team, also known as “X” to remake the current Base ecosystem. We helped Base end users say goodbye to buying, managing and switching different platforms for work, instead, all the work now flows in one place. In this case, the Base Message app has become one of the key apps of the whole ecosystem, and the need to deliver a much better version is our main goal.

01

MOTIVATION

What's the background?

“Topic group” went through two development phases. The first one was applied to our old app layout, and it was regarded as the foundation for the second feature update when we planned to launch our completely brand-new platform - Base Xspace.

Communication is a top priority in XSpace Message to the extent that users use it daily to exchange information and discuss ideas instead of using third-party platforms like Gmail, Whatsapp, Telegram, Zalo (a popular messaging app in Vietnam), etc.

Image: XMessage is designed to help users communicate and collaborate closely with teams

But most of the time, information exchanged is hard to keep track of - there is a desire for more focused discussions where all the information is more convergent, and the interaction is more efficient. For that reason and based on what we did in the first phase, we continued to develop the feature with the hope of bringing a much better user experience to our clients.

The Emerging Problem

In reality, the Topics feature is available on Message, but it is infrequently used and not fully developed to the extent that users can see how powerful it is.

In Base Message, people work together and collaborate mostly in channels, along with direct and group messages. A channel is where users talk about a project, share files, assign roles and responsibilities, make decisions, and much more. Consequently, daily users need help keeping track of all the messages by constantly checking out group chats. Especially for people whose roles require carrying a laptop or staring at screens all day, every day there is a large number of topics and discussions they need to join, so most of the time it has become overwhelming and even a nightmare to them. Again, when you’re hopping onto a server, it’s not always easy to catch up on the latest conversation within a channel. It’s easy for a casual chat to sprout into intense debates, wild tangents, and epic-length round tables on totally off-topic subjects. On occasion, joining a channel can feel like walking into the middle of three different movies.

We currently have the Reply mechanism which allows anyone to specify whose message they want to respond to in a busy channel. However, a problem emerges as soon as people begin replying to each other in a chain. Keeping up with the back-and-forth @ can get overwhelming, both for the people having the conversation and for those trying to follow up later.

Thus, we asked

HMW enables members to have meaningful conversations, bring like-minded individuals together, and share ideas on subjects they are interested in without being distracted by irrelevant information?
HMW help users efficiently keep track of all messages and minimize missing important information?

The Goal

Provide a type of individual chat that makes the discussions more focused, the information more convergent, and the interaction more efficient.

02

UNDERSTAND

It Began with Research

1/ UXR REVIEW
2/ COMPETITIVE AUDIT
I took a look at 3 existing UXR studies to understand users' feelings towards the current state of Base Message's user experience.
I audited 4 different messaging apps to understand existing patterns and interactions around the topic group feature.

Reviewing Existing UX Research

BASE MESSAGE PAIN POINTS

1/ POOR DISCOVERY
2/ OVERWHELMING NOTIFICATIONS
3/ CREATIVITY & INNOVATION BARRIER
It can be confusing to recognize all the features available that can help make the conversations more informative.
It’s easy to become frustrated as lots of information comes all at once, or an unpleasant scenario may happen when one misses important information for that reason.
The lack of individual rooms decreases users’ motivation to share knowledge and information, provide feedback, and exchange ideas. That consequently can negatively affect productivity.
Source: Confidential UXR Report

How do the topic group features vary?

COMPETITIVE ANALYSIS

Next, I sought to better understand the mechanics of existing Topic Group features through a competitive audit of 4 messaging apps. Each app serves a unique purpose for messaging, which means unique approaches to how users use Topics. I started by breaking down these different purposes.

COMPETITIVE AUDIT

A look at shortcuts across different apps

After that, I conducted a competitive audit of the Topic group feature in 4 different messaging apps, examining how each system functions in a given context within a chat. Unfortunately, the entire competitive analysis deck is under NDA. 

Research concluded that,

Topics in the current market are one of a variety of features that the apps offer, where users can choose to join or not join (optional).
Unlike its competitors, the Topics feature acts as one of the key features of the app, is built more prominently and is positioned to boost productivity in the workplace.
The feature Topics in the apps also function as individual chats within the group that have their own shared media and notification settings. In that way, users can customize their chats and promote discussion.
In that way, people in an organization are pushed to exchange ideas, share information, exchange interests, etc. Topic groups can be flexible in creating an open communication environment and stimulating team members to think innovatively.

03

IDENTITY & SYNTHESIZE

Identifying Core Product Experiences

PRODUCT PRINCIPLES

After reviewing past research on Base Message and better understanding the competitive landscape, we generated a set of product principles with our PM to guide the direction of the Topics product experience.

FOCUS
EASE OF ACCESS
MANAGEMENT
Acts as a new space for users who have the same interests or concerns and allows/stimulates team members to think innovatively and exchange ideas around a variety of topics
Built in a way that’s easy for users to recognize and use without being confused between the two message concepts: general and topic
Group members can not only create topics, but also reply to and subscribe to topics to get notifications so as not to miss any important information

Identifying Mechanics & Permissions

STATES OF A TOPICS

The number of topics will increase over time, regardless of the workload or any reason. Hence, we defined two states that help categorize/better organize and store topics in the long term. In that case, Active topics are conversations that are still going on, where participants can send texts, images, files, etc., and vice versa. Closed topics disappear from the navigation panel but are still stored in the topic list.

HOW TO READ/PREVENT OTHERS FROM READING A TOPIC'S FLOW CHAT?

In order to follow and get new notifications about the latest chat updates of any topic, users can choose to click the button Subscribe/Unsubscribe the topic. By doing that, they can avoid the possibility of missing important information and only focus on which topic they want to follow.

Image: Permission sheet

ACTIONS FOR A TOPIC

  • Edit: modify topic's introduction (title, description)
  • Close: Action that deactivates the topic. Users cannot send new messages to the topic but they can still read old messages in it.
  • Remove: Delete topic

04

IDEATE

Reflecting on Research

HOW SHOULD WE GUIDE OUR IDEATION?

In the competitive audit done in the Understand phase, the following questions were asked for each app’s Topic group analysis. While beginning my explorative ideation phase, I kept these questions in mind to ensure that my designs aligned well the the project's goals.

How can I engage in meaningful discussions without being distracted by irrelevant information
How do I discover & find topic groups?
How can I keep up with new information without missing any important ones?
FOCUS
AWARENESS & ACCESS
MANAGEMENT

UI Ideation

TOPIC GROUP'S ICON

We did a certain number of research before designing any drafts for the feature's icon. In order to speed up recognition, we tried to reduce the amount of graphic details rather than creating a highly realistic image.

We noticed that Hashtags (the "#" symbol) are often used to categorize content on all the major social media platforms. Moreover, during our recognizability test, 5/5 of our participants could tell what the icon stands for like how we expected, which proves that their understanding of the icon is based on their previous experience, and consequently we could use that to symbolize our feature.

Hence, here's how the feature "looks like"..

HYPOTHESIZING THE DESIGNS

Keeping the above questions in mind, the next phase focused on exploring a wide variety of new approaches to creating an effective command system product experience. I generated ideas in 3 "buckets" that lay the foundation of the commands primitive, and evaluated each bucket on a set of metrics that each address the three product principles above, in order to land on the best option.

Bucket #1: TOPIC CARD

First, let's take a look the different variations of the command picker itself, which is triggered by typing @ or /.

First, let's take a look the different variations of the command picker itself, which is triggered by typing @ or /.

CLARITY
SCANNABILITY
SCALABILITY
OPTION 1
Account first
The first element that draws user's attention is the topic creator's account, not a topic title, which is not recommended
The button is right-aligned, which is good for right-handed users, but the topic title is not the first element that draws user's attention (it's the user account instead)
With different contexts like long title and even long description, the card can still adapt well (will just expand)
OPTION 2
Title first
Topic title first, which make everything so clear and easier to scan
The button is right-aligned, which is good for right-handed users
With such a long title while the width of the title is fixed, the layout of the card will be affected and the outcome is not so good visually
OPTION 3
‍Title first - Left align
Topic title first, which make everything so clear
All information is left aligned, with strong visual hierarchy, and topic title is the most prominent in the card
With different contexts like long title and even long description, the card can still adapt well (will just expand)

Bucket #2: TOPIC NAVIGATION DISPLAY

Next, I explored different ways to input commands, including how the command is applied and how arguments are inputted.

CLARITY
SIZE
SCALABILITY
OPTION 1
Tree structure
Pretty clear with the lines that visualize the relationship between #general chat and #topics
Takes up much space that creates an illusion of bulkiness while that section of the screen already has much data that needs to be shown
Might be extremely overwhelming for users who have a ton of group chats and each group chat has several topics, especially when the number of topics increases through time
OPTION 2
Separates #General
Separates #general and #topics, which helps users understand and navigate between types of group chats easily
Able to show all active topics
Can still handle a long list of topics
OPTION 3
‍Combines #General
Doesn't separate #general and #topics, which makes the relationship less clear
Able to show all active topics
Can still handle a long list of topics

Bucket #3: LIST OF TOPICS

Finally, I explored variations of command discovery, which generated ideas on how to make users aware of the feature.

NON-INTRUSIVE
DISCOVERABILITY
SCALIBITY
OPTION 1
A completely single tab
A completely single tab that potentially makes it easy to navigate, doesn't affect the whole layout and upsells the feature in a subtle yet noticeable fashion
Designed as a single tab, the feature makes it easy for users to understand, find, identify, and access
Would handle a long list of topics well. Moreover, this layout can adapt to different contexts, devices, and user needs without compromising quality, performance, or usability
OPTION 2
Topics in a modal
The modal obstructs the entire screen’s view, which can be frustrating for some users
The feature acts as a little icon button next to other features, which doesn't take up much space. However, with mobile users, it becomes hard to browse and find the exact topic they want to subscribe because all past and recent topics are stored in a small modal
Can handle multiple topics, but it would get increasingly complex and harder to follow, search & view content an as it scales

05

EXECUTION

06

REFLECTION

I learned a lot through this project. It was a great opportunity for me to apply my experience and understanding of UX design to assess and improve design decisions. Working on this feature also taught me a lot about the importance of understanding our target users, and for that reason, user research and working closely with the business team became essential to get insights to create more meaningful products that can tackle users’ problems. 

LET'S BUILD SOMETHING IMPACTFUL.
WorkLinkedinAboutEmailResume