Chatnels logo

Building and scaling a conversation-driven community for business

To comply with my confidentiality agreement I have omitted and appropriated confidential information. The information in this case study is my own and does not necessarily reflect the views of Chatnels Software. The designs are a reinterpretation of the original.

Case Study Banner - Chatnels
Project SummaryChallengeApproach & DiscoveryVisionRequirementsFramework
Result

Project Summary

Chatnels is an all-in-one chat screening and routing platform for business to manage client service workflows and navigate their clients to the right people at the right time.

The platform helps business to streamline engagement throughout every step of the customer journey by centralizing all chats into 1 hub, automating client communication with chatbot and providing tools such as share inbox and chat management to succeed as a team.

At the time of the project, the Chatnels team wanted to expand their team talents. I was fortunate to join the team on this project during its early beta development.

Project Details

Role:

UX Consultant, UI Designer

Team:

Project Manager (CEO), Development Team

Web Application
Live Chat
Chatbot
UX Design
User Interface

My Role

Chatnels Software Inc. was a startup company with a small team of developers when their platform, Chatnels, was having a major overhaul for its next iteration. At the time, their team lacked UX/UI and graphic design talents. The CEO reached out directly to me to fill in for the role as a freelancer. I worked collaboratively with the team to provide all related deliverables for the project.

The Challenge

Changing Concept and Repositioning

Chatnels first started as a digitalized message board aiming to enhance traditional bulletin board commonly used in community centres and classrooms. Shortly after I joined the team, the concept quickly became infeasible. It required a reposition to shift the platform specifically for business use to remain feasible.

The original message board concept
The original message board (channels) concept quickly became infeasible.

The Approach

Revisit the Beginning

Having to reposition the platform meant restarting everything from scratch. Although I wasn't deeply involved in each process, I had witnessed the Chatnels team in various stages from conducting user researches to developing the platform. One of the approaches that I found extremely useful at the beginning was using the Five W's and One H method to reidentify user needs and wants. With this exercise, all team members understood what the new platform should accomplish.

Five W's and One H
Using the Five W's and One H Approach

The DISCOVERY

Disconnected Communication Workflow

Digitalization in business often fails due to the lack of integration between communication workflow and people. Digital silos within organizations also create barricades—slowing down, sometimes results in loss of essential communication, and consequently, loss of clients and business in the long run. Chatnels can remove all those friction and help business to digitize their workflow, streamline communication, and scale engagement.

The Vision

Identify End Goals

Chatnels is built upon the main concept of streamlining communication workflow. The platform aimed to achieve the following end goals:

Connect

Invite members to join conversations and conference outbound participants into the workflow.

Route

Direct inbound requests to the right people in an organization.

Automate

Optimizing work time without sacrificing work quality by automating static conversation and focus on engaging in more complex, meaningful conversations.

Inform

Provide users with timely information that are relevant and valuable to them.

Outline Key Features

The team then outlined the following main features necessary for the platform:

Chat Management

Manage direct and group conversations to allow team collaboration for complex inquiries.

Chatbot Assistants

Build multiple bots to provide users with the information they need, when they need it.

Community Building

Engage users with timely information and enable users to interact with like-minded individuals to create a community.

Reports & Analytics

Provide organizations with timely information that are relevant and valuable to them.

Transferable Conversations

Manage direct and group conversations to allow team collaboration for complex inquiries.

Share Inbox Queue

Avoid inbox confusion and collision by monitoring chat statuses to prioritize urgent interactions

Interactive Chat Bots

Configure bot personality customized to fit organization’s brand and provide users with the information they need, when they need it.

Build a Community

Provide users with timely information that are relevant and valuable to them.

Reports & Analytics

Provide organizations with timely information that are relevant and valuable to them.

Refocus and Revise

As we needed to focus on features crucial to the platform, we trimmed irrelevant features such as the channel wall from previous iterations that did not align with any of the end goals for the new concept.

We removed the channel wall feature originated from previous iterations.
We removed the channel wall feature originated from previous iterations.

The Requirements

Seamless Transition

Chatnels must be easy to integrate with any enterprise platforms. Simple integrations should be automated while customer support could provide assistance for more difficult deployments.

Data Security & Privacy

Chatnels must be designed with enterprise class security and data privacy for organizations to use with confidence without concerns.

Customer Support

Enterprise often needs customization to adopt a new technology, hence a diverse team of customer support from the Chatnels team was essential to provide specialized services cater to different organizations.

The Framework

User Flows

With everything outlined, I worked with the developers to restructure Chatnels into logical flows based on each user goal we predefined.

A sample user flow created using Axure RP
A sample user flow created using Axure RP.

Low Fidelity Concept

We then created wireframes and add them into series of user flows.

A sample user flow with wireframes.
Sample wireframes in a user flowchart.

Initial Usability Testing and Iterations

Through usability testing, we found areas to iterate upon. We found some tasks work better with one method over another. For example, a form on a website was more suitable to collect extensive amount of information from users while a bot would ace at taking piece by piece information one at a time. With this discovery, we explored ways to use both methods at their advantage.

Mid-High Fidelity Mockups

After a few iterations, I created sets of mid-high fidelity mockups while the developers were working on the prototype. These mockups were later implemented into the prototype.

Mid-high fidelity mockups

The Result

Continuous Growth and Evolvement

After the early beta of the project, the Chatnels team had hired additional members, including a full-time UX/UI Designer to the team so I was no longer involved with the project as a freelancer. The team has been continuously iterating the platform from the beginning as a digitalized messaging board to the today's all-in-one chat screening and routing platform to meet the ever-changing standards. I was thankful for the opportunity to work with the talented team at Chatnels and excited to discover new improvements after each iteration.