Redesigning Helpshift's chat experience

Helpshift's
chat experience

I help Helpshift revamp their customer relationship experience for their clients.

Helpshift's Chat Experience

The Challenge

Helpshift’s mobile customer relationship APIs need a UI redesign which improves the experience of it’s client’s customers as they update their mobile Software Development Kit (SDK) from v4.7.1 to 6.0.0. Helpshift works with clients ranging from SuperCell, Vivino to Microsoft.

You can take a look at Helpshift's released documentation and development guidelines for this feature.

Role

I co-designed and iterated on the designs with the Product Designer. I also developed the UI elements which were released.

Duration

2 months

Team

Piyush Dawande
Akshar Patel

Tools

Sketch
Android Studio

Stylo

augmented reality

ios Design

AR prototype

Stylo is an augmented reality based hairstyling app that communicates your hairstyling preferences with the hairstylists. We met and talked with hairstylists and customers around Bloomington and found that finding the right hairstylist is a difficult task. Similarly, hairstylists want customers to see the the hairstyles they create and choose based on what they like. Communicating the right style is an issue both the customer and hairstylists face.

Stylo addresses these issues by creating a platform for hairstylists to put up the styles they have done in the past. Styles recorded with the app have 3D models which the customers can try on themselves using AR before deciding what to choose. These models are editable so the customer can customize according to their will.

Research methods

Interviews, Contextual Inquiry, Artifact Analysis, Journey mapping, Collaborative Ideation

Design methods

Co-design workshop, Body-storming, Rapid Prototyping.

Released Design

Here’s a sneak peak of the final designs what were developed and released. You can skip to the feature list, or look at the documentation at Helpshift’s page.

Updated chat experience released in v6.0
‍

Introduction of a typing indicator in Helpshift's mobile SDK

User Interface Analysis

The broken chat experience

Inconsistent color palette

The customer's message bubbles haven't been updated in a while. The green color is not editable by the clients and often does not compliment the styling clients use on the SDK.

Helpshift’s old chat experience in SDK v4.7.1

Lack of chat bubble for media files

Till SDK v4.7.1 image and other media files are shown with the same text message bubble, which do not look polished or well designed.

Non scalable bubble assets

Due to the lightweight size of the SDK, current bubbles are compressed PNG files which get pixelated when scaled and cannot be edited once released.

Blurry low resolution bubble images used in the application

Design & Prototyping

Ideating a better User Interface

1. Creating chat bubbles that encourage conversations

Me and Akshar began by focussing on the shape of the message bubble. Iterating on different ideas and concepts, our goal was to create friendly bubbles that look inviting and helpful. Further, the bubble styling show be universal enough to go with different brand styling that clients use.

Snapshot of some iterations of the chat bubble that were created.

2. Restructuring information about chat bubbles

Once we had some bubble design narrowed down (not reflected in the images below), we focussed on the information provided in the chat screen. In the earlier UI, Message text and date when it was sent was the only information available.

We iterated to create a design that has more information like a group of text messages sent together, name of the customer support agent who sent the mail (Vivino Support in this case) and messages grouped based on the day of the conversation.

Chat screen as seen in v4.7.1

Changes to information structure on the chat screen.

3. Proposing a new feature: typing indicator

During the redesign and testing, me and Akshar saw that a typing indicator would really help the customers and the support agent know when to engage in active conversation by knowing that the other person is online and typing.

This is a trivial feature in a lot of messaging applications and should be introduced to Helpshift's SDK. We proposed this design to the Product Managers and subsequently designed better typing indicators.