Kontrol Panel

What if you lived in a smart apartment of the future?

Team

  1. Ashwin Srihari
  2. Luke Whitesides
  3. Dan Jake
  4. Gabriel Moreno

Trip Hawkins - Faculty Advisor

Tools

  1. iPad Pro and Apple Pencil
  2. Draw.io
  3. Sketch
  4. Principle
  5. Adobe After Effects + Video Copilot 3D Element
  6. iMovie (Yes, iMovie)

Roles

  1. User Research
  2. Ideation
  3. User-centered Design
  4. Video Production

The Problem

As we shift to integrated IoT in apartment buildings, complexity is ever increasing. The IoT platform is fragmented and there are a million different devices, platforms and apps to control your connected devices. Our initial research showed that millennials have a good grasp of how to IoT works, while baby boomer would rather not have digital control, at all.

Katerra, a vertically integrated tech/construction company, is designing smart heating, energy, lighting, and windows that will be built right into their smart apartment building. But with all that, the increasing complexity needs to be tamed, in order to be accessible and easy to use for all users.

Goal

Our goal was to design an one stop solution to help put you in control of everything related to your apartment. Through this solution, users of all age can control their smart apartment experience with ease from the get-go, without any prior experience.

Research

We started our research by using the free resources available at UC Santa Barbara library like the industry reports. To understand the problems faced by users, we also interviewed 40+ industry experts and conducted a online survey with 100+ respondents.

We narrowed our target audience to 3 key demographics, represented by the following archetypes.

Coby

Coby is a 24-year-old freelance software engineer. He is a avid tech enthusiast and an early adopter. He has an Apple Watch which he uses for digital payments.

H already owns a number of connected devices at home and the list is only growing by the day.

Anand

Anand is a 51-year-old architect and a proud father of two.

Even though he has the latest iPhone, he sometimes has trouble setting up those new wireless printers. He is fascinated by AI voice assistants, but rarely ever uses them and would rather do things old-school fashion.

Martha

Matha is a 72-year-old grandmother, all the modern technology overwhelms her.

She reverts using her dumb phone to make calls, even though her son got her an iPad for video calling her grandchildren.

Storyboarding

Story 1: User return home really exhausted from a long day at work and was stuck in a long traffic jam. They just want to wind down, watch some TV and grab a beer/glass of wine. They want the lights to be dimmed and have total privacy. Heating to be set automatically to a nice and relaxing temperature, while the Do Not Disturb is turned on in the security system.

Story 2: User is hosting a huge new years celebration for their colleagues and friends at their apartment and is expecting at least 10-15 people. It is going to get hot, so the cooling need to be adjusted dynamically according to the crowd. Lighting needs to be bright to set the party mood and windows need to be clear, so people can enjoy the skyline view with their drinks!

User Flow Diagram

With the user research and storyboard ready, we were able to draw the user flow diagram in a breeze! A lot of thought went behind designing the scenes, to automate the entire apartment at the touch of one button. We even designed a Smoking mode, that can get rid of the smoke without setting the smoke detector off.

Sketching

Before even we started sketching, we decided that the control device would be a 9-10 inch touch screen device, that the user will interact with. With that, we started ideating on a friendly design that presents the information and controls in a sensible manner.

After brainstorming, we settled on a design where the most important information and settings are emphasized using big bold font. The scenes and control only require a touch of the button to turn on and off.

The finer controls can be accessed by long pressing and up pops the setting menu for the control. Here users adjust the setting manually or turn on the auto mode. Just to be resourceful, we used an iPad + Apple Pencil combo, instead of the traditional Paper + Pencil.

Designing the UI

From sketch to Sketch is a matter of a few hours and 5 cups of coffee. Our final design focuses on using friendly typography and vibrant colors to bring attention to the most important information at quick glance.

The on and off buttons and sliders are similar to controls on modern mobile OS'es that most users are familiar with and therefore already know how to operate. The Dashboard brings hierarchy to the most important information and frequently used controls. Colors are used in a thoughtful manner, to bring attention to important messages and alerts.

Rendering the Product Video

That right! We did not stop there. We wanted to illustrate the product functions and operations in an Apple-style product video. We used a deadly combination of Principle + After Effects + Video Copilot 3D + iMovie, in that particular order.

Our UI animation videos were created using Principle and then the videos were imported into After Effects. The Video Copilot 3D Effect plugin allows us to use an iPad Pro Cinema 4D model with the UI animation video. Wow, that's a mouthful!

After a few hours of messing around with the keyframes on a 5-year-old MacBookPro, we had decent renders of the video clips. All that was left was stitching all the different clips together using a video editing software to match a upbeat background music. Choice of software was iMovie, because it's free!

Check out the end product, it's pretty cool! 😎