Fleet performance dashboard

User research and UX/UI design of customisable dashboard

CLIENT
Microlise
AGENCY
SERVICES
User research, UX/UI Design, User testing

Microlise specialises in producing fleet technology solutions that in 2017 had a total of 180,248 drivers using their systems and burning around 1.9 billion litres of fuel.

The Dashboard framework was a long-term project that the company had been trying to implement. The proof of concept that was done by the product manager and did not include insight from user research. Project required managing multiple stakeholders, internal as well external (Microlise’s customers). At this point in time company was low on UX maturity scale and didn’t understand fully the ROI of user research so my first tasks was to influence director level management.

User research

I conducted workshop with stakeholders from different domains of our products (ex. Journey Management, Fleet Maintenance, POD) to establish with how many functions within the product we dealing with. We started by identifying Core and External users. We focused on Core users as our target group for the project. Base on stakeholders knowledge we talked about users goals, pains and tasks. I gained necessary insight into our user base and ecosystem that our Products provide. This exercise allowed me to create Proto Personas that I would verify in the future with actual users.

Now when I knew our user base and how it changes across our different customers, the design needed accommodate all their needs.

Objectives

  • It was clear that multitude of different user roles would required a flexible framework.
  • To reduce development time we would need to create templates that would allow us deliver the required widgets in timely manner.

Ideation

I conducted ideation workshop with stakeholders and users gaining valuable insight into expected functionality. We worked with Proto personas in mind and focused on users pain points and how might we resolve them which fed into business goals for the project. We prioritised features that gave me focus on design direction.

This image has an empty alt attribute; its file name is dashboard-widgets-1024x640.jpg

Wireframes

First wireframes were quite rigid and didn’t fully show the customisation of the dashboard. At this point of time I had multiple stakeholders requesting solution to look and feel in very particular way. I needed a way to get to the end users and gather early feedback, as it felt like we overcomplicating the design.

This image has an empty alt attribute; its file name is powerwall-home-1024x273.png

Validating hypothesis

We met with a large customer, JCB, and delivered a workshop with their end user – dealers, to get a better understanding of their needs and reaction to the initial design.

This image has an empty alt attribute; its file name is jcb-workshop_1750-1024x640.jpg

First part of the workshop focused on validating some of the findings from initial user research. I’ve used some of the Design studio techniques to allow participants to come up with ideas and define their needs, pains and gains.

Early design showed on the workshop

Second part constitute of going through designs and gathering the valuable feedback. It showed how many of stakeholders assumptions were off.

Users concern was that it was rigid and overly complex. Too much information was being displayed within each widget and a preference for the ability to view higher level metrics that can be drilled down was desired.

Learn and iterate

After workshop I lead internal stakeholders meeting where we consolidate gathered knowledge taking under consideration insight before and after the showcase of the designs.

This image has an empty alt attribute; its file name is 20160420_104430-1024x576.jpg

Objectives

A customisable dashboard that allows users to pick and choose the information they need to analyse key fleet information and trends over time.

Prototype

To be able to test the designs me and my team created partially functioning prototype that allowed us to mimc the full experience. Users were drawn towards simpler and clearer representation of data and liked the ability to enlarge the widgets to get more details.

This image has an empty alt attribute; its file name is ICE_01_Dashboard_Tesco-widget5-1024x576.png
Example of the same widget with different complexity/sizes

While testing the task of adding widgets we found out the majority of users liked use of categories but would like an additional search.

This image has an empty alt attribute; its file name is add-widget-1024x382.jpg
Flow for adding widget

Final design

This image has an empty alt attribute; its file name is ICE_03_Dashboard_Small-widgets-983x1024.jpg
Examples of different templates for customisable dashboard

The final design was focused on maximising flexibility, widgets could be resized and moved anywhere on the dashboard. The design was consistent and strictly adhered to Design system.

The functional dashboard and couple of widgets was delivered to one of our customers who received this positively and requested more widgets to build the product further.

Outcomes

  • We presented a dashboard with a set of the most desired widgets at Microlise’s Transport Conference – the largest event of its kind in Europe. We gained a lot of interest and positive feedback and now have currently delivered almost 100 different widgets across our customer base.
  • This feature became a core offering for our Fleet performance customers.
  • This approach allowed me to influence management and put user research as a core stage within Microlise design process. I’ve created Personas Deck that was used in other projects.

Let's start a project together

If you like what I did for others, contact me so we can start working together.
If you're planning a project you'd like to discuss I'd love to hear from you.

Send me and email