IoT Mobile App

UX Design. Mobile.
  • ClientConfidential @Perficient Digital
  • RoleUX Designer
  • ToolsSketch, Invision, Lucid Charts
Ever wish you could see if you left a light on? Or turn it on or off from anywhere? I designed this IoT mobile app for sales team. Using the app, the team could demo the technology to potential buyers and educate hardware companies on the kinks. The app supports both Android and iOS.
App Architecture

It’s all about the flow

First, I needed to know how the technology worked. As a team, we whiteboarded the process of connecting this smart technology to the app. The process consisted of pushing buttons on devices, switching to wifi, switching back again, and sometimes even changing phone permissions.

Normally in mobile apps, you want to eliminate steps if you can. For example, if it takes 5 steps, can you get it to 3? But for this app, I wanted to exaggerate the steps to connect the smart physical device to the smartphone without overwhelming. At the end of the day, a salesperson will be taking our work and relying on it to tell a story, educate, and ultimately sell.

When thinking through the screens and flows, I love to take a blank white screen with simple text/button and get it to Invision as quickly as possible. Using Invision, we could roleplay as the salesperson. Tap, wait, tap, touch some button. This lo-fi solution helped our team, client, and sales team feel out the experience and get valuable feedback. Then, we could refine. 

Now the flow was getting somewhere. I used an app map to start documenting. I started at a very high level and added more detail as we iterated.  These maps are essential for:

  • Understanding core functionality and tasks
  • Defining the overall structure and navigational pattern(s)
  • Working through the user flows
  • Identifying areas of complexity

 

App Map
Wireframing & Prototyping

Fleshing out the details

Since I had a basic working prototype, I could layer in more detailed wireframes. I leveraged native lists and controls for most of the work. But there were a few places that I wanted to think through—dashboard and disconnecting items.

Dashboard

Okay, so let’s say you have 10 lightbulbs hooked up. How will we display it? Dashboards are good at giving a high-level overview and drilling into information. I quickly narrowed to springboard or a list view. The list felt a little flat. But with the springboard, we could create bigger imagery for each item that showcased the status of the item.

Disconnecting Items

Destructive items are a necessary evil. But, I didn’t want the salesperson to go through the long process of connecting a light bulb just to accidentally disconnect it during the demo. That would make for a super awkward moment. I thought using a carousel would be an interesting pattern to apply. It’s allows for easy access, but needs the more deliberate swipe gesture to expose.