Smart assistant

Smart Assistant is a virtual assistant that can be embedded in any solution as part of a web app, mobile app, website, or existing dashboard. Retail or corporate customers can use the Smart Assistant to resolve queries, execute tasks and get smart advice. Content, skills and illustrations can be customized and extended to fit your product need.

Previewlink

smart assistant welcome page

Structurelink

Let’s inspect now more in detail the smart assistant design pattern structure.

The header section at the top allows you to maximise the view and get direct “customer support” through a video call or chat.

In the main content area, the start screen displays a human illustration you can use to personify this assistant. Different skills that can be customised are displayed to give users direct access to fulfil the most important or recurring tasks.

At the bottom, users can type or use voice commands to interact with the smart assistant. By clicking on the home icon in the header, users are redirected to the start screen.

Smart Assistant structure

Skillslink

Skills are small apps or functions that cover the most important or recurring user needs. When you select a skill, the smart assistant can act in three different ways: answer your question, offer your options to select or walk you through a step by step flow. Each step can show and combine different UI elements like cards, charts, chat bubbles, etc.

Smart Assistant skills

Conversationallink

To be close to the user, the tone and voice is a clearly “natural speaking” language. A best practice is to put emphasis on the most important information by changing the font weight to bold.

Conversational Smart Assistant

Cards & interactionslink

In the different flows that a smart assistant could cover, you can use cards to display different options in a more visual way.

Smart Assistant card

User flow examplelink

Here is an example of a user flow triggered by a skill. Motion is key to give a more friendly and natural relation with users.

Layoutlink

On desktop, the smart assistant can be opened by clicking on a fab button. It will be aligned to the bottom right part of the screen. On mobile, it will be displayed in full screen.

Smart Assistant displaySmart Assistant grid

Tools to build the smart assistantlink

Let's start building your own smart assistant!

Download the kit