UX Design using the Five Planes Method
As more people rely on accessing services online the role of UX design has become increasingly important in our digitized world. Transformation is happening in every industry, from agriculture to government. Technology is prevalent across all aspects of our daily lives. Take the way we shop as an example. More and more people now use digital apps to shop for everything from electronics to ‘what they will eat’ for dinner tonight.
At its core, the experience of shopping online is somewhat consistent. Users use an application to browse and select their products, enter their credit card information, and receive their purchases shortly thereafter at their doorstep. This neat and tidy experience is a result of a series of decisions that designers and engineers make to create a medium of exchange that originates in the virtual world and materializes in the consumer’s hands.
In this brief post, I peel away the layers to reveal how designers can manage the complexity of a service, such as e-commerce, to design a solution using the Five Planes method. At the end of this post, I also share a link to a worksheet that I have created to guide individuals who want to use this method in their design practice.
Five Planes
The five planes — strategy, scope, structure, skeleton, and surface — provide a conceptual framework for breaking down the task of designing experiences into component elements so that we can understand the problem as a whole. On each plane, the issues we must deal with become a little less abstract and a little more concrete. On the lowest plane, we are not concerned with the final shape of our end product. Whereas on the highest plane, we focus on concrete details of the appearance of the product. Plane by plane, the decisions we make become a little more specific and involve finer levels of detail.
Strategy
Strategy incorporates user needs as well as product objectives. Therefore, the best time to start using the Five Planes method is in parallel or following the user research phase in any design process. Fundamentally, the strategy must answer two questions:
- Why do we want to build the product?
- What are the needs of our users and how do we address them?
Take for example an app that allows people to book a taxi on-demand. In this example, some of the strategic objectives are quite obvious: Users want to travel from point A to B, and the taxi company wants to earn the traveller’s business.
Scope
Scope is guided by the product strategy. Here, we explore what features and functions are within scope, as well as what content elements may be required to meet users needs.
Going back to our taxi example, the app might offer a feature that allows users to set a ‘home’ and ‘work’ location to make it easy to call a taxi to frequently used location. The question of whether that feature — or any other feature — is included on a site is a question of scope.
Structure
Structure defines how the various features and functions fit together. Here we start transitioning from the abstract to more concrete elements of the user experience. Structure deals with defining how users get to specific information and where they can go next.
Whereas skeleton, the next plane, might define the arrangement of navigational objects allowing users to select their ‘ride’, structure defines the categories of trips or rides possible.
Skeleton
Skeleton is the concrete expression of the more abstract structure of the site. Here we start designing interface elements — buttons, text blocks, images, etc. — that will facilitate the user’s understanding and movement through the product.
The skeleton, that often materializes in the form of a wireframe or a low-fidelity prototype, is designed to optimize the arrangement of UI elements for efficiency and ease of use. For example, back in our taxi app example, it might be determined that a map would show the location of the nearest vehicles and a prominent button would allow the user to confirm their ride.
Surface
Surface is the ‘skin’ layer of the product. Here, designers dive into the visual treatment of the product, including text, graphical elements, and navigational components to create the packaging, the final ‘look-and-feel’, of the product.
Surface level design is often what most people will refer to when talking about the product. For some, the packaging is what triggers feelings and emotions that will lead them to choose one taxi app over another.
Application
User experience design as a process is about making sure that every human interaction that happens with a system is placed there with explicit intent. Designers study needs and expectations at every step that users are likely to take when interacting with a product. It sounds like a big undertaking, and often it is. This is why it is helpful to break down the task into its component elements, so we can better understand the problem as a whole.
As we have discussed, on the lowest plane we are not concerned with the final shape of the site at all — we care about user needs and often the business case for why we want to build a product or solution. By the time we get to the highest plane, we are concerned with the most concrete details of the appearance and packaging of the outcome. Plane by plane, the decisions we have to make become a little more specific and involve finer levels of detail. But does this mean that all decisions need to be made on a lower plane before the next plane can be addressed?
In reality, dependencies run in both directions with decisions made in the upper plane forcing a reevaluation of decisions made on a lower plane later on in the design process. Environmental factors, such as competing products, shifting trends or user behaviour, can have a ripple effect in both directions. The key to success is to be agile and open to going back to a lower plane to update choices to optimize for the overall success of the product or solution.
Instead of making sure that work is complete on a lower plane before moving to the next, a better approach is to have work on each plane finish before work on the next plane can finish.
The Five Planes method was first discussed by design Jesse James Garret in the context of website design. However, the method can be used to design experiences for services and ‘offline’ products as well. The basic principles hold. The tools, however, may differ depending on whether depending on your medium, for example, a mobile app versus a real-world service.
If you are a practitioner of my Impact Centered Design framework, the Five Planes method is a good way to structure your efforts under Process. Use the worksheet, provided below, to gather insights and information, such as user needs, and build out your solution using the Five Planes method. Feel free to get in touch if you have questions related to your specific use case.
Worksheet
As I started exploring and using the Five Planes method, I needed a way to think and manage the outputs at each plane. So, I created a worksheet that my clients and I have been using with a degree of success that I think might bring value to someone interested in design with the five planes.
Download the worksheet. All I ask in exchange is if you can share how you’re using the 5 Planes Method and what value you have received from it by sending me an email.
