Sense

Sense installs in your home's electrical panel and provides insight into your energy use. I'm currently working full-time at Sense doing all things UX & UI for our iOS and Android mobile apps, web app, and various other projects.

Translating confusing energy data into something that's digestible and actionable for the average user.

sense_bannersense_banner

1.0 Styleguide

One of the first things I did when starting at Sense was to create a styleguide that could be used across our various products to establish brand consistency.

Styleguide_MobileStyleguide_Mobile

2.0 Design updates

2.1 UI changes

Using the styleguide as a reference point, we made some design changes to the mobile apps. We rounded the corners of our cards, bar graphs, and buttons in order to match our brand which features our very round device icons and rounded primary font, Circular.

We established a more consistent use of color; using our Sense orange for touch points and calls to action, and our green to show energy use in the graphs and on/off states. We changed the icons in the settings pages to be more consistent for easier scanning.

design refresh 1design refresh 1

 

2.2 UX changes

One question we kept coming back to was 'how do we make the app and stats easier to understand?'.  We reworked the device details page and highlighted 2 of our friendlier and useful stats stats upfront ('cost per year' and 'average % of monthly use'). We placed the additional stats and text into a secondary screen.

We combined the old static graph and stats so that users can now scroll through trends over time and see dynamic stats.

We also created one spot for device settings and management; this was in 3 places before.

 

2.2.1 Tab bar navigation

We switched from our old hamburger nav to the tab bar to allow users to navigate the app easier and make some of our newer features more discoverable.

3.0 New features

3.1 Goals

Most Sense app features are related to unique devices and device detection, but users can still get a lot of value out of Sense with aggregate usage. Allowing users to set alerts based on this aggregate value can help drive behavioral change by enabling users to manage their bill/usage.

For setting goals, we used our madlib-style buttons and gave users a history of their previous usage as a reference point.

Visually in the app, we wanted to show users where they were compared to the current date and where they are trending to for the period. We'll send alerts along the way to let them know if they're on track.

goals2goals2

3.2 Integration: Philips Hue lights

This was the first integration that would have an affect on our UI (previously we did Amazon Alexa and IFTTT).

The challenge here was how to incorporate a new device type - a smart device with controls - into our existing framework.

The integration allows users to track their Hue lights in the Sense app. This includes seeing when they turn on and off, what brightness they are set to, how much energy they are using, and seeing historic light data and stats. We also included control to turn lights on or off or change their brightness settings.

huehue