Smart Home
Project Overview
This project aims to develop a user-friendly and adaptable smart home dashboard designed for a wall-mounted touchscreen hub. This dashboard is to provide a centralized platform for users to manage their various smart home devices effortlessly.
Key Data
Role: Visual designer
Timeline: 4weeks
Tool: Figma
The Process
Process 1: Design research/ Sketches
Process 2: Mockups
Process 4: Prototype/Final Design
The Goal
The goal for this project is to make the user life easier and comfortable by smart home. Since smart home is for all the generation including kids and elderly people, the UI design requires to simple and clear for easy navigation.
Design Research
To kick off the design process, I explored various smart home designs. My focus was on how icons and verbal instructions are used to strike a balance between functionality and aesthetics. Drawing on these learnings, I created multiple sketches. These sketches helped me solidify the overall direction and visualize each screen layout in detail.
Mockup
Building on the design direction established in the sketches, I crafted UI mockups that leveraged visual elements to enhance usability. For instance, color and opacity changes were employed to indicate on/off switch states. While it is a simple solution, these choices significantly improved the user experience by creating a clear visual hierarchy through variations in container size.
The problem: cognitive overload
I have received the feedback from the other designer. One of the feedback was about the cognitive overload. The icons are too big on the menu is too big and making the designs clutter. The main question here was if the menu should be shown all the time.
The Solution
I solved the problem by modifying the structure and elements. First, I employed the collapse menu to reduce the information overload. Second, I reduced the icon size and made more space between the elements. These 2 things make overall design look clean and clear.
The problem : hierarchy
Another feedback was an issue with information hierarchy. The designs did not communicate the emphasis on the status effectively. For instance, the way of showing on/off switch status on light and music screens are not clear enough.
The Solution
I employed the different colors and opacity to indicate on/off switch states for light and music screens. With temperature screen, I utilized the different size of container to emphasis on where to check. While it is a simple solution, these choices significantly improved the user experience by creating a clear visual hierarchy through variations in container size.
Final Design
The modified for the mockups helped to simplify the screen design, and it led the design look more user friendly for all the generation. I believe that the final designs achieved the goal which is easy to navigate UI design for all the people.
Lesson learned
Flexibile design
Unlike mobile or desktop apps, smart home interfaces require a laser focus on simplicity and intuitive navigation. This project emphasized the importance of removing unnecessary information and design elements that can clutter the screen, even more so than in mobile app or website design. It taught me the value of flexibility in design, adapting to prioritize user needs and desires within the specific context of any types of screen design.