Feedback request: Chat panel experiment

[Shad]

I was working on a live chat product's feature analysis project and found some issues to share with the stakeholders. I'm sharing here on of the crucial screen and my findings on that-

Hidden Content

This board requires you to be registered and logged-in to view hidden content.

Issues-
① These icons need more visibility and space. For avoiding misclicking we may increase the spacing among them.
② This section needs improvements regarding the UI. Competitors' approaches should be checked again.
③ For the 1st time I was confused about them. Added tags are not visible. As the assisting tools, we may add a section header or lebel to them.
④ This message was sent by bot from agent end. So this bubble should be at the right side. Moreover, we might differentiate them with other colors.
⑤ Text bubble corner is top-left, but it should be bottom-left corner aligning with the timestamp text.
⑥ Two texts sent with the short gap could be merged. One timestamp will be enough.
⑦ Text input and send CTA are not aligned. And while sending the canned message it doesn’t change the [agent-name] automatically as expected!
⑧ And few other missing elements

On the next step, I've tried to solve those issues with a new UI with minimum backend changes (you know the deal!)

Hidden Content

This board requires you to be registered and logged-in to view hidden content.

Now, how can I improve this screen? And, how can I improve this design process?

TIA

[asifshahid]

Thanks Shad for sharing your progress with us. I would say the second version is looking lot better already. However few thoughts -

1. Engaged panel - Selected chat from the engaged panel can be bit more prominent. May be darker gray or orange or the darker blue from your brand. Or it can be the same colour as the teal colour which you are using for your replies.

2. What does "Done" mean here?

3. Chat bubble colour - Bot and agent chats can be the same colour. From my experience Bots can't go far by answering users questions. Even if they go far, you have thumbnails now. Currently it is looking less consistent. Or bot can have a lighter shade of the same colour.

4. Text input - If agents don't use voice-over then you can drop the mic icon.

5. Overall colours need to be consistent - chat bubble, link, tag, tag text etc.

Also I feel annoyed when the agent ask the same question again - How can I help you? I already told to the dumb bot that I am looking for some information about your services. I don't want to type again or copy what I wrote earlier, specially when I am on mobile. Just scroll up and look for yourself. This pissed me off. UX issue

[pagol]

ami quick kichu feedback..

1. ata ki mobile version o hobe ? naki only desktop. Priority konta ?
2. icon gola mismatch ase. line and fill .. shob fill or shob line hoile better
3. online, engaged, queued..ai tabs section aroo aktu meaning full kora jaite pare.. akon active tab buja aktu muskil. jodio different color and choto akta arrow use korchen tao aroo aktu chinta koren. like line separator etc. remember this kind of product making for mass people.

[Shad]

Thanks a ton Asif vai for your valuable and insightful thoughts on the design.
I've worked on the design lately-

1. Engaged panel is updated. I didn't touch that part in the earlier session as I had some observation with the tab grouping and that was out of scope.

2. "Done" means "Move this chat to Done". It may also conflict with current "Close" icon. So, I've changed it to "Close Chat" now. If you have anything else (label/icon) for this use-case, please share.

3. Chat bubble colour updated.

4. Mic dropped!

5. Brand is shifting its brand color Orange to Teal slowly. I'll try to be more consistent next time.

And I'm the responsible one for agent asking same question . I copied the chat bubble from bot message. But I've got your point, I'll check that on the implementation state.

Hidden Content

This board requires you to be registered and logged-in to view hidden content.

Looking for all of your feedback on it too...

[Shad]

ami quick kichu feedback..

1. ata ki mobile version o hobe ? naki only desktop. Priority konta ?
2. icon gola mismatch ase. line and fill .. shob fill or shob line hoile better
3. online, engaged, queued..ai tabs section aroo aktu meaning full kora jaite pare.. akon active tab buja aktu muskil. jodio different color and choto akta arrow use korchen tao aroo aktu chinta koren. like line separator etc. remember this kind of product making for mass people.

Thanks a lot for your to the point feedback vaia.
1. Desktop is the priority. Mobile user-der jonno app.
2.24px er cheye chhoto size er jonno fill icon use korechhi vaia. Er cheye boro hole line.
3. Ji vaia, ei part tukuo update korechi uporer comment e share kora design-e.

Ar kothay improve korte pari janaben plz...

[asifshahid]

Looks good to me Shad


Do you want to try Close Chat in Teal? Somehow I felt you opened a Closed Chat. May be because of all gray. During chat session agents usually don't call the user, share screen or do a video call (unless you guys do that). In that case you can hide those icons under the 3-dot menu icon. Sorry, this thought just came after seeing the improved design.

Hidden Content

This board requires you to be registered and logged-in to view hidden content.

--

I quite liked the icons with label. Although I meant to darken the selected chat like #34235235235

Hidden Content

This board requires you to be registered and logged-in to view hidden content.

[Shad]

Thanks vaia :-D

I have tried teal on "Closed Chat" label. It gets more attention with the color than other Icons. But I'll present that version too. And we need to keep those icons visible as agent might need to start 'screen sharing' or 'co-browsing' anytime and there is also features' discoverability issue from both user and business end.

I also want to keep the icons. I will bring them back after resolving the line weight consistency problem. And I will try darkening the selected one too.

Thanks again for your feedback vaia. Those versions will help me a lot in the upcoming stakeholder review sessions.