This controller is a modern and user-friendly take on an application
to control a contemporary air-conditioner system. The application is
a blend of both simplicity and efficiency to assist the user with not
only controlling but understanding their system.
Design
Overview
From looking at current air-conditioner applications, I found many not
only lacked a modern interface but lacked consideration for the end-user
who may feel overwhelmed by many controls, different menus and jargon.
To improve upon this experience, I simplified the controls into three
distinct sections. I made the left side of the application primarily
for system status and prominent controls such as temperature control
and power. The other two sections “Control” and “Zones” feature secondary
and more refined controls for the air-conditioner. The “Control” section
allows changes to mode and fan speed while the “Zones” section provides
the ability to target and manage flow to each specific room. These sections
use subtle animations which are particularly evident for fan speed which
not only bring the interface to life but depicts certain changes to the
system. The use of colour throughout the interface also informs the user
of the currently selected mode whether that be “Cool”, “Heat” or “Fan”.
Functionality
Overview
Fan Control and Colour Adaptations on Interface
This air-conditioner application is made using HTML, CSS and JavaScript.
The JavaScript makes up most of the interactivity and is used for
manipulating elements on-screen such as changes to temperature, mode
and power. jQuery Color has also be utilised to assist with changing
and fading between colours for the different modes. The application can
connect to many back-end technologies such as PHP to communicate with
an external API to work with a real system which is not present in this
mock-up version. The outside weather included on the left side is outsourced
to conveniently highlight the temperature outside.