.png)
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
background
flexible dashboard design for the expanding Control center
During my internship at Mitsubishi Electric Automotive America (MEAA), I designed the control center of the advanced driver assistance system (ADAS), which is used for the management of automated logistics. This is our company's new B2B2C product, and we strive to showcase the efficacy of our system to uncover additional business opportunities.
The product is expected to be launched in Jan 2024.
What was I working on?
I led designs for 13 ADAS features, reshaping the dashboard, notifications, configuration management, and so on. I enhanced visual designs and user flows, fortified the design system, and represented product strategy through my work.
For this case study, I'm only going to walk through the dashboard design.
For this case study, I'm only going to walk through the dashboard design.
challenge
How might we create a flexible and readable dashboard that quickly conveys insights and highlights system performance?
Through research, we found that the system would comprise various primary users, including dispatchers, shipping clerks, and system administrators, each possessing varying levels of expertise in data analysis. However, the dashboard should ensure data readability for each role, as quick decision-making is essential for their respective tasks.
The challenge is compounded by the business needs of the project. Firstly, as the system expands, flexibility is required to integrate an expanding dataset. Additionally, the product manager hopes to make the dashboard an exemplary showcase of system efficacy.
The challenge is compounded by the business needs of the project. Firstly, as the system expands, flexibility is required to integrate an expanding dataset. Additionally, the product manager hopes to make the dashboard an exemplary showcase of system efficacy.
final designs
modular grid design
reduce information overload
By organizing data into modular grids, users can find the needed data by categories, enhancing efficiency.
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.
expandable section
Establishing hierarchy for quick yet comprehensive access
Users see a simplified default view and can click to expand for detailed charts and trends. The design balances simplicity while providing users the right to explore additional information.
visualize data
increase data readability
Since users need to check data while working, visualization helps them understand data faster.
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.
