2016 DTE Budget 2.0

Role
Lead Designer

Client
DTE Energy

Apple App Store
Android Play Store

DTE Energy and Vectorform joined forces to create a product that would help customers understand their energy consumption and in turn reduce their intake. The result was the energy bridge, and DTE Insight app. The energy bridge allows customers to view their home’s electricity intake in real time. For the initial launch the only way to display information to customers was in kilowatt hours (electricity) and CCF (gas). DTE quickly found, as expected, these were not user-friendly units and customers were requesting their energy consumption be translated to dollars.

A few years later, we began the process of restructuring the app to create DTE Insight 2.0. Our team sought to understand the best method for allowing control deep understanding of spending as it relates to energy. We build a feature where users can view their energy consumption in dollars and cents against their billing cycle, which is not the same month to month and varies in lenght by customer. Today, this feature has been scaled and integrated into a platform created by Vectoform and DTE Energy called Powerley, and is available to energy customers around the country through their utility company. 

dte-user-flowdte-user-flow

Restructuring the App

Our team looked at many different products and industries for inspiration, primarily banking and health tracking, as well as other energy competitors. We wanted to create an innovative, yet simple budget feature, and align the rest of the experience around it. The previous version of the app had cards that could be hidden or dismissed, more like notifications, which we heard from users was confusing. So we reworked the user flow and main dashboard, creating a streamlined card-based experience with pathways to the most critical information. While our primary concern was the budget feature, we reassessed the cards available on the dashboard and refreshed the content and design of them. We started with wireframes of the updated user flow, and validated these changes with customers before moving a visual refresh of the app.

dte-phones-budgetdte-phones-budget

Creating a Budget Tool

From the dashboard, users can tap on the budget card to set a budget and view their progress against that budget for each electricity and gas. The budget cards and pages present a lot of data in a simple, streamlined manner that allows instant customization.

dte-graphsdte-graphs

Streamlined Data Displays

In launching the update, I looked at the many different infographics in the app, streamlining and modernizing the user interface while building a more consistent and scalable system. 

dte-cards-dashboarddte-cards-dashboard