Energy Tracker UI/UX Design — The Verdigris Way
On the surface, this is a story of how Verdigris redesigned the User Interface (“UI”) for a sophisticated electricity monitoring mobile app, Energy Tracker. But like most things that seem simple at first view, there’s a lot more to this story than meets the eye.
Energy Tracker works for facility managers and engineers, allowing them to peer deep inside their buildings looking for unseen equipment problems. Many of these problems have been developing silently and are invisible to the naked eye until it’s too late. Tracker notifies the right building worker of energy consumption and equipment problems while they are still manageable.
This isn’t just a “woo-hoo, we did it!” post. This is a story of how we got from Point A to Point B — a trail to trace our path in the UI design process.
Why did we need a redesign?
I describe Tracker as like a really nice guy, smart, and good-hearted. He can help you figure out your problems and save a lot of your time. But… despite his kind soul, he gave an awkward first impression. He spoke earnestly, but in an overly-professional and impersonal tone.
To begin with, the navigation was confusing people, with hardly any visual hierarchy to help navigate. The layout was boring, with limited color and generic typography.
Digging Deep
We started the process of redesigning a couple of months ago. We knew that many users found the interface cluttered and drab. But we didn’t directly open Photoshop or Sketch app to design, we went straight to paper and pen. At Verdigris, everything is based on research. How do we learn user’s behavior? How do we create a better user experience? What are our customers’ true needs? Those are big challenges for our designers. It’s not as simple as “designing what users tell us they want.” One of our rules is do not try to figure out what the user wants — figure out why they want it. This is what they need. And finally build what users need, not what they want.
So how did we get here?
Step 1: More sketches, and lots of user feedback
Interviewing people is a big part of the design process. Talk to real users, get to know how they think and what they want. But we always remember to figure out what’s the reason they want it, and try to find a final solution to build what they need.
Step 2: Low-fidelity prototypes for usability testing
How do we find out why a user wants something? Ask open-ended questions. Don’t ask “Would a notification system help you do your job better?” Ask “What are the biggest challenges in completing your job efficiently?” Think about the difference between “Did you click that because you thought it would open the next screen?” vs. “Why did you choose to click that button?”
Step 3: Design, design, design!
During our research, we found we can get big benefits from using a dark background on mobile devices. Black is the absence of light, so a screen with a black background uses less energy. (And we are an energy efficiency company after all!) Mobile devices are also used in a broader range of lighting conditions, including direct sunlight. Black screen are less reflective than white and thus easier to read in direct light. In dark environments, white screens emit too much light and are hard on users’ eyes. Maybe the most important thing, bright colors on black backgrounds just look cool.
Also for fonts, we tried many different typefaces and finally decided on Avenir Next. In French it means “future”, but this typeface is also not missing humanity characteristics.
Step 4: Ship it
Finally, we are proud to announce the latest addition to the Verdigris energy intelligence platform: Energy Tracker!
What we learned from this process
1. Research means everything and will lead us to the final design.
2. Build what users need, not what they say they want.
3. Trust your team’s gut.
4. Design not for users but humans!
5. Have fun!
