April 4, 2017

A multi-platform chat-based emoji game with Microsoft’s A.I. chatbot, Zo

Emoji That Song

170404-hero-3up

Who, or what is Zo?

“Zo was a product created by Microsoft, designed to connect and communicate using conversational A.I. that leverages socio-cultural understanding via text, image, and voice. From late fall 2016 to summer 2019, Zo chatted one-on-one and in groups on Kik, Skype, GroupMe, Twitter DM, Facebook Messenger, and Samsung on AT&T phones, with social profiles on Instagram, Facebook, and Twitter.

Microsoft launched Zo with the goal to advance our conversational capabilities within our A.I. platform. Since the launch, millions of users have helped us improve our conversational technologies which we are applying to the ongoing research and development of conversational A.I. products and services.”

Source: https://zo.ai

Emoji That Song‽

One of Zo’s many talents was a group chat-based game where she’d give you a string of emojis and people would guess what the song title was. Working with our A.I. product team in New York and copy editors in the Bellevue office, I did the interaction and visual design.

Let’s back up. As a chatbot, people could add Zo to Kik, Skype, GroupMe, or Facebook Messenger just like adding a real person. Once she’s a contact, she’d find a way to ask you if you wanted to play this game, or people could initiate the game with a hashtag.

I had a few tasks. The first was to establish a flexible environment within each chat app that would appear to be uniquely Zo while respecting each platform’s interface. This was achieved primarily by the background color and her signature glitch logo on the bottom.

The second task was to get the game started as quickly as possible. This was tough as we had to briefly explain how the game works, give everyone in the game a unique DJ name, and then wait for everyone to join.

Schematic illustration of 3 layers of Microsoft Zo chat app game Emoji that Song (Text/emoji layer, Image layer, and Base layer).
  1. Text/emoji layer
  2. Image layer
  3. Base layer

Reducing friction

Since there were so many steps before Zo could get the game going, reducing friction was a major pain point. Rather than using more chat bubbles, form elements, or illustrated cards, we opted to use text and emojis as the interface. It was lightweight, performant, and saved time by avoiding more illustrations. And really, it ended up accentuating the whole premise of the game—emojis. This was one of those serendipitous moments where the solution was basically staring us in the 😐.

Wayfinding

The illustrated cards served as visual cues to start up a game as well as announce the winner. They also served as an orientation cue to reinforce that the game was a single layer deeper into the messaging app.

Zoomed in mock up of Group Me chat with Microsoft Zo playing Emoji that Song

Social afterlife ☠️

Zo’s been offline since March 1, 2019, but the archived tweets, Instagram posts, and homepage are available; also check out what Zo fans have archived at @WhatZoSays. Microsoft still has a few active conversational A.I. bots—Xiaoice 微软小冰 in China and Rinna りんな in Japan. 

Top 5 Emoji songs*

  1. 🐍
  2. 🚀👨
  3. ❤️‍🩹💔♥️
  4. 🔠🛣️
  5. 🌍

(See below for answers)

This is a personal list made up by me. No artificial intelligence, machine learning, or chat-bots were involved. (Toto didn't pay for placement either.) #Dadjokes

* * *

Work

Search IngressProduct design

HeaderProduct design

Query FormulationProduct design

AvoStorytelling

FuturevisionStorytelling

AutopilotPoster design

Real EstateProduct design

OSD logoBrand identity

Breaking NewsProduct design

.... .- ...- . .- -. .. -.-. . -.. .- -.--