creating the

Next Generation
Baggage Control Room GUI

The story

Vanderlande has been one of the class leading companies in Baggage handling with its VIBES system. Development of VIBES started in 2010 and included a Baggage Control Room GUI. From the Baggage Control Room, operators use this user interface (amongst other products) to monitor and control the baggage handling process. 

The problem

At the time of development, Vanderlande did not have a big focus on User Experience yet. The design of UI screens was often done by software architects or component owners, though during its development lifetime of 10 years more UX-focused people (including me) came in. The Baggage Control Room GUI (BCR GUI in short) also must cater to a broad range of clients; from small airports with simple operations to hugely complex ones. This resulted in a (desktop) application that did the job, and did it well, but was also rather complex to learn. An analysis of market results in the USA showed this was a limiting factor for further growth in that region. It was time for a reboot!

The project

Around 2018, a project was started to build a new BCR GUI, this time under guidance of a now established UX department. To reflect this, the project was called VIBES-UX. A design concept ('the concept car') was made and discussed with clients after which development of an MVP started with a multi-disciplinary team consisting of UX and UI designers, front-end developers and API-developers. I jumped between the original BCR GUI project and VIBES-UX at start and joined the project full-time a year later.

A sample from the concept car:

By then the project team consisted of 2 UX'ers, 3 front-end developers, a component owner and 2 API-developers. I joined in a mixed function, doing both front-end development and UX activities, focusing much on the IxD parts for the latter.

The process

At the start of the VIBES-UX project, a group of User Experience designers worked out base concepts and travelled the world to discuss them with key customers during workshops.

An external design firm was brought in to develop the visual identity of the new UI, creating the VIBES-UX color palette in both a light and a dark theme and doing the base UI design.

When I joined the project a little later, the project goal had moved from creating an MVP for small airports to using VIBES-UX for one of the biggest and busiest airports in the world: Hong Kong International Airport! This meant a big focus shift, as there now was a much larger, and very defined set of requirements and a tight deadline to meet! For the remainder of the project, we used this process:

1. The product owner and UX'er would determine the next user stories to work out and collaborate on detailing them.
2. The UX'er would create high-fidelity mockups for a story and discuss them with the PO and development team for technical achievability. 
3. Vanderlande has a great set of domain experts, ranging from commissioning engineers who spend most of their time at airports interacting with customers and end users, to architects who often travel to leading customers to talk about their needs and discuss required functionality. The UX'er would get input from these people first and validate the designs with them and if required validate them with end customers too.
4. The development team would implement the designs.
5. At each sprint demo, the results were shown to internal stakeholders.
6. At periodic intervals, the current state of the UI was user tested with selected customers.

My role in this was:

1. Taking part in working out stories to high-fidelity designs and validating them.
2. Implement designs made by me and other UX'ers in the front end.
   

During my time at the project, I shifted from a front-end development to a UX to role and back several times, including a period in which I did them in parallel.

The VIBES-UX user interface is quite an interesting beast. Baggage Control Room operators use it to do (arrival & departure) flight planning, monitor the state of the baggage handling system and its processes, to search for bags, etc. The previous BCR GUI was usually accompanied by a SCADA system to monitor the hardware. As there was overlap between the SCADA views and the BCR GUI view of the system, one of the aims of VIBES-UX is to merge the functionality typically provided by a SCADA system into a single user interface, simplifying the operations for the end user.

VIBES-UX is being built on web technology; users can run it in a browser. It is a full planning suite, logistics viewer and SCADA alternative rolled into one. And it is does so in a browser app that supports multi-language, multi-user, multi-themes and even multi-monitor behavior (user can have multiple browser tabs open on separate monitors and choose whether they should act stand-alone, work together or remain pinned to a certain part of the application). I have not seen many web applications which do all that!

Some actual screens in the dark theme:

The project grew considerably. by early 2022 it had extended to 3 full scrum teams working on the front end. One in Veghel, one in Canada (Quebec) and one in the USA (Atlanta). 

Some designs in the light theme:

Takeaway

I stayed on the project until mid-2022 and learned a lot, especially on the coding side. Most of my previous development work had been on desktop UI development, but VIBES-UX was being built on web tech. And it was being done using all the latest and most advanced practices: Angular, Sass, TypeScript, fully reactive programming with RxJs / observables, NgRx for state management, Nx for mono-repo development, rest API's, micro services and micro-GUI practices, yarn/npm package management, Git, Storybook, etc. These were all things I had to learn and that was a steep curve. But I managed, and it was exciting to period!

One thing I would do differently (doing so now) is to have focus on a single discipline. In VIBES-UX I worked as a front-end developer, switched to a UX role when UX capacity was an issue, switch back to development again or did them parallel. While this certainly helped the project forward, and really helped in being the bridge between the front-end development and UX groups, I decided that it was better for my personal development to pursue opportunities where I could focus solely on UX.

I still am in contact with the developers, and I see the VIBES-UX UI grown nicely. It’s a joy to sometimes recognize newly implemented parts as my designs. VIBES-UX is scheduled to be delivered to first customer in 2023, and I am confident that it will be great product and a big step forward for Vanderlande!