![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a6b2bc525d79588eb0add_Typing_indicator.gif)
Helpshift's
chat experience
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
Akshar Patel
Tools
Sketch
Android Studio
Android Studio
Stylo
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.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e8400fc0eadde61e19e9248_helpshift%20v2.png)
Updated chat experience released in v6.0
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a6b2bc525d79588eb0add_Typing_indicator.gif)
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.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a3af5f9dc732ef6fba71c_Frame%2044.png)
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.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a3bc12077c012fee4a637_Group%2017.png)
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.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a7f736dcdb39eb5059a25_Frame%2043-no-shadow.png)
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.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a3e29e0689d2244e93248_Old%20Chat%20screen%20no%20date.png)
Chat screen as seen in v4.7.1
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a3e3821fcad607aa4f0ea_Old%20Chat%20screen%20with%20date.png)
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.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a69aa014db0a90ed52d08_fade_300_0.gif)
Too slow, barely visible
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a69b4b98220324523fe16_fade_200_0.gif)
Still slow and barely visible
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a69bd0f98a7160044201f_fade_100_0.gif)
Too fast, looks glitchy
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a68590f98a74b3f441c4f_bounce_300_0.gif)
Too slow to notice
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a698f4dfea5cebf9d4efb_bounce_200_0.gif)
Just about right!
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a699cc0df0c631c957602_bounce_100_0.gif)
Very fast and anxious
Released Design
A chat experience that delights the customers.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e8400fc0eadde61e19e9248_helpshift%20v2.png)
Updated chat experience released in v6.0
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a6b2bc525d79588eb0add_Typing_indicator.gif)
Introduction of a typing indicator in Helpshift's mobile SDK
Chat bubbles with intentional design choices
Every pixel was intentionally designed to create a friendly and conversational environment.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a4d879519bb28a1a76431_Frame%2046.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a6bdcc97ca25e7a82aac7_Brand_colors.gif)
Customizable style according to client's brand
Chat bubble color that matches the brand color (editable throughout the SDK.)
More contextual information about a conversation
Day of conversation and who sent a message provide more information at a glance.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a6c6ac97ca2997b82aca8_Frame%2051.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e7a6b2bc525d79588eb0add_Typing_indicator.gif)
Typing indicator to build customer engagement
Visual indication that the other person is typing retains customers and builds better customer relations.
My Takeaways
What did I learn?
1
Creating user centered designs is a balancing act between user's feedback and what we can assume about their behavior.
2
Rapid prototypes and close collaboration between a developer and a designer is essential for good designs to get into production.
What can I improve?
1
We can reduce the feedback cycle as most feedbacks took long time.
2
Development documentation would've benefitted from a developer and design collaboration.
Other Design Case Studies
BMI Audit
Defined product ecosystem and built product designs for an enterprise insurance audit service company.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c971beb866a0d583a3be2_blob%20orange.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/629fbc4344191b5ac9e84b7e_Claims%20-%20Bulk%20Select.png)
Boost
Owned designs for an outcome-driven notification apps for students and universities.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/62952db0e9bad33fc1d23ee1_blob%20boost.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/6295297b44499c61bfa0b3b4_Planner.png)
TIBCO Cloud Configuration
Helped dev teams with data replication by providing a visual data management experience.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c8b0539466aef6bcab820_blob%20blue.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c9ce0c7688b8151f67c47_tibco%20config.png)
TIBCO Cloud Scheduling
Re-imagined the application scheduling experience on cloud management applications.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c971beb866a0d583a3be2_blob%20orange.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c9deb24084b73bc4e6ec6_tibco%20scheduler.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e4cb842e19c925e098bcdbd_Group%202.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e4cb8593467633889e13b42_Group%203.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e587052f68ab80e48a6a4ce_Group%2087.png)
Stylo is a finalist for Cheng Wu Innovation Challenge 2020!
Stylo - AR Hairstyling
An augmented reality based hairstyling app that helps in communicating your hairstyle with your hairstylists.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c91fd0d48df73b848a9d7_mouse%20click.png)