Design wireframes for Chat Bot

[kb0304]

No description provided.

[KashishJagyasi]

I’ve kept the same UI as there’s a library already created for it. there were some major problems I found which I’ve tried to solve

The agent photo on the livechat widget doesn't strike much what it might be about unless someone clicks and sees what it actually is.

• Changed the header because it was there was no way of going back to the website without losing the chat

• The dropdown was misguiding and looked like swiping the chat tab down. (I tested it on 4 users and 2 of them found t confusing)

• The 3 line + avatar was adding clutter. I don't think there's any need for the phone number of every agent.

I propose, the widget should clearly be named chat with us and put in the Right edge so that it doesn't interfere with the website text

The widget can also be safely placed on the bottom right to be in the scope of the thumb

The livechat agent handoff

2.

Livechat menu options with agent

Livechat menu options with bot

Change Department request

Quick reply ( version 1)

2.

Quick reply tap state

2.

3.

Version 2 will make more sense if the replies have to be long. Also, horizontal scroll will be a problem in the desktop view

Reply

Waiting for agent state

[ear-dev]

@KashishJagyasi Is it possible to do a side by side comparison with the designs from upstream, so we can see any changes you are recommending?

One comment I have is that personally I don't like all the square buttons. What do you think? Is there another nice button design, or do you think this is best?

[KashishJagyasi]

Yeah sure. I'll make a Doc with the comparison or post it here.
Yeah.. I was kinda going with the circular buttons before I saw this but as I said I used the library that was available. But I'll see if I can do anything about it.
@ear-dev

[ear-dev]

Thanks @KashishJagyasi . I don't think we should limit ourselves at this point, but instead make our best, most beautiful design suggestions!

[KashishJagyasi]

Changed all the components to increase the padding and make them more rounded.

Rounded components are required here because We're already using a bot and it makes the customer feel less familiar. Rounded corners give a soothing feel to the designs and they must be used wherever we're trying to build a rapport with the customers.

Also, customer support will be used mostly when people have complaints or wanna know something. Rounded components ensure that they feel a sense of geniality and avoid hesitation or frustration.

I need some feedback on the Quick reply screens. The first version will be helpful for mobile sites but it will be a problem on the desktop as using a horizontal scroll is not a good practice. Also, the second version will be better if the options provided are long threads.

You may refer to the previous comment for more details on why I changed some of the elements.
@ear-dev @kb0304

[ear-dev]

@KashishJagyasi I just sent an email to you and another designer friend of ours, Ona. Maybe she can help with some comments about your wireframes.

But also, did you show these to Ivan yet? Do you think he will be receptive to look at them?

[KashishJagyasi]

No, didn't discuss it with Ivan yet. I'm not really sure how receptive he will be but he's kinda busy with other stuff so.. @ear-dev

[dlassalle]

On the bot side, the only thing i dont see here that we want in the bot are:

• "Print chat" button
• Character limit under or on the text input
• UI for when chat input is disabled while bot/agent are performing an action (like waiting to run a speedtest)

All of these currently dont exist on the client, but we are working on them :)

[KashishJagyasi]

• Character limit under or on the text input

Just to confirm: By character limit, you mean the user will be restrained to write messages within the character limit right?

I'll Add the other things soon, thanks for the feedback :)
@dlassalle

[dlassalle]

Yep! here is an example implementation: RocketChat/Rocket.Chat.Livechat#443

[KashishJagyasi]

Wireframes for Character limit

Alternatives for options as suggested by ona.

Disabled text field UI

Change deptt UI

@dlassalle
@ear-dev