Enhancing Chat Interactions with #Threads and AI
Overview
As part of our Interaction Science project, we set out to improve chat interaction by addressing key interaction challenges identified through comprehensive research.
Our goal was to pinpoint and address nuances often overlooked in the messaging experience.
We chose WhatsApp, the most popular messaging app, as our foundational interface, allowing us to build upon a widely-accepted platform.
My Role
UX Designer
Team
6 UX Designers
Deliverables
High-Fidelity Prototypes
Tools
Figma, Protopie, Rive, UXtweak, MS Teams
Scope
1. Message Organisation.
2. Audio Readability and Findability.
3. Media and Document Management.
4. Mutual Task Organisation.
My Contributions
Collaborated with the team on project ideation and contributed significantly to its conceptualisation.
Concentrated on Scope 1 and 2.
Designed six and Prototyped nine user flows in Figma. Animated in Rive. Assisted teammate with interactive prototypes in Protopie.
Assisted in user testing, evaluation, design iteration.
Challenge
Research
We analysed 15+ academic papers and studies to synthesize insights on users’ needs and best practices for improving chat app interactions. We have identified four principal challenges in terms of interaction. Our primary focus is Scope 1 & 2, while Scope 3 & 4 are our secondary concerns. I will specifically discuss Scope 1 & 2, as my area of focus.
1. Message Organisation:
Users struggle to categorise messages as a single chat message comprising multiple topics, which leads to disorganised conversations containing, and in many instances overload of information.
Tagging messages eases recall and helps to organise, whereas manual and auto-tagging options are beneficial.
Displaying messages by conversation threads with visual cues & timestamps improves navigation.
2. Audio Readability and Findability:
Lack of transcripts makes referencing audio tough; skimmable text is beneficial.
Search and keywords help users locate audio content without full playback—difficulty referencing and locating audio messages without transcripts.
Objectives
Enhance message organisation with features for threading, labeling, and clustering conversations and improve audio message findability through AI-enabled transcription and search.
Execution
1. Process and Methods
1.1 Business Model Canvas
The following Business Model Canvas was used early on to articulate the value proposition and benefits of our proposed solutions.
1.2 Double Diamond Model
We used the Double Diamond model to guide our design process through four key stages of Discover, Define, Develop, and Deliver to ensure user-centred solutions.
In the Discover stage, we conducted extensive user research through literature reviews, survery and interviews to understand chat app user pain points and needs, boiling down into four key interaction challenges.
The Define stage involved analysing research insights to create a problem statement and prioritise design requirements. We drafted specific scenarios to visualise and prioritise proposed design solutions.
Next in the Design stage, we created user flows, low, mid and high-fidelity designs, and went through multiple rounds of iterations on the designs.
In the Deliver stage, we refined high-fidelity interactive prototypes to validate the designs and evaluate user experience. The final deliverables included 9 responsive user flows and prototypes addressing the key interaction challenges.
Lastly, during Evaluation, we conducted remote usability prototype testing, assigning tasks to participants along with follow-up contextual interviews.
2. Design and Prototype
For each of the 9 user flows, we defined a specific scenario and problem, explored solutions, and developed interactive prototypes; for example, a scenario of needing to start new conversation threads led to a flow for creating hashtag threads in chats.
Here, I’m presenting you 6 of those that come from Scope 1 & 2.
2.1 Message Organisation
Different platforms organise messages differently. WhatsApp lets users star messages for easy access under ‘Starred Messages’ in chats or via settings. WhatsApp Business permits manual labeling, like ‘Paid’ or ‘Pending’.
Based on these methods, we seek to enhance message organisation without significantly altering app usability. Our survey on ‘Message Organisation’ offers scenarios to understand user needs better.
Specific Scenario
In User A’s Family WhatsApp group, aside from general messages, 3 distinct major topics are currently being discussed for the past few weeks: Holiday Plans, Dad’s Healthcare and House Renovations.
User A and User B are good friends. In a chat, User A shares her experiences in Japan. User B also plans to go to Japan on holiday soon and would like to remember her recommendations.
Problem
Messages related to various topics are accumulating and getting disorganised over time, making it challenging to maintain relevance within the chat based solely on the sender.
Exploration
We created separate groups for each topic with the same family members, distinct from the main family chat. However, this will create multiple groups without the ability to cross-channel messages.
We discussed users ‘starring’ messages for easy reference later, along with other unrelated starred messages. We also explored copy-paste all these messages to a separate chat with just yourself, e.g., ‘Memos’, ‘Notes’.
Solution
We propose “Threads”, a feature that enables users to create relevant threads by placing a hashtag “#” before their message.
Additionally, Threads also allow users to assign previous messages to specific threads, with the ability to view all the threads in a list view on a dedicated screen, seamlessly integrated with WhatsApp’s native UI.
User Flow 1: Start a thread from the existing chat
The user selects an individual chat, taps the plus icon “+” at the bottom, chooses the “Start a Thread” option, names the thread in the appearing modal, and a new thread is then created.
User Flow 2: View the thread list, open an existing thread and start a new thread
From the home screen, the user taps the Threads link in the middle, which displays a list of threads. The user selects the “#Japan” thread to open it. To create a new thread, the user clicks on the plus icon in the top right as shown above, similar to the plus icon that’s seen on the bottom left in the previous User Flow 1.
User Flow 3: Use a #hashtag to send a chat message and assign it to a thread
The user initiates a thread by typing “#” followed by the desired name, such as “#Tokyo”, which then appears as a new chat bubble in the conversation.
User Flow 4: Add existing chat messages to existing threads
The user long-presses a chat button, prompting a modal to appear. From there, the user can add the chat to an existing thread.
2.2 Audio Readability and FIndability
WhatsApp’s current user experience for audio message readability and findability is suboptimal, making it challenging for users to locate or recall audio messages due to the lack of written content for reference.
Specific Scenario
User A and User B discuss weekend plans, with User B responding via audio messages. User A sends an audio message with key details, but current applications lack a user-friendly approach for User B to reference this message later.
Problem
Users struggle to recall details from audio messages, as there is no function for referencing messages, no available text transcript, and no quick ways to check audio messages.
Exploration
We explored automatically transcribing audio messages into text. We also discussed a feature allowing users to label audio messages manually for easy reference, and enabling a search function specifically for audio messages that go through transcripts of messages.
Solution
We propose using AI to transcribe audio messages into text. When an audio is played, the first few words of the transcript will appear, much like subtitles in a movie. The AI will also auto-generate a title that can be edited later. Users can search for these transcripts and titles to easily find messages.
User Flow 5: AI-powered Readability, Transcription and Title Edit
The user long-presses and holds the title to change the audio file’s title. As the audio plays, transcripts appear alongside it.
User Flow 6: AI-powered Audio Findability
Users can search for keywords and results from audio transcript appear. Try searching “Best” in the following prototype.
3. Evaluation
We tested our designs at various stages, using both medium and high-quality prototypes to ensure we were on the right track, and carried out usability tests and interviews to evaluate the design.
We conducted a survey with 20 users before prototyping, covering six key areas and gathering suggestions. Carried out usability tests and interviews with 5 users after prototyping, focusing on task completion. Made design adjustments based on feedback from usability test and contextual interviews.
3.1 Iterations
We went through series of design exploration and iteration, discarding many ideas throughout the process, to make necessary changes to our design and prototype.
3.2 Results
Finding 1: After interviews, we added a pop-up to prompt users to swipe left on a chat to easily view threads. This feature, which we hadn’t originally planned, helps users find information more easily.
Modification 1: We added a swipe feature because users found it easier than going back to the home screen, despite on-screen instructions.
Finding 2: We initially suggested adding a thread name when starting a new conversation. But this confused users over where to write the name and the message. We realised a simpler design was needed to avoid confusion.
Modification 2: We simplified the design, going from two text fields and buttons to just one of each. The new design on the right streamlines the process for starting a thread and posting a message.
Finding 3: We decided to skip adding a ‘Cancel’ button to keep things clean and simple. Users can just tap the empty space above the dialogue box to go back to the chat, which is pretty standard. This avoided the risk of accidental clicks when people are trying to start a thread or a poll.
Modification 3: We found that users intuitively knew how to cancel an action by tapping the negative space, even without a back or cancel button. They felt that this was the “right way to cancel” and were not concerned about the absence of such buttons. They also easily accessed the action list modal via the plus icon, stating that they “already had a feeling” about how it worked.
Finding 4: We created two types of chat bubbles to test user preferences for text transcript speed and size. Users preferred larger bubbles that displayed more text, allowing them to read faster and catch up more easily with the accompanying audio.
Modification 4: In our prototype, we used both types of chat bubbles but users preferred the newer, larger audio chat bubble. So no modifications were made.
Outcome
Through comprehensive user research and iterative design processes, we proposed solutions that significantly enhanced chat interactions. Subsequent user testing validated the usability of these improvements.
Interactive Prototype using Protopie for User Flow 1:
https://cloud.protopie.io/p/c8147c971a4ff191483a48af
Interactive Prototype using Protopie for User Flow 2: https://cloud.protopie.io/p/1fb8bd4cbd70816747c08efd
Interactive Prototype using Protopie for User Flow 3: https://cloud.protopie.io/p/6c70c99e68f7d2c841ccae2d
Interactive Prototype using Protopie for User Flow 4: https://cloud.protopie.io/p/0750b4cde6f16374e9e92e7a
Interactive Prototype using Protopie for User Flow 5: https://cloud.protopie.io/p/7acc2822fe6d62a9f8dc11a3
Interactive Prototype using Protopie for User Flow 6: https://cloud.protopie.io/p/b9323e1d46aa31c8a3d98a7c
Reflection
We explored numerous problems to improve the messaging experience.
Our findings and the systematic process revealed how what appears to be a relatively minor enhancement can yield an outsized impact on usability.
Below is a reflective post about this project that I published on LinkedIn.
