JUSTIN RIDLEY
AirCon Controller
Modern Air-Conditioning Control Interface
Design
Web
Screenshots:
Project Description
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
Interface
For my AirCon Controller design, 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 that are particularly evident for fan speed that brings the interface to life and depict specific 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”.
Example User Journey For A Potential Scenario
Changing air flow percentage in a zone / room then adjusting the temperature degrees
SIMILIAR APPLICATION
AIRCON CONTROLLER
Simple process with information and controls readily and easily available
Experience
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 show the complexity, I looked at one application and generated a journey map detailing the process of changing the airflow in a zone or room then adjusting the main temperature degrees. The chosen example had a very long journey specifically because you are jumping between multiple menus to complete simple tasks. I ensured this process was simplified for my design by providing users with minimal menus to avoid getting lost and an overview of the system that includes controls to the most important functions. As a result, the task was completed with my design in four interaction points compared to the other application, which took seven points of interaction.
Functionality Overview
19°
23°C
Dark Appearance: Off
Fan Control and Colour Adaptations on Interface
This air-conditioner application is made using HTML, CSS and JavaScript. The CSS uses "prefers-color-scheme" @media queries to adapt to darker colours if the user's system supports and has activated a darker appearance or dark mode. 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.
Return to Portfolio