Designing the Reduce app


I have always been primarily a print focused designer and until early last year never really saw myself transitioning from that role at all. I think what I liked about print based design was that the process of creating itself is fairly simple, you have one medium and you have total control over it. Control is definitely my safe place and the somewhat messy nature of digital projects turned me off. Another aspect of print is that there’s a clear start and end, you get a brief at the beginning and then you send it off to print — it’s very linear and there’s no context for iteration — once it’s done, it’s done.

However sitting in my comfortable controlled sphere of design did not keep me satisfied. I am curious by nature and my curiosity left me wanting more. More complexity, a wider range of projects, I wanted to iterate and iterate, I wanted to create great work regardless of the medium. My curiosity was captured by the emerging design trends on the web, the sophistication of design in the mobile space and the growing realisation of the importance of ‘design thinking’.

I found myself reading apple’s HIG just for fun and then when Google released material design I was arrested by the thought that had gone into not only creating the guidelines but fleshing out a whole new set of design principles. Plus all the great design going on on the web is hard to ignore.

I knew I was missing out on something exciting and wanted in. I wasn’t looking at print designer versus digital designer any more, design is design the only difference is in the medium. I think Massimo Vignelli puts it well in ‘The Vignnelli Canon’:

Design is one — it is not many different ones. The discipline of Design is one and can be applied to many different subjects, regardless of style. Design discipline is above and beyond any style. All style requires discipline in order to be expressed. Very often people think that Design is a particular style. Nothing could be more wrong! Design is a discipline, a creative process with its own rules, controlling the consistency of its output toward its objective in the most direct and expressive way.
Massimo Vignelli

So I went ahead and signed up for a short ten week industry lead digital design course. I wanted to rip that label of ‘print designer’ off, give myself a challenge and try something new.

Design is about problem solving, looking at a finished product is merely the result, not the process. I think there’s beauty in the process, so the following is a look at the process of designing my final assignment for this course. It’s a bit of a long read, but I hope you’ll stick it out to the end.

The Brief

A very loose brief was given, I assume to encourage us to develop a range of different problems to solve:

The Smart Home.
Consider any and all home appliances and products are equipped with ‘smart
technology.’ Rethink how users might interact with everyday objects and how
technology and design can improve lives.

After a lot of brain storming and thinking about how technology and design can improve lives in the context of a smart home I finally settled on one idea.

My initial thought was to create some sort of home management hub but with a goal of reducing your environmental impact rather than simply focusing on home automation. I then expanded on this by stating that it can achieve this by giving the user more control over their energy and water usage around their home.

This idea fit well with the current cultural shift towards wanting to be more environmentally friendly. The rising cost of energy was also a consideration but I decided focusing on reducing your bill wasn’t what I was trying to achieve here. The product needed to be all about reducing one’s impact on the environment through reducing their usage.

Discovery & Findings

To start things off I asked a few people some questions about their utility usage around the home. A few key points I discovered from this:

  1. Generally people don’t know where to start when it comes to reducing their use around their home.
  2. They don’t know how much energy their appliances are using.
  3. They’re not sure how much water they use.
  4. They generally don’t have much of an idea about their overall consumption at all.

The problem I was trying to solve

There are currently lots of ways to track your energy, but currently no way to help you manage it as a whole that can also link directly into your smart home/appliances. There needs to be an easy way to not only track your usage but also to reduce it and change usage habits around the home.

You can view your usage on your bill, but by the time your bill comes it’s too late to do anything about it. Some energy providers do allow you to track your usage through a web interface in real time — which is great — but unless you actually know what to do with that data it’s not very helpful.

What the solution needed to achieve

I iterated and iterated this until I had a succinct single sentence that I could refer back to as I evolved the solution. This was the core of what the solution needed to achieve.

Receive insights into your energy use, have control over your appliances and receive contextual suggestions, all working towards reducing your use.

The core idea to achieve the above solution consisted of four functions:

  1. Track
    First the product needed to track usage around your home.
  2. Measure
    Second it needed to measure the usage. This involves taking the data, presenting it in a meaningful way and comparing it.
  3. Change
    There needed to be a way to take the measured data and incite change concerning usage. The product needed to either do this for the user or sufficiently encourage behaviours to make changes for the better.
  4. Reduce
    This is the ultimate goal that the above three actions should be working towards. If tracking, measuring and changing aren’t adding up to a reduction in use then the product has failed at it’s objective.

Brand personality

As this was primarily a digital design project and not a branding one I didn’t spend a lot of time on developing the brand. But I did carefully consider it and how it would flow through the product.

I wanted the tone of the copy to be friendly and conversational, I felt it needed to seem like your home was talking to you and helping you to achieve your usage goals. This mindset also works into the ‘change’ aspect of the product — the product needed to speak to the user in a literal sense to encourage them to change behaviour.

Although the tone of the copy needed to be friendly I felt an overly friendly look was the wrong approach for the visuals. There was going to be a lot of data to display and so I felt the visuals should be slick as well as accessible.

My ‘mood’ for the brand and also the final image for the home screen.

The name comes from the fourth and final function of the product: Reduce, which is the ultimate goal of the app.

Reduce was not the first name I came up with though, I went through many iterations. It was only after defining the core idea of the product that I was able to settle on Reduce as a name.

The solution

From here I made the decision to create a smart phone app as an interface to the hub. The hub would be the physical coming together of all the different appliances and the app would be the interface to it all.

I developed a list of minimum features I thought needed to be included in the app to make it meet the need. There was plenty that could be done, but having established my core idea earlier I started with just the features that would help the app to accomplish this.

Sketching & Brainstorming

The first thing I did was to develop some user flows to give myself an idea of how the app could work. I then expanded on these to create a more overall view of the app’s structure.

My very first thoughts on how the interface might function — this changed drastically as I refined it.

This evolved and became simpler and simpler as I iterated. I found using sticky notes was a great way to represent each action and subsequent screen.

Sticky notes represent individual screens and user actions.

Since the app had the potential to interact with any number of appliances I picked just a few to focus on and some possible ways the app could interact with them.

The Set-up Process

Early on I recognised that the app would need some sort of set-up process on the first use. The app acts as an interface for the wireless hub so I needed a simple way to pair appliances and the app with the hub. I decided creating an account that links to the hub to be the best solution for this. This way you pair the app with the hub when on the same network once, and then create a login which can be used on any device as well as when you’re away from your local network.

The basic flow of the set-up was:

  1. Pair the app with the hub.
  2. Create an account.
  3. Detect and add compatible appliances.
First sketch of the set-up process.

The set-up process evolved as I continued working on it, but this basic flow remained constant. Initially to pair the hub with the app I thought of entering a serial number which would be printed on the actual device. This seemed like a good solution at first but it just wasn’t as user friendly as I would like.

Ditched physically entering in details for a friendlier QR style scan.

Finally I decided instead of making the user manually pair with the hub why not just have the app search your network for it and pair automatically. I found this to be the simplest solution and I didn’t see an issue with having to be on the same network for the initial pair. It then finds any appliances also on the same network and then provides the user with a list. To add the hub to the network itself I figured it could include a WPS button on it to add it to your existing wireless network or simply via Ethernet cable.

The final set-up flow.

Dashboard Screen

The dashboard was probably the most difficult to design and
the most important part of the app. In my initial sketches I
had different looking charts for different types of appliances.
While I don’t necessarily think this is a bad idea, for the sake of keeping things simple to start with I thought it better to keep
them all in the same format.

Early dashboard sketches.

I split the dashboard up into three sections as a way to view your history; daily, weekly and monthly. As an example, below on the left is the electricity usage for the day. The blue bar represents the overall usage for the day so far, with the full (unfilled) circle representing the daily average which we either want to try and match or beat. The data was purposefully represented as a circle because it encourages the user to be constantly using less and less — you don’t want to over complete the circle. The average daily could be drastically different on different days of the week so it could always be calculated based on the average for that particular day.

Swiping left and right changes which appliance/device you have in view, making it easy to compare usage between them.

Final dashboard screens.

Each page has it’s own individual settings which an be accessed by swiping up, indicated by the bar just above the bottom navigation tabs. Here you can see some extra stats relevant to the selected device, so for example, solar panels include the weather, battery charge and current solar generation. A sprinkler system might have something like, weather, and soil moisture level. Every appliance also has an on/off switch making it easy to control things no matter where you are.

The suggestions feed

The suggestions tab is where the ‘change’ function of the app takes place. I wanted to offer more than just usage tracking, the app needed to analyse the data and give the user suggestions to aid in reducing their use. The feed acts as a timeline, so the suggestions are always appearing in exactly the right context for the user to make the change then and there. The longer you use the app for the better the suggestions would get, the app could learn the best way for you to make reductions. The suggestions are based on numerous factors, taking into account all of the data available. They not only appear in the feed within the app, but are also presented as push notifications, always appearing exactly when you need them.

Suggestion feed shown as a timeline.

I went through a few iterations of the name for the suggestion feed before I settled on ‘Suggestions’. I started by simply calling it ‘Notifications’ almost like the iOS notification centre and just displaying each of the messages one after the other. This idea was rejected because it wasn’t really adding anything to the app, something like this could exist purely outside of the app itself. This is when I thought using a daily timeline was a better approach. It encouraged approaching usage one day at a time, which directly corresponds to how the dashboard is displayed.

The next name that came up was ‘Activity’ but I rejected this one as well because it wasn’t really activity that was being shown in this section, but rather helpful hints. I then landed on ‘Recommendations’ and ‘Suggestions’. ‘Suggestions’ was the winner for two reasons; I felt it was friendly but still authoritative and secondly the actual length of the word fit into the width of the tab a lot better than ‘Recommendations’ did.

Take a look at the final app below:

The final app

Final thoughts

Something that I found immensely valuable from doing this was working through every part of the process, from conception to a finished design. It solidified for me the truth that design is more than just moving pixels on a screen. Design as a process is the ability to effectively solve problems and hopefully solve them in a beautiful way that really adds to the world and doesn’t just introduce more visual noise — we’ve got enough of that.

The idea of design really helping to create change for the better really resonated with me while working on this project. The concepts I introduced in the project are only small steps towards changing behaviour but they have the potential to make a big difference. Likewise designers around the world wield incredible power, through the small things they do there is the potential to make a big difference — for the better or the worse.

If you’re interested you can take a look at Reduce on my website: