Made with by Daniela in San Francisco Bay Area, Califronia.
Energy Tracker App
Design for a new platform to deliver energy and facility management capabilities
Verdigris energy tracker app notifies the right building worker of energy consumption and equipment problems while they are still manageable.
- Research +
- UI Design +
- Usability Testing +
Original Problem
Facilities managers and engineers are walking around their buildings looking for equipment problems. But many of these problems have been developing silently and are invisible to the naked eye until it’s too late.
When I came to Verdigris, there was a Tracker app designed for solving this problem. I described this old Tracker app as a smart and good-hearted guy, to help people figure out the problems and save a lot of time. But… despite his kind soul, he gave an awkward first impression. The navigation was confusing people, with hardly any visual hierarchy to help navigate, and the layout was boring, with limited color and generic typography.
This image is the UI of old Tracker app.
Design Research
I didn’t immediately design with Photoshop or Sketch, instead of that, I started with paper and pen. Performed the research first, what are users' behavior, how to develop a better user experience, and what are customers’ true needs, these were big questions and challenges for me. Design for people's need, rather than what they tell me they want.
Interviewing people was a big part of the design process. Talked to real users, got to understand how they thought and what they wanted, and figured out what’s the reason they wanted it, finally tried to find a solution to build for their need.
According to research, maped out the user's flow chart.
Wireframing and Usability Testing
Drew sketches on paper, and built out interactive prototype with inVision.
Performed Usability Testing with users.
Visual Design
Based on research, we found we could 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. The black screen is 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. Moreover, bright colors on black backgrounds just look cool.
Here is the color palette for UI design.
For fonts, I tried many different typefaces and finally decided on Avenir Next. In French, it means “future”, but this typeface is also not missing humanity characteristics.
My Role
In this project, I was responsible for Design Research, Wireframing, Prototyping, UI Design, and Usability tests.