HVAC App Design
UX + UI
Mockup of a fictitious HVAC phone app designed to remotely connect to and adjust a home's heating and cooling systems. This app is designed with usability and ADA compliance at the forefront. Colors selected to ensure colorblindness would not effect the usability or aesthetic of the design. Options for large or small print are available, as well as the option for a flipped layout for left handed users.
Done as a college course project.
Process
1: Brainstorming and Thumbnails
I needed a design that includes all necessary features: gauges to show the house temperatures; local temperature, weather, and humidity; an notifications area; and an individual menus to adjust temperature settings and presets. The brief indicated that the app had to be horizontal (I would personally had used a vertical layout).
Both symmetrical and asymmetrical layouts were considers, but the bottom left asymmetrical design was the chosen one, as it was better in terms of both looks and usage, assuming that the user would mainly use their dominate hand to change the settings.
2: Icons
Icons from the chosen thumbnails were cleaned up. Certain icons, especially the temperature options button, was heavily revised for clarity.
From top to bottom and left to right, the icons are Heat, Cold, Back, Temperature Options, Options, Humidity, and Fan.
3: Color Tests
After creating smaller icons for weather status, information, and alerts, I experimented with different color pallets. The goal was to create a color pallet that was red-green colorblind friendly. I included both some options with more traditional red for hot and blue for cold, and alternatives that had little to no usage of red or green hues. After testing these different options with a color blind filter, the best options were the center for the small weather icons, and the left for the main icons.
4: UI draft and final
With the icons and colors finalized, iterations of the UI were mocked up in Adobe XD. The initial left design was intended to mimic a car dash, with a slowly fading ripple effect to represent airflow. The buttons for the options were placeholders (and were the wrong colors). I ultimately developed the second design on the right in order to have a more simple and functional home screen, with sliders for the ideal temperature range. Tapping on the slider head would show its temperature setting. From there, the menus were all rounded and made consistent; the buttons were given a sleeker look; and, finally, an options screen was added with the previously mentioned accessibility options.
Initial
Revised
