Voice user interface design and development for Alexa Skill

Stars Wars Force Facts — Personal Project

Created January—March, 2017

Voice UI, Interaction Design, UX, IoT, Product Design

The Task: To design, develop, and test a voice user interface/skill for the Amazon Alexa device.

Timeline
January 19th, 2017 — March 14th, 2017

We were tasked with creating a VUI for Alexa. This process entailed preliminary user research, competitive analysis, market research, historical and cultural research, academic research, information architecture, usability testing, and more.

We were given eight weeks to complete the project and tackle the task of learning how to design for voice for the first time, as well as code our Javascript based Alexa skill.


Final Product & Demo Video

Here's a video demo of the final product, as well as the source code. Feel free to download it and poke around. We used the Minecraft Helper template from Amazon.

Download the Source Code

What is it?

Force Facts is a way for users to grab quick and straightforward Star Wars facts for the topic of their choosing. If they want a Chewbacca fact, all they have to do is ask Alexa to give them a Chewbacca fact. There’s no randomness involved beyond the fact itself.

Process

Starting with a press release to get our ideas out of our heads and onto paper, we began to formulate our Alexa Skill. After writing about it, we set out to create user flows and information architecture maps.


Product Design Goals

Original Goal: To create a fact skill and quiz game combination to test if users can efficiently learn with VUI.

I started out wanting to combine the stereotypical fact skill with a quiz based skill to test people’s ability to learn with VUI. I intended to break out of the conventional mold for Alexa Skills as it stands, as well as test the abilities of VUI in general. This goal had to morph to fit the constraints of my abilities and the scope of the project.

The end goal became to create an Alexa Skill that would give users information based on specific requests, rather than a random output. So users can ask for a Chewbacca fact and get it, rather than asking for a fact and getting a random one from a list.

Updated Goal: To create a skill where users can ask for a fact about a specific topic and receive the information.


Initial Research

Need Finding

Starting by browsing what Alexa Skills exist, we looked to find holes in the market and needs that existed. I couldn’t seem to find any Star Wars related skills that were worth using for more than a few seconds at the time. We then brainstormed a list of six different ideas for Alexa Skills and had our classmates pore over them and give us their initial thoughts on what they thought about the need we were solving.

Quickly identifying if any of your concepts stick is crucial in a process like this.

Getting Comfortable/Scoping

The first thing I did before designing for Alexa was getting comfortable with the platform. Together in a room with my classmates we asked Alexa various questions, tested her limits, and experimented with skills.

One person asked Alexa for something in an intentionally high pitched and scratchy voice, and surprisingly, she understood and responded appropriately. While we noticed the Alexa platforms capabilities, we also noted the shortcomings and limitations.

Here's a quick clip of our first interactions with Alexa.

Initial Research Analysis

This process of Need-Finding and Scoping helped to inform the rest of the project by establishing constraints, and giving me a better idea of what a good plan of attack would be. I did adjust my scope throughout the project, as well as my goals, due to my code ability limitations.


More Research

Market Research

I analyzed the existing Cat Facts Alexa skill and went through the rigorous Voice User Interface checklist from Amazon. I sat down with test participants and asked them to complete tasks related to the skill. I found that the skill only passed two of the items on the checklist, and left users confused.

Historical and Cultural Research

As a class, we watched 2001: A Space Odyssey and analyzed the way HAL interacts with the astronauts. I then watched several episodes of Star Trek: Next Generation to take a close look at the character Data. Specifically, the episode "The Measure of a Man" in which Data is put on trial to determine whether he is sentient or not.

Data is an example of what our culture says about AI

Analysis

While this was one of the most fun parts of the process, this also served to give us context for designing for VUI. What makes people uneasy? What makes AI endearing? Or scary? What does the culture you’re designing in think about AI and voice interfaces?

Main Takeaway: Empathy for the user. Always. Consider the user's environment, expectations, and goals while using the VUI.


Testing Methods

Card Sorting

To begin synthesizing the information architecture and taxonomy, we made original IA maps with notes cards and followed by a few rounds of a card sorting activity. In this activity, the participant takes the cards and arranges them how they think they would fit together. This exercise was very revealing and showed a lot of confusing holes in my IA.

One of the card sorting exercises.

User Testing

Between rapid fire Guerilla tests, remote user tests, and in-person tests, I tested with a variety of different users in my demographic. From mild Star Wars fans to extreme Star Wars fans, I was able to test with users both familiar and not familiar with the Alexa platform. These tests allowed me to see both what I could do to reach fans better, and what I could do to help those unfamiliar with the platform be comfortable.

Action items

  1. Users confused by “exit” in Help phrase.
  2. confused by syntax for getting facts
  3. Disappointed in number of facts
  4. Desiring randomization of facts
  5. Users needed a clearer CTA in intro message
  6. Intro message too long/repetitive

I addressed all of the action items in my capabilities in the final iteration of the skill, as you can see in the last demo video. I made several changes to the welcome message and help message of the skill, as well as updating the description that appears in the Alexa App.

In the future, my next steps would be to test these changes and determine how successful they were, as well as gathering more facts, an open listening state after stating a fact, and adding in multiple facts for each different topic like originally intended.


User Flow v.1

This map represents the starting point for the Skill before I began developing it. As you can see, it forks between a standard fact skill and a quiz skill. The idea was the let users study, and then quiz themselves on what they know. This flow didn't end up in the final version.

Click to see the full-sized version

User Flow v.2

This is representative of the final user flow. It's simplified, but still more complicated than what most fact skills offer.

Click to see the full-sized version

First Demo Video

This is a demo video done at the halfway point. It illustrates some bugs, adding new features, and shows progress.



Retrospective

The most challenging thing about this project was balancing what was feasible with what I wanted to do. I’m not an expert in javascript, so I was unable to accomplish what I had initially intended given the project timeframe. My favorite part, however, was working in an emerging tech space. It was interesting to learn about designing for VUI and what it means to design something that is non-visual.

When designing for digital interfaces, you always consider the user and try to be empathetic to them, their situation, and their preparedness. The same is true for voice UI. As such, there are a lot of similarities between the two design processes. You begin and end with the user, and try to meet their needs.

However, there are a few areas that seem to be more sensitive. For example, when designing for VUI, it’s imperative to be aware of the user’s cognitive load. If the information architecture is confusing or complicated, the user can easily get lost since they don’t have a visual aid to help them. It’s important to give the user a way out, and a means to get help if they’re lost or confused.

I found that it’s harder to learn what you don’t know than it is when designing for digital interfaces. This makes testing with a working prototype early on very beneficial in overcoming this challenge.

Making the skill function took the longest for me: while coding can get me into a “flow” state, it sucks up a lot of time.

I wish I had more time to test my prototype, but given my schedule and time constraints, it was limited. Additionally, coming up with a truly original concept that was possible was hard for me. In the future, I’d love to be able to hand the programming portion off to someone so that I can focus better on the concept and the usability. All in all, I'm very proud of the end product.

Thanks for reading, may the force be with you.

Since you made it this far, You may be interested in this project.

Field Notes "Our Notes" — Personal Project