Summary

Explaining the elements of UX expertise is not easy to do in a concise way. My objective, however, is to do just that in this second article on the roles of UX designers. My thoughts on the subject are based on Jesse James Garrett’s model, since I share his vision of the fundamentals of UX design.

In short, UX design brings abstract issues to the point of concrete and tangible solutions. There is a wide range of possible tools and methods associated with UX design, but I’d like to start by focusing on the objectives and results of the larger process.

UX Expertise

In my previous article, I defined the five major roles that a UX designer can play: the rallying person, the skeleton expert, the natural strategist, the wise planner, and lastly, the advisor. In this article, I’ll go into greater detail for the core elements of UX expertise; that is, the roles of the skeleton expert and strategist.

Garret’s Diagram

UX expertise is complex, touching on a range of disciplines and domains. A number of experts are working to identify the main elements that make up the user experience. Jesse James Garrett provides a very good starting point for understanding the expert role of a UX designer, with his classic diagram (2010):

What I find to be especially inspiring is that this diagram illustrates how UX design pushes projects forward, from general and abstract needs toward something that is very concrete and visual. The five UX elements, ordered from most abstract to most concrete are the strategy, the scope, the structure, the skeleton and the surface.

To better understand UX expertise, let’s concentrate on these five elements, covering them in the same order as we would in a project; that is, from the most abstract to the most concrete. For the purposes of this article, I’ll describe these principles in terms of interface design only, but they are equally applicable to product and service design.

The Strategy

For Garrett, the strategy phase consists of both understanding and knowing how to address the needs of users and the objectives of the project. In my previous article, I wrote that UX designers are natural strategists, precisely because the strategy largely stems from an analysis of the needs of users and the objectives of the project. This is when the foundation is set for all subsequent steps of a project, and the UX designer is the person—or the strategist—that makes the links between each step.

UX designers’ ability to strategize is enhanced by their holistic perspective alongside knowledge of the details of a project. Their strategies, however, are shaped by UX design expertise, making collaboration across disciplines and with a range of engaged professionals necessary from the start of a project onward. A good strategy is shaped as many factors as possible, including visual identity, marketing, public relations, and more. Consultations with the appropriate experts and authorities should therefore be carried out during the strategy phase.

The Scope

Defining the scope of a project allows the project’s steps and timelines to be planned, and it facilitates the work of partners. Defining the scope means identifying the functionalities and the content that are to be put in place, depending on the strategy that has been adopted and the supports that are needed. For example, the requirements are different when opting for a website instead of a multiplatform project that includes a site as well as interactive screens in a physical environment.

Defining the scope is also a step toward making the project more concrete, which contributes to the understanding of all involved partners and representatives. This explains, moreover, why UX designers should play an advising role during the planning stage (as I mentioned in my first article on the different roles of UX designers). A better understanding of the project helps to inform the way that decision makers choose to divide a big project into phases.

The Structure

The structure defines how elements interconnect, how the user finds these elements, and how they’re named. This structure is the information architecture (IA). Since IA plays a major role in UX and since I’m passionate about this discipline, I’ll certainly be writing articles in the future that go into much greater depth on this subject. For now, as an overview:

The information architect embarks into the design process with a collection of data (with analysis on users, the domain, competitors, etc.) and a mass of content that is more or less concrete (or even nonexistent). This data and content has to be appropriately organized and grouped. With these choices, the architect’s objective is to respond to the expectations of users so that their circulation is efficient and easy in the structure they’re using. The architect’s choice of labels should also contribute to this experience.

There are an infinite number of strategies related to the organization of information, as well as varied methods for determining what labels should be used. It’s important to keep in mind that the information architect has to know the users in order to do this work effectively. This is helps to illustrate why the tools developed during the strategy phase are important for the information architect.

The Skeleton

The skeleton is the concrete outline of the elements of the site: the general design, the navigation, and the content. Often, this takes the form of a loosely accurate prototype, also known as the “wireframe”. A given structure may lead to a number of different skeletons, which is why it’s important that we make a clear distinction between the two steps.

Often enough, IA is rushed so that the models can be established more quickly. This happens to the detriment of the interface design, which then risks being incomplete and incoherent. Indeed, in order to be clear, the skeleton must be highly coherent—both internally and relative to other supports. The relationship between the shapes, the elements, the content, and the structure is important. Furthermore, both the macro-structure (the general structure) and the micro-structure (the fine structure of information and interface details) should factor into the choice of interface design.

The Surface

The surface is what the user sees: web pages with content and a visual design. This step is not to be neglected, as it constitutes an important form of communication. If the skeleton and the other steps were well thought out, we should see synergy between the different elements in the final result. The visual design polishes all of these elements and adds to the overall experience. The graphic atmosphere, the contrasts, the colours, the shapes, and the font choices interact to attract the user’s attention to the right place, so that they click where they should, read comfortably, and so on. The visual identity of the product, service, and company should also be evident in the interface.

A Beneficial Iterative Process

Part of practicing UX design is accepting that projects benefit from multiple iterations. As Kuniavsky, Moed, and Goodman suggest, iteration allows us to address challenges and constraints that were not foreseen at the start of a project. The process of carrying out a project becomes more flexible, therefore, when we are open to iteration.

Adopting this kind of approach means that solutions can be adapted to the context or according to the project objectives. Since the choice of design aims to respond to the established strategy, the solution is rarely perfect and there may be compromises to be made. For example, a big, powerful car is not as fuel-efficient as small car. Dealers will therefore adapt their communications according to the characteristics of the clientele that prefers power over ecological criteria. With iteration, such decisions can be verified and solutions can be adapted.

A final notable advantage of iteration is that it allows the visions of different members of a team to be progressively integrated. A project that is under development can always be considered from different angles, and while discussing different perspectives is useful, it is important that the team be aligned according to a common, clear vision.

In a similar vein, structuring work in a way that starts with the general strategy and ends with the finer details results in more effective and efficient work. It is more effective because we don’t work for nothing on details that will be eliminated in a later iteration, and it is more efficient (or cost-effective) because we are more assured of choosing an optimal solution in the end.

The User Test, a Smart Complement to Iteration

In order to achieve objectives and to benefit fully from the iteration process, user tests are indispensable. These tests complement the iteration process extremely well, and they yield the same benefits as iteration alone—flexibility, adaptability, and a common vision—all while leading to choices that are centred on the user.

The efficiencies and benefits of user tests have been proven more often than not, and it is time for them to be systematically included in projects. Steve Krug’s work is, in my opinion, an ideal starting point for becoming familiar with this subject. In his book Rocket Surgery Made Easy: the Do-it-Yourself Guide to Finding and Fixing Usability Problems, Krug outlines an approach to conducting tests that is both structured and pragmatic. With this approach, user tests can be integrated into processes at a low cost, all while generating results. For me, the golden rule for user tests is: a test with anyone is better than nothing.

Optimizing Time Contributes to the User Experience

To conclude, I’d like to leave you with one of the sentences that had a great impact on me during the very inspiring UX Camp Ottawa, which took place at the beginning of November:

«We can do a lot more in less time if we have more time to do it»

Scott Plewes shared this quotation by Francis Beaudet. If we are aware of a project in advance or as soon as possible, the perspective we are afforded allows us to solve problems more easily and more quickly. For me, this is the essence of UX design. Despite the real constraints imposed by the real world, I think that it is usually possible to mobilize the troops sooner. This enables better reflection, before and throughout a project.

For More Information

BUFORD, S. (2011). «Web Information Architecture : A Very Inclusive Practice», Journal of Information Architecture, 1(3), p. 19-40.

DAUMAL, S. (2012) Design d’expérience utilisateur: Principes et méthodes UX, Eyrolles, 208 p.

GARRETT, J.J. (2010). The Elements of User Experience: User-Centered Design for the Web, 2e édition, New Riders, 192 p.

GóCZA, Z. (2010). «Myth #31: UX design is a step in a project», UX MYTHS.

KRUG, S. (2009). Rocket Surgery Made Easy: The Do-it-Yourself Guide to Finding and Fixing Usability Problems, New Riders, 168 p.

KOZATCH, D. (2008). «Breaking Down the Silos: Usability Practionners Meet Marketing Researchers», UX Matters.

KUNIAVSY, M., MOED, A. et GOODMAN, E. (2012). Observing the User Experience, 2e édition, Morgan Kaufmann, 608 p.

MORVILLE, P. et ROSENFELD, L. (2007). Information Architecture for the World Wide Web, 3e édition Paris, O’Reilly, 522 p.

RESMINI, A. et ROSATI, L. (2011), Pervasine Information Architecture: Designind Cross-Channl User Experiences, Morgan Kaufmann, 250 p.

SIX, J.M. (2013), The Importance of Collaborative UX Design, UX Matters.