Chat Bubble

Research

In this steps, we needed to define the areas where we need to work on according to our existing product

1. Evaluating existing customer support chat experience

In order to analyse, we need to first get the context of the problem and experience the whole chat initiation process and chat tracking in the app.

Initiating a Chat

Tracking a chat or following the converation

Swipe to see more screens

Problems with existing flow

Tracking and accessing the initiated chat is much difficult

User sometimes misses push notification for chat updates which leads to dissatisfaction in users and they get annoyed

No clear communication about whether the chat has been assigned to a customer executive or not, users tend to miss information when it is in bulky text message

Issues are not mentioned in the chat screen, so in case of multiple issues there is a chance that user might get confuse in tracking multiple chats

Ideation and Iterations

After Identifying the key areas to work on, we ideated on the solution around the identified problem

Key areas that we focused on were (post discussion) :

01. Chat updates

- Improved communication or notification about chat initiated by the user
- Easy tracking of ongoing chats

02. Handling Multiple Chats

- Improvements on chat experience of multiple chats

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Userflow demonstrating addition of Chat Bubble

Iterations for Chat Bubble icon

Since, Chat bubble is a small floating element we iterated on multiple chat icon designs so that chat bubble is easily visible for the user and it grabs attentions easily on new updates of our chat

# Iteration 01

- Showing different icons by Initials of the issue raised by user
- This will directly open new message in chat bubble
- But this was not easy to locate

# Iteration 02

- Showing different icon, for one type of chat through which user can open new message received
- But this idea was hard to develop and efforts were more

# Iteration 03

- Common icon for all chat, further there will be more icons for issues inside it
- Visibility is better since the contrast is better here

Restricted Area in Homepage

User won't be able to drag the chat bubble on top of some crucial things placed on Homepage like :

- Hamburger Menu
- Bottom Navigation
- City / Country Selection
- System Bar

Final Flow

Incorporating all the things. Following wireframes were finalised

Chat Bubble Initiation

- Chat bubble appears automatically right after going back from chat to :

1. Home screen
2. Ride tracking screen
3. Help section
4. Past ride history screen
5. My rides screen

- Fixed position of chat bubble on bottom left corner so that people can recall and they can freely move it anywhere but the default position will remain the same

- Chat bubble shows new message signifier on top of it and even count of it

Single Chat Scenerio for Chat Bubble

- Notification clears out once user see new messages from either chat bubble or main chain screen

- Chat head represents each type of issue which are actually the first letters of first and last words

- Chat list have all chats which are active and not resolved by customer experience team

- Chat list have fixed height and its scrollable to see entire list

- Chat window opens entirely, so that user can se more messages and scroll to see chat history and revisit the conversation

Multiple Chat Scenerio for Chat Bubble

- Customer experienced showed that users opens maximum 2 chats at a time, so we kept only two chat head at a time that can be visible for a user

- Users can switch easily from one chat to another and it gives space to most recent chats only

Closing Chat Bubble

- Chat Bubble closes only when long press it and drag it down to close icon (which appears while you hold the chat bubble)

- Users can also close individual chats while dragging individually it towards close icon that appears post holding it

- But if user close the main chat head (chat list head), then whole bubble will close

- Once it initiates, it will stay forever until or unless either user closes the app or close it by themselves