Designing a product is a complex process. It’s difficult to determine the correct UI, how features work together to become an experience, and how teams can quickly build—without the continuous need for custom-created components.
So, just in time for the start of football season, we hosted a webinar with Brian Bimschleger, Senior Strategist at Digital Telepathy, about a lightning-fast product design strategy pulled right from a playbook for NFL offenses.
Watch the full recording below, or read on for our short recap on Brian’s whiteboarding process.
The problem with whiteboarding
With traditional whiteboarding, at the beginning of a project someone typically stands at the board with a marker while others watch. It’s not really collaborative.
At the end of a whiteboarding session, you often get a 1-color messy sketch of things that were clear in the moment, but might not make any sense when looking back. It’s common to see sketches left up for weeks with a do not erase note scribbled close by. There isn’t much staying power from a blue arrow to an amorphous blob.
Digital Telepathy wanted to find a better way for teams to whiteboard—a new framework for the concepting stage of design that would unite everyone across strategy, development, and design teams within a company.
What they created: a set of rules for consistency to use (regardless of who’s at the board) in order to map out a story or a flow while always maintaining the clarity of what you were trying to do.
It sounds like a tall order, but in true creative fashion, they looked at another industry for inspiration. Brian noticed how football coaches communicate with players by drawing diagrams that show where each player should go, which is similar to communicating design ideas across product teams.
How football coaches do it
Football coaches also draw diagrams to explain where offense and defense align on a certain play. Over the course of football, there have been 4 evolutions of the language teams use to communicate:
- Single Wing: In the 60s, Vince Lombardi popularized the Single Wing. This was before the forward pass, when there were mostly run-only plays. Since only 1 person could take the ball, the play names were pointedly descriptive, like “the H Sweep.” Receiver H takes the ball and sweeps to the left. Nothing else needed to be diagrammed for other receivers, since they could never get the ball.
- West Coast: During the 70s, Bill Walsh created a system born out of the complication that arose from starting to use more forward passes. Suddenly there were different routes for receivers to run. Walsh’s play calls were incredibly verbose, like the “X-Slant Z-Slant F-Go Y-Out H-Flat,” to deal with the complexity of several receivers sometimes running similar routes. Naming each route for each player is clear and direct but also cumbersome.
- Air Coryell: During the 80s, Dan Coryell sought to reduce the complexities and cognitive load for quarterbacks by assigning a number on specific routes that a receiver can run. This created a play that was simpler to call, and therefore simpler to relay to team members. Each number in the call described a specific set of behaviors to receivers.
- Erdhardt-Perkins: Starting in late 70s and early 80s by the Patriots and growing in popularity ever since, the Erdhardt-Perkins method emphasized complicity, simplicity, and scalability. It created route concepts, by including different routes for receivers to run in one call. For example, if 2 receivers are meant to run slant routes, that call is shortened to “ghost route.” So, a complex play can be reduced to 2 words: “Ghost tosser.”
“Just as a football team might change its strategy in the middle of a game, sometimes a product team needs to pivot on the fly.”
Frameworks can help large teams
So, how can this relate to product design? Let’s make some analogies, using a basic dropdown as an example:
- An element of a page is like a route. Once we click on the dropdown, we see lots of different elements included.
- These elements are the different routes that form the concept. For example, all of the icons within the dropdown make up the concept.
- Once we select an item from that component, there’s additional information that helps form the overall layout of the page. This is like a play.
- How we string all of those plays together is the experience, or a drive.
Figuring out a framework to convey things simply, as well as effective communication of complex concepts, is paramount to success. Just as a football team might change its strategy in the middle of the game, sometimes a product team needs to pivot on the fly. Frameworks help you quickly figure out exactly how you’ll pivot and move forward.
Frameworks can also improve a team’s overall accuracy and performance. It can get everyone on the same page quickly and reduce time planning—and therefore reduce implementation time.
Why does it matter?
When Digital Telepathy was making a button group that would filter content beneath it, there was confusion on the team about what to call it even though it had a specific behavior and look.
“To help clarify what you’re building, give it a name.”
Was it the Selector Modal, or was it the Button Group Radio Selector Filter Thing? The team wound up naming the new button group the Boxcar. By giving it a specific new name and consistently referring to it as such, everyone knew which piece of the design they were discussing.
Designers and product creators are at a horizon, building things that have yet to exist before. Concise language declares intention. Digital Telepathy found that using simple words to explain complex components can align designers, strategists, and developers instantly. To help clarify what you’re building, give it a name.
Margaret Kelsey leads content marketing at Appcues. Before Appcues, she built content programs for InVision’s design community for 3.5 years and has roots in painting and PR. She’s a big fan of puns, Blackbird Donuts, and Oxford commas—probably in that order.
