IOT Home - "Devices" screen and "Kitchen" (room) screen, showing your smart home devices overall and in the kitchen

IOT Home

Presentation Design, UI/UX, Sketching

Figma, Keynote, Paper & Pencil

Product Designer

None

DES INV 21: Visual Communication

Fall 2018 - Spring 2019

Overview

Problem

Smart devices are becoming increasingly prevalent in our homes, but it's difficult to track their data usage, make sure the software is up-to-date, and use each to its full potential.

SOLUTION

IOT Home is an app that allows users to manage all their smart devices in a single dashboard synced across different platforms.

Definitions

Interface metaphor: use of a conceptual model from the real world that’s mapped to an interface (e.g. the virtual recycling bin). Interface metaphors allow for users to more easily understand how to interact with an interface.

How it began

I had the idea for IOT Home in a class I took, Visual Communication and Sketching. I thought about a problem relevant to myself and my peers who have smart devices in their homes, and designed a solution.

Problem

"How Might We... make it easier for owners of smart homes to manage the data usage and functionality of their devices?"

Storyboarding

With my goal in mind, I wanted to start by exploring the user journey. This exercise helped me come up with a narrative for my persona, Jen, and later create a concrete feature set

I created a quick storyboard in <15 minutes.

IOT Home - storyboard part #1
IOT Home - storyboard part #2

Design Principles

Since the project had broad requirements, I wanted to make sure I set myself constraints through some guiding principles.

1. Intuitive
Part of the problem is that the system is complex. The design should conform to existing mental models, and use an interface metaphor for the home.

2. Functional
The actions that can be performed on each device should have a virtual equivalent (e.g. turning off a device can be controlled from this system).

3. Informative
Clarity in data visualizations should leave users with more information than before.

Solution

Concept visualization

I created a concept visualization to explain the idea of IOT Home to my peers and instructor. Using my guiding principles along with the problems I wanted to focus on, I came up with features.

IOT Home - concept visualization

Interface Metaphor

My sketch helped solidify my chosen interface metaphor, which is a room. In each room of their home, the user has a sense of where items are located. Using this sense, I mapped the design to the virtual interface in categorizing devices by room.

Design System

I felt it was important to create a style guide before delving into the design details, to create consistency across my work.

This was a key part of my process because IOT Home was an idea beyond a single application. I had to create a product deck as well, and in the future, could continue this work in designing for the web platform.

IOT Home - style guide

Final Deliverables

I presented IOT Home to my class with the product deck I created. I also had to submit the high-fidelity designs.

IOT Home - title slide
IOT Home - intro slide
IOT Home - features slide
IOT Home - testimonial slide
IOT Home - Devices screen
IOT Home - Kitchen room screen
IOT Home - Google Home edit device details screen
1. View all devices
See devices by usage, and star favorites
2. View devices by room
View room statistics and edit details
3. Edit device details
Manage information your devices store

Learnings

Communicating brand

This was one of the first projects I was deliberate about creating a design system, creating a style guide stemming from principles.

Takeaway: The work put in upfront helped solidify IOT Home's brand from the early sketches to final deliverables.

Intuitive design

With IOT Home, I aimed to take a complex system and make it easier to manage. 

Takeaway: Using mental models and metaphors the user is already familiar with made the product easier to understand by my peers and instructor.

Next Steps

usability testing

Due to the nature of the class, this case focused more on the details of the solution.

Takeaway: Though I received feedback from others, I would want to perform more usability testing with target users before launching.