Home > Mobile prototyping > Prototyping connected user experiences for IoT
Responsive prototypes, interactive UIs and user testing early on to create connected UX for the Internet of Things

Responsive prototypes, interactive UIs and user testing early on to create connected UX for the Internet of Things

“Only connected devices that connect deeply with their users will have staying power.” Bill Horan, Bressler Group

The Internet of Things (IoT) is seeing a marked shift in focus from manufacturing toward mainstream adoption. In fact, as of June 2017, consumer electronics ranks as one of the top IoT investment segments – and is projected to become the third-largest by 2020 with over 26 billion connected devices.

What is internet of things in relation to consumer electronics? In essence, IoT connects objects and devices – IoT examples include mobile phones and systems within the home – via the Internet in order to make our day to day processes more straightforward and efficient. As Jacob Morgan at Forbes puts it, IoT is “the relationship between people-people, people-things, and things-things.”

With the business value of IoT accepted, UX UI designers must now focus on boosting the user experience of these connected products. Rich customer experiences that connect users with their devices, and devices with other systems, allow IoT products to automate tasks, offer decision making support and enhance situational awareness.

This post offers advice on the importance of creating connected user experiences and how mobile app designers can get started with a Justinmind prototype.

Responsive prototyping for connected IoT products

Many connected IoT devices are mobile. For smaller screens, designing for optimized power consumption and data capacity should be top priorities. Designing responsively – that is, designing in response to the user’s behavior and environment based on the UI’s size, orientation and properties – allows the designer to build out experiences that will adapt to the viewer’s device and connect devices to each other. And, with a responsive approach, security updates, feature enhancements, and bugs need only be addressed once, and more quickly than if multiple, parallel UIs that needed maintaining.

How to prototype responsive design:

Prototyping a responsive design with Justinmind is easy. Start by creating a screen for each device (e.g. desktop, and tablet as well as Android app design and iOS). You can change the width and height manually in the Properties tab.


Add the desired content to each screen. You can use templates and masters to replicate UI elements and common styles across multiple screens to save time.

Use linking (‘Link To’) events and the expression builder to create expressions relating the screens to each other. Find more info on creating a responsive web experience here.

Download Justinmind now to prototype the next big IoT user interface 

Download free

UI interaction that will create a deep connection with your IoT device users

IoT devices are built to help the user solve problems quickly and effectively through digital or ambient interaction – like with the Tile app that helps users recover lost items through a series of interactive features.

It’s the little things – the micro-interactions – that make the overall user experience. Whilst macro-interactions help users reach their end goals, the micro-interactions – the moments that accomplish a small, singular task – help UX designers create connections between larger tasks.

When designing complex interactions for the IoT, you need to design each touch point. Whenever a user interacts with the UI, you need to give them enough feedback for them to achieve their end goal – for instance finding their phone. Feedback creates communication between the device and the user.

The micro-interaction can be broken down into four parts: the trigger (manual user action or system trigger), the rules (determine what happens during the interaction and what the feedback will be), feedback (how the user knows the outcome of their action) and loops (determining how long the micro-interaction goes on for).

Here’s an example of how micro-interactions provide user feedback in the Tile app:

  • The goal: the user wants to find their phone
  • The micro-interaction trigger: the user opens the app and double taps on the Phone tile button to call their phone (a manual user action)
  • The rule: *invisible-to-the-user system action to determine what the feedback is*
  • Feedback: a dialog appears confirming to the user that they are ringing their phone from a Tile
  • Loop: none, dialog feedback remains visible until the user dismisses it
Image credit: Tile

How to prototype UI interactions:

Small product moments complete the UX flow by giving the user feedback on their actions or visual cues of what’s coming up. Building them out and testing in your prototype will help you make them as powerful and effective as possible. Justinmind’s Events system allows you to make those gesture-heavy mobile UIs in just a few clicks – helping you give visual feedback easily.

Start by choosing a trigger: a tap, swipe, pinch, page load – there are loads to choose from. Then, complete your event with an animation: move, resize, show, hide, rotate, change style – here’s a list of all the animations available.

Keep things personalized to keep up with consumer demands

As consumer power grows, so does the user’s demand for customizable device settings. Customization is important because it helps companies know where they’re going right and where they’re going wrong. For instance, if lots of users are customizing their app’s UI, say going from a dark to a light themed-UI, perhaps the app designer might think about changing the default setting.

The data that IoT-enabled products generate help to create personalized experiences for their users through custom app settings have also become popular thanks to IoT. For instance, the Daihatsu Motor Company uses 3D printers to offer 10 colors and 15 base patterns to customers so that they can create their own “effect skins”.

Building customization into your Justinmind prototypes

You can create a lifelike replica of your IoT product UI with Justinmind’s, wireframes and prototypes which are totally customizable. The UI elements have been built with atomic design principles, which allows them to be taken apart and built back up as needed. You can even scale SVG images and change their color.

The UI libraries help designers to maintain industry standards and create complete experiences e.g. the Charts UI library has a maps section so you can reproduce the map in the Tile app.


Data-driven insights for your IoT user experience

Creating a meaningful user experience starts with understanding your customer. And in order to get these insights, you need to collect and analyze data related to user behavior and how they are interacting with your products and services. With that information you can start to identify gaps in your features and improve them to the benefit of the user.

We’ve already mentioned that IoT devices produce streams of data that provide great insight into usage and feature preference. Spending on Analytics in IoT has been predicted to generate $21.4B by 2020.

Reacting to these insights can help detect trends and behavior patterns that will enable you to create added value for users by performing updates, improving operational efficiencies and developing features. Companies who harness data to make a better product or service increase insight into user behavior, gain a deeper understanding of customer use of products and the customer journey and distinguish themselves from the market in order to improve their bottom line.

Collecting and storing data insights in your IoT prototype

Collecting data to improve your IoT UX starts with user testing your prototypes. Testing your ideas early on will encourage you to adopt a data-driven design and development strategy and make it routine throughout your product’s lifecycle.

Justinmind is integrated with leading user testing and usability tools so you can collect helpful insights and feedback right from the start. You can create tests with real users or even arrange to perform qualitative tests with live users through tools like Userlytics.

The takeaway

The Internet of Things is becoming an essential driver for customer-facing innovation. And when it comes to designing innovatively for the customer, everything starts and finishes with the user experience.

The key to creating innovative IoT products is creating connected experience across devices. Designers need to determine how to distribute functionality across devices and think responsively. And remember, the only way to predict how users will behave in relation to your IoT product is to test out their responses from the beginning.

Emily is Marketing Content Editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *