• Product Design
  • Artificial Intelligence
  • Conversational UI
  • Chatbot
Wella Chatbot Kiosk
First line of support for all wella products
Kiosk Wireframe Hapibot Studio
01

Emma, Wella’s Professional Virtual Assistant will be the newly established customer support presence in many hair product stores across the World. Through the placement of kiosks in strategic store venues, Emma will be the first line of support for Koleston Perfect’s product line. Emma answers frequently asked questions and specific Koleston Perfect technical hair color and shade questions for professional hairdressers.

User Experience
Kiosk Screen Dimensions

The chatbot interface faced a layout challenge due to the limitations in customizing Android’s keyboard. Even though the kiosk supports a large 32” screen and displays a 1920x1080px resolution in landscape mode, the Android keyboard permanently occupies 50% of the screen real estate once open, limiting the space for chat. The current solution breaks the screen into 3 columns. The middle screen supports the chat interface in portrait mode, focusing the user’s eye front and center in such a large screen.

02
420 p x 420 p x 508p x 1080 p x 64 p x ke yb o a r d 436 p x 192 0 p x 72 p x chat wi n d o w input field1080p x

The left column will provide flexibility to add future quick commands if necessary, whilst the right column is left for breathing room when not used by the external URL links (more about this feature down below). By limiting the width of the conversational dialogue, the keyboard’s footprint will be contained within the chat window, instead of occupying the full width of the kiosk’s screen, thus providing the chatbot users more vertical conversational space for their “back and forth” dialogue with Emma.

Conversational UI Layout
3 3 3 3 Chatbot s t e xt a r e a Av atar 4p x 40p x 24 p x 40p x 16p x 40p x 8p x 32 0 p x 8p x 40p x User s t e xt a r e a Ca r ousel 72p x 12 0 p x 40p x 72p x 1080p x máx. 92 0 p x
Emma
Virtual Assistant

Emma is a virtual assistant with previous experience as a hairdresser, but also as a Wella educator. Her instinct and past experience with lead industry professionals gave her a special penchant for fashion and makeup trends. Nowadays she focuses on helping hair stylists by answering their doubts and giving tips. We’ve created different types of emotions so she can engage with people emotionally.

emma expression
emma expression
emma expression
03
closed_chart

"We’ve created different types of emotions so she can engage with people emotionally."

Design Elements
Color Scheme

We feel that it is always important to create a connection between the interface we’re designing and the brands we’re representing. The rich pink comes from Wella Professional’s brand, while the dark purple and it’s lighter variant are a heritage from the Koleston Perfect real-world product packaging. To tie these vibrant colors, we use light grays, that are a perfect fit for utilitarian chat interfaces and are reminiscing from Wella’s catalogs and overall visual identity.

#4E4682
#2E294E
#D31E47
#F4F5F8
#EAEBF1
04
Typography in use

The fact that the chatbot will run in an Android-powered Kiosk contributed to our decision to go with Android’s native font - Roboto. It’s a well made font that pulls all the punches on what we need for this chat interface: Readability, Balance, Feel and Weight Flexibility.

roboto roboto roboto
Wait, she's writing more!

We’re still firm believers that there’s no harm giving a little bit of personality and human touch to a chatbot. That’s why we’ve included a typing animation every time Emma is preparing herself to reply with an answer. The time the animation takes is not random though. It is proportional to the amount of text Emma is writing. More specifically, the animation calculates the number of words and estimates the approximated amount of time that an ordinary user would take to write a text of the same size.

wella virtual assistant chat
Let's chat

The conversation between Emma and the Users visually unfolds using a recognized and accepted pattern in chat products - the messages are displayed within containers while using a left or right alignment depending on who’s talking.

This approach still remains a good approximate representation of the nature of a real conversation, where two people talk while facing each other.

While we’re talking about faces, Emma is represented by an avatar. However, we felt that not including an avatar for the users, would actually contribute to increasing the feeling of identification whilst using the chat.

As a way to increase comprehension of Emma’s useful answers, she breaks her longer responses into smaller sentences. This behavior is enhanced visually through the use of different border-radius in Emma’s message bubbles, according to the amount of content within each complete answer.

Hopefully, through time and interaction with Emma, users will pick up these subtle cues in the interface. These are complementary design choices. If they aren’t noticed they don’t block users from fully using the application, but when they’re perceived, gives it a more functional and thought out feel.

conversation_new
Lots of options

Users are completely free to use the keyboard and ask Emma, using their own words, about Koleston Perfect. After all, this is a chat app.

For first time users using a chatbot that may not know what to ask first, (or users that want a quick answer without having to type), Emma is ready to offer quick answer options in the form of buttons.

These options are limited to a maximum of three at a time. They were discussed and tweaked for a long time with Wella Experts, making sure we consider the most frequently asked and important questions - and that we do so by displaying them through the most logical hierarchy and in the right position within the conversation flow.

anim_buttons

Emma’s quick answer options aren’t limited to buttons. The hair styling world is a very visual one. So when the conversation reaches the state of asking very specific questions, these are represented through the use of cards with professional photos taken in real usage scenarios or thumbnails for the videos in Wella Professional’s Youtube channel.

A small detail in these cards is the placement of a favicon on the top left of the card that gives a hint where the user will be taken to. Displaying the external link reference this way was a conscious decision, that allowed us to save vertical space within the card by not using an additional text line to indicate the link domain.

wella image carousel
New chat button

Due to the kiosk public and sometimes fleeting usage nature, the chatbot application has in place a “time-out” behavior, where after a defined amount of time without any interaction, the app shuts off and starts a Wella branded screensaver. New users coming into the kiosk would then start their interaction with Emma like they are opening the application for the first time.

new chat button image

However, in some scenarios, users may start using the kiosk right after another user leaves. There's a possibility that the previous user left without ending the chat session or where the screensaver didn’t yet trigger, thus leaving the next user with a screen with an ongoing conversation.

For these specific situations, we’ve placed a “New Chat” button in a featured position, that cleans up any previous conversation and allows everyone to have the opportunity to meet Emma for the first time and notice how charming Emma is right from the beginning.

External links navigation

The three-column solution allows for a different set of animations and content management when displaying external links. When an external link (be it a video or a webpage). is accessed, the chat window slides to the left of the screen while using the right side to display the opened link. This solution respects the requirement that we had in the desktop version where links were opened in a new tab in the background, keeping the focus on the chatbot. To revert to the original layout and close the page, tapping the “x” icon on the top right will do the trick.

Nuno Falcão @ vendap
Hapibot is easily one of the top developing teams out there. Their work is outstanding and they are always readily available!
05