BP

BP required a improved customer experience for their new client portal for fleet managers that provides administrative functions to internal users and a mobile app for drivers. The solution supports all existing customer-facing interfaces via the new platform enabling the retirement of several applications.

Services: Strategy, UX, User research, Analysis, Prototyping, UI design and building and maintained a design system

Results: An increase in wholesale sales

The Challenge

To create an all in one web application for all fleet drivers, fleet managers and administrators that will improve customer experience and show functional innovation.

BP

We kicked off with an eight week C2C workshop; completing 90 stories, creating three separate journeys for Customer Portal, Admin Portal and Mobile App. We ran workshops consisting of 24 BP stakeholders to develop customer personas, experience maps and co-create new features. During this period we also ran brand immersion sessions and user-tested in two countries.

The standout pain points of the web application were:
1. The software is slow
2. Processes are longer than they need to be
3. The information architecture is confusing
4. Users try to get by without using the software
5. Current site is very outdated

Wireframes

We started with the portal for fleet drivers. We focused on the main touchpoints, mapping each journey. We broke down each step of the user journey and mapped out distinct flows for each persona. Starting with ordering a new card, dashboard and invoices we entered real data and content then conducted user testing, validating each requirement.

Dashboard

The framework had to be simple, yet flexible enough to support these features. We used a card-based UI due to the dashboard needing to be scalable as new features were prioritised. We added the drag, drop & re-order function which allowed the cards to be priortised towards the top of the dashboard based on user preference.

A good calendar was a must-have for helping fleet drivers organise upcoming invoices and manage payment statuses. We also added push notifications which improved the customer touchpoint allowing them to make decisions from the outset without signing in to the app.

A simple search with a segment control nosedives the fleet drivers into the daily/weekly/monthly schedule. This will help with time management removing any unnecessary clutter, which in time will help the user become more productive.

The chatbot... every site has one but it’s only a matter of time before “sorry I don’t understand” pops up. This was a major pain point as not only where users unable to find what they were looking for, it put the unnecessary workload on to supporting help desks.

By analysing data we were able to profile unique behaviours and preferences. What started as an exciting concept using an AI chatbot became functional. We also included the additional function 'Spotlight' which supported struggling users with a guided tour of a specific area within the application.

Manage
card

From our C2C workshops, we found that the current 'manage card' process was the only function users liked as this was very timely. After further investigation, we found this was not due to good UX but because the process was familiar. We decided to keep the flow but cut back on the unnecessary features and implemented an interactive form which felt fluid.

Mobile
app

Fleet owners now have the ability to add their fleet's fuel cards to the app to be managed. The app will automatically log every fuel transaction and allow drivers to enter their mileage whilst on the move, giving fleet managers accurate data on vehicle activity.

Manage
fleet

Fleet managers wanted an app that would make refuelling easier, faster, and more convenient than ever before. The new functionality of being able to automatically log transactions saved time and made both drivers and managers more efficient.

As well as transaction, security measures were implemented. Fleet owners will be able to manage fraud detection. With the ability to block and order a new card at a click of a button.

Design system

To maintain consistency and ensure efficient design to dev handover, I developed a modular design system based on reusable components and their states. Every component can be rearranged and combined with others while maintaining design consistency and recognizable UI patterns for the user.

Color palette

#00983D

#84C726

#F7E700

#FF6600

Primary font - UniversforBP