Prototyping
After the initial interview with the blind users, some follow up questions were sent via Whatsapp. The replies were often made using the voice message (Figure 1). The number of users contacted for this project is not representative of the overall population but it gave a good indication of where familiarity lies for blind users.
Initial sketches considered the idea of bringing a messenger or a chatbot interface to the Deliveroo app. Capgemini (2018) points out in their report that in the next 3 years, 40% of consumers will prefer to use a voice assistant instead of a mobile app or a website. The report also mentions that over a third of users (34%) have already ordered a meal using a voice assistant. And that this behaviour (Figure 2) is set to increase, with a majority of consumers (56%) saying they would be interested in ordering meals through voice assistants.
The implementation of voice assistants is platform-agnostic; one back-end can suit multiple platforms. Desu Mazdur has fibromyalgia, a disorder characterized by widespread musculoskeletal pain accompanied by fatigue, sleep, memory and mood issues. Mazdur wrote a blog post about how speech recognition makes living with a disability easier. The possibility of being inclusive to different disabilities makes the chatbots a user interface solution to be considered.
References
Capgemini (2018) Conversational Commerce: Why consumers are embracing voice assistants in their lives. Capgemini. Retrieved from https://www.capgemini.com/resources/conversational-commerce-dti-report/
Christopherson, R. (2015) What virtual assistants mean for accessibility. Creative Bloq. Retrieved from https://www.creativebloq.com/web-design/what-virtual-assistants-mean-accessibility-31514357
Mezdur, D. (2018) How Speech Recognition Makes Living with Disability Easier. A Chronic Voice – Articulating lifelong illness. Retrieved from http://achronicvoice.com/2018/03/18/speech-recognition-disability/
Design Process
The task of ordering food was sketched using the concept of a chatbot (Figure 1).
After the initial paper prototyping, it became clear that a Deliveroo Design Language needed to be created to guide further developments. Even on paper, there was a lack of a design pattern applied: navigation was confusing, button positioning and shapes were unclear, the input box disappeared in different screens and changed position in others. The Deliveroo Design Language (Figure 2) started to take shape, including information regarding vision impairment and blindness – spacing, positioning and labelling of elements.
Figure 2. Initial Sketches of the Deliveroo Design Language.
Before prototyping, some requirements were set in order to enable the creation of a prototype that could be tested: voice recognition and voice feedback. Adobe XD checked the two boxes and therefore it was the chosen prototyping tool. The task of ordering food was then prototyped in Adobe XD and a guerrilla usability test was performed to identify possible issues (Video 1).
Video 1. Low fidelity prototype of the task of ordering food via a chatbot.
One of the issues about prototyping chatbots in Adobe XD (or most of the tools available in the market) is that the mental model is pre-set in the prototype, while in real life situations the users can try to input different information to achieve their goals. Some of the possible inputs by the user were set (Figure 3).
A moodboard (Figure 4) was created to set the mood to be conveyed to the user. The colours will remain within the current theme of Deliveroo but the teal was slightly darkened (Figure 5) to increase the colour contrast and improve the readability for users with low vision. The fonts used for this project will be Stratos (Figure 6) for header elements and Adelle Sans for regular text (Figure 6).
Figure 6. Stratos and Adelle Sans fonts.
A Deliveroo Design Language was built (Figure 7) with elements that were going to be used during the development of the prototype. A Grid Layout based on Google’s Material Design was also defined (Figure 8). Columns were set to 70dp, Gutters and Margins established at 16dp. The spacing between headers, paragraphs, images and other elements was also defined. Following the guidelines prepared previously, the components had to be positioned in the corners to facilitate user interaction. The input field (Figure 9) of the chatbot screen is going to be one of the main components for the interactions. It was set in a way that would allow users to choose between interacting with the chatbot via keyboard or voice. When the user starts typing, the Microphone button becomes a Send button – following the same behaviour seen in Whatsapp and Google Assistant.
Figure 8. Standards for Margins, Gutters, Columns, Typography and images.
Because of the limitations of testing with a prototype, a guerrilla usability test was performed using Whatsapp. At one end the user would interact with a chatbot, at the other end, a human would mimic the responses of a chatbot, thus enabling the prototype to respond to any of the queries set on Figure 3 or discover different mental models. A set of graphics were prepared to be sent to the user (Figure 10). The user was asked to order Thai food (Video 2).
Figure 10. Graphic assets used for the chatbot simulation on Whatsapp.
Video 2. Guerrilla usability testing performed using Whatsapp.
Some of the behaviours were unexpected. When the user asked for drinks, the graphics assets did not contain a drinks menu, so the response had to be typed. At some stage, the user was informed that the restaurant chosen was closed to observe their behaviour. There were no clicks on the photos sent. All interactions were typed. It is possible to assume that the user did not click on the photo elements, even if there was a button available, as this is not a normal behaviour within Whatsapp.
On the prototype, suggestion pillows were added to facilitate the conversation without the need to type. The suggestions pillows would improve over time as it can learn from the user’s behaviour: favourite food, restaurant, dietary restrictions (Figure 3).
Based on the user tests, a full prototype was produced. A working prototype (Figure 12) was published on Adobe XD. An interactive version is also available in the Adobe platform. To interact with the chatbot, the viewer can either press SPACEBAR and talk or navigate using the suggestions pillows. Another important aspect was the inclusion of sound cues to the project. As this is not available in the prototyping tools, they were not included but the sound cues were to be added to these interactions:
- When the user presses the microphone icon to talk to the bot.
- When the bot is waiting for a user response.
- When the bot is not listening anymore.
- When the order is completed.
- To indicate an update about the order, for example, the order was picked up, the order is on its way.
- Final sound indicating the order has arrived.
Video 3. Final prototype.
Notifications were also created to show the status of the order for the user.
Figure 12. Full prototype published in Adobe XD.