Black Mirror s03e01:
A UX design case study
By Hili Megory
03 / 01 / 17

I recently watched Netflix’ season 3 of Black Mirror and must admit I was blown away by its season premiere, “Nosedive”. Definitely deserving a 5 stars rating for the spot-on art direction and the advanced display of UX/UI. Though futuristic technologies had already been displayed in countless visual stories, it’s rare to see such detailed interfaces and numerous devices featured in a movie or on TV. To be clear, I’m referring to interfaces which are an integral part of the story, as opposed to what we often see in sci-fi movie, such as an overly elaborate spaceship dashboard that doesn’t make much sense. Since I couldn’t stop thinking about this inspiring episode for days, I decided to make a short case study out of it. Needless to say, there are spoilers!

User / Story

First thing’s first: in every product you start with user research, then develop a user story of a specific persona. In a way, both a show or film script and a user story should start with defining a specific character, with specific context that goes on a journey to reach a specific goal. What’s known in screenwriting as “the conflict”. In Nosedive we follow Lacie, a young insecure woman whose working hard on upgrading her social status. Her goal in life right now is to get accepted to an exclusive living community project, but in order to get in she needs a higher social-rank. Luckily, her super popular and highly ranked childhood friend, Naomi, is inviting her to give a speech at her wedding -  a great opportunity to meet connected VIP’s who can help her achieve her goal. But as the name of the episode suggests, things are not gonna go that easy.

A possible persona card
The Product

Using a social network app that seems to be a fusion of Uber, Yelp and Instagram, every social interaction in the "Nosedive" world is rated 1-5 stars; so every person is marked by an ever-changing score. This is the rank by which the user's social status is being determined, and it affects their ability to enjoy various privileges; from desired jobs, to exclusive lifestyle communities, insurance rates and even prioritized life-saving medical treatments.

David Dettmann/Netflix

The social world in which this system is applied, quickly becomes a twisted rat-race of forced politeness, fake smiles and shallow interactions by people who are determined to get a 5 star score from others. The less determined (and more honest), are left to the margins of society. This concept refers, among other ideas, to the a very similar social-credit system that’s actually in-development these days in Beijing, scheduled to go up in 2020. What is truly scary about the idea, like most Black Mirror episodes , is that it feels like one or two steps away from our own reality. The episode illustrates a universe in which every interaction is rated, and you always seek others’ approval. Sounds familiar? Uber riders are already rated by the drivers. This can easily make the user feel suppressed and insecure. As product designers we have that responsibility - of caring for the user’s feelings, when we design rating features that might affect their reputation.
With that said, these aren’t only hypothetical ethical questions: rating systems easily become “a hole in the fence” of a product experience, and can be abused when a genuine criticism get “paid back” with an unfair revenge-rating. Many users will hesitate to give honest negative reviews in order to keep their own reputation spotless. This kind of user behaviour diminishes the credibility of the product itself: if users don't have a way to know that reviews are reliable, they would be hesitant to participate. To prevent a ‘tit for tat’ rating system, eBay developed a method where buyers can leave negative, neutral, or positive feedback and sellers can either leave positive feedback or choose not to leave feedback at all. At Airbnb, the host and the guest have 14 days to leave a review, and both reviews are posted at the same time. These solutions can partially work in the Nosedive scenarios, but less so with the social aspects: when you interact daily with the same people, one would have numerous chances to “revenge” a low mark. Another approach can be found at Couchsurfing.com. The feedback there is more binary: a host or a guest rating is either positive or not positive (neutral and negative are in the same category). The site doesn’t keep score for its users, and a lot more weight is put into literal description of the experience with the other person. While this is more inclusive to the nuances of human interaction, it does not translate into any measurable outcome. Makes sense, right? Well, Not for the Nosedive app, which is exactly what makes it a brilliant, dark satire.

Look & Feel

While Nosedive offers a pretty scary reality to live in, looking only at the highly detailed, finely crafted, thoroughly thought-out design, I couldn’t avoid wanting in (minus the cruel rating system). Everything seems to be clean, filtered with pastel colors and impeccably tasteful — like a modern portraiture of 1960’s idyls, or a Pinterest board that came to life (featuring, of-course, palettes from Pantone’s official colors for 2016). Even their cereal box is pastel(!) one of the most hard-sale packaging products of industrial world (only second to Laundry detergents). As for the devices and interfaces colors - they're all “Branded” with those soft, semi see-through, pastel colors, yet anyone can choose their own hue. Lacie is going with peachy-pink, her friend Naomi’s feed is light beige and Bethany’s feed is Light Blue. This gives people a way to define themselves within the color palette as a symbol to a patient and politically-correct society. Only on the mere surface of things, of course. Pleasant pastels and cleanliness are often the go-to metaphor of a sugar coated and fake reality, and in Nosedive they’re being used in a very smart way. First, it’s supporting Lacie’s arc throughout the story to becoming a rebel: while she’s losing grip of her sweet, appropriate and on-fleek performance we see her getting more and more messy and dirty. Also, in contrast with the pastels -  through the episode we find glimmers of florescent, hard lit frames, confronting us with some hard truths. For instance when Lacie’s brother tells her she will not get accepted to the “lifestyle community” she wants so badly, her warm colored image is covered by the cold, harsh gray fridge door.

David Dettmann/Netflix

Same color palette is used in the lobby of a reputation advisory center, seeing a crushed, crying woman, coming out of a bad meeting, in the design of the airport - demonstrating a depressing and bland take on pastel-colored institutions, and finally in prison - a black and white shot that is overly saturated with color in a way that brings out the “true face” of those “evil” pastels. The pastel colors are almost a character on their own - portraying the villain, the collective twisted values of society or the floating presence of the authorities that have established and are keeping this rating system alive.

The devices

The app supports mobile, tablet/desktop touch, and augmented reality (via permanent contact lenses implants). The mobile and desktop devices are all-glass (with metal frame), perhaps similar to the ones currently in development by Apple and Foxconn for later in 2017. Going all glass is a smart decision, not only because it’s the direction in which technology is going anyway, but also because it keeps the design clean in spite of the endless digital interactions that happens all around. Furthermore, the interface display is semi-transparent, so visuals seem to always integrate nicely with the physical world, and the light the emerges from the devices (and everywhere else) is pleasant and soft at all times. The blurred real-world in the background of the device gives a nice depth to the UI, and all of this makes some beautiful technology. Another device that Nosedive tech offers are VR Glasses. They are the only opaque device in the episode. One could wear VR Glasses if they wished to take a break from seeing the world through their permanent rose-colored glasses, so-to-speak. Thus offering the sad prospect that the only way to get some peace from a multi-device controlled world is to completely immerse into one dominant device.

The experience

The main use of this social network app is to have people’s social feed at hand, and rate interactions constantly. But this scoring app also seems to be the only app on our heroine’s phone; A one-stop-shop for networking, ride ordering, and other services. This kind of UX brings to mind the trending user-experience in china, where an app called weChat (similar in interface to whatsApp) is used for almost everything —chatting, money transfer, shopping, ordering 3rd party services, gaming, networking, interacting with physical world and so forth. Yet, in Nosedive’s app, things don’t happen with bots or through chat, and we don’t get to see even one menu or nav bar. Things seem to happen only through gestures and context: When Lacie holds her device horizontally over her face or above her breakfast, the camera opens up. When She’s in the bathroom she uses AR to self improve social skills . People she’s looking at appear on her device, immediately ready for interaction. simple gestures transfer interface between devices and so forth.

David Dettmann/Netflix
David Dettmann/Netflix
David Dettmann/Netflix
USE CASE #1: Social Feed

The first of two Nosedive app’s main uses is a pretty straightforward social-network feed. Friends upload images and stories to browse through. Each input can be rated on a scale of 1-5 stars. In Mobile you rate sideways, and swipe up. In Desktop / Tablet you first select the specific item (image, post) and than you rate them with star buttons that are fixed on the screen. In my opinion the mobile UI looks more “real”, while the desktop/tablet fixed star buttons seem a little weird: I can understand why the actual designer of the production team wanted to put static giant stars on the screen to show that Lacie is rating her mates, but I think that the imaginary designer of Nosedive app could have done it differently - perhaps placing 5 stars showing over every element after a selection tap, or smaller stars next to every rateable object? Also, if we designed this feed for real users, we should at least figure out a button that enables the user to enlarge a photo and see more info about it (since tapping on it goes only to “selected” mode).

David Dettmann/Netflix
A suggested redesign of the Desktop interface
USE CASE #2: Rating Real-Life Interactions

The other main use for the app is to pull and display the feed and give a rate to anyone you encounter (via mobile and/or in the contact-lenses augmented reality view). This feature involves a lot of anticipatory design patterns. For instance, when Lacie get her coffee while browsing through her feed, she can immediately rate the friendly barista - it just “comes up” on her phone. Even more impressive is when Lacie goes on a run, and while a group of runners pass by her, the app instantly focuses on her friend, one of the runners, and within a split-second enables Lacie to give him a 5 star score (while both running in different directions!). Since the episode didn’t show the UI of this behavior, I gave it a-go myself. In this case, eye contacts identify that she is looking at Larry, and the mobile app allows her to rate him, find another nearby friend, or just get back to her feed.

A suggested redesign of the Mobile interface
David Dettmann/Netflix

When Lacie meets in the elevator an acquaintance of hers, Bethany, she pulls Bethany’s feed with her mobile and screens it through her eye-contacts. This feature is a helpful way to keep conversation going with a distant friend. The AR graphics are displayed beautifully and conveniently on the solid-colored elevator door. AR design in the episode looks great. It is detailed when possible, responsive to change when the eye shifts around, and appears very minimalistic in more visually-busy environments.

Summary

Making interfaces (on multiple screens and by AR) aesthetically pleasing and relatively understated yet still usable and legible is a real challenge. Considering that the user experience is not really the focus of the episode, Nosedive art directors did a truly remarkable job. Though sadly it seems to suggest that we might not solve this challenge without a full-on makeover of physical reality as well, as it’s based on integrating with a beautifully designed physical world that might not ever be possible in real-life. With that said, there’s no doubt that Nosedive had done impressive work in developing a vision for a digital world that can feel pleasant and organic. Of course the app is only there to move the story forward, so obviously not a lot of effort was spent on completely figuring the entire UX. Still, for me, working in the field of IoT, these ideas were really edifying, and sparked my imagination when I tried to figure out, within grounds set for the Nosedive-world, how one would fill the gaps between a the well-timed plot and the complex needs of a real user.