Because our Customers have a lot of data about many topics, we were faced with the challenge of designing chat that would still be organized to each topic. This was a completely new feature, so there was no old version to iterate upon.

Reasons for the project

  • Leadership wanted a way for users to talk about their work and increase their collaboration
  • It would be excellent to demo during Sales pitches
  • We wanted to increase user engagement of our product
  • UX research showed frustration with user's current primary method of communication - email
  • Keep Buyers (key Customer stakeholders) excited with new features

Constraints and Collaboration

I co-led project this with 1 other designer, a PM, and 7 engineers on this project. We kicked the project off with a Joint Application Design meeting where we aligned on expectations and goals. We also had weekly check-ins with the whole team.


Phase 1: Discovery

Usually when iterating upon a feature, we collect UX research data through the following ways:

  • Internal feedback tools: users can log feedback and bugs through our app
  • Feedback collected from the Customer Support team
  • User Experience interviews

However, this was a completely new feature so there was no pre-existing feature to gather feedback on. Through past interviews with Customers, they had expressed frustration with emails. They noted that:

  • emails would get lost in the digital shuffle
  • waiting a long time for coworkers to respond
  • they wished they could send quick adhoc messages instead of spending time to craft a formal email message


Phase 2: Define


Goals

  • Enable user to compose and send messages
  • Emoji reactions
  • Ability to upload file
  • @ mention users
  • Main left nav notification
  • System messages


Phase 3: Develop

We explored and iterated upon many different aspects of this feature, including: 

  • Text Input Bar
  • @ mentions
  • Left Navigation
  • Chat Anywhere

Text Input Bar

We played around with different ways a user could input text into a Conversation. Below are iterations of the text input bar. We created prototypes using AdobeXD and presented them to users for testing. Users preferred having the icons grouped together on the right side. The second-to-last design was implemented and was live for about half a year before being restyled to the last version.

@ mentions

We wanted a way to @ mention specific people or groups.



Competitive analysis

We researched how industry leaders designed their @mention functionality (Facebook, Twitter, etc)


User Testing

  • Clickable prototype
  • Constraints - with more resources, would have liked a typeable prototype

Below is an @mention exploration.

Below is the final @ mention implementation


Main Navigation

In the main navigation, we wanted users to be notified of activity in Conversations they were following. If a user is @mentioned, a green badge appears to the right of the Record name. If there's activity in a Record a user is following, the text bolds and becomes whiter. Below is the main navigation design.

Chat Anywhere

We created a feature called Chat Anywhere so that users could use this mini Conversation feature even if they were on an entirely different screen. The goal was that users could easily talk about their work while referencing it. We created a prototype to test out different widths of the chat and the expand/collapse functionality. Users liked the smaller width better and did not have issues opening up and using the chat.

Phase 4: Delivery

Because this was a new feature, we allotted time for beta testing. We released this feature to select users to allow them to test it; overall, the feedback was very positive. One aspect users did wish they had was more indication of presence. They wanted to know who else was online and when someone else was typing. These were features we had already identified and had wanted, but didn't make the cut for the MVP. However, we had some time after the release, and were able to implement these features afterwards.


The green dots indicate if someone is online

Final Thoughts

Our defined goals for this project were achieved. The # of messages posted increased by 73% over the course of a year. Today, over 13,000 Conversation posts are sent monthly.

A few features and stretch goals, such as being able to view the members when mentioning a group, weren't implemented due to engineering resource and time constraints.

After the release, we had time to implement additional tweaks based on feedback. Users wanted to know who else was present in a Conversation, so we included an indicator denoting if someone else was typing in the same Conversation.

Users reported back being appreciative that they didn't have to use email as much anymore. One piece of feedback was that after a vacation, users would be overwhelmed by the notifications in their main menu and had trouble keeping track of all unread messages. As a result, we implemented an Unread Messages digest in Home. Below is the link to the Home project detailing that design process.

View Home Productivity Center Project

6 months after release, Conversations went through minor cosmetic changes to match Winmore's rebrand. Below is the final design with the visual rebrand.


Conversations Chat Tool

We wanted to enhance communication between individuals and teams via a chat feature.

Role
Product Design
Time Frame
3 months
Company
Winmore

My Work

View other projects