Pencils to pixels

Notes on good process and the roles of the UX team

Good process is essential for interactive designers, especially because many times a designer is working in isolation, whether as a student, a freelancer or even as the only interactive person at a small studio. Because of this isolation, many designers may never realize that they are part of a larger ecosystem.

This system does not just include the designer and the client, but includes many other essential roles in the User Experience (UX) design. Depending on the career path of the designer, they may not be aware of how they fit into this process unless they work as a visual designer on a UX team. Understanding and adapting to this environment can greatly increase the effectiveness of interactive design, even when continuing to work solo.

What is this ecosystem you speak of?

Since the early days of the web, leaders in the interactive experience have captured the process and defined the ecosystem. Although this model keeps improving over time, a fantastic foundation to study is Jesse James Garret’s model of The Elements of User Experience (.pdf download).

Going with the flow

Although the UX roles below are listed with their main part of The Elements of User Experience model, it is important to map them back to the model to understand the flow of the process. This is because each role in this system collaborates as a team and each brings a specific skillset that closely targets user needs and refines them based on their expert findings. Each result is discussed with the team and influences the next step in the process. Although the project flows to the next step in the process, involvement from the team continues back and forth until the project finishes. This provides a checks and balances system to keep the project aligned to the business goals. An excellent article that explains how these roles function together is outlined by InspireUX.

Model Parts (that make up the ecosystem)

1: User Needs/Site Objectives
2: Functional Specifications/Content Requirements
3: Interaction Design/Information Architecture
4: Information Design
5: Visual Design

1: User Needs/Site Objectives

Strategy/Project Goals (involves multiple team members)

Projects originate with a desired goal initially defined by the client, whether it be to sell a product, increase brand awareness, or generally prompt users to take action or perform a task on a website. Although this input is important, it should be carefully weighted against how the end users understand the product, service or task. These elements are then validated by the team to determine if the user needs are harmonious with the business objectives of the site. Although a client may initially request a specific set of solutions, a strong team will help refine the strategy to ensure the end solution will measurably solve the problem, even if it changes the original solutions the client requested.

back to model

2: Functional Specifications/Content Requirements

Writer/content strategist

The writer/content strategist works closely with the team to ensure that the content they provide directly supports the needs of the user. They don't write in "greek" or "filler" copy. Ideally, content should be provided up front, as this determines the hierarchy of the content and the flow of the tasks, while providing the team with a solid set of criteria to design to.

Subject matter expert (That’s SME to you and me)

From my experience, SME input is critical, because they help the project team to understand what it is like to work in their jobs. An example of a SME could be someone who processes orders on a website. They understand the order process, respond directly to client complaints, and know what is and isn't working on their website. Hence, this is the reason why their input is required to define the problem, determine the project goals, and to work with the team throughout the process.

back to model

3: Interaction Design/Information Architecture

Information Architect (IA)

More than any other role, the information architect (IA) defines the structure of the website. They analyze the content provided against the project requirements and set up the hierarchy of the information, categorize and label the content, determine the user's flow for a task, etc. Some IA's even have degrees in library science.

The most familiar deliverables they produce include a site map, wireframe, and even story boards. In total, they produce a number of documents and perform a variety of techniques that many people outside of the design process never see. Such as creating user personas to aid in storytelling, performing card sorts, analyzing taxonomy, strategizing for Search Engine Optimization (SEO) and determining findability.

Interaction Designer/Developer

An interaction designer codes the front-end portion of a static website (including XHTML, CSS, JavaScript) that displays the site content in a web browser or other device. Depending on their level of skill, they may also develop the back end portion of the site, which can include server-side scripting and database development (for tasks such as ecommerce, dynamically driven websites, content management systems, mobile applications, etc.)

At minimum, an interaction designer should be capable of building a prototype of the website to enable usability testing on a fully functional, albeit scaled-down, version of a website before it moves to production (replicating all of the site’s pages).

Usability Analyst

The usability analyst conducts tests of the prototype directly with the end users of the website to determine if the proposed solution will be successful. Their findings can alter the design significantly if the users are unable to achieve the desired business goal or task desired for the website through the prototype version. Ideally, projects are tested at multiple levels: first at the wireframe level before programming time has begun. Then, after the prototype has been created. This process will be repeated if their findings significantly alter the preliminary ideas.

Quality Tester

The quality tester ensures that the website will display and function correctly across multiple browser and interactive environments. Because users do not always upgrade to the latest browser, many users see content with outdated browsers. This means certain types of modern programming or scripting may not display correctly (or even at all). The tester identifies the environments, platforms, capabilities of the target audiences and then tests the site/solution within each required browser and platform.

back to model

4: Information Design (Interface and Navigation)

Primarily the Information Designer

In my experience, this stage can also include time from the information architect, who defines the structure for the navigation via a wireframe. The interaction designer can also assist the information designer (who in some cases is also the visual designer). Primarily, to determine interaction patterns that are necessary for the site’s dynamic features. The interaction designer can also help to identify the potential technical limitations, which requires the knowledge of coding languages to outline the feasibility of the desired interactions. The information designer also presents solutions to the architect, who checks in to ensure that their original hiearchy is in tact and that good usability is represented, such as Fitt’s Law, to make sure content is not difficult to find in lieu of an aesthetic choice or concept executied for the target audience.

back to model

5: Visual Design

Visual Designer (sometimes called information designer)

In addition to working with these roles, the designer also performs research. This can include a review of competitors, existing marketing materials, the environment of the product or service, marketing or brand guidelines, the history of the brand, etc. Using their research, as well as the findings from their team, they craft a “concept” that aligns with the findings. It is their unique approach that elevates a design beyond “skinning” a wireframe (an unfortunate misperception of how designers are sometimes perceived.) The visual designer then lays out the ideas through the use of a strong grid system, typographic treatments, accessible color schemes, and image aesthetics that support the concept. Even if the visual designer does not code, they need to understand how their designs will degrade in various browsers or when users choose to override their style sheets, turn off image rendering and disable javascript in their personal browser settings, etc.

back to model

So why should this matter to a "web" designer?

My primary role has been as the visual designer in this process, with supplemental roles of information design, interaction design, and sometimes as "stunt" information architect. My role has grown much stronger because it has been greatly influenced by working with the other roles in this model. They have greatly improved my empathy for the clients’ client (the end user) of my sites and have helped me to look at my work through a new lens.

In a perfect world, the designer should always work alongside the other roles throughout the design process to glean the research findings that will become the elements of their “look and feel.” This is because even if the final design, at the surface, appears aesthetically pleasing, it can still fail to meet user expectations or business objectives.

If a designer does not have the luxury of this type of team, they should learn as much as possible about the process so that they can improve their design work and implement the best experience possible. Beauty is truly only skin deep if users don’t understand what they are supposed to do when they get to the site. mt

Note: Dermot MacCormack's phrase of "Pencils Before Pixels" became the inspiration for the title of the AIGA Philadelphia series "Pencils to Pixels," an ongoing series of events to discuss the differences between print and web, and to bring good interactive process to traditional design roles.