Designing an interface for smart devices

Designing an interface for smart devices

Overview

This was a team project I did with UX Playground. The focus was to explore the challenges of designing interfaces for smart devices.

This is an incomplete and conceptual project.

The team celebrating after finishing the project

Project Brief

To create an interface that is useful, relevant and enjoyable for the user to manage and control smart home devices in one place.

Research

The first phase was to research about the smart home device market. My team have defined a primary and secondary goal for gathering different insights such as user behaviours and their needs.

We used surveys, interviews and observations to gather primary and secondary data for analysis.

Research Goals

Each member of my team were not smart device users, so we had our research goals focused on people’s experience with smart home devices.

Primary:

To understand how different users manage or would manage smart home devices.

Secondary:

To understand the demographics of users who use and do not use smart home devices to build detailed personas.

Surveys

For quantitative data, we have created a survey using Google Forms and sent them to different people. Our data have identified two user types of smart home devices: existing users and non-existing users.

The following are some data we collected:

Data showing what smart devices existing users have

Data showing what smart devices non-existing users may want to have

Interview

For qualitative data, we have interviewed a user who owns an Amazon Echo. It was a semi-structured session with a list of points to cover. The interviewer also had the flexibility to ask questions if the interviewee provided new insights.

The following are some data we collected:

  • How the user used his Amazon Echo

    • Amazon shopping
    • Playing music
    • Clock timer
    • Weather
    • Internet based questions
    • Telling jokes and play games e.g. rock paper scissors
    • Listen to audio recordings
    • Get inspirational quotes

  • Insights & Behaviours

    • The user has previously used the Amazon dash button and remote, which led him to purchase the Amazon Echo.
    • Alexa sends a weekly newsletter about new skills & features
    • “Alexa sounds robotic when you read books using Audible (Amazon books)” - user quote
    • “We are very big on Amazon…we pretty much get everything through them” - user quote

Observations

We observed different videos on smart devices: review, first impression, comparison and unboxing. The purpose of this exercise was to collect insights on users interacting with different smart home devices.

Our team have observed the following smart devices:

  • Security Camera (Nest)
  • Oven (June)
  • Vacuum (Dyson)

Personas

From our research, we have created a persona for each user type that summarises our findings.

Existing user persona

Non-existing user persona

Competitor analysis

The whole class had to research different smart devices currently available in the market. The purpose of this task was to identify common attributes between different smart devices. This will help us determine the Minimal Viable Product on what features a smart device should have.

Google Doc showing the team’s competitor research on different smart devices

Ideation

After analysing our research data, we have created a list of recommendations and pain points. This was to help us consider the business goals and user requirements.

My team prioritised the list by voting on what the project will focus on. We also agreed to design an app as our concept.

Google Doc showing the team’s votes on business goals and user requirements

Brainwriting and “How might we…”

For ideation, we used the “How might we…” method for creating several challenge questions on our prioritised list of goals and user requirements. We used these questions in our Brainwriting sessions for creating ideas and solutions.

This method allowed the sessions to be meaningful as it considered the different users, processes and aspirations. Therefore, our ideas apply to a specific problem we want to solve.

Our team’s brainwriting session at a coffee shop

All of our ideas from the session

We transferred our post-it notes into Stormboard for review, and as a reference for the other upcoming modules. Initially, our ideas were mostly abstract. However, the feedback we received on our ideation was to have a specific focus for our app.

After reviewing our ideas, the team decided that the app will focus on “food and wellbeing”. We also voted on three relevant features to work on for the project. We did a brainstorm on Stormboard and used our personas to describe how certain features might work.

Brainstorming on the three features using Stormboard

Scenarios and Storyboards

We created several user stories from our Ideation and selected a few for creating storyboards. Each person in my team focused on a specific category related to food or wellbeing for one persona.

I worked on the cooking category and used our Existing User’s partner as the character for the scenario. Instead of doing one scenario, I arranged it into smaller stages. This makes the process easier because each stage involved different uses of smart devices e.g. shopping, prepare, cook.

First iteration of my cooking storyboard for shopping

Based on the feedback, I researched some food/recipe apps on the phone. The purpose was to understand the user journey on specific stages such as onboarding e.g. setting dietary needs. I also used the opportunity to explore different methods of creating storyboards by sketching with pen and paper and creating them digitally.

Final iteration of my cooking storyboard for shopping

Flow Diagrams

We then converted our storyboards into a flow diagram, which was a challenging task. As I have no experience with a smart home device, it was difficult to understand how they may work with different cooking processes.

Based on class feedback, I iterated the cooking process until it was suitable for the cooking feature on the app. However, since my team was working on different features, it complicated the flow diagram when we tried to merge our work together.

Onboarding user flow leading to the features of the app

I had to research existing cooking processes (without smart devices) as a reference and then created a user flow involving smart devices.

My user flow for cooking with smart devices

Wireframes

Each person in my team have created wireframes for the feature we worked on. We also considered how we can connect our features together in our wireframes.

Initially, the first round of wireframes followed no guidelines. However, based on feedback, we have referenced the Apple iOS Human Interface guideline for the forthcoming wireframes. This ensured that our work is using the same elements e.g. icons and using common patterns that users are familiar with.

I kept the wireframes simple and asked for feedback as much as possible. The feedback was interesting as I learnt that people can notice the minor details I missed. It also made me consider my decisions with the user journey I created i.e. if it made sense.

Final iteration of my wireframe for onboarding

Final iteration of my wireframe for recipes

Prototyping

The prototyping module had two phases. The first phase was to create a low fidelity prototype using our preferred tool, and the second phase was to create a high fidelity version.

Each of my team members have created a low fidelity prototype for their feature. For my prototype, I have used Figma and volunteered to combine my team members work into one working prototype. We tried to follow the iOS guideline for designing the interface but it was a challenge as we all had our own ideas.

We also attempted to create task flows for user testing but it was difficult because of time constraints and project complexity. Moreover, we could not create all the screens for connecting all the features together.

Our low fidelity prototype in Figma

Unfortunately, we did not create a high fidelity prototype before the end of the project. However, I attempted to create a basic prototype by using ProtoPie. The tool supports animations and allows communication between devices. I took this opportunity to learn a new tool and experimented by creating two basic prototypes showing these features.

   

       

Conclusion

This project has given me the opportunity to learn about the UX framework, which was a fun learning experience. I also enjoyed collaborating with people from different job experiences.

Although the project is conceptual, it was a challenge to design for smart devices as I am not a smart device user. Furthermore, it has developed my knowledge and understanding on the challenges designers have when creating experiences for smart devices.