Go back

Stratio | Fleet Maintenance App

Redesigning the Overview page area to help fleet maintenance managers to work more efficiently while increasing users’ session time by at least 25%.

User Research

Data Driven

Engagement

Dashboard

1. Problem and Opportunity

2. Exploring Solutions

3. Validating Solution

4. Production

5. Future Improvements

OVERVIEW

MY TEAM

2 product designers, 1 PM, 1 Customer-Success stakeholder, 5 FE Eng., 3 Backend Eng.

TIMELINE

December '21 - Feb '22

The Process

1. Understanding the Problem and Opportunity

CONTEXT

Stratio Web App is the world’s leading predictive maintenance solution eliminating unplanned downtime and reducing maintenance costs for fleet managers using AI to predict faults in key components.

Why user’s Overview page is important?


  1. It’s the perfect place to see the overall fleet status

b. It makes it easy to access the service

c. It could be a powerful visual tool

Image: Previous dashboard visual.

STAKEHOLDERS' GOAL

ℹ️ Workshops are a great tool for everyone to share their opinions and come to an understanding of the problem we are trying to solve, that’s why I was leading the discussions on this early phase process - making everyone who could contribute available to join the sessions.


Marketing & Brand: Outstanding visual, clear connection between the Overview and future areas.

Customer Success: Have the perfect entry door for users to our service and relevant data.

Stratio business: improve UX, raise some metrics and make the customer happier.


USER PERSONAS

We noticed that users could be taking care of the maintenance but also the logistic part of the business using our tool, so we needed to better understand the real user needs and pain points behind this opportunity:


Fleet Managers are responsible for vehicle fleets of up to 200 vehicles. Some have their own workshop to maintain their vehicles, some don’t have it.

They will seat in front of the computer with the app open on average 2 hours a day.


User interviews and surveys

I prepared user interview scripts to go directly to talk to customers both in person and also remotely. The Sales team helped gather the number of customers needed for this exercise.


+70 Customer surveyed. 12 Customers were interviewed.


PAIN POINTS

Performance


Users are spending 2 hours a day on average going into the service tables and scrolling over, making them lose precious time they could use for other tasks, and at the end of the day, they are not even 100% sure that they didn’t miss anything.


Usability

Users are having the feeling they are making too many clicks over the sessions to confirm data that they know we could show them directly - they know from other services that some visual widgets would help them to connect them directly to a detailed page or similar.


Emotional

Making customer goes through endless data tables to confirm that everything is fine with the fleet makes them anxious and afraid of missing some relevant information that will cost money.



User Needs


  1. Confidence

b. Visibility

c. Interaction

d. Time-saving

OPPORTUNITIES

I worked together with the PM to define the scope and primary focus of this project. All decisions were based on inputs from both users to stakeholders.

1. Overall user experience improvements

  • Clearer navigational hierarchy.

  • Take users where they need to in 1 click.

  • Give the user the choice to go where he wants to.

  • Use visual clues to help users understand where they can go.

2. Make visuals clear, bold and communicative

  • Use all possible elements to make the user interface understandable

  • Create innovative compositions and approaches.

  • Always prioritize accessibility and readiness.

3. Integrate valuable and understandable data

  • Only use charts that make sense in the context.

  • Allow reading more from the charts via interactions.




  1. Exploring Solutions

How Might We & Crazy 8s Ideation

In this step constructing how-might-we questions helped me to generate creative solutions for each of the Dashboard section's widgets, here are some examples:

  • How might we organize content?

  • How might we represent visuals?

  • How might we make users understand more complex data visualizations?

  • How might we show as much possible content without scrolling?


To complete this exercise I brainstormed together with the PM, examples of exercises were Crazy 8s in order to bring as many possible solutions to the table


Simplifying the structure


Through the last exercise, 3 sections organized Dashboard allows to:

  1. Better organize the information.

  2. Clear split between content that can be filtered or not

  3. Hide for accounts without access to a specific topic (e.g.: maintenance)

WIREFRAMING

I used and shared with the team the Dashboard Design Methodology by Nicholas Kelly. Know more here: https://nicksight.com

Full Wireframe Dashboard View


  1. Validating Solution

USER INTERVIEWS

I try to do workshops at least two times in the process.


First in the problem definition phase and at least another one before going into production. Keeping communication clear and open with the members of the project is key to a successful launch that’s why in every product that I work, I try to bring Developers into the fold as soon as I can.


That not only prevent early production mistakes but it also makes the team feel heard. It’s important to keep a good relationship with the developers on your team to help you push things forward.

Test and make the design decision

Using Maze as the Usability testing tool I conducted user testing with 4 internal stakeholders and 5 customers The user testing was done remotely using Google Meets.


Here are some of the scenarios that I prompted during the interview:

  • Read the widget data

  • Actions that user will take from a widget

  • Information value and priority


Findings


Seeing the dashboard in action with users for the first time is great. During the interviews that we conducted, we found some issues regarding the 3 first widgets from the Maintenance section. Users enjoyed the visual improvement and also the colour palette. It was interesting to see that the internal feedback was aligned with the customer's inputs - I iterated the User Interface according to the outcome of this test until we got the final result.


  1. Production

SOLUTION OVERVIEW

After the initial research, we discovered that the best solution for our problem was to create a dashboard to enable the fleet managers to visualize and control their fleet issues to take care.


Once the product was fully responsive, they would be able to access the dashboard area from everywhere.


We also discovered that the main features to make this product successful were an easy-to-use interface, a dashboard for quick access to relevant data, a fast workflow for going from this view to the detailed sections that matter and also good data visualization on each individual chart.


Usually, this kind of tool tends to have enormous reports quantity of data showing to the users being a time-consuming task. Time is essential for fleet managers and we needed a compact report, with enough information for the user to make a data-driven decision, without losing the details and nuances.




We designed the base structure and go on with iterations for the final design.



Possible states documentation

I followed the design system UI components and actively contributed to update the Design System with the new widget components - I defined the rules and added them to the Figma file.

METRICS AND TAKEAWAYS

The new feature validation was a success as we really nailed down how to solve specific problems for the users.

It was under development when I left the company and so far no challenges or unexpected issues were coming up.

Due to the data-based solution, everybody was confident about the future delivery.

I also prepared a short after-launch survey to share with customers - feedback is never too much.



As a professional, I always aim not only to deliver great products but to also learn as much as I can along the way.

Here are some takeaways:

  • How to take advantage of tools like Miro, and Figma to enhance communication and project organization;

  • The workshop is one the greatest tools that you can use as a Product Designer, it really helps everyone to stay in the loop;

  • User testing using Maze made everything easier and also funnier.

  • How to convert data and user insights into actionable tasks for the team.


  1. Future Improvements

RETROSPECTIVE

Where can I improve if I have another chance?

I'd like to go deep into the metrics part. The fleet manager is using the dashboard to help them on their daily work and having more data to analyse regarding the data that really matters will help me to confirm the results I come up with.

Note: To comply with a NDA, sensitive information about the software was hidden in this case study. The information shown here is my own and does not reflect the views of the company.

Next Use Case: Volkswagen Maintenance Platform