The smart way to control your home.

How we helped Magi create a simple, smart home experience... before Homekit, Hue or Alexa were a thing.

 

UI mockup of Magi iPhone app.

 

Project: Magi smart home

Client: Think Sandbox

Year: 2013

Skills: Strategy, Design

Project background

Working alongside the hardware team, on location in Cape Town, we created a simple and intuitive way to control your home using your iPhone.

Learning about the hardware.

The Magi platform, still in development, consisted of many hardware modules that connected via a Wifi bridge to Smart light switches and remotely via the app. We had to navigate complex hardware and software capabilities and restrictions to provide a fast and user-friendly experience.

We started by understanding how the hardware worked. We conducted many interviews with the hardware team, with demonstrations to learn what was possible, how modules connected, what user interactions would be needed. 

 

Sketch notes from interviews with Magi hardware team: Understanding the hardware

Sketch notes from interviews with Magi hardware team: Capabilities & restrictions.

 
 

Designing the experience.

We collaborated closely with the Product and Marketing director Josh Heyneke to understand the vision of the company and product, and what the business goals and restrictions were.

The design intention for this app was to make controlling your home as simple and convenient as possible.

 

Sketching the device control view for Magi iOS app.

Sketching the Add and Edit Scene views for Magi iOS app.

Sketching transitions and Add device flows for Magi iOS app.

 

However it needed to allow more advanced control by engineers, installers and serious home hackers. The experience would be split into 2 modes: the (default) normal "user" mode, and the "Super user" mode which would be activated from iOS settings, with appropriate warnings.

Making the app feel intuitive

The main view of the app contained the devices and the scenes. We utilised the then new Collection iOS view type, which allow many items to be displayed in a grid and were controlled like apps on the iOS Home Screen. This would allow the user to interact, order and edit the items in devices and scenes with familiar touch interactions. 

Wire-framing the Magi iOS app.

Device items would have a fullscreen subview, which allowed them to control the device. Use of colour and large typography afforded glanceable usage.

 

Mapping the Magi iOS app.

Documenting the transitions for the Magi iOS app.

Wire-framing the item groupings e.g. buttons, devices, scenes.

 
Magi-device-control-protoype.gif

Making the app convenient

It was important that the app added more value to the user, than just avoiding standing up and turning on the light switch.

We wanted to make the creation of scenes very simple, empowering the user to to setup more complex home automations. The form followed an "If this, then that" logic, allowing the user to selected device(s), triggers and actions.

Beyond controlling devices, the app also needed to allow adding new devices. This was done by scanning the QR code sticker on the device and its box.

 
 
 
 

Beyond the app.

We aligned with their branding agency to create a clean, flat, colourful experience in the app, helping form a more coherent look and feel across all channels. 

We also collaborated with Siegfried Grimbeek from Howl Media who built the Magi website, providing him with wireframes and visual designs.

 

Wire-framing the content blocks for Magi website.

Magi responsive website mockup.

 
 

What Magi said…

“Working with Matt was great. He very quickly developed a deep understanding of the product and cleverly translated that across to the app and the website. He completely immersed himself in the project and produced and excellent result. I look forward to working with him again.”
Josh Heyneke, Product & Marketing Director, Trustpilot