Getting Started With

UX Design Process & Documentation

 Copyright © 2015 by UXPin Inc.

All rights reserved. No part of this publication text may be uploaded

or posted online without the prior written permission of the publisher.

For permission requests, write to the publisher, addressed “Attention:

Permissions Request,” to [email protected].
 Index

Introduction6

Creating Your Personalized UX Library  7

Practicing Preliminary Research and User Research 10

Practicing Maintenance and Information Architecture/

Content Strategy 16

Deliverables at This Stage 18

Practicing Prototyping,
Interaction Design, and Visual Design 20

Deliverables at This Stage 21

Practicing User Testing and User Research 24

Deliverables at This Stage 25

Get out there and master your UX tools! 30

Guiseppe Getto is a college professor based in North Carolina who
does freelance writing, UX consulting, digital marketing, and cus-
tom WordPress websites. He consults with a broad range of orga-
nizations who want to develop better customer experiences, bet-
ter writing, better content, better SEO, better designs, and better
reach for their target audience. He has taught at the college level
for over ten years. During that time, he has also consulted and
formed service-learning partnerships with many non-profits and
businesses, from technical writing firms to homeless shelters to
startups. Visit him online at: http://guiseppegetto.com/

Jerry Cao is a content strategist at UXPin where he gets to put

his overly active imagination to paper every day. In a past life, he
developed content strategies for clients at Brafton and worked in
traditional advertising at DDB San Francisco. In his spare time he
enjoys playing electric guitar, watching foreign horror films, and
expanding his knowledge of random facts.
Follow me on Twitter
 Introduction

Because UX is an emerging field, it can be difficult to gain mean-

ingful experience, especially when you’re first starting out. In this
piece, I explain how to gain experience in the UX design process sets
through a three-step approach I use as an educator: theory, practice,
and reflection.

Photo credit: Rosenfeld Media. Creative Commons.

Let’s get practicing.

Guiseppe Getto
 Creating Your Personalized
UX Library

As an educator, I have learned over the years that anyone working

to master a set of skills must first understand the context in which
those skills will be applied. That’s where theory comes in.

Now, let me be clear: by “theory” I don’t mean abstract, philosophi-

cal reasoning (at least not when it comes to UX). I mean something
more along the lines of “working assumptions” that professional UX
designers use when they approach a design process.

Like I described before, my own approach to UX is to separate it into

stages and skill sets:

UX Design Stages
• Preliminary Research
• Prototyping
• User Testing
• Maintenance
 Getting Started With UX Design Process & Documentation 8

UX Skill Sets
• User Research
• Interaction Design
• Information Architecture/Content Strategy
• Visual Design

Essentially, the project will go through a series of stages that are largely
recursive (meaning circular and iterative), and will use a variety of
distinct skill sets. I organized this list not only to help my students,
but also to help myself.

Because the UX process isn’t always linear, I like to keep a nice library
of resources for quick reference. I have an Evernote list that I call “UX
Stuff” which has every article, book, blog post, and webpage related
to UX that I’ve ever found useful. I’ve also tagged all these resources
with more specific categories (e.g. interaction design, content strategy,
rapid prototyping, etc.) to help me find specific topics.
 Getting Started With UX Design Process & Documentation 9

If I’m working on a project that requires some really solid thinking

about interaction design, for example, then I pull out those resources
and review my approach. The list of terms is much less important
than the resources you collect that are connected to those terms. I add
to this list all the time. That’s the reflection part: whenever I’m strug-
gling on a project and I’m not sure where to go next, I go back to my
list of resources and even search for some new ones. Even though I
have a complete theory of UX in my head, I still return regularly to
the drawing board to review best practices for specific situations.

Knowing isn’t enough. You have to practice, and you have to make
sure what you’re doing matches the advice of more experienced
professionals. That’s how you learn and retain UX knowledge: think,
practice, reflect.
Practicing Preliminary Research
and User Research

I like to introduce people to the practice of UX by pairing design stages

and skill sets. This works well for getting some actual design hours
clocked, especially when you’re not sure how to get started.

This path starts with preliminary research. Preliminary research is

the the most easily neglected UX stage, even though it is one of the
most important.. It involves gathering all the tools you will need for
the project and creating a project plan that articulates how stake-
holders will work with you on the project, even if that’s just you and
the client.

One of the best resources I’ve encountered for this stage is Leah Bu-
ley’s The UX Team of One. Buley lays out almost every UX tool you
can think of. If you’re serious about learning to do UX, buy the book.
There are also a lot of other good resources out there, but Buley’s
book is a great one-size-fits-all approach to UX that also contains a
surprising amount of nuance regarding her own personal process.
Because it targets the lone UXer, it’s perfect for those trying to estab-
lish themselves.
 Getting Started With UX Design Process & Documentation 11

Photo credit: “PE024: Figure 3.3.” Rosenfeld Media. Creative Commons.

As far as user research, this typically starts with contextual inquiry.

Stemming from ethnography, contextual inquiry involves interviewing
users about their wants and needs, typically in the setting in which
they will actually use the product. A great book about contextual in-
quiry is Steve Portigal’s Interviewing Users. Portigal uncovers all the
nuances of how to interview a user, how to figure out what’s important
to them, and how to help them help you make better design choices.

As far as snagging an actual design project, there are two types of

projects that are pretty readily available for practicing your prelim-
inary research / user research chops.

1. Hypothetical projects
These are projects in which you take a known product and rede-
sign it or design a hypothetical product of your own. Or you can
take two products and pit them against each other. The point is to
design a project around a known product to show that you have
something to contribute, even to known brands.
 Getting Started With UX Design Process & Documentation 12

2. Client-based projects
These are projects in which you work with an actual client, either
paid or unpaid, to design a product for them (or redesign one).
To snag a project of this kind, you usually need look no further
than local businesses and non-profits. Reach out to your friends,
relatives, and colleagues for people who need design work and
negotiate a project with them.

3. Deliverables at This Stage

Something else that can be confusing for people new to UX is what
deliverables fit with what stage, meaning: what should you give
people at which points in a design process? For each stage, I’ll
present some common deliverables for that stage to help you get
going with that stage. A great, comprehensive list of UX methods
and deliverables can be found at UXDesign.cc.

Photo credit: Chuck Coker. Creative Commons.

 Getting Started With UX Design Process & Documentation 13

Personas: These are profiles of archetypal users, meaning actual

users that are representative of a key demographic from your
user research. UXPin has one of the best persona templates I’ve
encountered. All user research documents grow out of the persona,
so spend some time learning how to create them correctly.

User stories: Now that you have your personas, you need to now
assign them actions. Each persona usually requires at least a few
user stories, since they represent the most important user actions
and motivations. You can create a Google spreadsheet like this. It’s
a fast way to get a birds-eye view while allowing for collaboration.
 Getting Started With UX Design Process & Documentation 14

User scenarios: User scenarios fill in the situation in the user

stories. User + task + environment = scenario. User scenarios help
you better empathize with the user stories, because you are adding
human details. It’s another exercise to get you to not just under-
stand the user, but to feel for them. For some fast user scenarios,
add a few additional columns in your user stories spreadsheet
where you can drop in the scenarios.

User flows: For each scenario, this is a sketch of the paths users
take through a product. It can be an actual map or just a simple
line drawing that depicts the ways users navigate through a prod-
 Getting Started With UX Design Process & Documentation 15

uct. I tend to use UXPin or a similar wireframing/diagramming

app to make these. Combined with task analysis, user flows give
you a clear picture of how to create the easiest paths for users to
complete goals.
 Practicing Maintenance and
Information Architecture/
Content Strategy

One of the primary elements of maintaining any digital product is

understanding how it uses information (information architecture)
and how users access and use this information to achieve tasks (con-
tent strategy).

Photo credit: CannedTuna. Creative Commons.

One of the least understood stages in my opinion, I see information

architecture as largely the foundation of information structures and
flows upon which any product runs.
 Getting Started With UX Design Process & Documentation 17

Content strategy, on the other hand, is the user-facing considerations

regarding these information structures and flows. Like any complex
system, no digital product will last if these important considerations
aren’t foregrounded. That’s why I encourage UX novices to think of
the maintenance stage as actually coming first: you need to plan for
it from minute one. I do that by starting my deliverables for this stage
before I any design work. That way, I can take notes and improve
them as I go along.

At the same time, these deliverables also have a lot of longevity, which
is also why this stage is ongoing. Again: UX is recursive, and not every
stage only happens once. This stage, and these skill sets, will be the
most important after the launch of a final product.
 Getting Started With UX Design Process & Documentation 18

Deliverables at This Stage

Sitemaps: Sitemaps depict all the pages (or other defined elements)
of a product and how they interconnect, typically in a simple line
drawing diagram. You can even connect the “forest” view of sitemaps
with the “tree” view of wireframes and prototypes by creating an
interactive site map.

Taxonomies: Taxonomies are lists of vocabularies for all informa-

tion contained within a product. They are not content repositories
(see below), but help ensure that the information contained within
a product is usable, valid, and controlled. One of the best resources
I’ve found for thinking about taxonomies is TaxoTips.
 Getting Started With UX Design Process & Documentation 19

Content Governance Plans: A content governance plan is a complete

strategy for updating, revising, and maintaining all content within
a product. It often includes several sub-elements that will help your
client maintain their product. These can include:

• A list of clear goals for content development and governance.

• A content calendar or long-term plan for developing new content

for the product.

• A list of content repositories or places within organization or online

where readymade content exists that can be used for the product.

• A schedule for conducting content audits, or complete inventories

of the status and effectiveness of all content contained within the
product.
 Practicing Prototyping,
Interaction Design, and Visual
Design

After you get a sense of your users, their needs, and your content
structure, it’s time to make something for them.

The process is a lot more complicated than it sounds, and is usually

where a lot of folks new to UX get stuck. Given their short learning
curve (and employer’s demand for expertise), I highly recommend
investing in the new generation of prototyping apps. If you’re a stu-
dent, you can often get licenses to them for free or at reduced costs.

The main trick at this stage, of course, is what to make, and when to
make it. To figure this out, you need to think about the relationship
between a prototype, user interactions, and UI elements (the visual
components users will eventually see). Essentially, to quote a recent
article by Arijit Banerjee, a prototype is: “a simulation of the final
product. It’s like an interactive mockup that can have any degree of
fidelity. The main purpose of building prototypes is to test whether
or not the flow of the product is smooth and consistent.”
 Getting Started With UX Design Process & Documentation 21

A prototype is not the final product and will probably not look like
the final product. This is important, because you don’t want to con-
strain developers into particular technological choices. Sometimes
you’ll also be working with a content management system (CMS) that
will constrain choices. This is why I encourage new UXers to think of
prototypes as a kind of minimum viable product you can use for user
testing. Prototypes must give both stakeholders (meaning clients and
decision makers involved with the product) and users a clear sense
of how they can to interact with the final product. You should avoid
cluttering your design with a lot of UI elements that will probably be
added later based on different considerations (which I cover below).

Deliverables at This Stage

Wireframes: Every prototype starts as a static wireframe, which de-

picts a single screen of an application, including some UI elements. A
wireframe is most useful as a tool for developing a unified vision of
a product, focusing on content structure rather than visual finesse.
If the wireframe is clickable, we consider it a low-fidelity interactive
wireframe.
 Getting Started With UX Design Process & Documentation 22

UI elements: UI elements are the atomic components of the product

users will actually see. You must include some UI elements in your
prototype, such as buttons, links, and spaces that are demarcated
from other spaces (e.g. headers, footers, scrollbars, images, pages,
etc.), as users need them to interact with your prototype. As your
fidelity increases, so too does the number of UI elements.

Mockups: Mockups are more complete depictions of a product. They

are usually medium to high-fidelity (like what you might create in
Photoshop or Sketch). They can also be static or clickable, depending
 Getting Started With UX Design Process & Documentation 23

on what kinds of tools you use to develop them. If they’re clickable,

we can consider them a medium to high fidelity prototype.

In the traditional design process, you’ll usually start wireframing,

then prototyping, and finally polishing up the visual design with a
mockup. However, you can just as easily start with a prototype and
move to a mockup. Experiment with each deliverable and use what-
ever process you’re most comfortable with.
 Practicing User Testing and
User Research

At this point, it’s important to remember that the UX design process is

recursive, meaning that it almost never proceeds in a linear fashion.

The reason I bring this up is because user testing is the point at which
a lot of well-laid plans oft go awry. Sometimes you have to combine
stages, too, due to time constraints or other considerations. Because I
work as a UX consultant on the side of my full-time job, I often don’t
have time to interview as many users as I’d like, so I tend to combine
my user research with preliminary usability testing and then do an-
other round of quick testing with a higher fidelity prototype later on.

Photo credit: UXPin based on exercise suggested by Tomer Sharon

Keep in mind that user testing is very different than contextual in-
quiry. While the latter is designed to get a broad sense of user needs,
with the former you need at least a low-fidelity prototype to test with.
 Getting Started With UX Design Process & Documentation 25

User testing also is designed to test the usability of an application,

meaning how effective it is at helping users reach their goals. You
must know what users’ goals are at this point, however, or it’s hard
to design a usability testing script, which is a key preliminary deliv-
erable for this stage.

Deliverables at This Stage

1. Before testing

Usability test plan: Summarize the background, goals, objectives,

and methodology for the testing. Are you running a on-site usability
test, or a remote usability test? Is it moderated or unmoderated?
How many people are you testing? I recommend following Tomer
Sharon’s 1-page format for a concise, scannable plan or Userfocus’
1-page dashboard plan.

User testing script: In order to perform an effective user test, you

need to create a script for the entire experience, including who
you will recruit for the test. Your test users should be versions of
your personas. That’s easy if you’ve done your homework up to
this point: you simply need to find people who match your per-
sonas. Your task analysis should also tell you what steps you will
lead users through. If you’re moderating the test, encourage users
to think out loud and reassure them you are testing the product
– not them. Use this free usability test kit to get started (includes
test script).
 Getting Started With UX Design Process & Documentation 26

2. After testing

Usability reports: I tend to combine my reports with other deliv-

erables, such as wireframes and refined prototypes, but regard-
less: you’ll need to communicate findings from your user testing
to your client. The most important part of generating a good
usability report is a thorough introduction to what was effective
 Getting Started With UX Design Process & Documentation 27

about your prototype and what wasn’t. I like the “crap sandwich”
approach: I start with what was effective, then I talk about what
wasn’t, then I end with what next steps are required to make the
product more effective. The free kit mentioned above also includes
a report template.
 Getting Started With UX Design Process & Documentation 28

Journey map: A journey map is similar to a user flow, but it’s

more detailed. With user testing data, you can say more certainly
how users will navigate a final product. If you’ve done your con-
textual inquiry effectively, you can even say where they start at
in the daily lives before encountering your product. The end of
the journey of a journey map is always accomplishing key tasks.
Finally, it’s important to clearly describe “pain points” or areas of
the product that users are likely to struggle with and what can be
done to minimize this struggle. Adaptive Path offers an excellent
free e-book on the topic.
 Getting Started With UX Design Process & Documentation 29

Refined prototype: The main goal of user testing is to improve your

prototype. If you don’t find anything wrong from your prototype, you
probably need to dig deeper. It is almost impossible to guess how real,
live users will interact with your prototype, meaning that there will
probably be some usability problems (and that’s okay). You should
always test each iteration of your prototype with users.
 Get out there and master
your UX tools!

If there is one thought to leave you with, it is that you must gain more
than a theoretical understanding of UX to be any good at it. Wheth-
er you’re practicing on your own while searching for internships
or launching a second career in a new position within your current
organization, you need to go out there and try these out all of these
tools and processes. And just like in any trade, you will not be equally
good at all of them, and that’s okay.

Photo credit: Barrel.

Specialists exist in the UX world just like every other field. You’ll find
information architects, content strategists, user researchers, and
prototyping specialists. In fact, there are even people who do nothing
 Getting Started With UX Design Process & Documentation 31

else than create taxonomies for organizations to use in their product

lines. If you want to appeal to employers, follow the T-shaped skills
model: be a generalist in all of the above fields, but specialize in what
interests you most.

It all comes down to mindset. Think of yourself as a learner, not a

knower.

Learners are allowed to make mistakes. They’re allowed to not know

something. They’re allowed to figure something out through tinkering
rather than proceeding from accepted knowledge. That’s the spirit of
every good designer I’ve ever worked with: they’re humble, they’re
always willing to try new things, and they’re willing to admit when
they don’t know something, (or at least when they’re uncertain).
 Getting Started With UX Design Process & Documentation 32

To enrich your learner mindset, I leave you with some of my favorite

resources to browse everyday:

• UX Apprentice – Free courses and learning materials for those

looking to learn the basics.

• The Hipper Element – A library with 31 daily lessons on the fun-

damentals of UX design that has a good reputation.

• LukeW – Product Director at Google, Luke Wroblewski is one of

the top UX experts in the world. His site summarizes takeaways
from conferences, includes plenty of “how-to” pieces, and features
plenty of solid advice for UX design.

• UXMyths – Regularly updated list of dozens of common myths with

thorough research disproving each misconception.

• A List Apart – Meticulously written and edited, A List Apart fea-

tures some of the most thought-provoking pieces on designing
experiences for the web. Always worth reading.

• Smashing Magazine – The online magazine includes plenty of

opinion pieces, how-to-articles, and thought pieces on the state
(and future) of UX design.

• UXPin's free eBook Library – A collection of 30+ e-books (growing

at one a week) teaches practical UX design principles by analyz-
ing existing live examples. The longer books range from 50 to 100
pages, while shorter pocket guides span 20-30 pages.
 Getting Started With UX Design Process & Documentation 33

• UXPin Blog – The blog features tutorials (like prototyping with

Photoshop and with Sketch) along with straightforward articles
to get you started.

• ZURB Blog – The reputable design agency’s blog is full of thought-pro-

voking and practical advice on product design from its staff of
designers and the CEO himself.

• Boxes and Arrows – One of the longstanding and respected UX-re-

lated publications, B&A is particularly strong in the areas of con-
tent strategy and information architecture, providing practical,
hands-on advice in these skill sets.

Start a free trial today