Existing way of accessing older conversations

Existing way of accessing older conversations

Can we make it look like one long conversation?

I was tasked to propose a redesign to our clients based on this question from a meeting. In our app that connects workers to an AI or human expert and answers questions related to their workplace rights and policies, we had traditionally allowed users to ask many questions simultaneously. The way they would access an older conversation was to navigate to it using a list like the image on the left. This gave the impression of every conversation being an independent session. This is something that the clients wanted to change since on the backend, administrators have access to a user's question history and so its alright to assume that every conversation is a continuation of a previous conversation.

single_chatroom.jpg

(1) Current Design : You could only see one converation at a time by navigating to it

2_chatroom.jpg

(2) Proposed Design : A continuous stream of conversations

The proposed solution was a novel system consisting of multiple chatrooms within a chatroom.

As shown in (2), you could scroll through multiple conversations seamlessly. If you wanted to continue chatting in an earlier conversation, simply click on the + icon on the lower right corner of the chatroom.

Demo of Selected Features

Ask a Question

The primary purpose of the app is to ask a question and scrolling to the bottom of the chatroom prompts you with just that.

ask.gif

Continue an older conversation

Every conversation has a small icon at the bottom right, that indicates the ability to add a message to an existing conversation.

continue.gif

Faster Scroll

This takes inspiration from the older ipod scrolls, a faster way to scroll one chatroom at a time. The tag of the chatroom appears as a label to help you keep find your

scroll.gif

Challenges

Syncing Multiple Data sources

  • Messages in the chat rooms come from multiple sources - a SQL database through a REST API, a Realtime web socket server, Push Notifications. Syncing these sources for every conversation is essential to display the messages correctly to the user.

Performance consideration

  • Unlike traditional chatrooms where messages enter a message queue at the bottom, in our new setup, messages from different sources could enter anywhere in the queue. How would the UI react to these erratic changes.

Usability Concerns

  • Will all this data and asynchronous change cause visual janks and throw users off?
  • This design is unlike most chats that users are familiar with, would they understand how to use it?

Process

Very early on, I knew that using some of my usual tools like sketch, envision or framer to prototype the interactions would not be apt for this project for two reasons : 

  1. Given the highly customized nature of this design, I would have had a hard time finding existing components in these design tools and would have had to make a code of customizations to get anything remotely close to my requirements

  2. I also needed to validate the capabilities and limitations of memory and performance of the mobile platform (android) 

This was one of those projects where I was ‘sketching’ with code, in that I churned out quick prototypes to validate different concerns - memory, performance, usability. Based on results of each, I would proceed or discard the idea. Since I was working directly on the actual platform I was designing for, I was also mindful of new API requirements and making optimizations on that front too.

Using standard tools for delivering beta apps, I was able to get feedback on a daily basis from clients on different aspects of the UI and nail down details and clarify doubts along the way.

Suprising Discoveries

I discovered many use cases while I was coding and playing around with my prototype on my smartphone. Things that would not have occured to our team just by looking at a visual design.

  1. We had to add visual Indicators for incoming messages to help user guide to a new message in situations when the app was closed

  2. When the app is closed and an incoming notification comes.  Scrolling to the new message is not good enough. We needed to highlight the new message explictily.

  3. If the app is open and a message arrives in a conversation that is off screen, we needed to indicate to the user which conversation to go to. We incorporated a notification icon in the sidebar.

Conclusion

The clients were pleased with the results. Like us, they were doubtful if the interactions were too complicated for their target audience to grasp. In our early tests, we haven't gotten feedback about confusions from users regarding this feature. Though I must say that we haven't seen any substantial increase in users continuing older conversation either.