Mobility Budget web platform

Designing a web platform from scratch. Dedicated to companies who want to attract and retain employees by offering a mobility budget solution. Project focused on building a solution that could replace manual processes of employees management, invoicing and reporting with a fully automated solution.

Client
Reach Now
Services
UX/UI Design
Deliverables
Wireframes, flows, journey maps, user research, design system & fine designs
Year
2019-2020

About the project

Mobility Benefits web-platform for companies - 100% customers satisfaction and 82% less requests to platform operations team. Read a story on how we’ve created a product that customers love.

Satisfied customers & happy users

Imagine that every month you get a budget from your employer that you can spend on any mobility solutions you like, such as bikes, scooters or car sharing all in one app. Sounds like a dream?  Yes, but it’s also a reality! Reach Now made it happen. But how does it work? Your employer decides on the amount, period and mobility providers and assigns employees to one or multiple programs. All of that thanks to Mobility Benefits web-platform, created to simplify manual processes and requests by fully automated solutions. The platform allows companies to manage their employees data, create customised programs and handle invoices & reporting all in one place.

Project goal

Scalability & customer satisfaction were the main golas of that project. The platform was built to replace manual processes and requests by flexible, automated solutions. What’s the difference?

Before

A customer (e.g. Lieferando) wants to offer mobility budget to its employees (end-users). A responsible person from Lieferando needs to send csv list of all the employees that should receive benefits specifying to which program they should belong, what is the amount they should receive, which providers they can use etc. Every time a change occurs, such as new employees should be added or program should be adjusted, that person needs to get in contact per email or phone with someone from Reach Now’s platform operation team. This takes lots of time, resources, and front-back conversations.

After

A customer gets access to Mobility Benefits platform and can upload CSV lists of all the employees, create customised programs, check the usage statistics or download invoices. The platform allows user to have a full control over employees data and answer any employees questions they may have.

Vision & objectives

What was our team vision? We power the replacement of company cars with our solutions. Our focus is on creating user-friendly web solutions, which would replace manual processes of employees management, invoicing & reporting with a fully automated solution.

My role

I was the only designer in the project from the initial brainstorming sessions to the final tool development, through all the different phases. Below, I'll demonstrate my design process.

Design process

First wireframes

After the initial brainstorming sessions were conducted and we decided on a project scope, together with my product owner we came up with a list of initial features we would support. I then created first low-fidelity wireframes.

Low-fidelity wireframes - Mobility Benefits platform

User flow

Next, I created a user flow (click here to view). It aimed at illustrating the user’s movement through the dashboard, mapping out every step the user takes. Based on that chart, multiple discussions and team-brainstorming sessions were conducted, and eventually fine designs have been created.

In order to create this user flow, I used low-fidelity wireframes created in the first step.

Part of the initial flow

Going deeper into single features, smaller, but more detailed user flows were being created on the way.

Onboarding - User flow (you can find it here)

Sketching Personas

For the Mobility Benefits dashboard, several personas were identified and described. We did interview our current customers to understand their expectations, frustrations, as well as which tools they use.

Dashboard customers are employees, who interact with the organisation data of their company. In most cases, the HR and Finance departments of B2B partners are end-users of the Mobility Benefits Management dashboard.

Mobility Benefits Personas

Journey map

Next, I created a journey map illustrating all the different stages a B2B customer needs to go through, from the initial contact with the sales agent, until the point of time, where he/she can use all the dashboard features to a full extent. It shows all the key actions and interactions that happen at each stage. During the seven stages included below, customers’ pain points, behaviors, and feelings are explained, and further opportunities for improvement are defined.

Journey Map - Mobility Benefits platform

Setting up foundations

As this project has been built completely from scratch, I needed to setup the UI foundation, such as colors, typography and icons set, in order to start building components and take care of the visual design.

Defining UI foundations for Mobility Benefits platform

Components library & styleguide

After the foundation has been set, I built the entire components library in Sketch & prepared a styleguide for developers.

We used Zeplin as a handover tool for the implementation, for both design system, as well as fine designs.

Preview of selected components from Sketch library
Example pages from the styleguide

User testing

In order to validate our ideas, create improvements and define the most important features, we conducted an extensive user research, asking our current & potential clients to complete tasks using our interactive prototype & answer questions that followed. We managed to conduct the testing with 10 different companies, e.g. Daimler Mobility Services.

Team brainstorming

After receiving feedback from our customers, we did a half-day workshop with a team, in which we brainstormed together on a flow and future improvements.

Team brainstorming session in the office

Project results

During the project duration, more than 60 different screens have been designed and implemented.

Fine designs

Please find a set of selected screens below.

Overview of some screens that have been designed
Organisation & members list
Dashboard & organisation detail view

User feedback

Once the basic features were implemented, we asked our customers for feedback.

They were amazed on how all the processes have been automated & very thankful that they could do employee management by themselves without a need of contacting a ReachNow representative, each time they wanted to make an adjustment.

On our side, we discovered 82% less requests to our platform operations team! :-)

"What do I like? In general that we have a dashboard! I like the last page with all the information and different colors. And I really like that I can select members and check if they received the budget."
“Very cool overview of members and memberships, and the dashboard with all the necessary information. Also, the possibility to create our own customized program."
"It was very clear to upload the file. I would say there was nothing difficult or not easy to use. This is a big step forward if you know the process now. I don't have any point to add."

Interested in working together? Get in touch today.

Drop me a message & let's have a chat! :-)