Building bots
for bot builders

  • Expertise

    Design, Development, Interactions

  • Platforms

    Web & Mobile

  • Deliverables

    Strategy, Concept, UI, UX

  • Visit Facebook

    Visit Facebook Messenger

Facebook's Friend Request

Facebook’s Messenger team was rolling out a host of exciting new chatbot features and enlisted MetaLab’s help to design an experience to educate developers on how to best use them.

When we started, there were assumptions that this meant building out documentation or a wiki. After brainstorming with the Facebook Messenger team we realized there was an opportunity to teach developers about these new features in a more profound way. Instead of telling people about the power of these chatbots, we decided to show them.

Bringing Bots to Life

Our challenge was to figure out how to bring these chatbot features to life. While the features they provide will transform how we interact with technology, we needed to make something for the here and now that was exciting and inspired new ideas for developers. We decided to start by designing and developing three bots that would provide an intuitive, elegant solution for basic use cases, including:

  • Filling out forms and preferences

    When you win a free gift and need to fill out your personal preferences so that you can choose a gift

  • Linking to an existing account

    When you use a calendar management tool already and you need to give this bot access to your account

  • Collaborating with family and friends

    When you’re having a party and need to make a shopping list of supplies with your friends who are attending

ILLO Created with Sketch.

Connecting the Bots

For each chatbot, there was a three part challenge: designing the interface, creating the content and building the bots themselves.

All against the looming F8 Developers Conference deadline where our work was to be unveiled. No Pressure! 🙂

This required every team member to not only focus on their discipline, but to also think like a designer, a content strategist, a copywriter and a developer.

Designing the Interface

Building a chatbot is one thing, building an entertaining one is quite another. We strived to design an experience that followed Facebook’s guidelines for Messenger while also triggering the right amounts of personality and direction to the user at the right times.

Creating the Content

We wanted to ensure best practices were built into the experience for those that built off of these templates. We worked as a team to discuss what lessons we wanted to convey while ensuring it didn’t feel like a lesson. Easier said than done.

In the end, we found a way to show best practices while creating an engaging bot that people picked up on how to use quickly.

Developing the Bots

Finally, we developed a set of best practices and common frameworks to help people get started on their own bots. Our engineering team crafted code that was easily understood and easily built upon. With our engineering team working so closely with the Facebook team, we were able to launch the bots on time and in a state we were all happy with.

PREFERENCE BOT

ACCOUNT BOT

TASK BOT

The result

Both the Facebook Messenger and MetaLab teams were extremely proud to see our work presented at F8 2017. The positive reaction from the crowd was humbling, and we can’t wait to see the amazing chatbot experiences developers will build on the Facebook platform in the coming years.

Download the Facebook Messenger App