UX Design Deliverables: Behind the Scenes of a UX Project

The UX design deliverables from a design studio

Choosing the right set of UX design deliverables does a world of good for both the client, designer, and all stakeholders.

As a UX design studio, we have often been asked by our clients and the design community alike:

  • “What are the deliverables you provide?”
  • “Can our development teamwork on the designs created by you?”
  • “Is it possible to make iterations in the future?”

To shed some light on it, we present a brief description and purpose of some of the important UX Design Deliverables that are doing the rounds.

What are UX Design Deliverables?

Wireframes, prototypes, usability reports. One might ask, what exactly are these?

There are so many terms used today in the UX design world that might leave you in a state of confusion.

UX Deliverables make the life of a designer easier by communicating the process to stakeholders and team members.

It guarantees a quick systematic process to deliver a product in a seamless fashion also serving as a reminder for ideation sessions in the later stages of UX Design.

This is the major reason why UX Design Deliverables must be communicated with stakeholders and teams, as they act as the “single source of truth”.

The list below contains the most common and effective UX Design deliverables.


Before everything, the UX professional begins with understanding the business requirements and the vision of the project; the reason for the very existence of the project.

After clearly understanding the objectives and scope of the work, a competitive analysis report is drafted based on which user research and the rest of the design deliverables are formed.

“The beginning is the most important part of the work.”- Plato

Let’s begin with user research.

User Research Stage Deliverables

User Research is basically opening our eyes and ears to user needs, goals and behavior through user interviews, field studies, online surveys, web analytics, social media evaluation and a lot of feedback.

User Persona

User Persona is where you represent your ideal customer or the best target audience of your product or service. It shows the demographics, needs, pain points, motivations, and behavior of a target audience.

User persona a ux research deliverable

With the creation of User Personas, designers find it easier to think from the POV (Point of View) of users.

A piece of advice to the designers and internal researchers – Collect as much real information as possible because effective personas are created from insightful data.

Customer Journey Map

A diagram that explores the multiple steps taken by the user to reach their goals as they engage with the service.
It helps businesses to think from a customer perspective.

With the customer journey map, a UX designer can step into their customer’s shoes and gain insights into their pain points and find solutions to improve lives.

Customer journey map - user research deliverable

 

These maps vary according to the type of product.

  • User Experience Focused Maps (UX Journey Maps),
  • Marketing Automation/Sales Journey Maps (Sales Automation Journey Maps)
  • Customer Experience Journey Maps (CX Journey Maps)

Expressia is a very good option for creating customer journey maps

Ideation Deliverables

“A problem statement or POV can go a long way.”

Make sure a problem/POV statement is drafted well before you conduct an HMW session.

A ‘point of view’ statement includes the user persona, their needs, and the insight based on the user needs.

Affinity Mapping

“This is where all the data you collected comes to life.”

All those hours of user research and brainstorming sessions are finally put to the wall in this stage. The user pain points and solutions are transformed into tasks, user interactions, and insights, which is then pasted onto a whiteboard in several post-it notes.

The meaningful data derived from these notes are categorized into different stages and processes as the team continues to organize and reorganize until the end of the timebox.

HMW template for affinity mapping

It might initially take an hour to arrange the data in place.

All designers by the end of it come to a consensus on the most important recurring themes in the affinity diagram.

Don’t be alarmed if your map looks like a flower by the end of it, maybe it’s a sign of great things to happen. (I almost always get a giraffe.)

Userflow Diagram

“Customers don’t land on screens out of anywhere!”

It’s the result of a carefully planned and executed user flow diagram.
A user flow diagram is a visual representation of the steps that a user has to take to meet the user’s goals. Contrary to customer mapping, a user flow diagram is only concerned with what happens with the product.

 

Userflow diagram-ux deliverable

This process helps designers to quickly evaluate the efficiency of the process.

Prototyping Deliverables

Sitemap

“This is where the bits of the puzzle fall into place.”

A sitemap contains all the information and components of a digital product. They are used as reference points for wireframes and next stage content maps.

The Sitemap helps lay out the information architecture to support navigation, findability, and usability by showing how the content will be organized into screens or sections, and how the user may transition from one section to another.

Sitemap of a mobile app

Sketch

“Paper, pen and a lot of visual ideas to entertain?”
You should start sketching.

UI sketch of mobile app screens

It is the foundation on which most of the magic begins.
What we need to really understand is that UX Sketching is a two-step process.

  • Idea generation – This is the initial step, where multiple ideas are generated, and so it is not uncommon to have some elements missing.
    The main thing to consider here is the context of your task and the various constraints of the project.
  • Adding detail & Refinement – This is where you settle on a few favorable variants and proceed to work out the specifics.

Good sketches help to find better solutions and save time.

Word of advice to UX enthusiasts and designers: ‘Always start with the tiniest screen and work your way up.’

Wireframes

“Wireframes are considered to be the bedrock of usability.”
We can’t agree more.

This is the skeletal framework of a website or an app.
The major purpose of a wireframe is to offer clarity on the flow of products.

 

UI wireframes from ux design deliverable

There are two types of wireframes in fashion right now.

  • Low-fidelity wireframes (fast, easy and cheap to produce rough-sketches)
  • High-fidelity wireframes – (takes more effort and time to create, looks more sleek and real)

Interactive Prototype

How about ‘simulation prior to the launch’ for easy translation?
That’s what this stage is all about.

Here, you can showcase the clickable areas, transitions that stay in line with the user flow diagram, and highlight the interactive capability the design possesses.

An interactive prototype creates a framework to identify mistakes, make iterations, and create room for further testing.

Demonstrating how the product works in a real use-case scenario, it also creates the elements for user testing, provides valuable ideas and gains relevant feedback.

High fidelity prototype - mobile app UX design deliverable

 

Usability Guidelines for Designers

This is the final stage in which all the specifications and style guides are put together to help a UX design succeed in the long run.
Let’s discuss some of the essential usability guidelines a designer must always be at up to speed.

  • Visibility of system status – Users should be notified of system operations with a clear-cut and highly visible status that is displayed within a reasonable amount of time.
  • Flexibility and efficiency of use – Faster navigation can be achieved when interactions are effortless. This can be attained by using function keys and abbreviations.
  • Consistency and standards – The designers must always ensure that graphic elements and terminology are maintained across multiple platforms.
  • Aesthetic & Minimal Design – Avoid clutter of information. Reduce the user’s vision to view only what is necessary for a particular task, all the while providing clearly defined means of navigating the user to more content.

A style guide (grid framework, layout, content object, widget) makes sure they are implemented consistently.

It goes without saying that pattern library and data display rules are very important and come under usability guidelines.

The design system from Yelp is a perfect testimony to how to go about with the style guide and pattern library.

Button styles from yelp design system

Here’s how Starbucks sticks to a style guide with an icon library.

Starbucks icons- pattern library-designsystem

Evaluation Deliverables

Usability Report

“And just when you thought you were out, they pull you back in.”

All I’d like to tell you is that evaluation comes in many shapes and sizes and no UX design is complete without going through several stages of user testing like A/B testing, Eye tracking, Card Sorting, just to name a few.

Once the tests are complete, the key findings are summarised through a Usability Report.

A Usability Report contains several sections like background summary (the 5W1H (Who, What, Where, When, Why & How) of the project), the methodology used (the process and its participants), test results (statistical analysis of the data collected), findings and recommendations (How to move forward with the feedback collected).

To Sum Up

If you had thought the work of a UX designer is set in stone, let me break it to you; it’s not.

Creating assets and deliverables vary according to the product, and it can be a test for anyone present in the face of it.

As a UX design agency, our mission is to empower businesses, management professionals, designers and the general public to understand the importance and amount of work involved in creating a delightful User Experience.

We hope you have found this reading enjoyable and its content useful for your work. We are optimistic that this will be the beginning of a joyous learning adventure.

BY Deviprasad Ghosh

As WowMakers' content marketer, Deviprasad does more than squabble with commas. With more than 2 years of experience in advertising and inbound marketing, he’s obsessed with creating astounding content that’s straight out of the legends.

Deviprasad Ghosh

As WowMakers' content marketer, Deviprasad does more than squabble with commas. With more than 2 years of experience in advertising and inbound marketing, he’s obsessed with creating astounding content that’s straight out of the legends.

Digital Experience Studio - WowMakers