How IoT Works: User-End

User-end development for IoT technology brings unique challenges, especially when we compare it to traditional front-end web development.

Not only do you need a great mobile app and/or web interface, but you also need to carefully consider how users will interact with the device itself and how the device user interface (UI) and software UI will come together to form a unified whole.

In this third installment in our How IoT Works series, we’re going to delve into the user-end stack to show you how Very creates products that are a joy to use.

While the user-end stack technically includes everything from smartphone hardware to operating systems like iOS and Android, we’re going to build on top of these common platforms to create custom mobile apps and other killer software from scratch.

Let’s get started.

Software

Before we write a single line of code, we need to sit down, figure out what features we’re going to build, and decide what platforms we’re going to build on.

Do we want a cross-platform mobile app with real-time sensor data monitoring capabilities? How about a web client for administrating a fleet of devices?

The answers to these questions then inform our choice of programming languages.

JavaScript

By far one of our most common languages for front-end IoT development is JavaScript.

This flexible language is great for creating dynamic content, like animations, interactive forms, or real-time access to your smart device.

While JavaScript started as a way to layer active components on top of HTML and CSS for web pages, developments in the ecosystem have facilitated an increasing number of use cases.

React.js is a primary example. Released by Facebook in 2011, this JavaScript library brought a new way to build UIs for both mobile and web.

By building on top of these libraries, we’re able to rapidly prototype and iterate UIs, which is crucial to developing user-friendly products that go beyond basic functionality.

For example, when we built a custom CRM platform, it allowed us to maintain state in the web browser and automatically sync state with the back-end server to provide soft real-time functionality.

Another key technology that sits on top of JavaScript is React Native. Again, developed and released by Facebook, this framework enables us to create both iOS and Android apps with a single code base.

Because React Native compiles down to platform-native code, it offers fast performance, while its cross-compatibility makes it a clear choice for projects like our IoT-enabled fish tank, which needed iOS and Android applications.

Java

We also frequently use Java-confusingly similar in name to JavaScript but actually unrelated-for a variety of web clients and Android apps.

Java is common for both front-end and back-end applications because it’s portable, simple, and stable. This makes it especially useful for enterprise-grade applications.

For projects that require Android-native functionality, we’ll use languages like Kotlin, a Java redux that Google officially supports for Android development.

The main draws of Kotlin are two-fold: its concision lets us bake in functionality that takes many more lines of code in a language like Java, while its fail-fast model is ideal for IoT interfaces where devices are often exposed to environments and other variables that developers could never anticipate.

Apple

On the Apple side of the equation, if we need an iOS-native application, then Swift is our go-to language. This language is tailor-made for the entire Apple ecosystem, so if we expect iPhones or Macbooks to be major players in an IoT project, then we’ll turn to Swift to get the functionality we need.

IoT User Experience (UX)

While any front end needs in-depth UX planning, testing, and iterating to be successful, IoT UX poses a unique challenge.

Not only do we need a traditional screen-based UX, but we also look at the UI of the device itself and the hybrid UX that results from the interplay between these two technologies 

My colleague and Very’s Lead Designer Andrew Frank urges us to ask some of the following questions:

• What is the IoT experience like in isolation of each part of the product—software and hardware?
• How and why do those pieces work together?
• What new interactions can users have that result from the communication of software and hardware?
• How do we add new functionality to a pre-existing physical product without rebuilding it?
• How is all of this ultimately packaged into a single product experience?

To get started finding our answers, we begin with See | Do maps.

By giving us a visualization of what the user sees at different points in the user experience and enumerating the possible options for what they can do, we start to get a sense of the overall Information Architecture (IA) and high-level user flows.

Essentially, we’re trying to map out the user journey as they go from booting up, saying “hello!” to their device, to putting it to use.

Once we have this big-picture view, we’ll create low-fidelity (lo-fi) wireframes, the blueprint for design that connects the IA structure to the visual design that our user sees.

From there, our designers (who are also front-end developers) and our software engineers “fill in the blanks” to put various features and functionalities in their designated spots.

As soon as we’re done building a minimum viable product (MVP), we begin user testing. Since there’s so much that’s impossible to predict within a closed lab environment, we put our product directly into the hands of the people who are going to use it and ask them for feedback.

What works and doesn’t? What could be easier or more intuitive? And always remember: if you’re the one building a product, you shouldn’t be the one testing it!

Armed with test results, the UX team gets to work on the branding, UI design, and high-fidelity (hi-fi) prototyping.

At this point, our product is coming very close to its finished state. It’s fully interactive, integrates key features, and all that’s left is smoothing out the wrinkles. We continue testing and integrating until we’ve got an awesome connected device that’s easy and fun to use.

Conclusion

One of the key takeaways from Very’s user-end design process is how closely the tech people and the UX people need to work together.

While it’s sometimes too easy for the techies to get caught up in aspects like code or hardware, successful IoT technology brings a strong human element to the table.

From the very beginning of the design process, we get our UX team deeply involved. Instead of waiting to the end and trying to staple on a UI, we build it from the ground up.

After all, it doesn’t matter how great your IoT product is if nobody wants to use it.

Ready to get started with IoT? Take a look at our Guide to IoT Development Frameworks and Best Practices to get your imagination going.