Stories Not Screens

It's no secret that web design has its roots in print. In the early days of the web, the influence of print on web design was pretty inescapable. Websites were essentially virtual brochures, static pages with little or no interactivity. Designers were still learning the potential of this new medium and the technology had to mature. Slowly but surely, the differences between print design and web design became evident. But many designers are still thinking of their designs in terms of screens and images.

At one of our recent Soapbox events, Braden Kowitz, Design Partner at Google Ventures summed it up perfectly:

When you look at how people use products, they don't look at the screen, they don't look at the feature. They take this pathway through all your screens and features' So what you really need to design is that experience and that story.

Thinking of themselves as storytellers might be a new concept for many designers, but it's a fitting analogy. Unlike print designs, which serve a singular purpose and are meant to be viewed, design work on the web is entirely interactive. Users take various pathways through websites and apps as they try to accomplish a variety of things. Designers gently guide their users around obstacles, shepherding them to desired outcomes.

Put Yourself in Your User's Shoes

In order to become a successful storyteller, designers need to develop empathy. Empathy is the ability to understand and share the feelings of others, to put yourself in their shoes. Designers need to know their users. They need to understand exactly what the user is trying to accomplish and care about their experience through the entire process. Even with the best planning, there will always be problems you didn't think of, interactions you didn't anticipate or things you didn't take into consideration. The only way to discover these issues is by trying a design yourself.

Braden and his team do this through sketches, a process he calls "story-centered design." He describes these mockups and their purpose like this:

Designers present every sentence the customer reads, every action they take, and every screen that system generates in response. The designs follow a customer from an initial trigger all the way through completing a goal, and they show how the design supports every step in that flow.

Like any good author, designers need to know exactly how their stories end so they can guide their users most effectively, knowing exactly which routes are available and designing the most pleasant experience.

Storytelling is in Our Blood

At ZURB, we've always thought of product design as storytelling, and we've been using Progressive Design to sharpen our storytelling skills and create amazing experiences. Our process has many steps that ensure we keep the user in mind at all times, because we design for people.

As with most anything at ZURB, it all starts with sketching. Like Braden and his team, we sketch out each screen and map out every workflow. Even at this very lo-fi level, we begin to define the paths users will take to achieve their goals. The next step is scanning these sketch sheets into clickable prototypes using Solidify. This tool in the Notable Platform helps us to interact with our designs as close to how the end user will as possible, exposing anything we left out and helping us refine our work.

The Progressive Design process involves constant iteration and feedback. We share our work with the rest of the team, inviting them to respond with any questions or concerns. If we're working with a client for our Studios business, we walk them through each workflow, using user personas to explain how different customers will interact with the product or website. If anything isn't working along the way, we step back, ideate more solutions, and test again. At times we use surveys to gather information about how real people interact with our work. This data helps us improve our stories.

Only when the workflows and paths within our products are complete do we focus on on polishing our visuals and refining our interactions. This user-centered approach helps us to eliminate problems early, prioritize the workflows and help our users accomplish their goals.

A Shared Story

It was great to hear how Braden and his team agree that designers need to be storytellers, a sentiment that many of our Soapbox guests have touched on as well. We'd like to thank Braden for taking time out and sharing his insights with us and our audience.

We're looking forward to our next event with Geoff Koops and Mike Towber of Rdio, amazing designers who have been telling some engaging stories with their users. We hope you can join us at the next Soapbox!