OVERVIEW

As Tribus uses the latest technologies to develop their 100% electric Movitas city bus, a state of the art dashboard had to be developed matching the same high-tech design and UX standards as used in personal vehicles.

This project was commissioned by Sioux Technologies and consisted of two parts, the first being the demo release of the bus on BusWorld2019 and the second part being the finalization of the dashboard for road use. I joined the team as the sole UX / UI designer and worked together with the UI engineers to build the dashboard.

ROLE

- UX / UI Designer
- Organising design workshops with stakeholders
- UI Design according to Automotive ISO standards
- Working directly with UI developers

July 2019 - March 2020

BACKGROUND

Tribus aims to make mobility possible for everyone. In a globalised world it is their goal to enhance people’s mobility by providing a full range of highly reliable mobility solutions that meet passengers’ needs, whether they travel in a wheelchair or not. Tribus started to develop a 100% electric city bus (Movitas) with a low ecological footprint. The powerful design is lightweight, compact and agile making even inner cities highly accessible.

I joined the team as the sole UX / UI Designer and was tasked to develop an interface for the digital dashboard. During this journey I’ve grown a lot as a designer, some of my key achievements:

• Turned a vision into a product. The process of transforming a vision into a working product has been a rewarding journey. I worked closely with the stakeholders and developers to implement our ideas into a working design. 
• Working with a tight deadline. Meeting deadlines is naturally part of every project, with the tight deadline of the Tribus project I had to go all out. With other ongoing projects and colleagues leaving for holiday it became clear a tight schedule should be maintained to keep up with the work. Fortunately I got a lot of energy from the pressure and was able to deliver the desired result in time.

UNDERSTANDING THE PROBLEM

There is a lot involved in the development of a digital dashboard. Aspects such as driver distractions, sun glare and visibility of the screen all play a role. By meeting early on with automotive experts these challenges were uncovered. A lot of research in this area is already done by the International Organization for Standardization(ISO). These ISO standards should be followed to deliver a road legal dashboard that passes the homologation of the bus.

My research encompassed:

• Getting familiar with the users (bus drivers)
• Researching vehicle grade ISO standards
• Researching design for automotive interfaces

DEFINING THE MVP

The demo release of the bus would take place at the BusWorld 2019 fair in Brussels. At this release we wanted to show off the key functionalities of the display. Because of the tight deadline it was not possible to release a fully functional version of the display. We decided to We identified the following feature screens:

• Driving screen.  The main screen which displays the speed, telltales, and the key features for operating the bus. 
• Charging screen. Displays information such as charging state and time remaining while charging the bus.
• Camera view.  Showing the camera view while the vehicle is moving at low speeds and when people are entering the bus.
• Loading screen.  The bus takes a few seconds to start. To bridge this time a loading screen has to provide visual feedback regarding the bus’ status.

PROTOTYPING

Based on the derivative idea method of innovation I started gathering current digital interfaces and analyzing them. I found that digital interfaces can be made in 4 different styles, traditional, monolithic, digital, and fragmentary style. By clustering the interfaces I managed to get a clear view of the current state of automotive digital instrument clusters and could decide, together with the stakeholders, on a design direction.

From there on I started sketching to find the perfect cluster. The final result was a cluster with the vital information in the middle, this meant that the left and right side of the display could be used for other information.

DESIGNS

After agreeing on the interface layout it was time to design the interface. For the look and feel of the display Tribus referred to their own style guide. Red was chosen as a primary color. In the picture below you’ll find different variations and iterations of the interface.

DEVELOPMENT

All my mockups, from low to high fidelity, were created in Figma. From there I could export elements as single .PNG files and note the x and y location of the element in the filename. This way the developers knew where to place the elements in the software that they use to build the interface. ‍

Figma was also used to showcase how certain elements should animate. By showing the developers a preview they could mimic in their software. I worked very closely with the software engineers that implemented the UI. During bi-weekly meetings we streamlined the design and development process.

RESULTS AND LEARNINGS

In a short time period we managed to deliver a demo interface which was presented to the world at Busworld2019 in Brussels. The crowd reacted positive to the display. The thoughtful design stood out among the competition and generated a lot of compliments. After Busworld we worked hard on finalising the display by tweaking and testing the current design.

A few of the final screens can be seen to the right

With the display nearing production, I look back to a project which started rough but turned into something I can be proud of. I’m looking forward to seeing the bus on the streets soon.

For more information see:

https://www.tribus-group.com/nl/movitas/
https://movitas.nl/

CREDITS

Client: Tribus b.v.
UI Development: Frank Kusters & Andries van den Heuvel
Project Management: Maarten Meulen