MOIA’s Backoffice Web Application
by: Kim Schneider, Tobias Pickel, Michael Schmidt-Voigt, Filip Ilievski
Explaining MOIA’s service is easy, and our promise of a seamless experience even comes with a feeling of magic. It’s a chill afternoon in late autumn. I had booked a MOIA with the app and now spot it further down the road coming to pick me up. I enter the car, make myself comfortable in a free seat, and enjoy the quiet ride along an avenue of colorful trees. I’m thinking, this is the experience our customers enjoy.
Behind the scenes, however, a whole lot is going on to make it all happen. Drivers are coming to work to start their shifts. Vehicles are being responsibly maintained. A stop network, carefully selected and constantly adapted. Everything is balanced between demand and supply.
What seems like a fully automatized service still has many moving parts that need mindful administration, configuration, and monitoring. And apart from the smooth operation, we are striving for customer satisfaction. Our helpful customer service people need insights into what has been happening.
We, the Web Frontend Chapter at MOIA, build a crucial part of bringing all these threads together:
The Backoffice: One application, many use cases
The Backoffice is an internal application that combines many areas of interest. It has a single login, but apart from the shared dashboard, account preferences, and navigation bar, it offers diverse experiences for its numerous users, each with their specific rights and permissions, overseen by our Data Protection Officer.
These users are our most important stakeholders. Luckily, they aren’t anonymous to us but they are internal managers, support, and service personnel. We are in close contact, discussing their needs and pain points to discover opportunities for improvements and new features.
Let’s look at some concrete use cases.
Drivers and Shifts
At the heart of the MOIA service are our drivers. To ensure that all drivers can do their job to the best of their ability, Driver Managers use the Backoffice to plan shifts, schedule training, and make sure everything runs smoothly.
Fleet
MOIA’s vehicles park, charge, and are being maintained at our so-called hubs. Fleet Managers are responsible for their operational readiness and use the Backoffice to manage all aspects of their maintenance. They search for individual vehicles or take action in bulk. An alerting system draws their attention to specific problems picked up by one of the countless sensors in each vehicle.
Our Fleet Map shows in real-time each vehicle’s position in the field as well as its current trip details and route. Our hub agents monitor the vehicles and reach out to support our drivers if necessary.
Stop Network
Instead of physical stops, MOIA relies on a large number of virtual stops defined in our backoffice stop network to calculate the optimal route and pick-up and drop-off points. Responsible managers set up, adjust and monitor around 15,000 stops. Their locations are chosen to minimize city traffic disruption while maintaining an average walking distance of fewer than 180 meters to each stop. They require constant attention when they are unavailable due to construction sites or public events. Each stop can be assigned an action representing automatic behavior, and stops can also be grouped and managed by forming geo-fences and binding actions to the entire group.
Customer Service
Customer service staff use the Backoffice to handle customer inquiries. Refunds may need to be made or the cause of a missed trip clarified.
Sales
Vouchers and SmartSaver are essential offerings of MOIA. Our sales department uses tools provided by the Backoffice to manage everything related to coupons and service prices. In addition, there are tools for managing ads that will appear on the screens in each MOIA vehicle.
Build with modern technologies
The Backoffice is a large React application written in TypeScript, organized as a well-structured monorepo, reflecting our business domains and teams setup, and kept in check with Nx. Apollo Client manages its state and requests data from our Apollo Federation powered GraphQL supergraph while SWR takes care of any REST API requests. Vite serves it locally, offering hot module replacement during development, and optimizes our builds. Prettier prevents us from arguing about tabs and spaces, while ESLint gently tells us off. Automated tests written with React Testing Library (unit and integration) and Cypress (end-to-end) help us not regret constantly refactoring our code. GitHub Actions take care of final checks and deployments so we can fix, improve and extend the application many times a day.
Stay tuned
Now, that we have explained what the Backoffice is and what it’s used for, we would like to provide some insights into how it came to be and evolved, as well as tell you about the people, organization, tech, and design behind it. Stay tuned for our future behind-the-scenes articles about MOIA’s Backoffice.
If you are interested in joining MOIA as a Full Stack or Frontend Engineer at MOIA, look at the job offers on our Career page.
Read the other posts in our Series Explaining the Backoffice:
