Chat UI Upgrade

Design Process Overview

Deliverable: Wireframes
Programs: Axure RP 8

img01


Our chat system was clearly outdated visually, but on top of that there was opportunity for a better user experience with regards to error handling, space conservation, and information chunking.

The Problem

img01
img01

The Ingenious Med application includes HIPAA compliant messaging between users, but the experience using it is so bad that it hardly gets any use. It was assigned to me to add some new functionality to the chat system (the ability to delete a thread), but I decided to give the whole system a facelift. I noticed several problems with our current implementation:

  • UI looked outdated
  • Too few chat bubbles were visible at once
  • Every message included a timestamp, cluttering the screen
  • Messages did not appear to be linked together, even if they were sent seconds apart
  • Errors were not easily identifiable

Discovery

I spent a lot of time investigating several popular messaging systems, like Messenger, iMessage, and What's App. I compared interactions between all of them, noting when they agreed and when they chose their own solutions for things like error handling and time stamp visibility. I also looked up several HIPAA compliant chat systems to see how they compared to both ours and to the popular ones.

Design

Design started with new chat bubbles. I wanted to group chat messages by timing so that continuous thoughts would appear connected, and I wanted to update the look and feel. Because chat bubbles are the heart and soul of the messaging system, it was the optimal place to start. Having rounded edges allows us to have clear and defined outward edges, but by having hard corners between messages they all appear as a single block. I incorporated timing logic in my designs for when to group messages and when to start a new block.

I then moved on to including all the secondary information, like the sending user's name, the time stamp, and any potential errors. I wanted to move to a more consolidated UI for these items, to reduce distractionary signals and keep the focus on the messages. For the users' names in a group chat, I moved to their initials and confined them in a circle by their message. But I also incorporated the grouping logic above and only showed initials for the last message in a group. For time stamps, I didn't want to get rid of any functionality that we currently offered, but I did want to reduce clutter. To achieve this, I created another timing rule that after ten minutes of inactivity we would show a time stamp, and for all other messages the time stamp would be available on tap/click of that message bubble. Errors would be shown under the message they affect, similar to the other systems I investigated in discovery.

img01

Delivery

This enhancement ended up being more valuable to our mobile users than web, so it was prioritized higher. I have designs for all systems, but to date it has only been implemented on iOS and Android. Our primary users are physicians, and they use mobile more than web. Our web platform is more heavily used by our administrative users.

img01