Screen+Shot+2019-08-24+at+10.35.27+PM.jpg
 

Sweet Cow is a simple chatbot that engages users in realistic conversation to guide them in ordering Korean barbecue food.

Scope: 2 days
Methods: Conversational UI design, UX research
Role: Solo project. Conducted user interviews, designed user workflows, created prototype.
Tools: Chatfuel, iCloud Notes, pen and paper

Staying up to speed on conversational UI and best practices is a huge priority for me, so I’m always on the lookout to incorporate it in designs (wherever appropriate). Here’s a fun project I worked on where I created a Facebook Messenger chatbot for a fictional Korean barbecue food truck. Users can interact with the bot to view the menu, order food, and complete a catering inquiry. I sought to keep the ordering process simple, and the language casual.

Background

In August 2018, I had two days left of Summer vacation, and I was feeling pretty antsy. So I decided to spend part of my weekend designing a basic chatbot. I’d been spending a lot of time reading about conversational UI, and I thought I’d give it a try.

Because I only gave myself part of a weekend for this work, the scope of this project was very limited. I only set out to create an initial MVP prototype of an online food ordering service. I decided on food ordering because I wanted to work with a workflow with very clearcut success criteria.

Discovery

I didn’t have much time for discovery, so I had to think fast about where I could get the most information from real people in the shortest amount of time. Immediately, I thought, “The farmer’s market!” At the Staunton, VA Saturday morning farmer’s market, I asked 53 people the following questions:

  • Have you ever used a food ordering app?

  • What do you expect to accomplish with a food ordering app?

  • (If user has experience with similar apps) What frustrations have you experienced with these apps?

From the interview responses, I determined the following user goals:

  • View food and drink menus, including vegetarian options and fan favorites

  • Place order for pickup at food truck

  • Send catering inquiry

  • Complete the above tasks using a chatbot that uses plain, everyday language

Workflow

When I arrived home, I scribbled down some notes to build an information architecture. My (mostly illegible) notes included user workflows such as

  1. User: Greets chatbot.

  2. Chatbot: Greets user, asks if user is ready to eat.

  3. User: Selects “thumbs down” icon.

  4. Chatbot: Uses humorous conversational language.

  5. User: Mentions “cater,” “catering,” “catered,” “party,” “event,” “wedding,” or “birthday” in their reply.

  6. Chatbot: Begins catering inquiry workflow, asking the user single questions for each of the following:

    • First things first, what's your email?

      • Email address format auto-validated, user prompted to reenter if format incorrect

    • And your phone number? (Unfortunately, humans don't respond to cowbells!)

      • Nine-digit number auto-validated, user prompted to reenter if format incorrect

    • What type of event are you hosting?

    • When is the event?

      • Date format auto-validated, user prompted to reenter if format incorrect

    • What is the estimated duration of your event (in hours)?

      • Auto-validated, user prompted to reenter if user does not use only numbers

    • Ok, final question! How many guests will we be serving?

      • Auto-validated, user prompted to reenter if user does not use only numbers

  7. User: Responds to the above inquiries, one by one.

  8. Chatbot: Confirms catering inquiry submission, telling user when to expect a response from a person.

  9. User: Closes chatbot.

Design

Using a blank template and my handwritten architecture notes, I created a Facebook Messenger chatbot prototype that includes functionality to meet each of the four user goals. View the demo video below, or chat with Sweet Cow here.

Next Steps

If I could pick up this project again, I would test this prototype with a diverse set of users and use their feedback to iterate upon the app. I’d also be curious about partnering with a local food truck to put my learnings to use in the real world.

Takeaways

My biggest takeaway is reaffirming my understanding of the importance of clear information architecture, especially when it comes to conversational UI. A typical user might not notice that a button’s padding is off, but they’ll definitely notice if a bot “says” something completely off-course.

Since doing this mini-project, I have more consistently stepped back from my designs and research recommendations to ask, “Does this workflow make sense?” and “Do these pieces make sense together?” Folks in the UX field can often get bogged down in the details, sometimes to the point of overlooking the bigger picture. By continually remembering to look at both the details and the big picture, designers can holistically strengthen their practice with targeted, intentional awareness.