Mobility Backoffice

Information architecture and interface design for a backoffice tool

Europcar Mobility Group, 2016-2019
While at Ubeeqo, Europcar Mobility Group was aiming to unify all operations into as many few tools as possible. A dedicated squad was in charge of building a management tool for existing and future business units.

I was responsible for the information architecture, UX/UI definition, design implementation and validation.
Responsabilities:
Information Architecture
Leading the UX and UI design
Due to NDA agreements information displayed has been modified
Backoffice Thumbnail - Product design desktop screen with Backoffice detail page
Project Definition

One tool to rule them all

Most of the companies, held by the Europcar Mobility Group, where within the mobility spectrum and shared a pretty similar structure, developing a versatile and consistent platform to rule them all made perfect sense.

We set off to scope and understand their common general sections, content, users types and roles. We mapped user actions, worked on the information architecture and refined resources information and settings.
Backoffice UX UI Design project overview. Unifying business operations in one tool. User Personas and User Roles. Information Architecture
Backoffice product design use case and user journey mapping
Information Architecture

Structure and Interaction Consistency

Throughout the Backoffice, tasks and actions varied greatly. Users had to set up configurations, navigate across varied entities, analyse data and assign or perform actions.

It was impossible to foresee all the existing and future features any given business unit might need. What we did find was that
information and content structure was quite consistent and easily organised.

We focused on keeping the experience coherent and intuitive no matter the task at hand, while not disregarding tidiness and ease in navigation.

We standardised the content structure and created navigation, layout and interaction patterns that unified most of the platforms content.
List element in the Backoffice Design Project, top level navigation, search, filtering and status visualisation
Content was accessed through a Main Resources Menu or a search bar. Items in resources where listed in a filtrable list displaying relevant information such as status
Detail Page in the Backoffice Design Project, consistent action location, item overview section, tabs and edition in modal view
Detail pages for each item had an identical structure. Having an a transversal overview area and tabs holding related content cards. Actions where displayed in a consistent location and edition happened in a contextual modal view.
Design of overview section in backoffice project
A feature walkthrough

Setting up Cost Allocations for companies using carsharing B2B service

This feature, part of the B2B companies management, aimed to unify the settings regarding third party mobility cost allocations, while keeping it flexible to meet different scenarios.

We defined a universal path, further disclosing settings, based on the needs of each case.
backoffice feature logic map
Cost Allocation (CA) logic map
card element show cost allocation default and active state
Default and active Cost Allocation Card
cost allocation creation modal
Cost Allocation creation modal
card element showing cost allocation filled state with edition buttons
Filled Cost Allocation Card
cost allocation edition modal
Cost Allocation edition modal
UI Design

Anatomy of a table component

To create a consistent design and experience throughout the Mobility Backoffice we developed extensive tokens, UI patterns and components, that eventually transformed into a design system.

Here is an example of design definition of the table component.
backoffice design system list component atoms, button types, action icons, pills and status indicators
Interface Atomic items
backoffice design system list component molecules, row types and filters
List rows and filters molecules
backoffice ui design list component presentation

A design oriented for user performance

backoffice various detail pages ui design
Desktop screen with Backoffice vehicle list page - Senior Product Design Barcelona
backoffice user detail page design
various ui elements of the backoffice product design
Thanks to all the great people I was lucky to collaborate with in this project, specially to Sara, Pablo, Sidonie, Stavan, Gabo, Steffie, Jaume, Shahin, Mehdi, Ivan and Adam.
Mobility Backoffice. Europcar Mobility Group, 2016-2019