User-Centered Design Canvas

The User-centered Design (UCD) Process

UCD is a design philosophy where the end-user’s needs, wants and limitations are a focus at all stages within the design process and development lifecycle. Focuses on having a deep experiences of users.

What is User Experience?

. . . nearly everything in someone’s interaction with a product. ( Mike Kuniavsky, Observing the User Experience )

Good, but can we be a bit more specific?

. . . how the product behaves and is used in the real world. ( Jesse James Garrett, The Elements of User Experience )

Better, but where is the user?

. . . what your users think of themselves as a result of interacting with your creation. ( Kathy Sierra, Creating Passionate Users )

Excellent, but how can we make this happen?

Jesse James Garrett has provided a conceptual framework for user-centered design in his book, The Elements of User Experience. The framework is an abstraction that consists of five planes. Each plane describes elements of design that contribute to the overall user experience. While Garrett derived and applies this user-centered design framework to websites, it can be used to design any type of product.

1. Strategy

The strategy of a design focuses on identifying user goals in order to specify the objective of the site. There are different types of user goals that must be considered, including experience goals (e. g., I don’t want feel stupid using the site), life goals (e. g., I want to kick ass using the site), and end goals (e. g., find a great price for a camera).

In the determination of user goals, it is necessary to consider the variety of potential users. Different users will have different goals and it is impossible to help all users achieve all their goals. Instead the design must selectively target particular users and particular goals. All other design decisions are influenced by the strategy, and thus determining this strategy is the first step in the design process.

2. Scope

The scope of a design identifies the content and functionality required to accomplish the objectives of the site. There are often many ways to accomplish a set of objectives, each with a different set of advantages and disadvantages.

For example, Yahoo and Google have fundamentally different ways of acheiving the same objective, that is, to direct the user to desired content.

Yahoo organizes web content into a hierarchical directory of organizational terms (e.g., Entertainment > Actors > Dog Actors > Lassie) and allows users to navigate through this structure one level at a time. This structure is particularly useful when the user is in search of content that is not necessarily well specified. Associated or related content is made explicit in the structure.

On the other hand, Google directs the user to web pages based on user specified search terms. Directed search implicitly uses the structure of web content, but hides this structure from the user. The primary advantage of this functionality is to speed the user to the desired content when they know exactly what content they are interested in and how to specify appropriate search terms. Site content and functionality directly affect the usefulness and indirectly affect the usability of a site.

3. Structure

The structure of the web site is larger than any single page. It is determined by the organizational structure of the site content and the navigation methods used to interact with that content. The structure of a site is not immediately apparent to the user.

Instead, the structure must be discovered by actively navigating through the site. The structure of the site is also important in determining the usability of a site. There are many ways of organizing content on a site, only some of which will be consistent with a user’s mental organization of that content. Logical or ordered organizations, for example, the Dewey Decimal Classification System, may not map onto a user’s mental model.

In fact, mental models are decidedly non-logical, and tend to over-represent recent and extremely frequent information. Matching site structure to the user’s mental model of the content can increase site usability and content comprehension.

4. Skeleton

The skeleton of the page represent the rigging for both the content on the page as well as the functionality of the page. The accessibility of the content and the usability of the content navigation are determined by the type and arrangement of interface elements on the page.

The skeleton of a page is an important determiner of user experience because it is almost as visible to the user as the surface. The skeletons of highly used designs are implicitly learned by users.

For example, consider that tabbed navigation is almost universally applied at the top of a webpage. When a site violates this convention, the user can become easily confused. Consequentually, the skeleton plays an important role in determining usability. ( protocols of usability )

5. Surface

The surface is the first thing that a user notices about a product. Aesthetics and visual identity contribute to the surface of the interface. The surface defines how the content is arranged on the page and how the elements of the visual design look and feel. Surface elements often take priority in determining first impressions and thus play an important role in product sales.

For example, the aesthetic of Apple products is unique and immediately identifiable. As a result, the visual and brand identity is strong. While the surface is the first element to reach the user, it is the last step of the design process.The surface can be most easily changed without influencing other design decisions.

borrowed from Shiny Happy Users


If you found this article interesting, click the ❤️ so more people can find it. For more info reach out to me on Twitter .

Originally published at on January 21, 2017.

With a background in Cognitive Science and Experience Design, I live and breathe Product Experience — as a designer, independent consultant and researcher.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

6 Ways To Use Convergence’s New User Interface

Ada — Your Doctor Bot: Design Case Study and Sketch

Building a ‘distributed’ design system ‘with’ your team — but like actually…

My Thoughts on WCAG 2.1

Secrets are followed in creating qualitymattress

Project 1: T-shirt Design

Container Homes: Don’t get Romantically Involved with the Idea of This Kind of Stewardship.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


With a background in Cognitive Science and Experience Design, I live and breathe Product Experience — as a designer, independent consultant and researcher.

More from Medium

Rapid Design Thinking: How would you design an ATM for childern.

Design-Focused Principles — Airbnb’s Success Story

Stanford research, which tested our willingness to trust based on similarity, came to the rescue.

Design Tips in Less Than 3 Min — Give your job away…

⏰ Wake up & Slay