phone
Planet
header phone
background
preview
phone
phone
background
Lemon
Flowers
Neon
Pinky Sky
Stairs
Chair
Smartphone
Smartphone
mobile
phone
cloud
cover image
hero image
rift
iphone
Facebook
mobile

Building bots for bot builders

How we helped Facebook rethink bot onboarding

Expertise
Design, Interaction and Development
Platforms
iOS and Android
Deliverables
UI, UX and Strategy
Interested?

The ask

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 a lot of 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: Showing the power of these chatbots as opposed to telling people about them.

facebook office
facebook office
facebook office

Our approach

Our challenge was to figure out how to bring these chatbot features to life. We decided to start by designing and developing three bots that would provide an intuitive, elegant solution for basic use cases, including:

  • avatar

    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

  • avatar

    Linking to an existing account

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

  • avatar

    Collaborating with family and friends

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

background

What we built

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 big deal.

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.

Design element
Design element
Design element
Design element
Design element
Design element
Design element
Design element
Design element
Design element
Design element
Design element
Design element
Design element

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.

UI flow

Building the bots

We needed our bots to be reusable as a template for people to use as a jumping-off point on their own bot projects. This lead us to use only the most universal technologies on the web, and writing them in the simplest, most comprehensible manner for bot creators of all technical backgrounds. Since people would be using this as the canonical example for creating bots, we needed the code to tell a story, too!

We also developed a set of best practices and common code to help people get started with their own bots.

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 reaction from the crowd was humbling, and we can’t wait to see the amazing chatbot experiences developers will build in the coming year.

Have a project for us?
We make
interfaces.
Since 2006, we’ve helped some of the world’s top companies design, build, and ship amazing products and services.
0
Products shipped and counting  
We make
interfaces.