THE NEW MINI DIGITAL COMPANION

2022.04 - 2023.11

Background

Spike is the digital companion for MINI enthusiasts, the aim of creating it is to draw attention far beyond just the vehicle.

I joined the team at April of 2022 in its life, where there was already a version of IPA was developed by Munich team from 2020-2021 without any Chinese designers.

My work at this projects stretches from early days avatar discussion with MINI design team,to a focus on the user interfaces and iteration with usability testing in later days.

Meet the team

We are a cross country and disciplined team. Alex and Marion was the UX designer responsible for product powered by ACA (Amazon), me and Lucia contribute to the global framework with the capability from tech-stack of Cerence speech.

Steffi and Carsten were the main visual designer responsible for the whole visual asset delivery

Overview

To achieve the first critical SOP(Start of Production) 1123 milestone, over six months we developed three main features including one usability testing in Germany. Our process was wonderfully iterative,

We received the market requirement to iterate the visual and make it bold and distinctive. The Munich team gave up their first version of design as well, which they already developed for over a year, the time left for was not too much...

```
Basic Speech State Visual Framework
```
```
Multi-modality Mechanism
```
```
Emotional Avatar
```

project timeline and milestones of the first SOP1123

“Marque”

As introduced about the requirement of redesign the visual, where strategically been set as a brand embracing the digital transformation in the new models. The market requires a "Marque" that evolves with the modern technology while staying true to its roots.

We were looking for the story and concept to tell ...

There are three components as the core elements illustrate the basic speech state : typography, graphical elements and avatar.

The full usage of the three components is the scene of response to user’s activation and pure speech response dialog.This was a bold decision and approach to have the signage focused on the Avatar itself  (I will introduce some background later-on, this brought us problem as well  :)

The Minimized state is used where the visual element is contextual rather than at the center stage, for example presenting destination result etc.

The concept was developed around “playful”, through the use of fundamental graphic shapes bended perfectly into this iconic 240 mm centre display (the first circularOLED display in the world), and the avatar modeled after the original MINI mascot - a bulldog, connecting to the playful nature of MINI brand.

How did we get there?

Building up a quick low-fi wireframes at the first place always benefits the discussion and help us outline the needs there. Mapping out the completed flow of speech backend state explored the idea of dividing the visuals into two scenario (needs), instead of following the traditional minimized format, this was a big trying out as it contains the information of instrument cluster and infotainment system.

There were several concept has been developed and few of them were selected to be implemented on the real screen to be tested for realtime look and feel, which we then reviewed with stakeholders. Here below are a few proposals from some of those reviews:

Bold version in speech only screen (left)

Minimal version in speech with content screen (right)

Concept and development

These are chosen among many options after discussion and been testing in real rack screens, the dark pink stars are those works pretty good on the real screens.

theme of centric collage

Low-fi wireframes of standard speech flow

theme of circular rotation

theme of “hug me"

“UX Framework“

This is where you will find the bulk of my work with MINI IPA. The complexity of an interaction framework  like speech is deceptively high. Behind every element of the user experience lies days, weeks or even months of deeply involved product development involving a large group of people.

At the time of me writing here, the product can be categorized into the following major deliverables:

```
Basic speech states 
```
```
Snoozing (China for global solution)
```
```
Multi-modality mechanism
```
```
Emotional states
```

Lets have a look at the basic speech states:

The basic speech state indicates user visually which steps you are in a conversation, depends on the task and the round of your dialog, the state will simply either print your command and present a animated dog or when there are multi steps required or rich content needed the state will minimized themselves to a minimal state.

Afterwards what was more challenging was a China specific requirement of carrying over the snoozing feature from BMW brand.

Me and Lucia at the beginning had the idea of reusing the graphical shapes for snoozing. The idea was reduced the elements of speaking but keep the continuity of using the same visual language ,The definition of the visual behaviour is the shape of speaking state will be shirked and reduced behind the system UI (menu bar, climate slides,), the element move slower at the button of the display.

first proposal of shrinking graphical elemetns

Snoozing hint was the other requirement gave us headache as limited time was given, we evaluated several existing components in our UI library and decided in the end of using snack bar for containing the contextual command.

Hint behaviour was discussed among Munich and us as the snack bar will partially block the screen

In order to configure the general hint behaviour for snoozing. User can go to the IPA setting page to turn on/off the hint control.
By clicking on the “close” button on the bar, user can close the hint function directly from the screen. In order to reactive the hint, user can go to the IPA setting page. The hint setting can be customised from the setting page anytime

first proposal of using snack bar for snoozing hints

Back in 2022, the framework of being capable of enabling touch interaction in speech experience was not supported from Munich product pipeline, so me defined a mechanism for Cerence platform and was also later taken over to global product in 2025 product.