Published on | Prototyping: From UX to Front End — Medium Vivian Chung

And applying UX design to more than just mobile/web

About the client

For our final project at RED Academy, we had the opportunity to work with SmartCocoon, an early stage start-up entering the smart home tech space with a smart vent fan.

I know, anything that has to do with a home’s HVAC system automatically induces (a) glazed eyes; or (b) confused stares. So, let’s put aside the technical aspects of this product and get straight to why this product is so cool: it works with a smart thermostat to enable homeowners to control the temperature in individual rooms.

However, there’s a catch — the app SmartCocoon had prior to working with our team failed miserably at helping users to install the product and see whether the product was actually working. Enter: our team.

Team members: 3 (UX, UI)
Time frame: 3 weeks
Design objectives: (1) design a DIY installation process; (2) determine what type of information users see; and (3) frame how users should expect to interact with the product through the app

The results

Before and After

It goes without saying that the SmartCocoon app certainly needed a visual facelift. However, there was more to this project than just making things look pretty — our kick-off meeting with our client revealed that the app also failed in terms of its core functionalities: helping users install and use the product.

So, while the visual design stands out as the most obvious change, the most impactful change is the way users think about their smart fan and, as a result, interact with it through the app.

Our impact

The clients loved our designs and are moving into production of this app. We are currently working with SmartCocoon to hand off our designs, annotations, assets, etc.

Design process

Using research to frame our design principles

Because the project came with a physical product, our research focused quite heavily on understanding the product — what it is, how it works, and how to install it (not an easy task if you count the number of meetings, phone calls, and emails exchanged between our team and the client).

Our team understood very early on that the star of the show in this project was the smart fan; the mobile app, and any other platform we designed (hint: see “Integration”), exists solely to convey the “smart-ness” of the product. As such, we needed to understand exactly how smart this product was.

Building a research plan to move our client forward

At the time this project was taking place, SmartCocoon had developed an MVP and on-boarded a number of beta testers. Real users to gather data from!

However, none of those testers had installed the product on their own or used the app in any way. Scratch that. So where do we go from here?

We probed and received great insight for why: they had designed an on-boarding process but users got confused almost immediately and a SmartCocoon representative had to take over the install.

We took that as a cue that perhaps we would be better served by stepping back and looking at the bigger picture re: smart home tech users and UI best practices.

Research insights & what this means for our designs

Insight: Automation is one of the most appealing aspects of smart home tech.
Impact: We need to design an app that prioritizes the ability of this product to automatically work and convey that it is automatically working.
Insight: The vast majority of smart home tech users interact with the mobile app in order to do something (rather than passive viewing of information).
Impact: Make sure that active interactions are easy to find and intuitive to use.
Insight: Smart home tech users tend to own multiple smart products with the expectation that they play well together.
Impact: Design for more than just mobile; design for IoT integration.

Designing comfort, simplicity, and functionality

Broadly speaking, these were the features our team was tasked with designing:

Process — an easy and short DIY set-up process
Interface — a simple intuitive user interface to control temperature or monitor activity
Integration — playing nice with other smart home devices*

Our challenge was to figure out how to design these features so that we create an app that is useful (helps users control the comfort of their rooms) and usable (simple, functional) for the target users.

*How we designed IoT integration gets its very own section near the end of this case study.

Side note: our target users

SmartCocoon had done some digital marketing campaigns prior to our project and was able to provide us with some great traits of the target user based on their analytics. This was corroborated by the demographics data we got from our user survey. Importantly, our survey was not sent to SmartCocoon’s beta testers because they were the source of the analytics the client gave us. This meant we could be confident in our demographics data because we didn’t “double dip”.

Our target user is:

A homeowner
Mid-career and earning over $81,000
Open to new technology and likely a tech early adopter
Likely to own multiple smart home devices

Design (cont’d)

Process: DIY set-up

From our research: we realized that our target user is tech-savvy but not technically-savvy. This meant we needed to simplify the set-up process as much as possible so users never had to ask “why am I doing this?”. Our early tests confirmed our assumption that anytime a user asked why, they ended up getting lost or stuck because they started trying to understand why the backend needed whatever information they were providing.

Interface: the dashboard and room page

From our research: the intelligence of these products and their ability to optimize our homes automatically are features that attract our target user to smart home devices. Because of this, users only need to manually override these devices (ie. use the mobile app) when they’re prompted to do so by their external environment. In this instance, this means that the majority of users will open the app when they feel a room is not to their liking. This meant we needed to design within the context at all times; we needed to demonstrate that the devices were intelligent and working on auto without needing any direction from the homeowner. At the same time, the ability to override the device had to be very easy to find because that’s likely the only time users will actually be opening the SmartCocoon app.

Evolution of dashboard designs to communicate “automation” and “intelligence”Evolution of the room page to communication automation but easily switch to customization

Testing

Overall, our greatest insight from testing the app is summarized in the quote below:

Users come with mental models adopted from slightly similar experiences and will likely attempt to apply that mental model to processes that they feel are similar (even if that’s not actually the case). Our team worked with this insight — in this case, it meant studying other pairing devices like the Google Chromecast and trying to instil the same principles and, when applicable, the same steps (e.g. when the device is connecting to the home wifi network).

In short, we tried to make sure that the backend did as much of the work as possible and that whatever the user had to do had nothing to do with any technical elements.

Example: connecting to the home wifi

When connecting to the home wifi network, users just had to press a button in the app — the backend would automatically pull up the wifi network search page and the user would just select their wifi network. Once this is complete, that screen would automatically close and the user would still be in the app and can continue with the rest of the set-up process.

Compare this to the original process: the user would have to exit the app, go to their settings, connect to their desired wifi network (paradoxically, it was even more complicated if you were already on the wifi network you wanted to connect your device to), and then go back into the app.

Test Results: the set-up process

We got some great validation of our assumptions with regards to making sure users always had a progress bar to know where in the set-up process they were. Ideally, the set-up would take about 5–10 minutes. But if it doesn’t, at least users know they’re not super far off from finishing. Designing a one-click device activation process was also greatly appreciated — it took no thought on the users’ part and was always completed with a “well, that was easy.”

The original set-up asked users to name the room and the devices that were in the room. Our test results told us that this was duplicative and the majority of users commented that they would give the device the same name as the room. Users also thought that because they had to name the device, they’d be able to control the individual devices later (one comment when we said that that was not the case was, “well, why am I naming these things then?”). To make things simpler, we removed the need to name the device and just asked users to name the room and add devices to that room.

Finally, during testing, we noticed that users would mistakenly name the home (we called it location because it could be an office, cottage, etc.) the room. For example, someone said they would name the location “master bedroom”. To correct for this, we added an example in parentheses. It was a simple fix for a very impactful error — if users were to name the location wrong and move on, they’d have to go back at least 2 steps once they reach the “Add a Room” screen and realize their mistake.

Test results: the dashboard

With regards to the dashboard, our intent was to keep things minimal and simplistic. However, there was a lot of information that needed to be communicated and, more importantly, multiple numbers signifying different things on the same page. So, in order to speed up users’ comprehension and improve clarity, we added well-known visual cues that would still keep things minimal.

Additionally, because the device syncs with Nest thermostats and will adjust if the thermostat is adjusted, we initially used a syncing/not-syncing symbol to show whether a room is sync’d with Nest or if the set temperature has been customized. Users didn’t really understand the symbol. So, when thinking of design improvements, we chose to only communicate when something is different; users should assume everything is working on default until it isn’t. A later round of testing validated our assumption — users said it was super clear that the kitchen was the only room that had a custom temperature. They could tell this because of the “custom” wording but also because the set temperature in that room was different; the other rooms all had the same set temperature as the house.

Test results: the room page

The room page was somewhat tricky because, unlike most other thermostat apps, this device is capable of giving the user a reading of the actual current temperature of that room (via sensors embedded in the device). This meant we needed a way to show users the current room temperature and the set temperature. Our first attempt included a set point on a slider indicating the current temperature and a dial to go warmer or colder; as the room changed in temperature, the dial would move towards the set point and the current temperature would get closer to the set temperature.

This was a complete failure.

Users had no idea what was happening and the moving backwards aspect made them think that the app was rejecting their set temperature (mental models!). So, rearranged content: the current temperature went right under the room name in the same location at the house temperature in the dashboard. This allowed us to simplify the slider to something that users had seen many times before and were very comfortable with using. Later rounds of testing validated these changes as all users successfully and very quickly moved the dial to whatever temperature they wanted.

Designing for IoT Integration

Integration was not something SmartCocoon had thought of when they first came to us. But our research told us that the users most likely to purchase this product likely also own other smart home devices or are likely to do so in the near future. As such, the user experience would be sub-par without some thought as to how this product (and the app) integrates with:

The smart thermostat this product works in tandem with
Other smart home devices

Working with the smart thermostat: the widget

The purpose of creating a widget was to eliminate the number of steps a user would have to take if they wanted to adjust the smart thermostat and potentially any individual rooms.

We designed a widget that would complement the thermostat widget. It would:

Show users that the SmartCocoon device(s) are responding to the thermostat change
Highlight any custom rooms that may need custom adjustments

Other smart home devices: Hello, Amazon Alexa!

While we understood that the main deliverables were mobile, we wanted to expose SmartCocoon to the idea of voice UI and integration with app-less smart home hubs like Amazon Alexa.

However, given the still early stage of voice UI technology, we kept it simple in terms of functions that could be completed via voice (luckily the product is pretty simple as well):

Check a room’s temperature
Change a room’s temperature

Important things to note with voice UI: the technology is unable to successfully compute context. Our normal speech patterns are highly implicit. For example, if two people are in the living room, someone will ask “isn’t it cold?” What’s left implicit is the location that this person is feeling cold in. Also implicit could be the request to warm up the room.

Next steps for SmartCocoon: making themselves future-ready

While we were able to move their product along quite significantly given the short 3-week timeframe, SmartCocoon still needs to more fully test the set-up process and continue simplifying it.

More importantly, we only touched on the full potential of the SmartCocoon product within the Internet of Things ecosystem. Thinking about further evolutions of this product and any accompanying digital services within the context of IoT will be SmartCocoon’s best strategy to make sure that this start-up is not only future-proof but ready to thrive in the future that’s coming for us (sooner than you think!)

Advancing Smart Home Technology: a UX/UI case study was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Advancing Smart Home Technology: a UX/UI case study

Cool stuff, every week

More Articles