Previewlink

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.

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.

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.

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.

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.

Tools to build the smart assistantlink

Let's start building your own smart assistant!