CHATBOT RECIPE ASSISTANT
CONTENT STRATEGY & USER INTERFACE DESIGN
7 MIN READ
The Low Down
In February 2018 I participated in a Hackathon held by Platterz. We were told to, within 24 hours, develop an app that was related to the food industry in some way. After a few bumps and twists and turns, we designed a chatbot that assisted users in finding recipes within their budget, according to their local grocery store prices!
PLATFORM
MOBILE
FIGMA
INVISON
TOOLS
METHODS
SKETCHES
WIREFRAMING
RAPID PROTOTYPING
HACKATHON
TYPE
Pocket Sous screens with most functionality displayed
Take a look at in action: View our prototype!
The Task
A fellow designer, Erin Hanlon, and I decided to enlist in a hackathon over our reading week at the University of Toronto to flex some research and design skills and make sure we didn't get rusty over the break. The event was run by Platterz, a company based in Toronto that provides a platform for catering and food delivery for corporate companies. Our instructions were to design an app (mobile or web) that was related in any way to the food industry (pretty broad and ambiguous!). Seeing as Erin and I were designers, we opened ourselves up to working with developers and got started with two developers. Unfortunately, the developers did not show up the next day, leaving us to figure out a way to present our work without it being coded as we had expected it to be. So within the last hours, we put together all the screens for a use case and prototyped the flow with Invison to present to Platterz.
The Process
Our team began by brainstorming what aspect of the food industry we wanted to target. This ranged from food wastage on farms to food delivery companies and everything in between. After much debate, we decided to target an age-old question: what can I eat tonight with the groceries I have accessible to me or groceries that are in my budget? This stemmed from the fact that as students recently leaving our parents' homes where meals were often decided for us, this new world of adulting means that we need to fend for ourselves in this area. Because this idea had many of its users as students, it was an ideal choice as that was the most easily accessible user base to us within the 24-hour window. We decided that the recipe information could be delivered to the user through a chat interface, allowing it to feel more personalized and aligned with how they would get recipe ideas from a friend or family member.
We set out to create a way for users to find recipes that included groceries that were available at their local supermarkets and within their budget. We named it "Pocket Sous," your handy sous chef right in your pocket! Our developers set out to discover how they would be able to scrape local grocery store websites for groceries and their pricing while Erin and I set about our research (designing for chatbots was very foreign territory).
HOW DO YOU EVEN DESIGN FOR A CHATBOT?
To determine how we could design for a chatbot that could help our user reach their goal, we pulled inspiration from Anna Kulawik's article "Making Chatbots Talk - Writing Conversational UI Script Step-by-Step". The article highlights the importance of clarifying the users' and stakeholders' objectives early on. It also highlights the need to plan for the possible paths that a user may take, seeing as not all would follow the "happy path". Doing this all ahead of time reduces the chances that the chatbot will be unable to provide a meaningful response.
We started with some ideation through sketching and scribbles to get our ideas out of our heads and then attacked the unknown, a conversation tree for our chatbot outlining the "happy path".
Conversation tree of happy path
THE FINAL TOUCHES
To add a bit of personality to the chatbot application, Erin and I developed 4 different chatbot character options for a user to select from when interacting with the application. We decided to do this to add that aspect of personalization that would make the user more inclined to use the app and have a more interesting experience along the way! Meet them below:
We then prototyped a user flow using Invsion to present what an interaction with the application would look like. Try it out below! If you happen to be on mobile, Click Here!
Key Takeaways
CONSTANT COMMUNICATION ACROSS TEAMS IS KEY: Ensuring that everyone on the team is on the same page throughout the process is so important. While working with developers, I found that we often had to make sure that the design decisions that we wanted to implement were actually possible. This came after we had designed a couple times and then realized that, oops, something wasn't possible in the given timeframe.
PLANS DON'T ALWAYS GO, WELL, AS PLANNED!: Erin and I were blindsided the second day when half our team decided not to show up! We had to regroup and find an alternative way to finish and present our work to the company all within a couple hours. Talk about rapid prototyping!​