Menu Search
Jump to the content X X

An Overview Of The Most Common UX Design Deliverables

What do UX designers do on a daily basis? A lot of things! UX professionals need to communicate design ideas and research findings to a range of audiences. They use deliverables (tangible records of work that has occurred) for that purpose.

The list below contains the most common deliverables produced by UX designers as they craft great experiences for users. For better readability, I’ve combined the deliverables according to UX activities:

  1. Project Assessment1
  2. Competitor Assessment2
  3. User Research3
  4. Information Architecture4
  5. Interaction Design5

If you’d like to create and design your own prototypes a bit more differently, you can download and test Adobe XD6, and get started right away.

Obtaining The Best Mobile User Experience Possible Link

Always remember that design isn’t just for designers — it’s for users. It’s important to treat your work as a continually evolving project, and use data from analytics and user feedback to constantly improve the experience. Read more →7

Project Assessment

Project assessment is an evaluation process which helps UX designers understand a current state of the product.

Analytics Audit Link

An analytics audit is a way to reveal which parts of a website or app are causing headaches for users and are reducing conversions. During an analytics audit, an auditor will use a variety of methods, tools and metrics — traffic sources, traffic flows, conversions (and abandonments) hot spots, etc. — to analyze where a product is going wrong (or right). Ultimately, an analytics audit should enable UX designers to know how to boost conversions by making it easier for users to achieve their goals on the website or app.

8
Numbers provided by an analytics tool on how the user interacts with a product — clicks, user session time, search queries, conversion, etc. — will help UX designers to uncover the unexpected, surfacing behaviors that aren’t explicit in user tests. (Image: Ramotion9) (View large version10)

Tip: Get into the habit of A/B testing your design changes. Knowing that all of your changes will be A/B tested will give you a tremendous amount of freedom to try new (and potentially risky) things. If they work, you’ll find out almost immediately. Also, you won’t need to worry that some change you’ve made will ruin everything.

Content Audit Link

Content audit is the process of evaluating information assets on some part or all of an app or website. It could be said that a content audit is a content inventory and evaluation of each page’s content (either qualitative by a person or quantitative using analytics) and/or an assignment of content owners. It involves gathering all of the content on your website or in your app and assessing its relative strengths and weaknesses in order to prioritize your future marketing activities. By auditing, you’ll understand the content much better. You might find things you didn’t know existed, spot duplicated or outdated content, or identify all kinds of relationships in the content. The results of a content audit can be used for a global task (creating a content strategy) or a local task (optimizing a certain page).

11
(Watch video12)

Usability Test Report Link

Usability testing is a way to see how easy a product is to use by testing it with real users. A usability test report summarizes usability findings in a clear, concise and descriptive way, helping the project team to identify issues and work towards a solution.

13
An example of usability testing report. (Image: tiffanyho14) (View large version15)

Tip: Rank your findings. Every issue that’s discovered through usability testing is not equally important. A usability report could have 5 or 100 findings, depending on the scale of the study, and sometimes it might be overwhelming for a team to go through all of them. That’s why findings should be ranked in terms of severity (low, medium or high). This will help the team identify critical issues exposed by the usability study.

Competitor Assessment

Competitor assessment is an assessment of the strengths and weaknesses of current and potential competitors. Assessing the strengths and weaknesses of your rivals is a critical part of your own UX strategy.

Competitive Analysis Report Link

An analysis of competitor’s products will map out their existing features in a comparable way. This competitive analysis report helps UX designers to understand industry standards and identify opportunities to innovate in a given area.

16
A competitive analysis allows designers to assess a competitor’s strengths and weaknesses in a selected marketplace and implement effective strategies to improve a product’s competitive advantage. (Image: yellowpencil17) (View large version18)

Tip: A useful starting point for identifying strengths and areas for improvement might be user experience heuristics. While competitive analysis isn’t intended to replicate heuristics evaluation, heuristics can be a good starting point because they offer a good structure for presenting information. Heuristics include efficient navigation, clarity of text and labels, consistency, readability, scannability, etc.

Value Proposition Link

A value proposition is a statement that maps out the key aspects of a product: what it is, who it is for and how it will be used. A value proposition helps the team form consensus around what the product will be.

19
A value proposition helps UX designers to keep focus on the important things. (Image: UX Mag20 (View large version21)
22
(Watch video23)

Tip: Make sure your value proposition is directly associated with key business objectives. By doing this, it will be much easier to have discussions about time and budget for UX activities.

User Research

User research focuses on understanding user behaviors, needs and motivations through observation techniques, task analysis and other feedback methodologies.

Personas Link

A persona is a fictional character who uses the product in a similar way to a potential user type. Personas make it easier for designers to empathize with users throughout the design process. Personas are a controversial tool in the UX armory: Some UX designers love them, others hate them. Thus, it’s important to understand not just benefits but also downsides of personas24 before using them in your UX design process.

25
A persona is a fictional character who highlights the behaviors, needs and motivations of your target users. (Image: xtensio26) (View large version27)

Tip: The most effective personas are created from in-depth user interviews and observation data of real users. Collect as much information and knowledge about users as possible by interviewing and/or observing a sufficient number of people who represent your target audience.

User Story Link

A user story is a simple description of a feature told from the perspective of a user of the product. Basically, it’s a very high-level definition of a requirement (at a conceptual level), containing just enough information that the developers can produce a reasonable estimate of the effort required to implement it.

28
(Image: realtimeboard29) (View large version30)

Tip: Use user stories to prevent feature creep. Feature creep is a term that comes up regularly during product design. It refers to the tendency to want to keep adding more features and expanding the scope of a project. Try to refuse to add any feature without a user story that explains why that particular feature matters.

Use Cases Link

A use case is a written description of how users will perform tasks in the app or website. It outlines, from a user’s point of view, an app or website’s behavior as it responds to a request. Each use case is represented as a sequence of simple steps, beginning with a user’s goal and ending when that goal is fulfilled.

31
A use case is a list of actions or steps in an event, typically defining the interactions between a user and a system, to achieve a goal. (Image: Slideshare32) (View large version33)

Tip: Use cases aren’t reserved for the UX phase; they can used for the QA phase as well. Thus, when reviewing the usability of a given product, it’s critical that the QA specialist have the use cases on hand. This will give the QA specialists a set of criteria that will have to have been addressed by the design.

Experience Map Link

An experience map is a diagram that explores the multiple steps taken by users as they engage with a product. It enables designers to frame the user’s motivations and needs at each step of the journey, designing solutions that are appropriate for each.

34
A simple experience map reflects one possible path during one scenario. (Image: effectiveui35) (View large version36)
37
How to create a customer journey map (Watch video38)

Tip: The process of creating a customer journey map has to begin with getting to know users. While you can turn to many sources for data about your users, one of the most obvious is website or mobile app analytics. Analytics provide valuable insight into what users are doing on your website or in your app, and this data will help you build compelling cases.

Storyboards (Current) Link

Storyboards are illustrations that represent shots and that ultimately represent a story. In UX, this story is the series of actions that users would take while using the product. Storyboards help designers to honor the real experiences of the people for whom they are designing.

39
Smiles and expressions of sadness on human faces have a strong emotional impact. This makes it possible to bring a story to life in the hearts and minds of your audience. (Image: Chelsea Hostetter40) (View large version41)

Tip: When thinking about storyboarding, most people focus on their ability (or inability) to draw. The good news is that you don’t need to be good at drawing before you start drawing storyboards. What is far more important is the actual story you want to tell. Clearly conveying information is key.

42
Storyboard frame from Martin Scorsese’s film Goodfellas. (View large version43)

Survey Link

A survey is a quick and inexpensive way to measuring the level of user satisfaction and to collect feedback about the product. While a survey is a great way to collect information from a large number of users, it’s obvious limitation is a lack of qualitative insights — for example, why customers use the product in a certain way.

44
(Watch video45)

Tip: Keep the survey short. The temptation when creating a survey is to add more questions. The problem is that it can become painfully long, and people will simply skip questions. If you want to collect more valuable information, you should use a better approach. Keep the survey succinct and run another in a month or two.

Information Architecture

Information architecting is the practice of deciding how to arrange the parts of something to be understandable. For digital products, information architecture results in the creation of navigation, site maps, taxonomies and wireframes.

46
(Image: Murray Thompson, UX Booth47) (View large version48)

Site Map Link

A site map is a diagram of a website’s pages, organized hierarchically. It makes it easy to visualize the basic structure and navigation of the website.

49
Site map example (Image: Behance50) (View large version51)

Tip: If you want to create site map quickly and easily, use the card-sorting52 method.

Taxonomy Link

A taxonomy results from an exploration of multiple ways to categorize content and data: articles in a news website, product categories in an e-commerce app, etc. A taxonomy helps designers to define the content structure that supports the user’s and the business’ goals.

53
(Image: Christian Ricci54) (View large version55)

Tip: A taxonomy is a living document, and it needs to be retested and updated regularly.

Wireframe Link

A wireframe is a visual guide that represents a page’s structure, as well as its hierarchy and key elements. Wireframes are useful when UX designers need to discuss ideas with team members and stakeholders, and to assist the work of visual designers and developers.

Wireframes can be presented in the form of sketches:

56
Sketching is a quick way to visualize an idea (such as a new interface design). (Image: Nicholas Swanson57) (View large version58)

Wireframes can also be presented as digital illustrations:

59
Example of wireframes for a mobile app. Download Wires, two free wireframe UX kits60 for mobile and web, built for Adobe XD. (View large version61)
62
(Watch video63)

Tip: Keep wireframes simple, and annotate. The aim of a wireframe is to show the structure of a page’s design — details come later. If you plan to present a wireframe to the team, try to include annotations. Annotations help to create context and quickly deliver key ideas.

Interaction Design

Interaction design (often abbreviated as IxD) is the practice of designing interactive digital products. It’s a process by which designers create engaging user interfaces with logical and thought-out behaviors and actions.

Storyboards (Planned) Link

Basically, this is the same storyboard that we saw in the section on user research, with just one difference: These storyboards are used to sell design solutions. Designers use them to show the benefits of a proposed solution and to convince stakeholders with it.

64
(Image: digiflip65) (View large version66)

Tip: Design a clear outcome. Make sure your storyboard leaves the audience with no doubt about the outcome of the story. If you’re describing an unfavorable situation, end with the full weight of the problem; if you’re presenting a solution, end with the benefits of that solution for your character.

User Flow Diagram Link

A user flow diagram is a visual representation of the user’s actions to complete tasks within the product. A visualized user flow makes it easier to identify which steps should be improved or redesigned.

67
User flow helps build a common understanding of each page of your app or website. (Image: Behance68) (View large version69)

Tip: For many projects in the active design phase, creating user flows might be time-consuming, because drawings will become instantly outdated as screens change. Ryan from Basecamp proposes a simplified version of user flows70. This format is really fast to sketch, and it communicates the essentials of what needs to happen.

Prototype Link

A lot of people use the terms “wireframe” and “prototype” interchangeably, but there’s a significant difference between the two design deliverables: They look different, they communicate different things, and they serve different purposes. While wireframes are similar to architectural blueprints (for example, a building plan), a prototype is a mid- to high-fidelity representation of the final product. The goal of a prototype is to test products (or product ideas) before investing a lot of time and money in the final product.

A prototype gives a taste on how the user will interact with the product. It can be analog:

71
Low-fidelity analog prototype (Video: UX Playground72) (View large version73)

Or it can be digital:

74
High-fidelity interactive prototype created in Adobe XD75 and mirrored on an iPhone (View large version76)

The most important thing is that the prototype should allow the user to experience content and test the main interactions with the interface in a way similar to how they would with the final product.

Tip: Test prototypes on real devices as much as possible. While an emulator on your desktop might work in some cases, nothing replaces experiencing designs on a real device.

Conclusion Link

Most likely you are surprised by the number of deliverables mentioned in this article. Rest assured, each project is different and a UX designer wouldn’t need to produce all of them for each project. Also, remember that there is no one-size-fits-all deliverable that will be equally effective for all projects. Each deliverable becomes an effective communication tool in the right context and with the right audience.

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process77, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.
You can check out more inspiring projects created with Adobe XD on Behance78, and also visit the Adobe XD blog79 to stay updated and informed.

(ms, vf, yk, al, il)

Footnotes Link

  1. 1 #project-assessment
  2. 2 #competitor-assessment
  3. 3 #user-research
  4. 4 #information-architecture
  5. 5 #interaction-design
  6. 6 https://adobe.ly/2j4WB5F
  7. 7 https://www.smashingmagazine.com/2017/05/enhancing-mobile-design-ux/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/09/05-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  9. 9 https://www.ramotion.com
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/09/05-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  11. 11 https://www.youtube.com/watch?v=ALU-1M_-jbg
  12. 12 https://www.youtube.com/watch?v=ALU-1M_-jbg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/09/14-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  14. 14 http://tiffanyho.co/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/09/14-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/09/18-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  17. 17 https://yellowpencil.com/assets/blog/competitive-audit-page-1.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/09/18-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/09/08-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  20. 20 http://uxmag.com
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/09/08-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  22. 22 https://www.youtube.com/watch?v=ReM1uqmVfP0
  23. 23 https://www.youtube.com/watch?v=ReM1uqmVfP0
  24. 24 https://en.wikipedia.org/wiki/Persona_(user_experience)
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/09/09-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  26. 26 https://xtensio.com/user-persona/
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/09/09-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/09/10-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  29. 29 https://realtimeboard.com/examples/user-story-map/
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/09/10-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/09/01-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  32. 32 https://www.slideshare.net/Muiskis/con-fudev-personas-scenarios-use-cases
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/09/01-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/09/12-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  35. 35 http://www.effectiveui.com/blog/
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/09/12-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  37. 37 https://www.youtube.com/watch?v=mSxpVRo3BLg
  38. 38 https://www.youtube.com/watch?v=mSxpVRo3BLg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/09/19-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  40. 40 https://twitter.com/chostett
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/09/19-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/09/24-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/09/24-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  44. 44 https://www.youtube.com/watch?v=bi2JMRpL9Ik
  45. 45 https://www.youtube.com/watch?v=bi2JMRpL9Ik
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/09/03-A-Complete-List-Of-UX-Deliverables-preview-opt.gif
  47. 47 http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/09/03-A-Complete-List-Of-UX-Deliverables-preview-opt.gif
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/09/17-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  50. 50 https://www.behance.net/gallery/24204737/URS-logo-identity-design-UIUX-design-web-dev
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/09/17-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  52. 52 https://en.wikipedia.org/wiki/Card_sorting
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/09/02-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  54. 54 http://boxesandarrows.com/developing-and-creatively-leveraging-hierarchical-metadata-and-taxonomy/
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/09/02-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/09/11-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  57. 57 http://nicholasswanson.com
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/09/11-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/09/25-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  60. 60 https://adobe.ly/2xjiRPR
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/09/25-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  62. 62 https://www.youtube.com/watch?v=8-vTd7GRk-w
  63. 63 https://www.youtube.com/watch?v=8-vTd7GRk-w
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/09/06-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  65. 65 https://www.digiflip.com.au/storyboarding-for-user-experience/
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2017/09/06-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2017/09/26-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  68. 68 https://www.behance.net/gallery/54841295/Process-of-Interaction-Design
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2017/09/26-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  70. 70 https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
  71. 71 https://www.youtube.com/watch?v=yafaGNFu8Eg&feature=youtu.be
  72. 72 https://youtu.be/yafaGNFu8Eg
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/09/22-A-Complete-List-Of-UX-Deliverables-preview-opt.jpg
  74. 74 https://www.smashingmagazine.com/wp-content/uploads/2017/09/27-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  75. 75 https://adobe.ly/2j4WB5F
  76. 76 https://www.smashingmagazine.com/wp-content/uploads/2017/09/27-A-Complete-List-Of-UX-Deliverables-preview-opt.png
  77. 77 https://adobe.ly/2j4WB5F
  78. 78 https://www.behance.net/galleries/adobe/5/Experience-Design-(Beta)https://www.behance.net/galleries/adobe/5/Experience-Design-(Beta)
  79. 79 https://blogs.adobe.com/creativecloud/category/xd/

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    For a usability article it sure was annoying to see so many video thumbnails that were just images with no links to watch them.

    4
  2. 4

    Really helpful & informative read! I’m a relatively new front-end dev, so really nice to see all of this laid out clearly. I have a question about the redesign process:

    I’ve been managing a site for about a year now, and I fear that I, and maybe some members on my team, have a bit tunnel vision when viewing our site. Especially when it comes to making improvements to the UI/UX. How do you recommend we remove ourselves from this “bubble” that we’re in? I’ve looked at some tools like User Testing, where we can get feedback from people in our demo. Any other thoughts/suggestions?

    Thanks!!

    5
    • 5

      Hi Alysa,

      Glad that you’ve enjoyed the article.

      Speaking of the ways that can help fight tunnel vision I have one good advice for you. There’s a technique in user research called contextual inquiry which is focussed on spending more time with users who actually use your product (in real-world context, not demo sessions). Interview and demo sessions are great user research/testing techniques, but they a bit generic (since you focus participants’ attention on elements that matters to you, not them). Good contextual inquiry doesn’t have too much involvement from the researcher (the task to observe behavior, not to “define it”).

      I believe that every designer should practice contextual inquiries from time to time to be able to understand all pain points of people who use the product. This helps designers to develop empathy and resulted in creating more human-centered products.

      1
  3. 6

    Really helpful article with basics of all the UX design processes. But it would be great if you can share the best practices by doing analytics. Secondly, I think that prototype and storyboard should be on top as the first step to consider if testing usability.

    1
    • 7

      Hey Waheed,

      Thanks a lot for the idea about the best practices for doing analytics!

      Regarding to your second question. If you do usability testing with your users you should definitely use a prototype — don’t explain how your design works, simply ask them to use it. Speaking of storyboards, they are usually more for in-house needs (e.g. when you have a few designers with different visions of how a certain use flow/feature should be implemented, with a help of storyboard it’s possible to find a solution or at least direction for a design which will satisfy all designers involved in project).

      1
  4. 8

    Please, I implore you, stop posting Nick’s articles. He steals. He copies. He compiles from various sources. This isn’t original content.

    -6
  5. 9

    UNNI KRISHNAN R

    October 6, 2017 7:07 am

    OMG..A wonderful article, very informative..There may be similar articles in the Internet, but presently this is so cool, Im sure this will really help us in our development process too, thanks.

    2
  6. 10

    Does UX ever asks users how they want things? or better do they want something in the first place

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top