.png)
overview
Create a centralized dashboard for proactive logistics management
During my internship at Mitsubishi Electric Automotive America (MEAA), I designed the control center of the advanced driver assistance system (ADAS), a new B2B product, which is used for the management of automatic vehicles and equipment. The product was expected to be launched in Jan 2024.
What was I working on?
I led the design of 13 ADAS features and maintained the design systems, which involved reshaping the dashboard, notifications, configuration management, and more. For this case study, I will focus on the dashboard redesign.
I redesigned the visuals and user flows of the new dashboard to enhance data readability and accessibility. This redesign aimed to help dispatchers and operators monitor the system more efficiently and take proactive actions.
holder
timeline
May 2023 - Aug 2023
(3 months)
(3 months)
role
UX / UI Designer
team
Product Manager / 1
Software Engineer / 3
Project Manager / 1
Software Engineer / 3
Project Manager / 1
context
Why dashboard?
Our customers are switching to an automated vehicle logistics system. With more hardware devices controlling the automated vehicles, there's an increased need to monitor their performance and status. However, the original system lacks a central hub for managing this data. As a result, users had to navigate through different parts of the website, causing efficiency issues. To solve this problem, we plan to create a dashboard that allows users to easily monitor the machines' status and track goods delivery.
Design for who?
Our target users include dispatcher and operators.
.png)
Dispatchers use the dashboard to:
1. Referencing the docks they can assign vehicles to.
2. Monitoring vehicle and related equipment statuses.
2. Monitoring vehicle and related equipment statuses.
.png)
Operators use the dashboard to:
1. Monitoring the performance and status of automated vehicles.
2. Ensuring that vehicles are operating safely and efficiently.
2. Ensuring that vehicles are operating safely and efficiently.
challenges
Through interviewed our clients, dispatchers, and operators, we found several design challenges that need to solved while designing the dashboard.
user jobs to be done
How to support different data needs?
.png)
"The data needed by dispatchers differs from that needed by operators. However, displaying all the necessary data for each stakeholder can be overwhelming." (client)
user jobs to be done
How to led users into actions?
.png)
"I'm not sure how some of the dashboard data is relevant to me or how it can help me. The data is only meaningful to me if it helps me complete my tasks." (dispatcher)
user jobs to be done
How to Enable On-the-Go Access for users?
.png)
"I (operator) need to move around while working, so it's important for me to be able to check the overall status of vehicles on-the-go."
engineering requirement
How to ensure the flexibility of the system?
"As the system is new and more data will become available in the future, we hope the dashboard can be flexible enough to incorporate and display this new data according to users' priorities." (client)
final designs
Expandable
modular grid
modular grid
reduce information overload
Users see a simplified default view and can click to expand for detailed charts and trends only if needed.
Adaptable to incoming data changes
Integrating new data is simplified with modular grids, avoiding the need for a complete UI revamp. This approach is more practical for implementation.
title bar access
Ubiquitous accessibility
The dashboard access is positioned on the top bar, allowing users to oversee data from any location at any time.
So, how can I make data more understandable?
How did I explore and iterate?
Key design iterations
Iteration 01
Create visual hierarchy and visualization to optimize data comprehension
The initial dashboard was overwhelming with text, making it difficult for users to grasp. To address this, I customized data representation to enhance clarity. For instance, an accumulated bar chart was used to aid users in tracking progress towards completion.
However, text remains valuable in specific contexts, where precise numbers are crucial for informed decision-making. In these instances, I emphasized numerical visibility through visual hierarchy, optimizing comprehension.
However, text remains valuable in specific contexts, where precise numbers are crucial for informed decision-making. In these instances, I emphasized numerical visibility through visual hierarchy, optimizing comprehension.
Before
1. Text-heavy
2. No detailed information with the visualized data
3. Inconsistent layout
2. No detailed information with the visualized data
3. Inconsistent layout
After
1. Communicate insights using both numbers and visualizations.
2. Implement titles and gutters to enhance data chunking and readability.
3. Hint to users about system efficacy with colors and strategic data placement.
2. Implement titles and gutters to enhance data chunking and readability.
3. Hint to users about system efficacy with colors and strategic data placement.
.png)
Iteration 02
Designing expandable grids to balance information accessibility and load
Initially, I widened the gutters to separate information into distinct categories. This allows users to quickly locate and focus on the section they need.
However, at first I surface all the information, leading to data overload for users. At the same time, all the existing data is indispensable for users to comprehend the system's status. How should I balance between the two?
In the next version, I opted to make grids expandable, only displaying the most crucial information by default. Users can access additional details by expanding the grids.
However, at first I surface all the information, leading to data overload for users. At the same time, all the existing data is indispensable for users to comprehend the system's status. How should I balance between the two?
In the next version, I opted to make grids expandable, only displaying the most crucial information by default. Users can access additional details by expanding the grids.
.png)
Additional challenges arise with the implementation of expandable grids.
Two key considerations emerge:
1. How should other grids respond to the expansion?
2. For the expandable grid, how should the data inside respond to different sizes, and how should it be presented?
1. How should other grids respond to the expansion?
2. For the expandable grid, how should the data inside respond to different sizes, and how should it be presented?
1. Design the responsive mechanism
Currently, only the "Switches Overview" and "Recent Switches" sections require the expansion feature.
- To maintain consistency, the expansion is determined by the smallest widget's dimensions, with the expanded grid stretching to accommodate a multiple of its size.
- Since the Switches Overview contains the most important information for users, this section would always remain at the top left corner.
- If the screen resolution falls below 800*600, all the widgets would become the same size and align in either 3, 2, or 1 column, depending on the screen resolution.
.png)
2. Design the responsive data representation
I categorized the information to be displayed in various sizes depending on the frequency of use. When users expand the widgets, additional data becomes visible due to the increased space, while minimizing the widgets reveals only the most commonly accessed data.
Zooming Out
Design the dashboard access on the top bar, featuring icons and text to aid users' decision-making.
The dashboard access must be highly accessible and obvious. Users rely on it for real-time system monitoring and issue identification. Additionally, it's a key selling point, demonstrating our commitment to providing valuable insights and seamless management.
The access was placed on the top bar for efficient access to the dashboard from any feature. Additionally, both icon and text were displayed to cater to users with varying levels of technology literacy.
The access was placed on the top bar for efficient access to the dashboard from any feature. Additionally, both icon and text were displayed to cater to users with varying levels of technology literacy.
impacts
- Enhance the decision-making process for users through improved data readability, employing an expanded modular grids design.
- Streamlines implementation, ensuring engineering excellence and efficiency.
- Effectively fulfill marketing goals by prioritizing data pertaining to system efficiency.
lessons learned
- There is no wrong design but only the most appropriate answer given the scenariosIn deciding the dashboard access placement, I found each option valid. How to know which decision is correct? I found that there is no correct design, and designers should consider use cases and scenarios, generating contextual decisions.
- Effective Communication in Design PresentationsIn presenting my design to engineers, a product owner, and a project manager, I learned the key aspects to communicate effectively. Rather than just layouts, I emphasized design changes and their rationale, along with user flows and system performance across scenarios.
- Balancing Innovation with Development Efficiency in DesignWhile designing the dashboard, the engineering team initially opposed my dynamic block design due to anticipated development effort. However, I clarified the rationale, scenarios, and user benefits. To alleviate concerns about time, I established guiding principles to streamline development.
