Widget interface for Chat-bot on the website
Describe the project for which the interface design needs to be developed:
Chat bot, widget on the website
Brief scenario of user interaction with the interface:
User pain point: Get an answer to their question
The user visits the website and opens the chat bot widget, asks their question, and selects the most suitable answer from the list.
After reading the article, they can send a complaint by clicking the “no” button, or leave their contact information in the chat after clicking the “Contact me” button.
The user can send their question using an audio message by clicking the “Microphone” button, which will start recording audio.
The user can click a button to listen to any message (for example, an article)
When entering a message, the user is shown input hints with possible questions.
Main interface elements:
Currently available:
The history of messages between the bot and the user is saved
Buttons for selecting articles (from 1 to 5) and action buttons “Yes”, “No”, “Contact me”, “Didn’t find my answer” (you can see an example on the website - ask the bot a question)
Highlighted links and email in the text
Image (avatar) of the bot, operator, and user
Audio input of the message
Hints when entering a message to select the most suitable article
Audio playback of the “response” and questions suggested by the bot
Chat bot widget icon, clicking on which opens the dialogue window.
For further implementation:
The bot can switch to an operator without any action from the user (possibly changing the bot's image, notifying that a technical support operator is currently communicating with you)
Displaying images and videos in the dialogue (from both the user and the bot)
File sending
Is it necessary to use visual images, characters in the interface design?
Characters: Bot, User, Technical Support Operator
Interface language:
Russian language
Do you have a website and corporate style?
https://xn--80aaj5aiiy2b.xn--p1ai/index.html?system=faqsamozanyatie - EXAMPLE of how the CHAT BOT currently looks on the website
https://asknpd.ru/ - landing page
Application asknpd.ru for IOS and Android
Should the interface be in corporate style?
No (fresh ideas are needed)
Specify the main and additional colors that should be used in the interface design:
Colors - at your discretion. Colors will change automatically from the personal account. UX is the primary concern.
Is there a prototype of the interface?
Attached are screenshots of the chat widget, which requires a complete redesign of the widget's operation mechanism.
What do we expect from you:
An unconventional redesign of the existing widget, taking into account the implementation of additional functionality and stylistic direction.
Colors, fonts, and icons will be changeable in the personal account.
Опишите проект, для которого нужно разработать дизайн интерфейса:
Чат - бот, виджет на сайте
Краткий сценарий взаимодействия интерфейса с пользователем:
Боль пользователя: Получить ответ на свой вопрос
Пользователь заходит на сайт и открывает виджет чат - бота, он задаёт свой вопрос и выбирает наиболее подходящий ответ из списка.
После ознакомления со статьёй он может отправить жалобу, нажав кнопку“нет”, либо оставить свои контакты в чате после нажатия кнопки“Связаться со мной”.
Пользователь может отправить свой вопрос при помощи аудио сообщения, нажав на кнопку “Микрофон”, которая включит запись аудио.
Пользователь может нажать на кнопку и прослушать любое сообщение (например, статью)
При вводе сообщения пользователю показываются подсказки для ввода с возможными вопросами.
Основные элементы интерфейса:
Доступные сейчас:
Сохраняется история сообщений бота и пользователя
Кнопки выбора статей (от 1 до 5) и кнопки действий "Да"," Нет", "Связаться со мной", "Не нашёл свой ответ"(пример можно посмотреть на сайте - задайте вопрос боту)
Подсвечиваемые ссылки и email в тексте
Изображение (аватарка) бота, оператора и пользователя
Аудиоввод сообщения
Подсказки при вводе сообщения для выбора наиболее подходящей статьи
Аудио воспроизведение “ответа” и предлагаемых ботом вопросов
Иконка виджета чат - бота, по нажатию на которую открывается окно диалога.
Для дальнейшей реализации:
Бот может переключить на оператора, без действий со стороны пользователя (возможно замена картинки бота, уведомление о том, что сейчас с Вами общается оператор технической поддержки)
Отображение в диалоге картинок и видео (как со стороны пользователя, так и со стороны бота)
Отправка файлов
Нужно ли использовать визуальные образы, персонажи в дизайне интерфейса?
Персонажи: Бот, Пользователь, Оператор технической поддержки
Язык интерфейса:
Русский язык
Есть ли у вас сайт и фирменный стиль?
https://xn--80aaj5aiiy2b.xn--p1ai/index.html?system=faqsamozanyatie - ПРИМЕР того, как выглядит сейчас ЧАТ-БОТ на сайте
https://asknpd.ru/ - лендинг
Приложение asknpd.ru для IOS и Android
Должен ли быть интерфейс в фирменном стиле?
Нет (нужны свежие идеи)
Обозначьте главные и дополнительные цвета, которые нужно использовать в дизайне интерфейса:
Цвета - на ваше усмотрение. Цвета будут меняться автоматически из личного кабинета. В первую очередь интересует UX.
Есть ли прототип интерфейса?
Во вложении скриншоты виджета чата, требуется полностью переработать механизм работы виджета.
Что мы ждём от вас:
Небанальной переработки существующего виджета как с учётом внедрения дополнительного функционала, так и стилистической направленности.
Цвета, шрифты и иконки будут изменяемыми в личном кабинете.
Applications 4
Winning work
Violetta P.
Всем коллегам понравился результат. Видно профессионализм и желание сделать хорошо