Sphero’s BB-8 “App-Enabled Droid”: a case study in experience design

When describing his approach to making Star Wars: The Force Awakens, director JJ Abrams says the question that guided the decision-making process was “How do we make this movie delightful?” While nerds will argue endlessly about the film’s merits, there is almost universal agreement that the filmmakers succeeded in creating delight with the new droid […]

February 10, 2016 - User Experience

When describing his approach to making Star Wars: The Force Awakens, director JJ Abrams says the question that guided the decision-making process was “How do we make this movie delightful?” While nerds will argue endlessly about the film’s merits, there is almost universal agreement that the filmmakers succeeded in creating delight with the new droid character, BB-8.

Sphero’s BB-8 “App-Enabled Droid”: a case study in experience design

People fell in love with BB-8 with its debut in the first teaser for the film. They speculated about its origins and if it could be digital or a real prop (Mark Hamill actually described driving the physical droid as “an absolute delight”). The story of how it came to exist and the physics of the prop have been revealed (all the way back to JJ Abrams’ original napkin sketch). Even after the film, people are speculating about whether or not it has a gender and why that’s important (and why gendering droids at all is ‘genius’).

What I want to talk about, though, is the best Episode VII product tie-in, Sphero’s BB-8 App-Enabled Droid. Jakob Nielsen and Donald Norman, who coined the term “user experience”, described it as a “seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design”. When I received one of these as a gift from my parents for Christmas 2015, I became convinced that Sphero’s BB-8 is one of the best (if not the best) illustrations of Nielsen and Norman’s all-inclusive definition of user experience design.

Sphero’s sales website for the App-Enabled Droid

This post may read like a review, but it’s not meant to be; raves have already been published on nearly every major tech and business site, so another one isn’t helpful or interesting. I also can’t talk about the research and design process behind BB-8, since I wasn’t on any of those teams; as a result, there won’t be a lot of user experience design jargon or methods discussed.

Instead, I want to come at BB-8 backwards and talk about my user experience with the product and evaluate the effectiveness of its design based on the degree to which Sphero has created a “seamless merging of the services of multiple disciplines”. The design of the droid itself, its packaging, and the app that controls it each have unique design considerations, but assessing how they all work together can provide some insight into how Sphero approached the experience design of BB-8 and how these multiple disciplines create a single, emotional, delightful experience..

Affective Marketing

While BB-8 merchandise was a foregone conclusion from her debut in the first teaser, I first learned of the toy from a tech blog and an interview from Sphero Chief Creative Officer Rob Maigret in which he said that the company had “wrote some software that would let us create certain emotional moments” because they wanted to know “what happens when BB-8 gets scared? what happens when it gets mad?” Sphero intended BB-8 to make people feel something by convincing them that she felt something, that she had personality (note that I choose the feminine pronoun as explained by the BB-8’s designers).

That directive is very clear in the marketing materials, particularly Sphero’s first YouTube video, which is what triggered my interest in the toy:

The video clearly communicates fun, but it does so in a way that suggests more than just fun — there is love in this video, not only for the Star Wars brand, but for the BB-8 character and for the toy.

In the months between the initial release of the toy (September 4, 2015) and the movie (December 17, 2015), the Star Wars Twitter and Instagram accounts routinely released similar videos of BB-8 in painfully adorable situations:

The Sphero and Star Wars brands spent the fall of 2015 making an incredibly engaging appeal, so much so that it was the Tickle-me-Elmo of 2015.

Beautiful Packaging

Once I was given my BB-8 for Christmas, it was immediately clear that Sphero loves this product. The relatively restrained graphic design, the high quality material, and the dead-simple setup made it feel like I was opening an Apple product. I wasn’t just excited to play with the toy, merely opening up the package was enough to make me proud to own it (and it’s one of the very few packages I’ve kept after the contents were removed).

The Ikea-style instructions are straightforward and make setup very quick, perhaps the fastest onboarding of any tech product I’ve ever used. Once inside the app (more on that in the next section), there’s an opt-in for additional content, at which point I was emailed a tutorial with a subject line “Learn the ways of the Force” and linking to this tutorial video, which I maintain is one of the best pieces of technical writing I’ve ever seen:

Using the app is fairly intuitive anyway, but the documentation provided in multiple formats makes it incredibly easy to be ready to use the toy effectively in very little time.

Delightfully Essential App

The toy is marketed as the “App-Enabled Droid,” but it could also be described as the “App-Dependent Droid”. BB-8 does nothing but sit in her cradle until paired with an iOS or Android device, so the app is a central part of the user experience.

The app is loaded with animation and sound effects that are a hell of a lot of fun. Some of the animation can feel a bit excessive (like the jump to hyperspace when choosing any of the main menu items) but overall it’s used in very effectively restrained ways.

One of the most compelling and fun uses of animation is in the app’s “patrol” mode, where the droid’s activity is controlled by the app while the app displays customizable data from the droid. Different panes in the app can be switched from displaying gyroscope data, acceleration info, and a real-time log of the droid’s experiences. Perhaps most delightful is when the droid collides with something — the “Gryo-Balance Monitor” flashes red in pain and the real-time map of the droid’s movements displays a stormtrooper mask in that location.

The mode I end up using most often is “Drive Mode” because it provides manual control for the droid. Its primary UI is a four-directional “stick” that anybody who’s ever used a Wii, Xbox, or Playstation controller will be familiar with. It also features shortcuts that allow you to make BB-8 display the emotions Rob Maigret mentioned above; you can make BB-8 be sad, excited, happy, or pre-programmed figure-8 motions.

The app’s Drive Mode with a help screen overlay to describe the controls.

The app, while being a required part of the experience, really does make using BB-8 a delight rather than a chore. The app smartly uses animation and sound to establish an emotional and physical connection to the droid and Sphero’s representations of the data from the droid’s sensors is a clever way to connect even more strongly to the physical object.

Industrial Design

The droid itself is relatively simple as an object but it’s very obvious that a lot of thought and care went into creating an object that is both visually appealing and fun to hold. The droid spends most of its time in its cradle, which is also how it powers up via conductive charging. There is nothing that plugs into the droid itself, which may be one of the smartest moves the designers made — how better to ruin the emotional connection to the object than having to take its head off and plug it into a USB port?

BB-8 hanging out in her conductive charging cradle.

Another key component of the experience of interaction with the droid is its head, which does a remarkably good job of staying attached magnetically but does have a tendency to pop off whenever the droid collides with something. Fortunately, the head re-attaches very easily with magnets and is immediately good to go again.

One specific and crucial point where the app design and industrial design converge is in orienting the droid to the driver. Being an opaque ball, it’s almost impossible to know which direction is forward, and not knowing that makes it difficult to drive the droid. The app, however, features a brilliant example of human-computer interaction by making it possible to orient the droid to the driver via the app:

One feature of the industrial design that isn’t immediately obvious from the product itself is that Sphero has made it possible for third-party app makers to hook into the droid to extend the experience. One of the first apps to do so is Tickle, which is a drag-and-drop programming interface that allows users to create custom commands and responses for BB-8 beyond the pre-programmed happy, sad, excited reactions built into Sphero’s app.

The Tickle UI, which makes is possible to create drag-and-drop processes for automatic BB-8 and extending functionality beyond Sphero’s controls (note the ability to change color, for example).

This post on Six Colors offers an in-depth description of what Tickle enables, and while the visual programming aspect of Tickle is interesting, the interaction with the droid itself is not particularly exciting. However, the fact that Sphero has made it possible to extend the functionality of the droid, and the potential for creative developers to create new experiences for BB-8, are very exciting.

Minor Inhibitions to Delight

BB-8’s industrial design does have some flaws that are minor but still noteworthy. The first is that while BB-8’s head is attached to her body with magnets, her movement is possible because of small wheels on the bottom of the head that are essentially the wheels of a mouse from the 1990s. Unfortunately, like those obsolete human-computer interfaces, the wheels on BB-8’s head are prone to pick up dirt, only far more quickly because the droid is _on the floor_ and it will find what little dirt exists even on the cleanest floor.

This is the dirt accumulated on BB-8’s wheels after 20 minutes of use on a semi-recently mopped wood floor. Not cool.

Another drawback is the droid’s dependency on the app. While it’s understandable that an app would be needed for manual control, it’s a bit frustrating that the “patrol” mode requires the app to remain open. This means that, despite not controlling the droid directly, you can’t close the app to multitask.

Perhaps the most significant factor inhibiting a connection to the droid is that the sounds come from the app, not the droid itself. This can be seen in the app video above; the sound effects come through the recordings because they are generated by the app in response to sensor data or actions taken within the app.

The settings menu in the BB-8 app provides options to toggle UI sounds, music, and droid sounds.

While this is understandable, given that the droid’s interior is almost certainly dedicated to the technology needed to stabilize the head and propel the ball, it’s still jarring that the droid itself doesn’t make the sounds associated with being happy, sad, or scared. This is most obvious when executing custom processes using Tickle, where the app does not have any sound effects; this renders the droid silent and robotic, which it’s definitely not supposed to be. Tickle exposes the artifice, which is jarring and emotionally disturbing (one of the reasons why I like Tickle conceptually, if not yet in execution).

A Near-Perfect Experience

These nitpicks aside, it’s beyond question that Sphero’s BB-8 is a “seamless merging of the services of multiple disciplines”. While I’ve certainly been emotionally manipulated by marketing before, it’s a rare experience where every component of the experience of a product follows through in such extraordinary fashion. This product represents a tour de Force in packaging, graphic design, app design, industrial design, and human-computer interaction. In every sense, a perfectly-designed experience.