smart home interface
A Snapshot
The challenge: The challenge was to create a wall-mounted dashboard that users can interact with on a smart home device.This design should easily translate into a mobile app version, were one be developed in the future.
My role: For this design, I was responsible for creating all user flows, wireframes and prototypes.
​
The Solution: A two panel system was created with pop ups integrated in. This two panel design was important when considering how transferring to mobile screens would work.
​
The Outcomes: It was important that users have the ability to access everything quickly, keeping interaction as minimal as possible. Additionally, we know that users prefer to see all the relevant information at a glance, from as far away as possible. Because each user will have different rooms and different smart devices, the system needed to be able to adapt to any number of any of these.
overview
.png)
.png)
.png)
design
iterate
research
at a glance
The Methodology: There were four phases of this project: research (competitive analysis), ideate (wireframing), design (prototyping) and iterate (high fidelity design).
​
The Tools: Figma was used exclusively to create all wireframes and prototypes.
The Timeline: This project took 3 weeks to complete in total.
​
The deliverables: 15 home system screens and 8 mobile screens were developed.
.png)
research
competitive analysis
The Research was conducted in the form of a competitive analysis of different existing home systems.
the main takeaways were that: the most successful designs were simple, clear, and easy to navigate; and using familiar elements (such as iPhone features, like rounded edges and tiles) help the user navigate better.
.png)
design
Initial Wireframes
mid fidelity Wireframes
the initial wireframes: it was important to keep a clean look; highlighting features, using negative space and curved lines, and ensuring there was a clear hierarchy throughout. Special features included: widgets providing live updates; easy to access navigation; and shortcuts to pages on the home screen.
​
The main takeaways from feedback were: keep interactive elements large so they're more accessible; refrain from pages being overcrowded with information; ensure all pages feel consistent with text, spacing, and layout. All of this was taken into consideration moving forward.
.png)
iterate
final design
_gif.gif)
final user flow
In the final flow the user is able to access a customized room and edit the 3 smart devices in said room.
​
conclusion
what i did well
.png)
The challenge was to create a wall-mounted dashboard in which users can interact with their smart home devices. The main design objectives included: incorporating a flexible content to support user-specific settings; developing a glanceable dashboard; and incorporating real-world content into prototypes.
The Solution was to make the dashboard accessible, functional, and visually appealing through the use of expandable cards, large icons, dynamic user flow and simple navigation.
what i will do better next time
In retrospect the biggest roadblock was solving the design challenges that arose when trying to develop an interface that was both information-rich and simple. In the end, I decided to use cards to organize information, and allow those cards to be click-able were the user be interested in getting more information.
Moving forward I will plan on incorporating more diverse user research on the front end and giving myself the freedom to remain flexible within design choices knowing I can get feedback from users before launch.