Smart assistant UX/UI design

A scalable design system for smart assistants

Axon Vibe are a Swiss technology company with a focus on location-based mobile technologies.

Smart assistant blueprint guidelines

Designing smart assistants

Smart software assistants, AI, bots and agents are a burgeoning area within the technology industry, with some of the worlds biggest tech companies developing AI products such as Facebook M and Google ‘Now’. There’s almost a gold rush in creating autonomous agents that provide consumers with timely and useful information, based on historic user patterns to define future intent. Axon Vibe have a deep knowledge of location based technology and were keen to apply this to their recent ventures into the world of software assistants.

While working as Senior designer for Axon, I was assigned to a small R&D team to research, define and create a design system for Axon’s proprietary smart assistant technology. Our main focus being based around how best to communicate to users, ensuring engaging and personal moments.

We named our assistants ’Sidekicks’.

How a digital assistant works
Bot conversational flow
Smart assistant brand
Visual concepts for a smart assistant
Atomic design for mobile introduction
Atomic design for mobile example
Smart assistant digital strategy
Agent communication channels
Agent conversational structure
Design guidelines
Sport AI assistant

A scalable design system

A challenging and empowering project, the team and I were given free reign to develop and prototype an assistant design system that could adapt to the thousands of content combinations while still communicating clear value for users.

Based on our initial research, we structured workshop sessions to challenge existing AI communication models, transfer the technical work already done by Axon’s data science team and define key use cases that we can sense check along the project – to stay on track! We decided early on to avoid the chat interface taken by many AI bots (and in turn the frustrations of natural processing language), in favour of a simple and more visually interactive UI. However, a ‘conversational flow’ was core to our approach, ensuring a users’ need starts the process of Sidekicks surfacing value and learning from user feedback.

We explored designs for a singular avatar, one that would have more opportunities for user interactions than brand or topical Sidekicks’. We prototyped numerous characters and abstract forms, before selecting ethereal rings of light to represent the users own personal Sidekick. These rings can animate; shifting colour and form to acknowledge user actions and conveying a basic level of sentience and mood. A simple form is important to ensure we don’t raise expectations while avoiding pre-conceptions and the stigma of more humanoid characteristics (it’s also a nod to Axon Vibes logo).

Within the design system is an information hierarchy that defines where, when and how content is surfaced to users. As all Sidekick communications will be contextual, it’s a question of urgency and confidence. When we push information to users, it needs to be at the right time and through the right communication channel.

The outcome of the project allowed Axon to swiftly apply the design system to various projects such as the SBB Travel Assistant and Sojo mobile apps, contextually driven apps that utilise cutting edge data science to surface relevant content to users.