TChat.

Optimizing the app’s task management feature and integrating it with chat features

Role

UX Design Intern

Timeline

Feb - Apr 2021 (2 Months)

Team

Nelson Chen (Founder)

Skills

Product Design
Mobile
TChat screen mockups on a green background

💡 The app has been translated for this portfolio 💡

CONTEXT

What is TChat?

TChat is a task management and messaging mobile application designed for SMBs (Small and Midsize Business) in Taiwan. The app strives to solve several issues common in Taiwanese SMBs:

01 | It's inefficient to assign tasks in messaging apps 💬
Important task messages get "washed" away by other texts. And the task receiver often forgets about the task.

02 | Learning curve for professional task apps  📈
Professional apps are too complicated for typical SMB employees.

Problem

Unclear integration between task and chat

When I joined as one of the six interns, the founder had created a prototype of the app. At the time, one of the most important features was to create tasks in the chat room. Yet, at the time, there wasn’t a clear connection between tasks and chats.

If I create a task in the chat room via messages, how will that relate to the task and chat pages in the app?
solution

An intricate system of groups, private chat, and tasks

Since it was hard for me to just focus on a single feature without thinking about the app as a whole, I envisioned and proposed an entire system of thinking for the app that encompasses creating groups, private chats, and tasks. 

Create a group chat 💪

Whether it's for a project, team, or a sudden gathering of people, group chat is the way.

Create a private chat 💬

Need a quick feedback or "yes" on your work from a team member? Create a private chat!

Create a task ✅

Want to keep track of your task? Create one and link it to a group or a private chat!

mY CONTRIBUTION

End to end product design

For the two months, I was assigned to the “tasks, filters, and classification” feature of the app. I was responsible for the entire product design process, from research to delivering the final visual crafts.

In the end, I created high-fidelity prototypes that showcased an entire system of thinking - combining groups, private chats, and tasks. I then presented my designs to the founder, cohort interns, and a Sr. Google designer. I received valuable and positive feedback on the work I’ve created.

GOAL

A rare opportunity

Before this internship, I’ve never done any end-to-end design work with guidance. So, the anxious me in the beginning of the internship asked the founder:

What does success look like for this internship?

Aware of my situation, he said:

Go through the entire design process, iterate, and create a design that logically makes sense. That’s success.

To this day, I’m still very grateful that that founder gave us the opportunity to lead an end-to-end design process for a real-world project. 

research

Getting to know TChat, competitors, and the users

Aware of the project’s flexibility, I wanted to understand the full picture of TChat (history, problems, current situation), Taiwanese SMBs (Small and Midsize Business), and TChat's competitive industry in team collaboration apps. Thus, I created a framework to tackle all of my uncertainties before the design phase.

Diagram linking what I want to understand to the methods I chose to use

A lot to learn and understand 😎

Stakeholder interviews

I video-called Nelson (founder of TChat) to understand the company's origin, struggles, current stage, and success metric for the app and me.

Desk research

I had no prior knowledge about the trend of Taiwanese SMBs. After thorough research, here are some facts I found that do validate TChat's app concept:

01 | SMBs are Taiwan's economic driving force  📈
There are nearly 1.5 million SMBs in Taiwan, which accounts for 97.65% of all Taiwanese businesses.

02 | Slow digitalization in Taiwan's workspace  🐢
Most Taiwanese SMBs with less than 50 employees use Level 2 computer applications (Word, Excel) as their primary digital tool.

03 | Benefits of digitalization 💻
According to Taiwan's Ministry of Economic Affairs, digitalization can increase revenue and efficiency by 50%, enhance in-house communication, and acquire higher quality data.

Competitor analysis

Then, I try to understand who are TChat's competitors (JANDI, Asana, Todoist, and Notion) in the task management space. I delved into each app's task management system, filter & sort logic, and any unique features. Below are the key findings of the analysis.

A horizontal list of the competitors (Jandi, Todoist, Notion, and Asana)

All the competitor apps ⚔️

01 | Variety of UI references  📱
Breaking down these products page by page helped me understand the design essentials of building a task management app.

02 | Product Intentions  🤔
Todoist is made for personal use. Asana is for work. Keeping the product intentions in mind helped me to explain the app’s differences in terms of user flow and UI.

03 | JANDI attempts it, but it’s not perfect  😅
JANDI seems like the only app that seeks to fuse communication and task management. Yet, the UI isn’t intuitive and looks rather old-fashioned.

Wait a minute...

At this point, I have a relatively decent understanding of Taiwanese SMBs and the task management space. Next, I strove to uncover potential user pain points regarding task management.

It was also around this period when I slowly realized that I could not only think about the feature I was given. Since TChat's goal is to seamlessly integrate messaging and tasks, I found it difficult to only work on "tasks". It was too narrow.

Thus, I decided to branch out and think of my project as a cohesive one that seeks to not only enhance task management, but also design a system to integrate with the messaging feature.

User interviews

I brought this mindset over to my user interviews. I talked to 9 people who work at Taiwanese SMBs (finance, catering, software, entertainment, etc). My questions revolved around these three themes:

A diagram of the three interview themes (team communication, task management, and important factors)

Three themes of the user interviews 🦜

And based on the user interviews, I synthesized my notes and wrote down these insights:

A LINE app icon on a green background

LINE is everywhere

9 out of 9 interviewees noted that they use LINE at work.

A frustrated avatar icon on a red background

Frustrations with current task management system

Multiple interviewees noted that their current system is inefficient or uses too many tools at once.

A clock icon on a red background

Companies are willing to change, but also hesitant...

"LINE for work is frustrating, but we don’t plan to change."

IDEATION

Putting the pieces together

After my initial research, I delved into synthesizing my findings to help guide my design direction.

Personas

Based on the user interviews, I defined the three target group profiles to better empathize with my main user groups and prioritize goals according to their needs.

Three personas that I came up with when designing

Thinking about the people who may use the app 🤔

Information architecture

In order to build out the structure of the app, I created the information architecture. And to clarify, think of a "topic" as a space where discussion rooms, all tasks, and my task will be present.

First version of the information architecture

(Another) wait a minute...

It looks like this project was going at a natural flow. But in reality, it wasn't. Especially when I began to build the app's structure, lots of confusing logical questions came up.

TChat strives to integrate team communication and task management in one app. When I delved deep, a lot of questions popped up:

A list of questions I ran into when I was designing

Hmm....😓

Throughout the project, these questions revolved around my head as I iterated my designs over and over again.

And that's why initially I called the space "topic" because I couldn't wrap my head if the tab should be "groups" or "project". "Topic" was my first attempt to integrate those two concepts.

Wireframing + concepts

With these questions in mind, I drew out my first design iteration sketches on paper. After paper prototyping, I created mid-fidelity prototypes, which I supplemented with clickability using Figma.

Paper wireframes for tchat app

Some the earliest sketches 🙈

Mid-fidelity wireframes for tchat app

The first version of the mid-fidelity wireframes 📱

testing

Time to validate my designs

After the initial design iteration, I then conducted user testing with 6 people from different industries and ages.

Testing 1

The people who participated in the first round of the user testing

The people who helped test my early concepts 🤩

Testing 1 / Insights

A question mark icon on a red background

What is a..."topic"?

People have different definitions for the word "topic". It was not the right word and definitely not intuitive enough.

A hide icon on a red background

I can't see tasks in individual chats

This is available in the "topics" section but not in the individual chats section. That's a problem.

A folder icon on a red background

Do I need a "Topic Folder"?

In my first prototype, I tested out "topic folders", which I thought will be good for organization. But it ended up confusing most of the testers. Thus, I eventually took it out.

Change 1.0 | Naming + information architecture

I changed "topic" to "projects" because generally people are more familiar with the word "project." I also added group, all tasks, and my task into individual chats since testers mentioned that they can't see their tasks in individual chats.

Change 1.1 | Additional features

I used a checklist to allow multiple assignee for a task. I also added the user himself as one of the options for assignee at the top of the checklist. I've incorporated the reminder feature into the task creation process.

Additional features I added after testing (multiple assignee and adding reminder)

Change 1.2 | Logic

When an user assigns a task, he can choose if the task is linked to a project. The logic ensures that all tasks assigned, regardless if it's linked to a project or not, will be recorded and visible to both the assigner and assignee.

A typical flow of how a user creates a task and links to the project

Testing 2

This time, I wanted to test the effectiveness of changing the word "topic" to "project" and other features.

People who participated in my second round of testing

The people who helped test my second concepts 🤩

Testing 2 / Insights

A tab icon on a red background

Too many tabs

This conflicted with the logic of the system, so I had to rethink it and change the information architecture after this testing.

A icon with an avatar and a check mark on a red background

Can I agree to tasks

This was the first time hearing this feedback, but it did make sense. I imagined this action would be taken place in the chat group.

A filter icon on a red background

Add filters + sorting

This was suggested by most of the testers.

Change 2.0 | Naming + information architecture

I've combined "Projects" and "Individual Chats" into a single page called "Home." In the new structure, both a "group" and "individual chat" will have three features: chat room, all tasks, and my tasks.

A group is flexible in its use. Users can create one for a project. Users in the same department can create a group. It really depends on what the user wants.

Change 2.1 | Bottom navigation

Since I combined "Projects" and "Private Chats" into one page, I adjusted the bottom navigation.

Change 2.2 | Home page UI

I've updated the home page by integrating "Groups" and "Individual Chats".

Change 2.3 | Filter system

I've added a filter option to filter the tasks by groups.

A user flow of the filter system
final designs

Introducing groups, private chat, and tasks

As my first ever end-to-end product design project, I was extremely proud and happy with the work I've created! 

A series of app mockups with the tchat logo on the side on a green background

Results of two months filled with trial and error 😸

learnings

We’ve come a long way...

I’m very proud of how this project turned out. Every step of the process was a valuable learning opportunity, and I’m grateful for the opportunity the founder gave me and the other interns.

01 | Entire UX Design Process  🛣️
Because of this project, I went through the UX Design process and learned new skills such as interviewing, desk research, data synthesis, and more.

02 | Importance of interviews & testing  📝
In my mind, I might have came up with the “perfect” solution. But normally it’ll get demolished after I speak to potential users, so it’s crucial to not stay in a small bubble. Talk to users!

03 | How to deal with design blocks  😥
Design blocks were extremely common for me in this project. I found some ways to deal with it: Look at how existing apps do it, discuss with others, take a break.

04 | Design rationale  ⚡
Be intentional with every design decision. “I decided to change the bottom navigation because multiple users mentioned that the current one contains too many destinations."