More from Adobe MAX: 3 Tips on Smart(er) Device Design

Are you ready for a connected landscape?

Image source: Adobe Stock / Tavis Coburn.

By 2020, Gartner estimates that IoT will grow to over 20 billion connected things. And businesses will spend on it: hardware spending alone will reach almost $3 trillion.

In just over a year, smart devices will be everywhere. For designers, it means addressing an intricate ecosystem of connected products where devices meet applications, and applications meet interfaces — each functioning in different ways.

This evolution is already well underway, but successful design for it is still a work in progress.

How to take a smarter approach

Chakib Labidi, founder of UX Playground, dove into the design approach during his breakout session at Adobe MAX, “A Road Map for Smart Design Experience Using Adobe XD.”

Creating a good experience for smart devices combines the specifics of device design with the way people will use and interact with that device in a real-life application within the larger connected ecosystem.

Taking a holistic approach comes down to the difference between designing an app versus designing a smart experience. Moving from one to many.

Here are three tips for making it happen:

1. Take a step back to understand the full ecosystem

This is all about getting a wider perspective, thinking holistically through each interaction that a user could have within the ecosystem, including successes and potential failure points.

As the designer, you need to think through every contingency of the real-life scenario. Let’s say it’s a smart home design for lighting. Is there a light timer? Can the timer be adjusted for a period of days, like a vacation? What if the bulb is burned out? What happens if the light is turned on manually? What do these interactions and confirmations look like in the app?

And on, and on, and on.

Image source: Adobe Stock / daxiaoproductions / Stocksy.

2. Prioritize user expectations

The success of your smart device design depends on how happy — or frustrated — the user is. And it all comes down to expectations.

Think of designing an app that gives an auditory or visual confirmation after an action. For example, “Thanks for your order” might appear after you press the buy button. The user expects this. If there’s no confirmation, the user might think the transaction didn’t work.

With a connected device, there’s the same expectation of a confirmation, but with an added expectation of hardware feedback. If they use an app to turn on the light, the app should confirm it — but the user will need to see that light turn on.

Image source: Adobe Stock / ReeldealHD images.

Because smart devices are highly personalized, it’s important to observe users firsthand to see how they’re using them. Are they getting the feedback they’re expecting, and is it coming at the right times? Where is there room for improvement?

3. Learn invisible boundaries, then test and re-test

The more connected your devices are, the easier everything gets — even if it’s just your phone to your laptop, or a smart speaker that learns your preferences. When this stuff doesn’t work, it’s inconvenient but it can also be super frustrating.

In a smart device ecosystem, it’s critical to uncover any invisible fail points.

These are alternative use cases that can pop up and throw off “normalcy.” In the case of smart lighting, maybe it’s a power failure. Is there an automatic reset, or do settings need to be restored manually? What happens if the power is out long term?

The best smart device design strategy is a practiced one. Avoid surprises by testing any potential boundaries, making modifications, and testing again.

Video source: Adobe Stock / Pixelab Studios.

Finding inspiration: One example and a few tools

If you need inspiration, one well-designed (and very well-cited) smart home example is Nest.

The Nest product family crosses security cameras to doorbells and thermostats, all using consistent design patterns. The products can be stand-alone or work together for expanded system capabilities, and everything can be managed from a single responsive app, whether via smartphone, watch, or web.

Be sure to check out the prototyping capabilities in Adobe XD. You can preview interactions to validate user experiences and make changes on the fly, or record interactions and easily share them to speed up the review process.

You can also use prototyping tools like ProtoPie, a code-free tool that uses Adobe XD to communicate with other pieces of hardware.