How to Design New Information Environments That Don’t Suck

In systems design there is a rule of thumb known as Gall’s law. It states:

“A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over with a working simple system.”
— John Gall

Information environments (websites, apps, etc.) are systems, so this law applies. (I’ve seen it in action.) We acknowledge this when we talk about starting with a minimum viable product (MVP).

One of the main challenges teams face in such projects is arriving at agreement at what constitutes the “minimal” feature set. Designers can — and should — help teams clarify the product vision upfront. This helps make the process less painful.

Once a clear vision is agreed upon, the designer’s role shifts to defender of the vision. This is necessary because there will always be forces pulling things away from the minimal feature set — often for valid reasons.

When the product is real and can be tested, it can (and should) evolve towards something more complex. But baking complexity into the first release is a costly mistake. (Note I didn’t say it “can be”. It’s guaranteed.)

So:

  1. Clarify vision,
  2. define minimal,
  3. defend minimal,
  4. launch,
  5. evolve.

3 Placemaking Lessons From the Magic Kingdom

If you design software, you need to know about placemaking. Why? Because the websites and apps you design will create the contexts in which people shop, bank, learn, gossip with their friends, store their photos, etc. While people will experience these things primarily through screens in phones, tablets, and computers, they actually perceive them as places they go to to do particular things.

Your users need to be able to make sense of these information environments so they can get around in them and find and do the things they came for, just as they do with physical environments such as towns and buildings. People need to form accurate mental models of these environments if they are to use them skillfully.

As a discipline, software user interface design has only been around for about sixty years. However, we’ve been designing places for much longer. There’s much we can learn from architecture and urban design to help us create more effective apps and websites. This article is a short case study in the design of a particular physical environment that has valuable lessons for those of us who design information environments: Disneyland.


Why Disneyland?

To start with, as a designed place, Disneyland is unarguably successful. Since its opening in 1955, it has received over 650 million visitors and has become a cultural touchstone. (And it’s not even most popular of Disney’s “castle” parks!)

Aerial view of Disneyland in 1956. Image: https://commons.wikimedia.org/w/index.php?curid=6637188
Aerial view of Disneyland in 1956. Image: Wikimedia (Public domain)

Disneyland is also a large-scale environment (smaller than a town, but larger than a building) that has been carefully designed and managed by a single entity — the Walt Disney Company — for over sixty years. This allows us to examine the evolution of major placemaking principles in a very crisp way over a long period of time.

Another reason to study Disneyland is that it was designed with storytelling in mind, so it has rich semantic and narrative layers that separate it from most other built environments. As a result, it has more in common with interactive information environments than many other physical places.

A
A “hidden Mickey” in the queue for Gadget’s Go Coaster in Disneyland. Image: Loren Javier

And finally, Disneyland is a lot of fun! It’s not only fun to visit: it’s also fun to read and write about. But as we’ll see, Disneyland is serious fun, since it addresses and reflects the anxieties and aspirations of the time and place it was created in. In fact, Disneyland is a perfect example of what the architect Christopher Alexander calls good fit: a successful relationship between a form and the context it was created to address.

So in this article we’ll be looking at Disneyland as an information environment that happens to be built in the real world, and see what we can learn from it. Let’s start at the beginning: with the core vision that animates the design of the place.

Lesson 1: Start with a vision that resonates with your users

One Saturday in 1947, Disney animator John Hench drove into the parking lot at the studio and saw a peculiar sight: his boss, Walt Disney, was pacing an empty lot across the street. When Hench asked Walt what he was doing, he told him he had this idea for a “Mickey Mouse park” to entertain studio visitors.

World fairs and places like Coney Island, Kennywood, and
World fairs and places like Coney Island, Kennywood, and “trolley parks” such as Oakland’s Idora Park (pictured here) had been entertaining people since before Walt was born. Image: Wikimedia (Public domain)

Amusement parks had been around for a long time prior to the mid-1940s. These parks were groups of independently owned attractions, and tended to be chaotic, dirty, and seedy. Walt had a different idea for his park: He wanted a clean, family-friendly place that emphasized storytelling through unified theming, a place where the people who loved Disney movies could come to experience them “in real life”.

The initial plan was to create an Old West-themed park in the narrow lot across the street from the studio where Hench had seen Walt pacing. However, Burbank city officials rejected this plan (remember, amusement parks were seedy!), and Disney was forced to look elsewhere.

Unbound from the constraints of the small lot, Walt’s ambitions grew to encompass more than just the Old West. Given this broader scope, the design team divided the park into sections, called lands, which represented various themes. For example, one land would be devoted to fairy tales such as those featured in Disney movies, another to the Old West, etc. (Lots of different themes were explored at first, including clunkers such as Lilliputian Land, in which everything would be miniaturized — including tiny hot dogs which could be purchased and eaten!)

Early Disneyland map 2.png
Early Disneyland map. Image: Disney (via Malia Munday)

The park would eventually open with five themed lands:

  • Fantasyland, which brought fairy tales to life,
  • Frontierland, a recreation of the American Old West as understood by 1950s audiences,
  • Adventureland, an expression of exotic locales and cultures,
  • Tomorrowland, which presented an optimistic view of a future made better through science, technology, and corporate largesse,
  • and Main Street U.S.A., a nostalgic recreation of the type of small-town American Main Street that automobile culture was displacing at the time.

These themed lands became the conceptual framework around which the entire Disneyland experience was organized. It’s worth noting that this exact framework also served as the organizing principle for Disney’s first foray into the new medium of television — a show also called Disneyland — which appeared concurrently with the park’s construction (and which helped finance it).

Stills from the first season of the Disneyland TV show (1954). © Disney
Stills from the first season of the Disneyland TV show (1954). Image: Disney

The Disney organization is often cited as an early case study in corporate synergy: different, but related, businesses working in concert to improve each other’s position in the marketplace. The TV show would promote the park, the park would promote the movies, the movies would promote consumer products, in a virtuous cycle revolving around a consistent set of themes: nostalgia, fantasy, adventure, the old frontier, and new frontiers, all of which informed the products of the Disney studio (and many of its competitors) in the mid-1950s.

Mid-1950s map of Disney's various interrelated businesses. Image: http://www.visual-mapping.com/2010/05/visual-map-created-by-walt-disney-53.html © 1957 Disney
Mid-1950s map of Disney’s various interrelated businesses. Image: © 1957 Disney (via Phillipe Boukobza)

This was no coincidence. In 1950s America, the economy (and the population) was booming, the automobile (and the interstate highways and suburbs it enabled) was changing the ways people lived, and the Cold War (which brought the ambivalence of technology to the fore) cast a shadow over everything. The themes that informed early Disneyland (the opening of the frontier, nostalgia, the promise of tomorrow) resonated deeply with this primary audience. More than an amusement park, Disneyland would be a place where Americans could physically indulge in fantasies about their past, their future, and the innocence of youth.

This is a powerful vision, and it would prove an important competitive advantage for the park when it opened. You’re reminded of it every time you enter the park; it’s engraved in a little plaque that hangs above the entrance. It reads:

Image: https://commons.wikimedia.org/wiki/File:Disneyland_plaque.jpg
Image: Cburnett

A clear, compelling vision such as Disneyland’s can inspire and guide design teams around a singular direction. That said, having a compelling vision and a clear conceptual framework is not enough. The vision and framework must be organized in a way that makes it possible for people to relate to it, to interact with it. This brings us to our second lesson.

Lesson 2: Organize the experience into a coherent structure

The second lesson is the importance of having a coherent, extensible structure. This structure brings order to what could otherwise be a chaotic environment, and helps create a clear mental model so people experiencing the place can understand where they are, what they can do there, and where they can go next.

Disneyland’s structure makes it easier for new visitors to understand the place. It also allows the park to change and grow gracefully. Let’s examine three key structural aspects of the Disneyland experience:

  1. Its taxonomy
  2. Its topology
  3. The use of language and metaphor in the park

The taxonomy of Disneyland

As I mentioned previously, Disneyland is divided into various lands, such as Tomorrowland, Fantasyland, and Adventureland. This group of lands, and the attractions they contain, can be represented as a traditional taxonomy. For example, the Jungle Cruise attraction is located in Adventureland, and only makes sense there.

1963 Disneyland map. Image: https://www.flickr.com/photos/randar/15941495787 © Disney
1963 Disneyland map. Image: Disney (via Tom Simpson)

You could create an outline of the lands in Disneyland and the attractions and other elements they offer, and it would look much like the outline for the structure of a website. You can think of this taxonomy as a map to the content of Disneyland: the specific things it offers.

The topology of Disneyland

When you examine this taxonomy, you’ll notice that even though each land contains things that are unique to it, such as the Jungle Cruise in Adventureland, all lands offer the same types of things: They all have attractions, restaurants, shops, and guest services facilities (such as bathrooms, first aid stations, etc.) I call this self-similarity between the main areas of the place its topological structure.

Topology is a term that comes from mathematics: It’s the study of the properties that are preserved when something undergoes non-destructive transformations such as twisting, stretching, and scaling. Think of a circle. If you stretch the circle, you create an ellipse. The ellipse and the circle are topologically equivalent. However, if you tear the ellipse in half, it would no longer be topologically equivalent to the circle.

Even though the lands in Disneyland feature very different attractions, they share a common structure that make them topologically equivalent with each other. The attractions-restaurants-shops-services template is an invariant structural construct: all lands in all Disneyland parks use it.

The topology of Disneyland
The topology of Disneyland

This arrangement has an important effect in the way visitors understand and navigate the park. For one thing, the themes are made clearer because they are presented as narrative variations on top of an invariant, predictable structure.

For another, this also makes the environment easier to learn, since the affordances provided by one land are present in all the others. Should the Tomorrowland visitor feel the sudden urge to use the restroom, he doesn’t need to rush back to Main Street U.S.A. since he knows all lands have at least one restroom facility.

It’s worth noting that this invariance doesn’t mean the relationships, proportions, and amounts of the elements are identical in all the lands. Adventureland has more attractions than Main Street U.S.A., for example. What’s important is that the underlying structure itself remains constant as the visitor moves from one land to the next.

This topological structure has made it possible for Disneyland to change and grow over the decades while preserving the clarity of the environment. Park designers occasionally add and remove attractions, restaurants, shops, and services to the park. Every once in a while, they also add a new land, with its own set of attractions, restaurants, shops, and services. (There’s a new one being built right now, based on the Star Wars movies.) And of course, the entire park-land construct can be replicated. (It has been, once per decade, over the past sixty years. There are now Disneyland-style parks in Florida, Tokyo, Paris, Hong Kong, and Shanghai.)

The latest Disneyland park opened in Shanghai in June 2016. Image: https://commons.wikimedia.org/wiki/File:Shanghai_Disneyland_Park_Main_Entry.jpg
The latest Disneyland park opened in Shanghai in June 2016. Image: Baycrest

So how does this apply to UX? Consider how a key function of content strategy is identifying and defining content types so large-scale information environments can change organically while maintaining coherence and understandability. These content types are a topological construct of the sort I’m talking about. That said, topologies are applicable to more than just content-heavy systems; they’re an important consideration for any large information environment that must adapt to change over time. (Don’t they all?)

Language and metaphor in Disneyland

Another cunning use of structure in Disneyland is the way Disney designers use language and metaphor to influence behavior. For example, the people who work in the park are not called employees; they are cast members. These cast members don’t wear uniforms; their on-the-job clothes are referred to as costumes. And did you notice I referred to park visitors as guests? This was another semantic innovation Disney brought to the amusement park business. (The traditional term used in the industry was marks, which says a lot about how park operators thought of their customers.)

Underlying these terms is a ubiquitous metaphor: that the park and its employees are putting on a show. This metaphor informs everything about the Disneyland experience. For example, areas of the park that are forbidden to guests are said to be backstage. When something in the park is broken in plain sight of guests, it is said to be bad show.

Custodial staff member entertaining guests. Image: https://www.flickr.com/photos/lorenjavier/5760557129
Custodial staff member entertaining guests. Image: Loren Javier

The choice of words we use to describe elements and actors in information environments has an important effect in how we act with and within them. Think about the way your team talks about the people who use your information environments. Do you refer to them as users? Maybe you may think of them as customers? Or perhaps you have some other term, particular to your industry, such as patients. Whichever the case, the term you use will have a subtle influence in the way you design for and interact with these people. Because Disney refers to its customers as guests, Disneyland cast members are more willing to accommodate their whims than if they thought of them as marks.

This showbiz metaphor, as expressed through particular language, is an important part of the semantic structure that organizes and directs the Disneyland experience. This structure establishes the divisions and connections between the elements that compose the information environment. A coherent structure can make the environment easier to learn and navigate, and makes it possible for the environment to grow and change over time.

Semantic structures have a huge influence in how people think and behave when they interact in an environment. That said, these are abstract ideas. For people to be able to relate with the environment, these structures must be made into things people can actually experience. That brings us to the final lesson: the importance of using traditional placemaking principles to create an environment the people can actually interact with.

Lesson 3: Use traditional principles to create a sense of place

With a structural framework in place, we now face the challenge of making a place that people can move around in and enjoy. This is where the learnings from urban design and architecture really pay off.

The Image of the City (1960)

The study of how people form mental models of the places they inhabit can be particularly useful. Kevin Lynch’s book The Image of the City (1960) offers insights into this. It presents five elements that define how people experience urban environments:

  • Districts: The sections of the town or city, which have their own character, and which people have a sense of being “inside of”.
  • Paths: The means by which people get around the environment.
  • Landmarks: Physical structures that give people a sense of bearing.
  • Edges: Boundaries between two phases, lines that break continuity in the place.
  • Nodes: Areas of concentration of activity that serve as focal points for people to go to or from.

Particular combinations of these elements make cities and towns different from each other and allow people to create mental models of the one they’re in. Because Disneyland is an urban-sized environment that has been designed and maintained by a single entity, these elements come together in a particularly harmonious and focused manner. Careful attention to the hierarchy of the various components of the environment, the transitions and boundaries between areas of the park, and the connections between them, create a place that is not only easy to get around in, but also coherent, learnable, and memorable.

When navigating an information environment, we also need to make sense of where we are, what we can do there, and where we can go next. Studying these elements can help us design information environments that make this possible. Let’s examine how they come together in Disneyland.

Paths, nodes, and landmarks

Let’s start by looking at how people navigate the environment. When UX designers think of navigation systems, we usually think about navigation bars and search engines. The purpose of these things is to make it possible for people to move from one area of the website or app to another, to get closer to what they’re looking for.

usatoday.com's primary navigation system allows visitors to go to the main areas of the site.
usatoday.com’s primary navigation system allows visitors to go to the main areas of the site.

Navigation in Disneyland has similar purposes. However, since the park is a physical environment, it takes its design cues from architecture and urban design.

Disneyland implements a “hub and spoke” navigation model: There is a central hub, and all lands radiate off it. The park’s original design had a single entrance, located in the front of Main Street U.S.A., which led directly to this central hub. (It’s worth noting that this, too, was a Disney innovation in amusement park design: when Walt consulted other amusement park operators during the design of Disneyland, he was told this scheme wouldn’t work because it would limit the amount of people that could enter the park.)

Visitors enter the park from two tunnels underneath a train station. They then head down Main Street U.S.A. towards the hub, from which they can choose to visit any of the other four lands. Main Street U.S.A. is an example of the paths Lynch presents in his book: a way for users to get from one place to the next.

Main Street U.S.A. in the 1950s. Image: http://gorillasdontblog.blogspot.com/2007/12/main-street-usa-1950s.html
Main Street U.S.A. in the 1950s. Image: Major Pepperidge

People instinctively know to walk down Main Street because their attention is drawn to a very unusual element at the end of the street: Sleeping Beauty Castle, a sight never before seen at the end of a traditional American Main Street. The castle is an example of what Walt called a wienie: a prominent vertical element meant to pique the interest of guests and entice them to move in that direction.

The TWA Moonliner rocket served as an early Tomorrowland landmark. Image: https://www.flickr.com/photos/randar/15207702114
The TWA Moonliner rocket served as an early Tomorrowland landmark. Image: Tom Simpson

Once in the hub, guests would look around and see other wienies beckoning them: the Swiss Family Robinson’s tree house in Adventureland, the Mark Twain riverboat in Frontierland, and the TWA rocket ship in Tomorrowland. In Disneyland, these wienies serve as landmarks: they not only attract people by standing out, but also help keep them oriented as they move around a potentially chaotic environment.

Placemaking elements in Disneyland's original (1955) layout.
Placemaking elements in Disneyland’s original (1955) layout.

Walking toward the weinies, Disneyland visitors eventually find themselves in a central opening, or plaza, where they can experience the theming, attractions, etc. that are unique to each land. These are examples of nodes in the sense Lynch talks about.

This combination of nodes, paths that connect them, and landmarks that draw people’s attention towards them, makes Disneyland easy to move around in. We have equivalents to all three in user experience design. As I’ve mentioned, navigation bars and search systems provide means for users of information environments to go from one part of the environment to another. Semantic elements such as labels and icons provide the landmarks and affordances that indicate where people can go within the environment, and second-level screens serve as nodes by providing concentrated access to related information elements and a sense of local identity for different areas of the environment.

With its prominent location, the iconic Amazon shopping cart serves as a wienie, always beckoning the user to initiate the checkout process.
With its prominent location, the iconic Amazon shopping cart serves as a wienie, always beckoning the user to initiate the checkout process.

Districts

These different areas of the environment can be thought of as districts in the sense Lynch talks about. As you may have guessed, Disneyland’s individual lands — Fantasyland, Adventureland, Tomorrowland, etc. — are districts in this sense; they all have unique characteristics that set them apart from each other and give them particular flavors.

The lands convey these concepts and narrative — i.e. the things that make them different from each other — through incredibly thorough and detailed theming. For example, everything in Adventureland — the architecture, the foliage, the music, etc. — has been carefully designed to make you feel like you’re standing in an exotic jungle outpost.

The main sections of the USA Today website are differentiated using color and particular semantic structures.
The main sections of the USA Today website are differentiated using color and particular semantic structures.

When I think of theming in the context of UX, two main areas of focus come to mind:

  • Visual presentation
  • Style of writing or tone of voice

In both cases, style and theming should be in service to the conceptual framework that underlies the work. Many designers understand the importance of choosing the right style or tone when it comes to language. However, when it comes to visual design, we are still much too driven by trends.

For example, think of the move we saw a few years ago towards “flat” visual design, which eschews “skeuomorphic” (or “realistic”) details in favor of a more pure “digital” esthetic. While I have nothing per se against this style, I don’t like it when designers select it for their projects just because everyone else is doing it. Visual style should reinforce and support narrative.

Disneyland would’ve been much less successful if its designers had decided to have the environment reflect the “pure” nature of the materials its made from: fiberglass, wood, steel, etc. Instead, designers harnessed the plastic capabilities of those materials to reinforce the differences between lands, in support of the conceptual framework that makes the park such a compelling experience.

“Gratuitous”, “skeuomorphic” (or to be kinder, “whimsical”) theming is not only ok to do — sometimes, it’s the right approach.

Edges

Finally, let’s look at edges. One of Disneyland’s most interesting design features is how it deals with transitions: those between the individual lands, and those between the park itself and the outside world.

The park’s lands have been carefully designed so their themes blend smoothly into each other. If you’re walking from Adventureland to Frontierland, you won’t experience an abrupt change. Instead, the architecture, foliage, etc. subtly blend together to achieve what has been compared to a cinematic cross-dissolve in real-life. (Many of Disneyland’s designers came from the movie industry; the park’s design is heavily influenced by cinema.) These smooth transitions are what I refer to as “soft” edges.

The opposite, “hard” edges, are transitions that have been intentionally designed to keep things apart. Disneyland also offers a prime example of these. Walt wanted to keep visitors from seeing the outside world so their experience of being in the park could be more immersive. To do this, he surrounded Disneyland with a train track atop a raised earth berm, which occludes sight lines into and out of the park. When the park first opened, this berm was crossed at only one point: the entrance tunnels leading to Main Street which we have spoken of earlier. So you could say this is a very hard edge.

In order to occlude views of the outside world, Disneyland is surrounded by an earth berm with a railroad running on top of it. Note the tunnels passing under the tracks on both sides of the train station. Image: http://www.imagineeringdisney.com/blog/tag/construction
In order to occlude views of the outside world, Disneyland is surrounded by an earth berm with a railroad running on top of it. Note the tunnels passing under the tracks on both sides of the train station. Image: Imagineering Disney

In UX design, we often have to deal with edges between different parts of information environments, and we need to decide how hard or soft they need to be. For example, many financial services websites include areas of the environment that are meant for public use and the more private, “logged in” areas meant for customer use only.

The public and private areas of citibank.com look similar, but are in fact very different places. Crossing this boundary requres entering a user name and password. This is a rather hard edge.
The public and private areas of citibank.com look similar, but are in fact very different places. Crossing this boundary requres entering a user name and password. This is a rather hard edge.

Some of these transitions need to be very hard, with the user being explicitly presented with stops when they try to cross over from public to private. In others, this boundary is much softer: the transition happens more gradually. Knowing these edges can have different levels of softness helps us frame the conversation with the design team so that decisions happen in an informed manner.

The Citibank iPhone app, on the other hand, offers an intermediate state between logged in/out that offers the user some information about her accounts before she's logged in. The user can also log in faster using Touch ID. This is a much softer edge. Image: Citibank
The Citibank iPhone app, on the other hand, offers an intermediate state between logged in/out that offers the user some information about her accounts before she’s logged in. The user can also log in faster using Touch ID. This is a much softer edge. Image: Citibank

Let’s recap

People form mental images of urban environments, such as towns and cities, using five elements: districts, edges, nodes, paths, and landmarks. Information environments have comparable elements that help people make sense where they are and what they can do there.

These placemaking elements are most effective when they work together to implement a semantic structure that brings coherence to the environment. This structure implements differentiations and metaphors that allow people to relate to and understand the environment.

This structure is most effective when it’s informed by a clear vision. In the case of Disneyland, this vision was set forth early on in the design process. It guided the design team towards the creation of a new type of environment that had never been experienced before, and which resonated deeply with its users.

These three components — vision, structure, and placemaking elements — build upon each other respectively. It’s difficult to create a meaningful structure if the vision isn’t clear, and designing placemaking elements without a clear semantic structure supporting them can only lead to an incoherent environment.

As they do with physical environments, people who use an information environment need to be able to create a mental model of the environment so they can act skillfully in it. As designers, we can help them along by using traditional principles to create a strong sense of place, informed by a coherent structure that articulates a resonant vision. Disneyland offers a perfect model for us to study.


Postscript: Crafting a vision statement for your environment

While all three components — vision, structure, and placemaking — are critical, designers most often take for granted the vision component. Design projects usually start with some sort of brief that lays out high-level requirements and objectives, but the vision of what the place is going to be (and how the people who use it will experience it) is seldom discussed. Because everything that follows will build upon it, it’s critical that the vision of the place be clear from the start.

In order to help clarify the vision for the design team, I’ve started doing a small exercise at the beginning of projects to produce what I call a “here you”, or vision of place, statement. This is a short sentence that articulates succinctly and powerfully what this place will be about, and how it will act on the people who experience it.

It’s called a “here you” statement because we use as our model Disneyland’s vision of place statement. (“Here you leave today and enter the world of yesterday, tomorrow, and fantasy.”) We take out everything but the words “here you” from Disneyland’s statement, and fill out our own words from there on:

A few guidelines to help you create a “here you” statement:

  • Keep it short! (It should be able to fit in the brass plaque above the entrance to Disneyland.)
  • You’re not writing a vision for your team or your organization. You’re writing a vision for the place you are creating.
  • It should not reflect your point of view of the place, but that of the people who use your place. (That’s why it starts with the words “here you,” addressing the visitor.)
  • The language should be energizing. Visitors should be excited to visit this place; avoid clichés.
  • Be realistic about what you’re trying to achieve with the place you’re making. That said, don’t be afraid to aim high!
  • You’ll have better traction if you work on this together with your team.

A well-crafted vision of place can help energize the design team, and get it working in a singular direction. When the time comes to make difficult design decisions, the vision of place statement can help the team make the right decision by honoring the intent behind the project.


This post was originally published in Medium.

Lands, Hubs, and Wienies

Powered by Blueprint

Update 2017-01-12: I’ve published a post based on this presentation.

I delivered this presentation at the 2016 IA Summit in Atlanta, Georgia

Presentation Summary:

Digital products and services are new types of places that alter how people understand information. This presentation distills lessons in placemaking from one of the most successful places ever created—Disneyland—to help you design more effective information environments.

When designing a digital product or service, you are engaging in a new type of placemaking: one that alters how people perceive and understand information. As with (building) architects, digital designers seek to create environments that are understandable and usable by human beings, and which can grow and adapt over time to meet their needs and those of their organizations. This presentation will help you create more effective digital products and services by distilling lessons in placemaking from one of the most successful physical environments ever designed: Disneyland (and the subsequent Magic Kingdom-style theme parks around the world). You will learn how to create conceptual frameworks that allow users to make sense of and find their way through your information environment, and how those frameworks can inform a clear structure for your user’s experiences.

Slide deck:

The smart sketchbook

Like yours, my life has been changed by the smartphone. The iPhone in my pocket is an incredible device that lets me take amazing pictures, send and receive emails, access the web, become oriented when trying to navigate unknown environs, and so much more. It’s the perfect mobile communications complement to my larger (notebook) computers, which serve a whole range of other needs. However, as amazing as all of these digital devices are, there is a huge aspect of my workflow that has remained mostly analog over the years: sketching. I’ve been looking for a long time for an efficient way for my sketching to leverage the benefits of being digital – a “smart sketchbook”, if you will – and now I’m ready to share a solution that works for me.

Thinkpad Tablet 2

Sketching and the shortcomings of paper

As a visually-oriented person, sketching is how I take notes, formulate ideas, explore possibilities, avoid dead ends, and – most importantly – give shape to the amorphous stuff that my subconscious mind has been working on while I’m sleeping, showering, walking in the park, or otherwise goofing around. It’s also a very efficient way of capturing ideas in interviews, meetings, and other situations in which a laptop sets up a physical barrier between me and the person(s) I’m communicating with. In short, sketching is the most effective (and socially acceptable) channel I’ve found for talking with myself. I’ve been doing it informally since I was about eight years old, and formally since attending architecture school over twenty years ago. At this point in my life, it’s fundamental to how I think and work, and I do it mostly on paper. (For a good overview of the importance of sketching in UX design, see Bill Buxton’s Sketching User Experiences.)

As you may surmise, I love sketching. However, there is a downside to sketching on paper when doing UX work: at some point the drawings and notes must make the leap to digital, and with paper this is very inconvenient. For example, now that I’m working remotely, I want to be able to communicate and iterate on ideas with my team. In the office, we would do this by sketching together in person. Now we must find another way. I’ve tried various approaches:

  • Scanning pages with a flatbed scanner. (Kludgy, time-consuming, and who has access to a flatbed scanner in a coffee shop?)
  • Scanning pages with a smartphone. (Faster, and more convenient, but keeping pages flat for scanning can be a challenge. On iOS, I use and recommend Readdle’s Scanner Pro.)
  • Transcribing and refining sketches using an app like OmniGraffle. (Time-consuming, and loses some of the spontaneity and ambiguity that sketches have and which can lead to good things. This will be the subject of a future post.)

So there are limitations when making the leap from analog to digital, but it’s doable. However, a more serious limitation is paper’s inability to make the leap in the other direction: from digital to sketchbook. For example, there are many times when I’m doing research that I wish I could include a crop of what I was looking at on my screen into my sketchbook, so that I could annotate it or compare it with other specimens. I’ve also wanted to include photographs or videos of stuff in the real world, or copy text blocks from emails or other digital documents, into my sketchbook. And of course, it’s not possible to access my old sketches if I don’t have the physical notebook with me, nor is it possible for me to do a text search on my handwritten notes. None of these use cases are well served by pen-and-paper, and I’ve started to find these limitations increasingly constraining.

I’ve been looking for a long time for technology that would allow me to bridge this digital-analog divide. Now that I have a phone that is smart, I want a sketchbook that is smart too.

My previous setup

Before I describe what I want a smart sketchbook to do, I’ll give you a peek into the system it’s meant to replace. I’ve always (since childhood!) preferred to draw with stark fine black pens on smooth off-white stock. Recently, I’ve been using Pilot Precise V5 pens on Leuchtturm medium-sized notebooks (which I’ve found to be more durable than the Moleskine equivalents, and can be had with a subtle dotted grid which I love). I always start a new page when sitting down to think about a particular project or idea. I always write the name of the project/idea/topic on the upper left corner of the page, and the current date on the upper right corner. (So notes are organized chronologically, rather than by topic or project.) When a notebook fills up, I always write the start date and the end date on the spine with a metallic Sharpie pen. I have a shelf full of these notebooks stacked in chronological order. It’s a fairly well organized system, but highly dependent on chronology, and because it’s paper-based, can’t be easily re-sorted.

What I want from a smart sketchbook

A smart sketchbook would be to a sketchbook what a smart phone is to a phone: it should provide the basics (sketching, taking down notes) while augmenting them with the ability to obviate the digital-analog divide outlined above. It should allow me to capture ideas with the fluidity, precision, and freedom afforded by paper, but directly into digital so that I can enjoy all the benefits and flexibility afforded by the digital medium: fast random access to my work, treating digital objects as part of the subject matter and canvas of my doodling, easily sharing and/or collaborating on ideas, etc.

Specifically, these are the things I want from a smart sketchbook:

  • Drawing on the sketchbook should feel like using pen on paper.
  • The sketchbook should have a canvas that can be arbitrarily subdivided into notebooks or categories.
  • It should allow me to arbitrarily organize notes by other facets besides chronology. (And wouldn’t it be awesome if I could search my handwritten notes?)
  • It should have a modern web browser.
  • It should allow me to crop elements from said web browser and paste them into the canvas.
  • It should have a camera so that I can include quick snapshots into my sketches and notes.
  • It should allow me to easily share notebooks or pages with others and with myself using standard file formats (like PDF).
  • It should allow me access the other project documents (which I keep in Dropbox).
  • It should have a decent PDF reader.
  • It should have a decent image management app.
  • It should provide mobile internet access.
  • It should have a portable form factor, as close as possible (in size and weight) to the third-gen iPad (my other tablet device).
  • It should have an all-day battery, a la iPad.

Bonus points:

  • It should allow me to share the drawing process in real-time. (Double-bonus points: allow me to do so collaboratively over the Internet!)
  • It should serve as an agenda on a pinch; this means it should include a decent calendar app and allow me to access my task lists (which I manage in OmniFocus and Asana) and contacts.
  • It should read (and ideally, produce) standard file formats such as XLSX and DOCX.
  • It should be able to run a good plain text editor (ideally one that understands Markdown).
  • It should be able to ride au naturel in my day pack like my paper sketchbook does… durability is important!
  • It should be able to serve as an e-book reader. In my case, this means a decent implementation of Kindle.app and a decent ePub reader.

Some approaches I tried (and gave up on)

Like I said, I’ve been trying to build the perfect smart sketchbook for years, and at this point have spent thousands of dollars and countless hours with various setups. Here are some I’ve tried, and why they didn’t do the job:

  • iPad & stylus. You may be thinking, “this sounds like a job the iPad could do”. So did I, and embarked on a quixotic (and expensive) multi-year quest for the elusive Perfect Stylus. At this point I’ve tried over a dozen different styluses (or is it styli?), and feel confident in telling you that as long as the iPad relies solely on capacitive touch for input, it will be impossible for me to sketch on its screen with the precision and fluidity I’m after. Drawing on the iPad with a stylus is akin to drawing on a very small whiteboard with a dry-erase marker. It has its uses, but the experience is very far from pen-on-paper.
  • Paper sketchbook & Scanner Pro on iOS. As I mentioned above, Scanner Pro is my preferred scanning app on iOS. It allows me to take a snapshot with the iPhone’s (or iPad’s) camera and then correct the image for perspective distortions and contrast adjustments. Used in combination with an iPad, it satisfies many of the points I outlined in my list. However, there is still the issue of not being able to include digital objects in the sketches themselves. This method also turns the sketching exercise into a phased affair: first you work on paper, then you stop to take pictures (an awkward, slow process if you’re a prolific sketcher), then you process and organize them. This takes a LOT of time. There’s also the problem that now you have a “master” document (the paper version) and a secondary captured version; you need to be very disciplined about capture, lest important things get left out of your digital repository. It’s too much hassle; I would much rather have to manage a single system than two.
  • Notecards with Fujitsu ScanSnap scanner. I’m one of those insufferable nerds that swears by his Fujitsu ScanSnap scanner. The advantage of using a ScanSnap is that it can automatically scan dozens of double-sided loose leaf sets of documents on one go, so scanning is much faster than with a flatbed scanner or a scanning app like the one outlined above. The downside is that the ScanSnaps can only take loose leafs, so for a while I tried foregoing a notebook in favor of individual notecards which I would then feed into the scanner. Like the previous attempt, this is a phased process, which I find inconvenient. This system became very messy very quickly, so I didn’t stick with it very long. (I still use the ScanSnap for most of my other scanning needs. It’s an essential piece of kit.)
  • Galaxy Note devices & LectureNotes. Most of this year I used a Galaxy Note II as my primary smartphone, with a terrific note-taking app called LectureNotes. This system was the closest I’d come to achieving the elusive smart sketchbook: the Note has a Wacom digitizer and stylus, and so offers a much more pen-like experience than the iPad. The only real complaint I had was that the screen wasn’t big enough to do the type of sketching that I do. Samsung has since released the Galaxy Note 8, which features a much larger screen (akin to a medium Moleskine). My partner in the office bought one, and it seemed a great solution, but I thought there was too little difference between it and my phone to justify carrying both of them. Then my Note’s screen broke, and Samsung’s tech support was so bad that it turned me off their products. That said, the Galaxy Note 8 is the closest solution I’d seen, until… [Drumroll]

The Lenovo Thinkpad Tablet 2 and OneNote

This is it folks, I think I finally found the smart sketchbook I’ve been looking for: the Lenovo Thinkpad Tablet 2. The TPT2, as I’ll be referring to it throughout the remainder of this article, is a small (iPad-sized) Windows 8 slate computer which offers most of the features I’m looking for in a smart sketchbook:

  • Size and weight similar to (actually lighter than) my iPad 3.
  • Pressure-sensitive Wacom digitizer and stylus.
  • A full, modern, desktop web browser (and the ability to install many others).
  • Two cameras. (Front- and rear-facing.)
  • OneNote, the best note-taking app I’ve ever used. More on this below.

TPT2 with the iPad 3

Because this is a full Windows 8 computer (and not a neutered RT device), there are lots of apps available for it, including the real filesystem-syncing Dropbox app. (Unlike iOS, with Windows you have access to the device’s filesystem.) You can run Microsoft Office on it, and while MS Office isn’t touch-optimized, you can pair the TPT2 with a Bluetooth keyboard and mouse to create a highly portable mini-desktop. I’ve been using Microsoft’s Wedge keyboard and mouse, both very well-designed products that complement the TPT2 beautifully:

TPT2 with keyboard and mouse

Unlike the Microsoft Surface, the TPT2 (at least the model I have) also has an LTE radio, so I can go work in the beautiful City Park if I feel like it. And also unlike the Surface, the battery on the TPT2 lasts about as long as an iPad’s (around eight and a half hours, in my experience). It’s also worth noting that the SIM-enabled 64 GB TPT2 costs less than the comparable iPad model, and has a microSD slot which has allowed me to expand storage by an additional 64 GB.

The TPT2 is a pretty cool smart sketchbook out of the box, but I’ve added two other accessories that have taken my sketching experience to a whole different level. The first is a matte film made by 3M that you stick on the TPT2’s glossy screen. This has two important effects: 1) it reduces reflections considerably, making the surface of the screen reflect light more like paper does, and 2) it adds tooth to the surface of the screen, so that when you slide the stylus across it feels like you’re writing on paper and not on glass. The other item is Wacom’s Bamboo feel pen, a metallic stylus that feels more like a real pen than the chintzy plastic one that comes with the TPT2. The combination is surprisingly similar to pen-on-paper.

And then there is OneNote, a fabulous note-taking application made by Microsoft and available as part of the Office suite. This app allows you to combine text, images, and “ink” into pages that can be arranged arbitrarily into notebooks that can be categorized in any way you can think of. OneNote integrates with the other office apps, and notebooks can be shared with other people for collaboration. The lot synchronizes over the air using Microsoft’s SkyDrive service (which in my experience is more reliable than iCloud for this sort of task), and can be accessed online using any modern web browser in (almost) real time. And that wistful little side point about being able to search your handwritten notes? Yes, OneNote does that too. The whole feature set is extraordinary: I’m still learning new things after many months of using it.

OneNote comes in two versions: the “desktop” version (currently OneNote 2013) and the “modern” version. The latter is free and is a bit slower and less functional than the desktop version, but has a really cool advantage: it can be used in Windows 8’s split screen mode to take notes alongside other apps. For example, I use this feature to take rich marginal notes when reading books on the Kindle app:

Kindle.app and OneNote marginalia

This is much more convenient than having to switch back and forth between apps, as would be the case in an iPad. Data in both the desktop and modern versions of the app is kept in sync using SkyDrive, so you can switch between them depending on your needs. (I learned of OneNote’s potential for UX sketching in a series of articles in the Cooper website; I urge you to explore them if you’re into this topic.)

So what’s not to like? Well, there are a few downsides to the TPT2. The first is that it achieves its magical price-weight-size-battery life combo by using a skimpy Atom processor like the ones used in netbooks. This means it’s not a fast device; for sketching it’s fine, but large animated transitions (like the ones in Flipboard) stutter. Another shortcoming is that the TPT2 has a relatively low-resolution screen; reading text on a high-density screen like the one on the iPad 3 is much more comfortable and paper-like. Another downside is that the TPT2 sometimes has a hard time keeping up when there are two Bluetooth input devices in use (for example, when using the mouse and keyboard, the latter sometimes lags, stutters, and repeats keystrokes). Also, even though you can charge the TPT2’s battery using any USB charger, it charges VERY slowly (sometimes even leaving it overnight is not enough). And of course, I don’t have access to Apple-only apps like OmniGraffle and OmniFocus.

The main downside, however, is that this is a Windows device. After more than a decade of primarily using OS X-based machines, I’ve gotten used to the wonders of no-hassle, low-maintenance personal computing. Even with its elegant modern UI, Windows 8 is still Windows: I still have to worry about device driver incompatibilities, I still have to dig into the registry sometimes, and I still have to occasionally put up with the dreaded Blue Screen of Death:

TPT2 Blue Screen of Death

I waited a while to upgrade after Windows 8.1 came out, and there were still driver snafus and little technical niggles to deal with when I did. These types of inconveniences are rare in Appleland; I wish my Windows sketchbook were as reliable and trouble-free as my Apple devices. If you decide to tread into these waters, be prepared to set aside time for hunting down and fixing tech issues with the OS.

Are the inconveniences worth it? Thus far, the answer for me is yes. Apart from finally getting close to achieving the smart sketchbook I’ve wanted all these years, it’s also given me the opportunity to explore Windows 8’s modern UI, which I find more elegant, intuitive, and coherent than iOS 7. Mind you, I’m setting the bar rather low: I’m not trying to replace my laptop with this device; it’s meant to replace my paper sketchbook. It does so wonderfully, and it does a lot more besides. But there is one device that it has mostly supplanted in my toolbox: the iPad, which still offers a much better reading experience but which I can’t use for sketching or some important productivity tasks.

Even while it’s somewhat slow and hampered by a fussy OS, the TPT2 + OneNote combo is the closest I’ve found to the perfect smart sketchbook. There are rumors of a faster and higher-res Thinkpad Tablet 3 in the pipeline for next year, so I will be paying close attention to developments in this area. For the time being, I’m actively exploring new ways in which this new, more organic, way of working digitally can make me a more productive UX designer.

En contexto

(In Spanish)

I delivered this presentation at the first Experience Design Summit in San José, Costa Rica, in September 2013.

Presentation summary:

We can’t talk about design without in the 21st Century without talking about information. The majority of products and services that we interact with are part of information environments that teach, entertain, guide, and influence us. This presentation examines the importance of context in the way that users understand and navigate information, and what we can do to create more successful information-based solutions.

Q: Why Does Good Design Matter? A: Trust

There’s a great article on FoundRead today about the importance of design, particularly for web startups. The article has a few choice quotes, but I was particularly drawn to this one:

When people visit your website, most won’t go through a fact-finding expedition to figure out your Series A numbers, who your investors are, and what your story is just to decide if your company can be trusted. Initial trust is a gut-feeling. The easiest way to put your company on that path is via well executed visual design that shows you put some effort, and money, into delivering a first-rate and satisfying experience to your customers.

I met recently with a prospect who wants to position his business as a high-end, “luxury” service provider. After much discussion about what this entails, I suggested we devise a strategy for their websites that tries to build trust rather than traffic or sales leads. This is, of course, a hard sell for most folks looking for ROI. It’s an odd objective, “building trust”. All the common indicators of website performance—traffic, sales, referrals, search engine positioning, etc.—are relatively easy to measure. But trust? Trust boils down to “gut feeling”, as the FoundRead article explains, and that is nigh impossible to quantify.

One of the biggest challenges I face in my day-to-day work is that much of what individuals consider trustworthy (especially when dealing with a primarily visual medium, like the web) is obtained from subtle cues that are specific to their own culture. Japanese users expect a different visual experience than someone from the Middle East, or from Central America. There are many companies in Central America that are trying to reach out to international audiences (especially in the US), and expect their websites to have “the best design possible” (in other words, to present a trustworthy image). However, in many cases clients are unprepared (or unable) to judge the trustworthiness of a design aimed at a different culture because their gut tells them something’s wrong. (In the case of designs aimed at US audiences, the reaction I usually get is that “it looks too dry”, by which they mean that not everything is flashing and blinking and bleeping and blaring music at the user.)

This is not an easy problem to solve. Empathy is one of the most valuable traits a designer can bring to a project, but empathy is not something that can be taught. While the designer can be very empathetic, there are good chances that the client won’t be, and the designer can do little to tell the client’s gut how to react.

Joshua Prince-Ramus on the architecture design process

Diego Rodriguez points to a video of a TED talk given by architect Joshua Prince-Ramus about his team’s design process and how it led to the creation of three very unique buildings, including the acclaimed Seattle Central Library.

There is much that information architects can learn from traditional “brick and mortar” architects: both fields aim to satisfy client needs within strict technical (and budgetary) constraints, all the while meeting (and hopefully exceeding) the expectations of end users. Mr. Prince-Ramus explains very persuasively how the limitations imposed by the project’s requirements can lead to innovative (and beautiful) solutions.

It’s worth noting the degree to which commercial and contextual factors define the final form of the designs presented in the video. It’d be great to be able to visualize the commercial constraints of an IA in a similar way to how Mr. Prince-Ramus’ team visualize the programatic aspects of their designs—sometimes to the point of having those programs become the design. (How could we do something similar?)

A recurring theme in the presentation is that design is greatly affected by how the designer manages his/her relationship with the client. Rem Koolhaas, who was the lead architect in the Seattle project, has a (deserved) reputation as one of the world’s most innovative designers. I doubt any clients engage him unaware of his unique portfolio. Even then, it seems the Seattle design team needed to convince the client of the benefits of approaching design problems from a fresh perspective. As I watched the video, I kept thinking “it must be hard for an architect that is not famous like Rem Koolhaas to get away with something like this”. Check out the beautiful presentation materials they use to “sell” clients on their approach; they help make very clear concepts that would otherwise be very difficult to convey using traditional design deliverables.

Speaking of which, the animations shown in the video rank among the best presentations of architecture I’ve seen on a screen. These artifacts are an order of magnitude more “readable” than the traditional plans, elevations, and even renderings. (This is a simpler problem to resolve in IA, because the end product is usually also screen-based.)

Mr. Prince-Ramus will be the keynote speaker at the 2007 IA Summit in Las Vegas. After seeing this video, I’m even more excited about the Summit!

Architecture as Cultural and Location Grounding

Thomas Vander Wal has been traveling a lot, and he’s finding that the local architecture can have important effects on his feelings of connectedness.

This is interesting to me because one of the hallmarks of the much maligned International Style of architecture is a trans-national vocabulary that is rooted more in fantasies about the machine age rather than in local context. Much of the design work we do online follows similar rules that hint at a global style (or styles), and results in a homogeneousness that is meant to convey “that we, too, can design like North Americans”. Here’s an example: an article by a Russian developer that proposes a categorization of different web UI styles, all based on designs for sites for US-based companies, presumably for replication by other designers.

Perhaps more culturally-aware design can help bring a feeling of rootedness to websites, much like culturally-aware architecture can for cities. How should we approach this, when we’re being sold on the notion of “global commerce online”?