Daniela Li

Product Designer

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.

Old Tracker

 

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.

Mind map

 

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.

User's flow chart

 

Wireframing and Usability Testing

Mind map

Drew sketches on paper, and built out interactive prototype with inVision.

Mind map

 
Performed Usability Testing with users.

Mind map

 

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.

Mind map

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.

Mind map

My Role

In this project, I was responsible for Design Resesarch, Wireframing, Prototyping, UI Design, and Usability tests.

Final Design

 My Résumé

 daniela.muzili@gmail.com

Work About Blog

Work About Blog

Work About Blog