Coral | Alex Young-Davies

Coral – A smart home water usage application

Coral is an application that tracks your water consumption. The goal is to help households manage their utility usage by breaking down the data and communicating clear information about where exactly your water is going.

Coral was originally a concept application that some friends and myself first thought up (a few years ago) as a school project. When the class was over, we all moved on. Since then (a few years later) I’ve decided I’d like to pick it up again.

The goal of revisiting this project was to practice and learn more about dashboard design, as this is something I’ve been interested in improving upon. I’ve always appreciated a good dashboard and would like to try my hand at building one that is both visually pleasing while not sacrificing actual usability and clarity.

Highlighted screens

Below are some of the key screens in the Coral application.

Sleep screen

When Coral exists as a wall-mounted tablet, a sleep screen is included for when the application is not being used. Displayed on the sleep screen are basic pieces of information such as the time, date, weather and a single selected metric.

Household Overview

The household overview gives a high-level breakdown of overall water consumption. This screen is broken up into a general overview, your 3 top sources, and a contributor/area breakdown.

Goals

This screen lists all of the household and source goals that have been created by the user. Each listed goal previews key goal progress and can be tapped open in greater detail.

Sources

The sources screen lists all registered water sources in the household. Each source item previews key information and can be tapped to be viewed in greater detail.

Bills

On this screen, you can see your latest water bill and review a simplified breakdown of your costs. You can also view previous water bills and see how your consumption compares.

Settings

Here all configuration, customization and personalization options can be found. Details such as metric choice and theme can be found in their respective categories.

Building data visualizations

This project gave me the chance to work on my communication of information skills when it comes to the structure and styling choices of data visualizations. Some of Coral’s visualizations are standard and some are more custom to bring unique personality and clarified data communication. Below are all the styles of data visualization included in the application.

Line graphs

Optimal for showing gross consumption over extended periods of time.

Bar charts

Optimal for showing exact/aggregated consumption values over a range of different time periods.

Radial Charts

Optimal for showing how consumption compares to an upper limit, quota, or marker.

Dial Charts

A variant of the Radial style chart that can be paired easily with text and information.

Pie chart

Optimal for showing different consumption values in comparison to one another.

Branding & palette

As coral (the organism) can come in many different vibrant colours, I opted to take 2 vibrant colours and pair them as the primary and secondary colours for the Coral brand and UI. The logo is a rather basic combination of the letter "C" and a wave. With some rounded corners, the logo comes together to create a fluid pictograph reminiscent of water. The bold, sans-serif typeface styling was chosen to solidify the goal of clear and concise communication of information.

UI motion & transitions

I’ve always felt like a good and professional UI considers more than what’s on the present screen. Personally, I believe designers should consider how users move to and from areas of an application just as much as the content they are presented with. I believe that adding smooth and clean transitions or micro animations can really up a product's professionalism and keep the user engaged when moving from one collection of content to the next.

Full application prototype

Below is a high-fidelity prototype of what Coral would look and feel like to interact with (minus a few detailed animations for file size). Feel free to poke around the application and explore all the available screens.

Note: In order to preserve the user experience, the interactive prototype is only accessible when viewed on a desktop. Alternatively, here is a short video that demos the full prototype.