VIX CBE

Enabling railways analytics & management

CBE by VIX Tech is an administration platform for railways ticketing and analytics used across the UK and the whole of Europe.

MY ROLES
Product Designer
UX Researcher
Visual Designer
Interaction Designer

PLATFORM
Responsive Web

PERIOD
2021 - 2022

The Project

CBE by VIX Tech is a system that helps railways administrators manage pricing, offers, bundles and more for the ticketing system as well as all the data needed to review performance and past user behaviors regarding ticketing.

BACKGROUND

The original system was built well over 15 years ago, with outdated tech and no scalability, making it hard for the company to add new features and forcing users to learn to use tools like Database interfaces to be able to work with the system at hand. My specific task was to produce a Product Assessment of the previous system, do research on the current users and develop a new experience.

SOLUTION


An iterative two-step process to deep dive into business processes and flow of application use that allowed me to understand how users interact with the application.

From there on, the ideation, refinement and delivery process happened, which had as an outcome the proposed wireframes and prototype of the Web Based Experience for CBE.

The Approach

As this project was worked while I was at Avantica (now Encora), I decided to follow their usual approach to UX projects where we have a round of meeting sessions with the top level stakeholders to understand the problem, followed by a round of user research to understand the users points of view, as well as all the problems they face in their day to day.

All this was complemented with a series of workshops with users and stakeholders for hypothesis validation and brainstorming sessions.

Concluding with a series of wireframing, prototyping and testing as well as a atomic-based Design System/UI Kit.

WORKFLOW

The Research process

During the research steps I decided to conduct several interviews to the main users of the platforms, the interviews helped me understand the different roles needed and the features that were important for each one.

I also conducted diary studies with the users to better understand their day to day problem to the core. With the results I was able to build user personas that were later polished with the stakeholders and users.

USER PERSONAS

We also conducted several other research exercise remotely, like Card Sorting, Journey Mapping and Task Analysis. This helped us understand from a new perspective the most intrinsic parts of the systems, what every user role really needed, the ideal journeys and every possible alternate journey the users could benefit from.

These exercises were done using Miro as the main tool due to our remote nature during this project.

JOURNEY MAPPING EXAMPLE

Testing a new interface

One of the main challenge of this project was in doing such a big change visually speaking to the system since even when we are building a new version of it from scratch, the users sees it as the same with an updated interface but would keep looking for the same type of experience as before, not on purpose but as a passively learned behavior.

Due to this challenge, I decided it would be a good a idea to create a low-fidelity version of the interface first and conduct user testing to understand where the UI could help the users adapt to the new experience.

After 2 rounds of testing with the wireframes shown below, we were able to really polish the experience and create the high-fidelity mocks needed for the prototypes.

LOW-FI WIREFRAMES

Building an Atomic UI Kit

When the moment to create the final visual designs came, I decided to take an atomic approach to build a UI Kit that was not only scalable but also easy to use with a full on documentation for each component.

This resulted in a 20+ pages library with components and documentations not only for developers but also for PMs and stakeholders to understand how the UX is built and how it can grow with minimum assistance from a designer.