UX Deliverables

A little background

Starting out as a UX Designer I never had a comprehensive list of the deliverables I'd be creating. Most often I'd work through a project and hit a point where I needed to communicate something and stumble upon a new artifact I could use to do it. The following is a growing list of those items.

Process diagrams

What is it?

Process diagram

Process diagram is a graphical representation of the steps required to complete a goal or multiple goals. Most often a process is presented as a Flow chart.

What is it used for?

Process diagrams are used to communicate the steps required to complete task(s) or goal(s). They should detail each step required, decision points, and possible outcomes of each decision.

When do I need one?


Process diagrams are an invaluable tool used to ensure that everyone involved in a project is understands and agrees on the process required to completed key tasks.

How do you create it?

Begin by listing the key tasks and goals requried to make your product complete. Then choose a task or user goal and sketch the steps required to complete it.

Process diagram tips

  • Put each step in it's own square.
  • Draw a lines connecting the steps with arrow to indicate the direction the process flows.
  • When you come to a decision point use a diamond shape to indicate the decision. Draw new connection lines from each vertex of the diamond to indicate possible paths from the decision.

Information Architecture (IA)

What is it?

Information Architecture (IA)

An Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

Wikipedia: Information architecture

What is it used for?

Information architecture is about helping people understand their surroundings and find what they’re looking for, in the real world as well as online.

Information Architecture Institute

Just like all aspects of an applications or website the content structure needs to be designed. IA is about creating a structure that tells the user where the are and how to get the information they are looking for.

Any task involving organization of content can be considered a par tof the IA. For example:

  • Creating the top level navigation or sitemaps
  • Categorizing and tagging content
  • Identifying content types such as events, blogs, news, faqs.
  • Adding meta data for google and social sites

For more information on IA see UX Booth's Complete beginners guide to information architecture

User Personas

What is it?

User Persona

In user-centered design and marketing, personas are fictional characters created to represent the different user types that might use a site, brand, or product in a similar way.

Wikipedia: Persona (user experience)

What is it used for?

A persona is a representation of a user, typically based off user research and incorporating user goals, needs, and interests.

UX Booth

While there are many types of personas that can be created we are focused on Two key persona types as categorized by Alan Cooper; proto-personas and design personas.


Proto-personas are baseline personas created using educated guesses and secondary research. They are used when there is no budget or time for user research.

Design personas

Design personas are focused on user goals, current patterns and pain points. They key purpose of this persona type tell the story of a target users through their behaviour and gain insight into their reactions to situations.

They are used to communicate insight gained during the user research phase in a quickly digestible and relateable way.

Design personas are not intended to represent a specific demographic or give insight into purchase behaviours.


What is it?


A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the structure of a website or application page. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.

Wikipedia: Wireframes

What is it used for?

Wireframes are used when there is a need to test page structure ideas. You can rapidly move through design ideas on paper, in a digital tool, and even test potential structures on users.


What is it?


A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.

Wikipedia: Prototype

Prototypes can be created using various media including:

  • whiteboard sketches,
  • paper and pen,
  • power point or keynote,
  • sketch or photoshop,
  • or specialty applications such as UX Pin.

What is it used for?

Prototypes are used to test the viability of possible solutions. When used as part of the early stage design process prototypes allow teams to validate early stage solutions before commiting to production ready code. This testing allows for quick itteration and identification of potetial issues.

Style tiles

What is it?

Style tiles

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

What is it used for?

Style tiles are used to form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

User Interface Audit

User Interface Inventory