4 Steps to Designing the Most Valuable Dashboard For Your IoT Project

Working as a product designer at an IoT company has taught me a lot about the basic requirements of designing an IoT product dashboard. With each project, I have gained a better understanding of what it takes to bring value to the designs that we present to our clients.

In this article, I'll provide a 4 step recipe for designing a web or application dashboard as the epilogue of a five-part series about designing for IoT. So without further ado, here are the four steps to designing and implementing an IoT dashboard:

1. Begin with User Journeys

Just like any other project, there are certain steps that need to be taken in order to begin designing. Before even picking up the paper and pencil, there needs to be a degree of research done to understand the field that the project falls under.

For example, if a refrigerator company comes to us and asks for an application that allows buyers to track all the details of their refrigerators, I would have to have a general understanding of how a refrigerator works, what it does, the standard sensors that would be in such a Applications, and the type of data that can be extracted from the sensors. From there, we would dive into the user journeys and the user stories. This can either be done extensively or as a quick run through.

User personas, stories, and journeys help us gain a better understanding of who the audience is, which helps us breakdown general user habits and routines. For instance, the buyer of a sensor-driven refrigerator is most likely going to fit the demographics of a thirty-five to sixty-year-old male or female living in a full house with kids, pets, etc.

From this information, we can conclude the types of information that would be valuable to that type of buyer, along with the visual trends that would best suited for that persona, such as large, bold fonts, use of greater white space, etc.

2. Create Wireframes: The Birds Eye View

Image Credit: Unsplash

This is where all the fun begins - wireframing. In case you aren't familiar with this term, to wireframe is to set up the basic page structure, or the blueprint, of the different screens to be included in your design. It’s all squares, circles, and triangles, and the objective is to get a good sense of the page layout before you start focusing on the details.

Personally, I love this step because it’s a lot like taste testing - you can draw out as many page variations as your heart desires, and narrow down your options to the one that’s best suited for your project. This is also the step where you have to list out the different pages you need, and the information that must be included within each page that has to be built out, which means you must put a lot of thought into what you’re designing.

While wireframing is considered to be the fun part of the process, it’s also where the user experience is taken into account. In order to create a wonderful dashboard, you must take into account the user’s thoughts and emotions. Remember how you created all of those user journeys earlier? Well, this is where all that hard work comes into play.

How does pressing the “Learn More” button make the user feel? What is the level of frustration that the user experiences when they want to adjust the alert thresholds? Can they find this feature easily or do they have to go on a hunt to find what they are looking for?

For each element that gets added to the interface, the user flow must be taken into consideration as well. Unfortunately, many tech companies overlook this detail and go on to design applications that are not user-friendly, which ultimately leads to the death of their product.

3. Visual Design: Add the Color

This one is fairly self-explanatory. Once the hi-fidelity mockups have been created, and the user flow is thought out, we can then play around with colors and typography. Although this may seem very simple, some important things must be considered in this phase, such as color psychology and branding.

In the case of our earlier example, an energy saving smart refrigerator’s dashboard would most likely be light green with blue accents and a lot of white space to give a light, airy feel to the user interface. Since light green symbolizes nature, love, family, and serenity, a user of an interface with this color may feel calm and grounded, which is exactly how a user under the demographic that was described earlier may want to feel when working with their brand new smart fridge.

Image Credit: Unsplash

4. Prototype: Put It To Test

Finally comes prototyping. This is where you can finally put your design to the test. There are many tools to aid in the implementation of this step. If you have no experience in web development, then you may opt for a less technical tool such as Adobe XD, InVision, or Proto.io. On the other hand, if you have a working knowledge of the basics of web development, then you might want to opt for a slightly more technical tool such as WebFlow, or Atomic. As for advanced web developers, the world is your oyster.

While each of these tools requires some sort of membership, the outcome of their use is tremendous on the progress of your project. Being able to get designs out to your client quickly works in favor of both parties since quick, responsive designs equate to constructive feedback and a happy client.

Regardless of what tools you choose to use at each of these steps, they are the necessary steps that need to be taken in order to design a user-friendly dashboard for your IoT product.

Interested in learning more about our design process? Make sure you subscribe to our newsletter to stay updated on the most current news on IoT For All.