top of page

CONVERSATIONAL USER INTERFACE

BUILDING CHATBOTS FOR MEDIAMARKT & SATURN AND A BACKOFFICE CONTENT MANAGEMENT SYSTEM

MISSION

​

Building conversational user interfaces is becoming an increasingly large part of UX Design.


Around 2020, almost every major company started using a chatbot on their website to help customers with their activities.

Media Markt had already worked on a chatbot for the online store a few years earlier. However, this was more of a tech test that was implemented without the support of UX Design.

In this case my goal was to conceptually and visually rebuilt and implement a chatbot, for web and mobile, that would provide the best possible user experience while taking into account the technical limitations of the time.

At the same time, we built a CMS for the countries in which it is possible to manage the chatbot autonomously.

built a chatbot

​

Before you start with the concrete implementation of a chatbot, you should have clarified the general conditions. For example, how the chatbot communicates with the customer? Does it speak very politely or a bit more amusingly? What fonts and colors are used? (In this case, they are derived from the MediaMarkt corporate identity)
What should the avatar look like? And so on.

The next step is to determine which specific use cases are to be implemented and when. In this case, the use cases for the first „Go Live“ were on the road map:

- Information about your MediaMarkt
- Product information
- FAQs

under construction

​

As you can imagine and know from other projects, that products are constantly changing. So don’t be surprised if details of the layout or the content of the chatbot have changed again in the meantime.

So now just visit Emmi in the MediaMarkt onlineshop:
https://faq.mediamarkt.de

content management system "Backoffice chatbot"

​

The chatbot is used in different countries in different languages. To allow each country to enter intents (i.e. voice dialogues) independently, we created them a CMS. The CMS allows the country experts to enter dialogues, schedule dialogues for specific actions, view customer responses in an analytics programme, compare with other countries and many more features.

My task was the conception and visual design of the back office as well as the integration and guiding of dual students in the project in order to train them in the construction of complex digital products and to let them collaborate.

 

MMS_Logo_outline.gif
LogoEmmi.png

Chatbot eMMi of MediaMarkt

previous version
VorherigeVersion.png

In the previous version there was practically no user guidance.
The visual interface was limited to the most necessary. The chatbot at that time no longer met the requirements of the online store and therefore needed a complete rebuild.

chatbot canvas
ChatbotCanvas.png
New chatbot version
NewChatbot.png

So the chatbot got a completely new interface with an appropriate user guidance. A new face in the form of an avatar, a list menu to lead the customer directly to his search request and a better version of the chat interaction between bot and customer.

informations mediamarkt
InformationsMediaMarkt.png

Customer inquiry by entering the postal code or location tracking outputs an overview of markets in the vicinity. Detailed information about opening hours and location is displayed there.

product information
ProductInformations.png

Customer searches for a specific product and is shown a selection of possible products by the chatbot, which can be sorted again via suggestion chips.

Question & Answer
Q&A.png

An overview is displayed to the customer for the answers to the most frequently asked questions. The selection of a category leads directly to the detail page of the online store.

EmmiTalk.png
backoffice chatbot
Gruppe 2361 1.png
Bild 28.png

The chatbot is used in different countries in different languages. For every country there is an overview with maintained dialogues and satistics.

Bild 29.png

Input mask in which the user can enter dialogues. A suitable answer to a potential customer enquiry is provided for the chatbot.

bottom of page