What is a UX Deliverable

A UX Deliverable is a design artefact, document, presentation, diagram, or report that is created at different stages of a product design process, usually by a UX designer. A UX deliverable is created for purpose of communicating ideas, research, work, tests and strategy to the internal team, stakeholders or clients. What is delivered may vary based on the type of product, budget, size of team and what is expected from developers and clients.

The most commonly created UX deliverables

It is important to state that not all UX deliverables are necessary for every project because not every project nor company is the same. However there are commonly created deliverables that we can point to. The Nielson Norman Group ran a survey with 86 UX professionals asking them about deliverables they produce on a regular basis.

The most common UX deliverables were:

  • Static wireframes
  • Interactive prototype
  • Flowchart or activity diagram
  • Sitemap
  • Usability/analysis report
  • User journey map
  • Competitive analysis report
  • Concept model/system map
  • Personas
  • Paper prototype

In this post, I will share some of my UX deliverables I have done in my UX design role for several agency companies. Only those with prior permission from clients are shown here so there is more. I have left out competitor analysis and storyboards for now.

This presentation of deliverables loosely follows my design process. I will state when during the product process the deliverable was created, how long it takes to create and share templates you can download to get going.

Let’s begin.

Personas

A user profile or persona is a realistic (but likely fictional) example of a target audience member. The profile commonly takes the form of a one page piece that lists the user’s name, occupation, education, demographic characteristics, computer/web experience, and site goals or likely tasks. A stock photography picture is usually used to give a face to the profile.

When do you create this UX deliverable: During analysis phase as a means of summarising customer market data into specific user groups/profiles
How frequently is this delivered: You might need to roughly create 3 to 6 personas for a large site/portal. Collating data and creation can take some time but is very useful once built. Not a deliverable you will create frequently.
Who is this for? As a means of educating the company/clients and the product team

Personas

PERSONA_1_HOMEOWNER
Persona for a paint company
PERSONA_2_COLOUR_CONSULTANT
Persona for paint company
Persona financial drivers
Persona financial drivers


User Journeys

This is a diagram that illustrates the steps a user takes through a website, application or service to perform a particular goal. Once visually mapped out, it is usually very easy to identify unnecessary steps, problematic steps/stumbling blocks and create walk-arounds for a particular task.

When to create this UX deliverable: During Analysis phase when a user’s path through an application needs to be mapped and optimized. Usually an existing application.
How frequently is this delivered: Arguably created on 50% of the projects depending on budget and timelines
Who is this for: Mainly for developer handover

UX_flowchart_1

UX_flowchart_2

UX_flowchart_3

USER_JOURNEY
User journey for a travel company
Persona for Skincare
User journey for skin care website customer
User journey for a skincare company
User journey of a persona for a skincare company


Flowchart

A workflow diagram (or activity diagram) that is graphical representation of activities and actions conducted by users of a system. It differs from a user journey in that it captures all the tasks that can be performed on the entire system/application/service as opposed to a single task.

When to create this UX deliverable: During Analysis phase to map out all  system/website activities
How frequently is this delivered: Quite frequently
Who is this for: Mainly developer handover as part of a specification document
Flowchart for restaurant website
Flowchart for restaurant website
Website Flowchart
Website Flowchart
Website_Flowchart with detail
Website_Flowchart with detail

Competitor analysis report

Performing a basic audit, review, user test or heuristic evaluation of competing websites/ systems/applications for the purpose of identifying gaps and opportunities. The deliverable is a report that summarises the competitive landscape and recommendations.

When to create this UX deliverable: During Discovery phase to gather information and identify gaps and new features
How frequently is this delivered: Not frequently; there may be enough existing data research at the start of the project
Who is this for: Stakeholders and client presentations

competitorsEdgeGrowthUsabilityReview


Google analytics data report

There are metrics that can be tracked on an existing platform whether its a website or app. Google Analytics provides data for users to get insight into how the platform is being used, which screens are doing well, where users are exiting, how long they stay on the platform and how the platform is performing against predefined benchmarks.

A Google analytics report will contain specific metrics that have been tracked over a certain time period, that are useful in identifying areas of improvement. Coupled with prioritized recommendations, this report is present to both client and the team to work out action points and next steps.

When to create this UX deliverable: During Discovery phase to gather information and continuously post-launch to track usage(can be automatically set up)
How frequently is this delivered: Potentially bi-weekly or monthly depending on the nature of the platform and how much the data changes over time
Who is this for: Internal team and client
Google Analytics
Google Analytics – Browser stats
Google Analytics Desktop statistics
Google Analytics – Desktop statistics


Sitemaps

Site maps are one of the most critical and widely used information architecture deliverables (along with wireframes). They show the overall structure and hierarchy of a platform. Sitemaps can be used as the first step in laying out the information architecture of a new site/app, and will provide the framework upon which to base platform development. For existing platforms, sitemap will define where new features, categories and pages fit in the overall picture.

Card sorting is a technique where users help to generate a sitemap or information hierarchy, which can then form the basis of a navigation structure or menu.

Sitemaps help to get everyone on the same page around how much work needs to be done, the scope of the project, deadlines and budget discussions.

When to create this UX deliverable: During Analysis phase to map out what categories, their hierarchy and screens that will be needed
How frequently is this delivered: Usually a sitemap is created when a platform is first built and revised when new categories and entire sections need to be added or removed
Who is this for: Design team, client and development

 

SITEMAP
Sitemap
Sitemap
Sitemap

Sketches

One of my favorites design artefacts to create which is ironically disposable. Sketching provides a means of rapidly trying out different ideas cheaply on paper before logging onto a design app. Therefore it is useful for brainstorming sessions with the team, with developers or even with clients.

One can sketch out flowcharts, sitemaps, features, states or even entire screens to run past the audience.

When to create this UX deliverable: Any phase when it is necessary to visually brainstorm and play out ideas fast
How frequently is this delivered: Depends on the complexity of the product being created and how much communication is required
Who is this for: Mainly for yourself and as a means of communicating ideas to fellow team members or clients

 

ux sketch 2 ux sketch 3ux sketch

Wireframes

Wireframes (combined with Site Maps) are very useful for conveying the general page structure and content requirements for individual pages. Wireframes need to achieve a happy medium between being too precise and too loose. A wireframe that is too precise or detailed may leave little creative room for the designer. A wireframe that is too loosely defined can easily be misinterpreted by designers and developers. The format used should be dependent upon the audience.

Using detailed wireframes will frequently flush out new requirements and questions that nobody has thought about yet.

When to create this UX deliverable: During Design phase
How frequently is this delivered: On every project, for every new feature or user flow
Who is this for: Design team, client and development

Blog UI KIT

Car Daily app Screens2 iPhone5_WireTemplate_Black  iPhone5_WireTemplate_Black2_small

NIKE prototype

nike_jordan pagenike landing page

NIKE axure prototype
NIKE axure prototype

User testing report

This report will captured what method of testing was conducted with users, how big the sample group was, the findings and the recommendations. There are a range of testing methods that can be employed by a designer and each one will be dependent on location, budget, team size and nature of the project.

Usability testing

Heatmap and clickmap testing

Heatmap and clickmap testing
Preference testing

Preference testing

When to create this UX deliverable: During Testing phase
How frequently is this delivered: Whenever testing is conducted with users
Who is this for: Design team and client

UI design deliverables

This is not a core UX deliverable as most UX designers do not have a visual graphics background nor is it their core responsibility. However if you have the UX/UI or UI/UX position in a company, you will be expected to produce visual mockups of the final product.

When to create this deliverable: During Design phase
How frequently is this delivered: On every project especially if you are a UI designer
Who is this for: Design team, client and development
Car Daily Project background
Car Daily Project background
Car daily app
Car daily app
Car Daily app video
Car Daily app video
Lufthansa mobile app
Lufthansa mobile app

a291dc3d8c67dd01f477e1eff0dd2463 c11439fcde989dc0fa78b6ff022d0a08

GQ app
GQ app
Lufthansa mobile app
Lufthansa mobile app
Lufthansa app
Lufthansa app

Content Inventory (aka Content Survey, Audit)

A content inventory is intended to provide a consolidated snapshot of all the major sections, pages, and content on a Web site. This would include text, graphics, and multimedia. Some even go as far as to break content down into individual pieces or paragraphs of content. Sometimes a content inventory is performed on content that is not yet part of a Web site. This would be helpful for an organization that is collecting content to be placed on a new site or app. Card sorting would be helpful for organizing content in this situation.

Here a a couple examples of Web content inventory variations.

    • Survey – A high level review of a site’s main sections and pages. It enables you to develop an understanding of the general site scope and major chunks of content from the customers point of view.
    • Detailed Audit – this is a comprehensive inventory of every page on a site. This inventory will list every page’s filename, title, URL, and possibly its file type and a description. It’s also helpful to assign a unique page ID that will correspond to the pages location on the sitemap.
  • Content Map – This simply entails laying out the site content in a graphical format. I haven’t seen this used widely, and I’m not sure how much use it would serve. If you’re performing a content inventory on a current site, then a site map might nullify the need for a content map.
When to create this UX deliverable: During Discovery phase
How frequently is this delivered: On every project where new site is being created or when large changes are being implemented
Who is this for: Design team, client and development