My mission was to give the current Online Controller a more Premium look-and-feel. It was a conceptual exercise given to me by my university where I was graded on design and user experience. The only two guidelines were that the app needed to radiate the Daikin feel and that it would be all-inclusive.
We were told that we could choose a niche to focus on. In my case I chose home use because I felt more familiar with it in this case. The platform is also primarily iOS focused.
Home & Detail Page (original app)
I started off with looking at the given wireframes and current app. Immediately I spotted some issues. In context of home use, this app didn’t feel welcoming at all. The app also was a bit all over the place (one example is that it uses different icons for on and off interactions). I also had a hard time in understanding in what their icons were trying to convey — especially on the detail page.
The home page of the app was just a list of all the airconditioning units and their current status (on/off) and temperature. I felt like, from a users perspective, there’s more that could’ve been done to this page.
Schedule (original app)
The schedule — to me — had some room for improvement as well. To set a schedule you had to create separate actions. For example if you wanted the room to heat up from 10AM to 2PM, you had to add an action at 10AM and one at 2PM. You couldn’t do it in one action and that didn’t feel intuitive to me. The current hierarchy also stressed me out a bit because everything seemed equally important.
Consumption (original app)
Daikin also offered a consumption page to track your statistics. The consumption page was pretty clear, but a few questions popped up. What actually is 1kWh? Is this a lot or — more importantly to the user — does this cost a lot of money? I also thought ‘Current’ and ‘Previous’ concerning the weeks was a little abstract. A quick fix for example would be adding dates to give the users some clarity.
JOURNEY + DESIGN DESICIONS
After discovering these flaws, I started researching the competition, apps like Nest, Honeywell, Tado and Ecobee. I looked at how others handled these kinds of patterns and looked for a solid solution. After this I established several key features (and some extra’s as well) that the app should have and started wireframing. I also looked at different apps (for example Libratone) to get more creative and see how they handle certain flows.
When working on the wireframes, I also established a trend board and a style board. This served as a reminder of what's out there on the market and which direction I wanted to head.
Then I started designing. Initially, I wanted to spice the app up with illustrations, but that didn’t work out that well. I remember my first iterations being really harsh and 'in-your-face', so I reflected on my style board again and felt the need to take a different approach. This is where the soft glowy-feel came to life.
I got the hang of working with drop-shadows (not too harsh, not too soft) and minimalism, but there was still one problem; the typeface. I was in need of a typeface that screamed friendliness , but wasn’t too harsh. In the end I went with ‘Proxima Nova’, because it gave me a modern and welcoming feel.
As for colors, I decided to freshen up the Daikin blue the Daikin blue looked to harsh on the white. I do realise that this would not have been possible in a real project, so I do have to learn to work my way around this. On top of the blue, I used modern, saturated colors and changed the opacity whenever it needed to be more subtle.
FINAL PRODUCT + SOLUTIONS
Home & Detail
By doing research at other home-use thermometers, I came to the conclusion that the main focus of the product is to change temperature of the room (you’re in). By adding the possibility to do this on the home screen of the app, I gave the user the opportunity to do switch modes and change temperature quickly, for more complicated interactions with the product (such as air flow direction or changing the temperature of a different room), the user was able to use the detail page.
I addressed the hierarchy of this page. It’s very clear which room has which schedule. I also changed how you would add a schedule. In the past it was very difficult to assign a schedule to your favourite room, but now it’s made simple and visible by just selecting it through a small dropdown.
I helped the user understand their consumption by changing the kWh into the amount of money they’re paying for it. The only thing the user has to do is to add their energy supplier and the app will do the calculation for them. I also changed the ‘CURRENT’ and ‘PREVIOUS’ — regarding to the weeks — into dates, because it gave more sense of clarity to the user.
Extra's & Inclusivity
For the cool, tech-savvy people, I decided to add an Apple Watch app, where the main focus is to adjust temperature. I chose a black interface, because it blends seamlessly with the Apple watch itself and it matches its interface. The circle to change temperature with on screen is technically used to give some sense of direction how hot it is. I'm afraid it's too small to actually use it as a slider, that's why the crown comes in handy. Temperature can easily be changed by adjusting the crown of the watch.
The old Online Controller already featured IFTTT, but I wanted to take it a step further and added Siri integration on iOS. In this way the user just needed to say “Heat up the Living Room to 27 degrees please” and it would be done, that would be super cool right?
To match other platforms like Android, I decided to change some things as the current design is primarily iOS focused.
On Android I moved the tab bar (navigation) to the top of the screen. On the home page, the tab with the overview of all the rooms was placed on the bottom, which means you have to scroll down to see all of the rooms. That doesn’t necessarily cause troubles as — for home use — the user doesn’t own that many airconditioning systems.
In my honest/humble opinion, no app is complete without some delight. Here are some fun animations with the glowing 'central' circle when it's changing modes.