ISM: Dashboard Design
ISM: Dashboard Design
Air compressor distributors wrestle with a unique problem - they must manage a large client base with infrastructures that vary dependent upon the needs of the manufacturer. Toy makers, car companies, and countless other manufacturers depend on air compressors to run their business, but the sector has been largely untouched by any technological advances that would improve their operation. Industrial Systems Management (ISM) aims to bridge that gap by creating air compressor management web app that does away with the old system of rolodexes, binders of invoices, and frantic phone calls that come too late :
With their dashboard, air compressor distributors are able to manage clients, put out fires, and prevent issues before they come to fruition. To make their vision a reality, Industrial Systems Management came to our team of designers to build their product from the bottom up.
The week before I joined the project, members of the design team got a head start on research. They conducted competitive analysis - though few competitors existed - and investigated the metrics we were going to need to measure to monitor an air compressor system.
Sampling of secondary research
Though the secondary research was a good foundation to build upon, we knew to intimately understand the problem we were solving, and who we were solving for, we were going to need to leave our desks and head to the wild.
Two members of the ISM team performed a site visit with an air compressor distributor to better understand the scope of a distributor’s work and the various systems that currently solved the problem ISM addressed.
What was found was an extensive library of binders filled with compressor manuals, contacts, and invoices- a large footprint for anyone to manage without being accompanied by a considerable amount of stress and inefficiencies.
Current state of Air compressor management
It confirmed our suspicions heading into the project: we were attempting to completely overhaul an antiquated system. And though it was outdated, it was entrenched in the distributor’s workflow. Any attempt to replace it had to be valuable enough to convince distributors to abandon a system they depended on their entire careers.
Through our interactions with the founder and distributor, we had two clear personas to keep in mind going forward: the distributor that wanted his existing workflow to be more efficient, and founders that wanted to reimagine the workflow itself.
With all designs going forward, our personas informed the decisions we made regarding hierarchy and helped clarify the scope of the project itself.
To lead into our design studios, we spent every standup presenting sketches we worked on individually the night before. By the time we were subjected to the constraints of a formal design studio we were able to move quickly to produce the designs we would eventually test with our users.
Structure of our design studio
Understanding our user base informed our decision to present a paper prototype through initial user testing. Distributors were used to interfacing with physical objects in their workflow: invoices, manuals, and pen and paper. To introduce a digital prototype might capture unnecessary noise and negatively affect the results because of the medium used.
Sample of Paper Prototype (Annotations by user)
Paper prototyping created a more collaborative atmosphere with our user. He felt free to mark up our prototype while he uncovered the following pain points:
To our user, alerts were all he cared about - when is a factory going down and what needs to be done to quell the issue? In response, we integrated a more robust alert view, and briefly flirted with the idea of creating an alert only experience without the metrics we captured in our paper prototype.
Once the modifications were made we created a digital lo-fi prototype presented to one of the founders. While he understood the importance of alerts to a distributor, the value proposition of Industrial Systems Management was the predictive AI they planned to incorporate to monitor air compressor systems. If employed, alerts could theoretically be prevented before they surfaced, resulting in a drop in their hierarchy.
Heading into HiFi, we created a makeshift mood board and drew inspiration from the pieces we gathered. We scoured the internet for examples that would inform the creation of the design principles we would operate by.
After a brief round of debate, we voted for the pieces that most closely aligned with the goals of the project. We broke down what made the designs successful, and synthesized our findings into 5 principles:
We employed Brad Frost’s theory of Atomic design to help manage the complexity of dashboard design, and to limit any potential incongruities that might surface while working on a large team.
an atomic view of Industrial systems management
To ensure the components we were building were consistent, we created living style guide to document the standards that our designs adhered to.
ISM STyle Guide
As the project evolved, the guide adapted to reflect the changes we made throughout.
To ensure that the web app addressed all possible use cases, we designed the dashboard to be responsive. We prioritized the desktop experience because it was how distributors were primarily going to interface with the app.
To translate our designs to mobile, some changes had to be made to the visual hierarchy to prioritize system metrics.
Throughout the process of building out our desktop experience, we kept mobile in mind. Creating self contained modules for the metrics we were measuring allowed us to easily move them around to adjust to the constraints of a given device.
Building a dashboard is a complex process. Building one for an industry largely ignored by technological innovation presents its own difficulties. Balancing the needs and wants of our users with the goals of the business led to some tough decisions. But through thorough research and a deep understanding of the problem we were attempting to solve, the choices we made led us closer to the finish line.