Hey Chris, let’s go!

Using your smartphone while driving is dangerous and illegal in many places. Chris lets you do everything with voice control, interacting with your device like a friendly co-driver.

Simply say “Hey Chris“ to use essential smartphone functions behind the wheel: navigation, WhatsApp, SMS, phone calls and music.

In late 2016 I was asked by German Autolabs to ideate and design a user interface for a circular, zero-touch device called Chris. The GUI had to be glanceable and with low information density, keeping focus on one content object at a time. The primary inputs would be speech and gesture.

Additionally, safety would be paramount: all interactions with Chris needed to be optimized for safe use in the car.

Messaging

Final script for the messaging service

Navigation

Final script for the navigation service

Next steps

There were two important challenges to overcome in the Kickstarter campaign: effective motion design for a product that was still an early prototype and buy-in from marketing. I designed the individual screens in Sketch, outlined animations and transitions in Flinto, and finished them in After Effects before passing them on to the video production team.
Finally the developers received a Sketch library containing all user elements, as well as a complete specification and documentation of the GUI. Everyone was happy – even marketing.

Funded

We chose a crowdfunding platform to access to a community of advocates and early-adopters who would support the product idea and help to make it a reality. The Kickstarter campaign was very successful, raising over $300,000.

I was fascinated from the very beginning by the passion and professionalism of the two founders and the brilliant team. I experienced rapid company growth from early on: the Kickstarter dynamics and the challenges of a multinational Berlin start-up were invaluable learning experiences.

In the later development of the product, we always maintained our original Kickstarter philosophy, clean, safe, empathetic design principles to make peoples’ lives better. Think, repeat.

Final kickstarter video

As the project moved forward, we needed to better understand the desires and emotions of our users, and their hesitations or concerns during a customer journey.

We defined phases such as discovery, research, purchase, unboxing, onboarding and first or regular use. Then we established tasks, questions, touch points, emotions and pain points, using previously defined personas.

360+ sticky notes

I had already conducted several customer journey map workshops before planning this particular one, together with our product and UX designers. Afterwards, we presented and printed the results in the company's lounge area, since we were particularly interested in non-UX designers opinions and feedback, a crucial stage in the empathy journey.

The following month we isolated sections to iterate and research in granular detail.

Creating a product in a relatively new and unknown field (a voice assistant for cars) made it necessary to develop our own tools and programs, which simply didn not exist at that time.

Prototyping

In order to better understand, present and discuss the current GUI in conjunction with the VUI, and due to the lack of voice-driven solutions, I started to develop a prototype in Framer Classic using TypeScript and Web Speech API.

Together with our UX Designer we kept a small GitHub repository and improved the prototype, which helped us to better communicate internally with developers, users and the product owner.

Christophorus: A Chris Framer Prototype

Finding ideas for gesture animation using Framer

Cut-out and paste

A few times it helped to go back to the physical drawing board, move things with human  hands, and better understand the different steps that were required.

Making and using a paper prototype was not only great fun, it also helped to understand, quickly develop different variations and finally focus on the essentials.

Inspire, ideate & implement

During the inspiration phase, we collected a lot of qualitative data by conducting interviews, observing people while driving, exploring analogous situations, writing user stories, analysing competitive products and assessing initial ideas with card sorting.

One outcome from both the qualitative and quantitative data was that current customers predominantly used the assistant for navigation. Additionally, our research revealed that current and potential users were expressing interest in safety features.

The subsequent ideation phase was characterised by creating a variety of ideas around the theme of safety, visualising the most feasible ones through mockups and user dialogues and relating these ideas to the original problem statement.

Card sorting workshop with Nicholas from Customer Support Team

Collecting Assumptions & things we don't know yet

Brainstorming on Interviewpartners, methods and contexts

Key findings of our observation in a human-only situation:
The co-driver acts as a team player, helping to keep the driver's stress level low or reassuring the driver in a complicated situation.

The delivered design strategy: Augment the navigation domain of our assistant by dynamically suppressing incoming information or announcing upcoming complex and high-risk street segments.

Besides working on various UX tasks with the still relatively small but highly effective UX team, one of my main tasks was to further co-conceptualize, create, animate, improve, implement, communicate, test and document multiple designs.

Modularizing the design

With a growing team of designers and increasing project complexity, I saw the need to divide different parts into specific libraries. With the division of basic components such as symbols, illustrations and styles/modules into core libraries, plus an additional template library based on these libraries, it became possible to quickly iterate flows and experiments based on these templates without having to deal with the core components. Being the owner of the libraries, I also made sure that changes were communicated in our weekly design reviews and through dedicated Slack channels.

The different naming conventions in iOS, Android and Embedded were a particular challenge. Consequently, one of the most important lessons for me was to agree on naming conventions and functions with the developers of the different departments at a very early stage and to focus especially on the documentation once things had been agreed upon and were operational.

Later in the project we completed our internal documentation with regard to our goal to move into the B2B area with elements including UX Mission and Scope, Design Principles, Motion Design & Transitions.

Library architecture

Redesigning the interface

As lead interface designer, I also had a regular exchange with development, hardware, marketing, testing, support and management. Through frequent communication of designs and ideas in our monthly demo day, the project was made available to a wider company audience. I also printed out various screen posters and placed them throughout the company, which helped to identify changes and further foster discussion.

Initially, we used our own internal wiki to document the various specifications, dimensions and style guide as well as patterns and templates for Embedded, iOS and Android. Later we directly moved on to Github.

Typography Styles

Colors & Usage

Iconography

Device Templates

App Templates

Device Modules

Image Dimensions

Illustrations

Applying design principles, developing and questioning them further, building and discussing designs and starting from scratch, were all part of the process. Here is a selection of some of the ideas and projects in no particular order that I worked on with our great team:

Startup-Animation

The Chris device needed a branding moment, the first thing you experience when you switch it on (or turn it off). I experimented with drawings, Sketch and Flinto, and finally created the animation in After Effects. Due to the limitations of the embedded hardware, I exported several single frames, which were then implemented and animated frame-by-frame by our hardware designer.

Startup-Sequence

Navigational Enhancements

While developing various designs, I always had to think about what could be visually left out or reduced. In the navigation domain, this posed a particular challenge with our small display and our safety-first drivers’ principles. I worked up a Live Map concept with a visually-reduced approach.

Multitasking and cognitive load

One of the unique project requirements was to be able to continue to show navigation and instructions during an incoming call or message.

This can be critical at certain moments, as it can massively increase the cognitive load on the driver. Imagine trying to navigate a complex, unfamiliar roundabout while receiving an incoming WhatsApp message. We decided to suppress calls and messaging in certain situations, and I created appropriate motion design patterns that we were using throughout the project.

Gesture moves in

Gesture moves out

Gesture changes

Gesture appears

What do you want to say?

A good example of a concept where GUI & VUI had to go hand-in-hand was when sending a voice message (while driving). Sketch & Flinto were my good friends here again.

Sending a voice message

Working on such a complex project requires many different experts. I had the opportunity to come into contact with over 50 employees in one way or another and was able to learn so much.
The closest contact I had was with my colleagues from the UX/UI team – without them none of this would have been achievable.

In particular I would like to thank the following amazing people:

Patrick

Founder, Chief Product Officer

I had the opportunity to work with Patrick from the beginning after he invited me to join the team as a freelancer, and later as a permanent employee. He is of course not only one of the founders and the product owner, but also a pioneer and initiator of concepts around digital assistance. Above all, he is a great person with whom one can work very easily.

In the beginning we worked very closely together on the Kickstarter project, and later I appreciated his continuous valuable advice in our weekly design reviews. I especially remember his infallible logic and clarity, his eye for the big picture and, above all, his constructive criticism for further improving the whole product.

Patrick on LinkedIn

Oliver

UX Researcher

Oli and I worked together in a small but highly effective multidisciplinary UX/UI team on paper prototypes, customer journey maps, testing and questioning several users on a regular basis, doing weekly drive tests, and organising human-centred design sprints.
He has a very quick grasp, a distinct empathetic way of dealing with people and excellent communication skills.

We shared the same mindset from the very beginning, and we also enjoyed working on UX projects and courses outside of Chris. I follow his further professional career with delight.

Oliver on LinkedIn

Minna

Head of UX

It’s a great pleasure to work with highly experienced people. From the beginning, Minna supported me and often gave me the freedom to work intensively on topics like motion design, visual exploration or design systems. Our joint UX workshops were always a great enrichment, both didactically and in terms of outcome.

She was not only in charge of research, concept and all work related to UX, but also felt responsible for her team. Minna is a wonderful listener, advisor and above all has a special eye for good design and attention to detail.

Minna on LinkedIn

Rémi

Head of Design

Over the years I have worked with a number of product designers and always felt a gap between them and myself as an Interaction/UI/UX designer. I was happy to meet Rémi because I immediately felt that he fully understood that hardware and software had to work together seamlessly to deliver a great product.
I had the pleasure of working very closely with him on an innovative voice-first product right from the start.
Besides his enormous skills in product design, UX and illustration he is also a a very sincere and creative person to work with.

Final note: Don’t start playing table tennis with him. You’ll lose. :)

Rémi on LinkedIn

Special thanks go to my magnificent wordsmith Rory for proofreading.

Thanks for reading!

Американская фирма Transceptor Technology приступила к производству компьютеров „Персональный спутник“ The what?