Anatomy of a design change: the new Summary View
Design is at the core of how we think about our product. But have you ever wondered what this actually means in practice? A couple days ago, we launched a new version of the Summary View, and thought this might be a great way to open the curtains a bit for you.
A good design always starts with a good understanding of what we're trying to accomplish. The Summary View is meant to be a snapshot in time of where your building stands compared to relevant benchmarks, and how your costs break down. It has several components:
- Time navigation: you can view a summary of your building's performance for a specific month or year
- Usage cards: show your building's usage compared to our benchmarks for similar buildings
- CO2 card: shows your building's overall CO2 emissions compared to our benchmarks
- Cost card: breaks down your cost into components so that you can see how things compare
These fundamental components are a good way to meet the overall objectives for the page, but we realized that they just weren't designed as well as they could be. We spent several weeks iterating over dozens of ways we could change the layout, visualizations, and styles to build something that would embody our design objectives. It was worth the hard work, though; we're excited about the transformation:
There are some obvious changes that you probably noticed right away. The new design feels less cluttered and busy. It's a little more zen, in keeping with the overall aesthetic we've been transitioning to. But these design changes aren't just based on subjective preferences. They're a result of thinking carefully about what the page is meant to accomplish, and how we might do that in the clearest way.
We improved the visual design based on several basic principles:
- Avoid confusing redundancy: The usage cards used to have two graphs on them, which meant more work for the user to understand everything on the card. Merging the two graphs removed the need to display the actual usage twice, and allowed us to convey the same information more concisely. (In data viz circles, this is known as increasing the data-ink ratio.)
- Visualize data in a way that clarifies the message: The two benchmark comparison bars in the old usage cards have been incorporated into a single slim axis bar. This is a more honest representation of what a benchmark is: a statistic extracted from a broad distribution of data; the "efficient" cutoff point is obtained from the same distribution that contains the median and the "inefficient" cutoff point. The axis bar gives a very coarse encoding of this distribution in four colored quartiles.
- Use visual weight to focus attention: The new design gives visual priority to the building's actual data, shown as a thicker bar, over the benchmarks that data should be compared to, shown as a thinner axis. This helps guide your attention so that when you see a benchmark axis, you already have some idea of how it should be interpreted.
- Use colors to aid understanding: The old design used the same color to mean multiple things. For example, blue represented "Actual" usage, but it also represented "Water". In the new design, the usage bar uses the hue that correlates to that given utility (eg. blue for water) which should make each card more distinguishable. An increase in usage is represented by an increase in colour saturation, this allows us to reduce the amount of colours used per card leading to a simplified and, hopefully, easier to interpret interface.
- Use appropriate labeling: The old view had some vague or even incorrect labels. Our benchmarks show quartile values for similar distributions. We say any building in the top 25% is "Efficient" and any building in the bottom 25% is "Inefficient". So far, so good. But in the old view we were using the vague label of "Similar" for the median benchmark value. Even worse, in the top of the card we incorrectly used the word "average" instead of "median". We've now changed that to accurately refer to the median in all labels.
- Use space efficiently: Every card in the new page is the same size, which means that we don't end up with wasted empty space like you see in the old view.
- Be consistent: The CO2 card in the previous view was inconsistent with the rest of the page. While the other boxes showed data for the specific time frame that was selected (a given month or year), the CO2 box always showed a line graph of all data available for the building. This type of inconsistency is confusing, because you end up spending as much time trying to understand the inconsistency as you do the data itself.
- Avoid pie charts if you care about understanding data: Pie charts look pretty, but they are notoriously terrible for making comparisons. If you look at two slices of a pie that are different by 10%, you'll have a hard time being able to see the difference. But bar charts are great for this. People use pie charts mostly for aesthetic reasons, but usability should always come first. So, we updated the cost card to use bar charts instead.
Another bonus: if your building is eligible for a WegoScore, you can now see it on the Summary View.
And, just for fun, we'll leave you with an animated gif of the new page in action.
Check it out and let us know what you think!
Dan Winer, John Rutherford, and Jed Dewyea contributed to this post.