Symphony of efficiency: the UX lessons in The Founder
The Founder might leave you feeling uneasy about the American Dream but it's fascinating from a user experience perspective. The movie illustrates how iteration and designing for human experience can transform an industry.
The underlying thread in the film? How design can transform an industry.
If you haven't watched it yet, The Founder is the 2016 biopic that tells the origin story of the McDonald's franchise through the lens of the salesman Ray Kroc. The Founder, which you can watch on Netflix, has a great cast which includes Michael Keaton as Ray Kroc, Nick Offerman and John Carroll Lynch as the McDonald Brothers, plus Laura Dern, B. J. Novak, and more. Don't worry, you won't find spoilers here.
The Founder might leave you feeling uneasy about the American Dream (okay, that's the only spoiler), but there are some uplifting scenes along the way. And if you're in the field of user experience, there are some scenes that are fascinating from a experience design point of view.
But I was much more interested in the underlying thread of the movie. The thread that tells the story of how an industry can change dramatically and unexpectedly through design. Not by inventing a new product, but by redesigning how it is packaged, made, or delivered. Think Steve Jobs and the iPhone. Henry Ford and the assembly line. Netflix and movies on demand. Amazon and the same-day service. Those stories aren't about invention, they are about re-imagining an experience. That experience can be using a personal computer, building a car, watching a movie, or ordering a book.
That re-imagination can make a product or service transcend the usual experience—beyond competitors, beyond expectations. How do people use this thing? How do people feel about this thing? How is this thing delivered? How can we tap into all of that to transform the process and the product?
Testing with wireframes and prototypes
Dick (Nick Offerton) and Mac McDonald (John Carroll Lynch) don't come up with the perfect kitchen system in the first attempt. They iterate. The movie demonstrates the lesson of the creative process: you must ideate, then test the idea, then iterate. The creative process might involve a moment of inspiration (and it might not), but largely it requires testing and perseverance.
In my favourite scene, Dick and Mac describe the origin story to Ray Kroc (Michael Keaton), The describe how, to come up with their kitchen design, they took the kitchen staff out to a tennis court and draw the kitchen layout on the ground in chalk. Every item in the kitchen is a chalk outline with a label. Griddle. Front window. Ice cream. It's drawn to scale, life-size, and it's as low-fidelity as you can get.
Sound familiar? Yeah, the chalk kitchen is a wireframe.
The staff act out the real-time motions of food prep and service, each standing in their area of the chalk kitchen. They don't have real tools or food, they mime the action. Dick and Mac observe every movement and interaction, timing all of it. Whenever something takes too long, or staff bump into each other, parts of the wireframe are erased, redrawn and relabelled, and the staff begin at the beginning.
They do it over and over, hashing it out, choreographing it like some crazy burger ballet.
The kitchen ballet
When Ray Kroc gets his first glimpse of the revolutionary McDonald "Speedee Service System" in action, we watch as Mac McDonald leads Ray through the grill line. It's a highly choreographed scene in which Ray and Mac weave in and out of this dance as Mac narrates the moves. The feeling of dance is enhanced by the movements and sounds of the kitchen. The oversized round metal trays spin; the staff transfer the trays in synchronized pirouettes; the patties keep time as they sizzle when they are flipped; even the ketchup and mustard dispensers are part of the dance. Food slides down chutes into tidy formations with precise timing. The point of the scene, of course, is to create a shared epiphany for the audience and Ray. We see the wonder in Ray Kroc's eyes and the lightbulb that turns on over his head, and we feel it too.
The power of the grid layout
Look at the way the patties are arranged in a grid on the grill. The cook can create a system within the grid. The relative position of a patty within the grid (left, right, top, bottom) indicates how long it's been on the grid. And the grid system can work on a rectangular grill of any size. Every rectangle has four corners and can be divided into columns and rows.
The wrapping of the burgers uses a grid; the wax paper gets folded in thirds around the burger, top and bottom, left and right. The burgers sliding down the chute—like so many miniature warm pillows—fall into a perfect diagonal grid in a single layer. The grid holds the burgers in place and no space is wasted. The person bagging the orders grabs the burgers from the bottom of the grid because those need to be served first.
Patterns create predictability and efficiency
One of the most aesthetically pleasing parts of this little scene is the bun dressing station. A large metal tray of buns spins like some kind of flower, pausing repeatedly so the buns can receive ketchup, mustard, pickles, and onion. The staff holding the dispensers get it right with each motion; the predictable rotation of the tray, the size of the ketchup dispensed that fits perfectly within the circumference of the bun. Compare this templated efficiency with the last time you tried to make sandwiches for a crowd.
The patterns of the kitchen, as they are reinforced by repetition, create the fluid efficiency that we see in the movie. Staff turn and reach for a bag, a burger, a shake, a napkin, and those things are there. Predictably. The staff don't look around for things, they don't wonder if things are ready.
Every component, every action, is within a step or two of the next item in the production line. How do the staff know what to do next? In part they know by what is close by. What is an arm's length away? That's what happens next. In a UI design, the design needs to communicate to the person using it: what are you supposed to do next. Don't show them all the actions and ask them to choose. Imagine a e-commerce checkout flow. Stores are getting pretty good at getting customers from cart to payment. At every step in the checkout a good design lets the person know: here's what's next. And the design does that, in part, by proximity. A customer looks at an item and there are many actions they could take. They could hit the back button. Go to the home page. Close the browser. Short of reaching out and grabbing that person, the UI can't tell them what to do. So that the actions the customer needs to take to, say, order a shirt are, pick a colour, pick a size, add to cart.
The Speedy System works because all barriers have been removed. You see there is no lag time between steps in the process. There are no physical barriers between stations. No one is missing ingredients. There are no broken machines. Even the barrier of distance has been eliminated.
This is the iterative prototyping of an interface: represent the elements with the minimum amount of fidelity. Test it with real people. Observe the interaction. Change the prototype and test it again.
This is why we wireframe. You wouldn't build a kitchen, test it, tear it down, and then re-build would you?
A wireframe is just like that chalk drawing. Cheap. Minimal. Made for editing.
It's a symphony of efficiency, not a wasted motion...We're an overnight sensation that's 30 years in the making.
It's about human experience
That's the kicker in The Founder. Because it's not actually about the burger. And it's not really about the efficiency. Yes, in the movie the characters do talk about the taste of the food. And the efficiency of the kitchen allows them to sell food fast and cheap.
But the turning points of the story all involve the human beings on the outside of the restaurant.
We may have underestimated the learning curve.
When they open the new restaurant, the customers are... bewildered. "No, they're furious," says Mac. They sit at their cars, waiting for someone to come take their orders. Dick and Mac have to educate them. This is better. Come order your food and get it in seconds. Eat it wherever you like.
But then, once the people start to catch on, we see the positive experiences. The boy at the window with his 45 cents who orders his bag of three burgers. The people lining up and sharing their anticipation of eating the food. The family sharing a bench and indulging in the milkshake.