Design a voice application of your choice that uses intents, utterances and slots on Voiceflow platform.
Project Background
Time
- 5 hours
Tools and Methods
- Voiceflow platform
- Pen and paper
This is a detailed documentation of my reasoning behind the class assignment of building a voice app of our choice using Voiceflow platform after taking a brief tour of its features. I treated the assignment like a design challenge and gave myself 5 hours to ideate and build the prototype. Later on, my prototype was user tested by the classmates and the professor.
Deciding what to build
The purpose of the assignment was to let students explore the voice interface: the most widely used UI other than the traditional GUI. I began my process from thinking “which task would be better off done through voice than visual interface?” I looked up some of the successful voice interface including the Alexa Cookbook and “Reminder” setting via Samsung Bixby.(it was a popular subject on promotion of Samsung’s voice assistant) Just then, an hourglass that stood on my table came across my sight.
Time—hour and minutes—is an objective concept to majority in the world. There is no need to provide visual aids or pictures when convincing the concept of time to people. I thought a timer would be a nice idea to push through, considering the characteristics of application which solely operates on audio and voice. I decided to create a voice app which allows users set up a pomodoro technique timer expanding on the timer idea I had.
Learning the platform
Captured from Voiceflow Tutorials
Before getting into the design, I went onto Voiceflow tutorial website to learn about its features and process of building a voice interface. I gave myself about two hours to read the documentation and skim through the pre-made examples.
Designing the user flow
Pomodoro Technique
The Pomodoro Technique is a time management system that encourages people to work with the time they have—rather than against it. Using this method, you break your workday into 25-minute chunks separated by five-minute breaks. These intervals are referred to as pomodoros. After about four pomodoros, you take a longer break of about 15 to 20 minutes.
- Kat Boogaard
By default, a pomodoro is set into 25 minutes. The short and long breaks are set into 5 minutes and 15 minutes respectively. People can freely customize the duration to fit their routine and needs, and a lot of pomodoro timers found online support the feature to alter the time for each interval and number of pomodoros. To set the timer digitally, users should go through the process of below:
1.
Set the pomodoro (the “focus” period - typically 25 min long)
2.
Set short break (typically 5 minutes)
3.
Set long break (typically 15 minutes)
4.
Set how many pomodoros will be repeated in one cycle (optional)
I had to decide the scope of my work to get it finished on time, and, to lead the project in a consistent direction. So I set a user persona that would represent the arbitrary targets for my product.
Primary User is a person who:
•
Already knows what pomodoro technique is
•
Wants to customize the time and numbers to however they want
•
Will continue to use the customized pomodoro on and on
•
Wants to start the timer immediately after setup
Setting goals and opportunities
Then, I listed my design goals and assigned them priority based on the user persona. The voice interface must:
1. Cover the shortcomings of voice recognition
Thus far, voice interface has several critical problems. There might be recognition problems. Moreover, unlike GUI, users might miss some of the information which the voice assistant says in real time.
⇒
•
Reduce the stages which user must respond to the voice assistant with their own voice.
•
Guide users through a clear one by one, step by step process when asking users how to customize their timer. (since users might miss what the voice assistant speaks)
•
Make the voice assistant reiterate what users have responded, to check if the input is correct.
•
Add a feature to edit the mistakes and errors in user input.
2. Provide revisiting users with a shortcut to start the timer with the previous settings
•
If users have set their custom timer before, allow them to skip other procedures and start the timer immediately.
3. Accommodate the users who want to quick start
•
Voice interface has a great advantage in casual and quick user tasks. Allow an option to quick start with the default pomodoro setup.
Building the app
Once calling voice assistant such as Alexa or Siri to set up a timer, user has got 3 different options to start.
•
A revisiting user can bring their past setting of pomodoro / short break / long break, and start the timer.
•
User can customize their own timer and start.
•
Or, user can quick start the timer with default setting.
I drew a user flow diagram to help me start dragging in the “blocks” on Voiceflow. Then, I created the prototype of the app using the slots and voice capture functions, and added utterances to properly capture all the possible kinds a user could describe certain phrase.
The prototype
To start, the voice assistant asks user if they will set a new timer or bring the timer set in the past.
If user commands to bring the past setting, the app checks if any values were saved in the variables and reiterates them.
If user responds that they will set a new (likely a first-time user), the voice assistant tells them about the default pomodoro, and asks if they will run the default pomodoro or set their own timer.
Voice assistant asks user to set pomodoro, then the short break, and finally the long break, one at a time. The app captures the number user speaks out and updates the {pomodoro} {short_break} and {long_break} variable.
The voice assistant reiterates the numbers it has captured. User can start the timer right away or edit it.
The timer runs after five seconds countdown.
To run the prototype, please click on the link below.
User testing & feedbacks
Special thanks to Jannie for the feedback and allowing me to post this gif!
I tested the prototype during the class feedback session and discovered the need to add more utterances to a few commands.
Reflections
•
Despite its simple looks, I experienced the niche advantages of the application that solely operates on voice. As voice recognition and the AI technology are advancing, some of the apps for simple tasks are already being replaced by the voice interface. For the people who are visually impaired, voice could be the most effective tool as well. This assignment was part of the “future interface” of my UX class curriculum. I really enjoyed the chance to explore the other kinds of user interface including this one.
•
The Voiceflow platform itself had brilliant UI and UX — it was worth spending some time to learn it! Blocks and nodes are now widely used for the no-code platforms, but this one had some particularly great interaction designs that enhanced the user experience.
Thanks for reading!