Exploring visual design directions
Now that we had established and validated a direction for the application architecture and interaction design flows, it was time to polish the visuals a little to turn the Zensors into a pleasing product. Visually, Zensors started with a blank canvas — we were free to define the brand and any design elements. Although visual design wasn’t our focus right from the start, over time design patterns emerged (i.e. we all agreed that shades of purple felt natural for the Zensors product), and those were included into new iterations.
Iteration
Ideally, when it comes to visual design, you have some kind of intuition of what ‘feels’ right. You might not get this right on the first try, but experimentation is a big part of the visual design process. For this particular design, that meant hundreds of tiny iterations. Eventually, through all the decisions made in the hundreds of small iterations, the visual design converged to a concept that seemed to work best.
As you move through these iterations, you continuously have to deal with existing design constraints, and have to figure out how to integrate these into a consistent visual language. Typically these constraints are defined by earlier stages of user research or business needs. A header that looks great on the question authoring screen when it’s might when you have to consistently apply the same header in a densely populated content area.
Diminishing returns
If you look at the animated GIF below that shows some of the 300 iterations we went through to get to the final design, you’ll notice that the design plateaus at several stages. Most of these iterations are nothing more than moving an element from left to right, or moving from a 2x2 to a 1x4 grid.
These iterations take a trivial amount of time. You just have to put in the work. I definitely caught myself in the trap of optimizing a single screen too much, too early. Sometimes it’s best to leave an iteration open ended and start over on a blank artboard. This is easier said than done, because I clearly caught myself biased by the solutions to the problems I faced in earlier iterations, and these can’t just be set aside. I personally found it helpful to focus on the general layout and color scheme first. By doing so, I got a good sense of how various elements behave and interact in the context of a specific screen. There’s a big chance that the design will look bland at this point, and that’s totally fine. It is a lot easier to decorate a bland design, compared to restructuring something that’s already pretty and polished, given that restructuring can completely break the applied visual decoration.
Deciding on a direction
The biggest change in visuals is the shift from light to dark UI, and we believe there’s a good argument to be made for it. The main value of Zensors is derived from the ability to quickly glean valuable business insights from sensor data, not from consuming text content (where white would be a clear winner). The visual design of the application should support that goal. Graphs showing Zensors data can be highly complex, and show multiple (overlapping) data streams simultaneously. High-contrast colors on dark backgrounds help users tell elements apart a lot easier than white backgrounds. To illustrate my point, just take a look at the graph below.
Although the chrome of the application is dark, we made sure to draw attention to areas that require user action and input (such as text fields) through increased contrast and colors. Input areas are always backed by white, and graphs are decorated with high contrast vibrant colors, keeping labels white for maximum contrast.
Dealing with ‘ugly’ content
Besides the data, we also had to deal with ‘ugly’ content. This is an interesting challenge for platforms that allow user-generated content. Most of the camera images are relatively low quality, at times poorly lit, and definitely don’t align with the color scheme of the interface. We initially explored solutions that adjust the contrast and saturation of the images, but eventually found that a dark background made it more presentable. Although it might be tempting to design around an image that makes the rest of your design look good, I found it easier to design with an ugly image right from the start. If it looks acceptable with ugly content, it will definitely look fine with beautiful content.
