7 UX Deliverables: What will I be making as a UX designer?

Web Designer

What does a UX designer really produce? Right here, we will discover the idea of UX Deliverables, a time period that describes the outputs of a UX design course of throughout its numerous levels. The deliverables produced by UX designers range based on their function within the design workforce and likewise relying on the strategies and instruments utilized by every function. We will present an outline right here of among the most typical forms of deliverables.

A UX design course of usually follows one thing much like a design considering method, which consists of 5 fundamental phases:

  • Empathize with the customers (studying concerning the viewers)
  • Outline the issue (figuring out the customers’ wants)
  • Ideate (producing concepts for design)
  • Prototype (turning concepts into concrete examples)
  • Check (evaluating the design)

The primary two phases (empathizing and defining the issue) are sometimes grouped into the time period “Person Analysis” – i.e., understanding each the character of the customers and the way this impacts their wants. A variety of instruments and strategies can be utilized in every part. Every software or technique would possibly produce a completely different sort of output (UX deliverable), however right here we will give attention to among the mostly used varieties to present you an outline of what you would possibly be anticipated to provide in a UX design profession.

Person Analysis Deliverables


A persona is a fictional character which the designers construct as a form of person stereotype. It represents the standard customers, their targets, motivations, frustrations and abilities. Different data such as demographics and training backgrounds full the persona. Relying on the scope of the tasks, designers will generate a variety of completely different personas to seize as huge a a part of the viewers as attainable. Producing personas helps designers empathize with the customers and reveal a thorough understanding of who they’re and what they wish to obtain.

Copyright holder: Rosenfeld Media, Flickr. Copyright phrases and license: CC BY 2.0

Instance of a person persona. Demographics, talents, abilities, targets and motivations are represented both graphically or within the textual content.


A storyboard is an thought borrowed from the film trade. It basically consists of a caricature, outlining the person’s actions and circumstances below which these are carried out. The ability of this concept is that it doesn’t solely reveal what the person does, nevertheless it additionally reveals the setting, which could be affecting how or why the person does one thing.

Copyright holder: Rosenfeld Media, Flickr. Copyright phrases and license: CC BY 2.0

A storyboard helps visualize the customers’ actions and likewise the setting through which they happen. Whereas principally used for empathizing with the customers, storyboards may be used within the ideation part to assist illustrate among the design decisions.

Buyer Journey Map

A buyer journey map (additionally identified as an expertise map) is a diagram that represents the steps (i.e., the method) taken by a person to fulfill a particular purpose. By laying the method out alongside a timeline, the designers can perceive the modifications in context as properly as the motivations, issues and desires alongside the way in which. By figuring out the main hindrances for customers, the designers can higher relate to their issues and start to see the place a services or products would possibly match alongside the way in which to assist the person.

Copyright holder: Tobias Maier, Wikimedia. Copyright phrases and license: CC BY-SA 3.0

An instance buyer journey map depicting the method of a particular person deciding to purchase a Rail Europe ticket. Alongside every step within the course of, the designers have outlined the customers’ expertise by contemplating what actions they do, what they’re considering, and the way they’re feeling as they progress. Lastly, alternatives to enhance the present expertise are outlined, as properly.

Ideation Deliverables


Brainstorming is a course of whereby a workforce of designers generate concepts about the best way to deal with the problems and alternatives recognized within the person analysis part. The idea right here hinges on the era of as many concepts as attainable (even when they’re utterly wild) in order that the designers can later sift by means of these and scale back them to the concepts that appear most promising. A central level is that the workforce members are free to discover all angles and realms; certainly, the most effective options can typically sprout from the craziest-sounding notions.

Copyright holder: visualpun.ch, Flickr. Copyright phrases and license: CC BY 2.0

Brainstorming is commonly carried out with a number of sticky notes, the place designers write down all of their concepts. Sticky notes can then be mentioned, hierarchically sorted, grouped into themes and organized in order that they symbolize a visible map of the most effective concepts generated for fixing the design downside.

Person Stream

A person stream diagram is a easy chart outlining the steps that a person has to take along with your services or products so as to meet a purpose. In distinction to the shopper journey map, the person stream diagram considers solely what occurs along with your product (that’s to say, ignoring all exterior components). These diagrams may help designers shortly consider the effectivity of the method wanted to realize a person purpose and may help pinpoint the “how” (i.e., execution) of the nice concepts recognized by means of brainstorming.

Copyright holder: Teo Yu Siang and Interplay Design Basis. Copyright phrases and licence: CC BY-NC-SA 3.0

An instance person stream diagram displaying the person’s actions inside an software.

Prototyping Deliverables


Sitemaps present the hierarchy and navigation construction of a website. Such maps are additionally usually produced for cellular apps, as properly. They serve to indicate how the content material will be organized into “screens” or sections, and the way the person might transition from one part of your service to a different.

Copyright holder: Teo Yu Siang and Interplay Design Basis. Copyright phrases and licence: CC BY-NC-SA 3.0

An instance sitemap displaying how the content material on a website is organized and the way customers can transition from part to part.

Low-fidelity prototypes

Upon getting your sitemaps prepared, you possibly can start to sketch how the content material will be laid out on every display screen. A low-fidelity prototype omits any visible design particulars and serves as a tough information to permit designers to get a really feel of how and the place they need to place content material. Low-fidelity prototypes can begin as hand-drawn sketches (that are nice, as a result of they’re quick and low-cost to provide, so you possibly can simply throw them away in the event you change your thoughts) and later refined as computer-drawn wireframes, that are extra devoted to the presentation of data on a actual display screen, however nonetheless missing visible design particulars.

Copyright holder: VFS digital design, Flickr. Copyright phrases and license: CC BY 2.0

Examples of hand-drawn (left) and computer-drawn (proper) low-fidelity prototypes.

Excessive-fidelity prototypes

These prototypes are a step up from low-fidelity prototypes. Typically they’re referred to as pixel-perfect prototypes as a result of they attempt to present all of the visible and typographic design particulars of a product, as it will be proven on a actual display screen. They consider bodily display screen dimensions and are produced in a dimension that corresponds to the bodily system’s dimension. Though these require a lot extra time to provide in contrast with low-fidelity prototypes, they’re usually the kind of illustration that you’d wish to present to a buyer or stakeholder.

Copyright holder: amire80, Wikimedia. Copyright phrases and license: CC BY-SA 3.0

Examples of high-fidelity (pixel-perfect) prototypes for a cellular software. Despite the fact that these seem like screenshots from a accomplished, actual app, they’re little greater than a mock-up! Sadly, many consumers appear to imagine that at this stage, you have to be actually shut to really ending the entire challenge, so be cautious to make it abundantly clear that these are little greater than handsome visuals with no code behind them!

Interactive prototypes

The low- and high-fidelity prototypes mentioned above are little greater than a assortment of static pictures. To higher consider your designs, you would possibly flip these prototypes into an interactive demonstration, geared toward showcasing how the interplay would possibly work with these. Business prototyping software program lets you outline clickable areas, transitions and occasions, so as to produce an interactive prototype that captures the person stream course of and demonstrates interactivity, with out having to jot down a single line of code. In some circumstances, you should use a a lot easier software, such as PowerPoint or Keynote. Even higher, you should use these interactive prototypes in early person checks, earlier than any code has even been written. This manner, you possibly can be sure that your design is more likely to work properly, earlier than committing to the costly and laborious means of creating code.

An instance of how one can create an interactive prototype with a software as easy as Apple’s Keynote presentation software program.

Analysis Deliverables

Usability report

Upon getting a design that’s carried out (even when solely as an interactive prototype), you possibly can start to run some evaluations of this design with actual customers. Analysis can take many shapes and varieties. You’ll be able to have some customers check out your design after which interview them, or work with them in a focus group: That is an instance of qualitative analysis. You can convey customers into a lab and ask them to perform particular duties along with your prototype, whilst you measure issues such as the variety of errors, variety of clicks, or time taken to finish the duty. Within the lab, you should use particular tools, such as eye-tracking cameras, to see the place your customers’ consideration is spent whereas navigating a specific design. You can additionally ask them to carry out the identical job utilizing prototypes that provide different design implementations, so you possibly can evaluate them and see which design is healthier (identified as A/B testing).

There are numerous methods to judge a design. It doesn’t matter what you find yourself doing for analysis, you will should summarize your findings into a usability report. An entire usability report usually incorporates the next sections:

  • Background abstract: what you examined, the place and when, the instruments and tools that you just used and who was concerned within the analysis
  • Methodology: the way you went concerning the analysis, what duties you requested the customers to carry out, what information was collected, what eventualities have been used, who the individuals have been and their demographics
  • Check outcomes: an evaluation of all the info collected, together with illustrations such as bar charts and textual descriptions of the findings, and person feedback that may be notably illustrative or enlightening. Relying on whom you’re speaking the report back to, this part might include some extra technical particulars, such as the kind of statistical analyses used.
  • Findings and Suggestions: what do you suggest, primarily based on the info that you just collected and your findings? Write down what labored properly, what didn’t and why. State what ought to be carried out subsequent to enhance the design or transfer ahead with the method.

Do not forget that a usability report would possibly be directed in the direction of a variety of different roles in your challenge. Managers will in all probability simply want an government abstract and a assertion of how the findings affect the general challenge timeline. Different designers will be extra all for the way you carried out your analysis and would love all the small print. Builders are in all probability solely all for your findings and suggestions. Make sure that your report is structured and worded appropriately for its viewers.

Copyright holder: Teo Yu Siang and Interplay Design Basis. Copyright phrases and licence: CC BY-NC-SA 3.0

An instance of a usability report, compiled in abstract kind. Many of the particulars of a full report are lacking right here, and the main target is on the outcomes. Nevertheless, this presentation kind is ideal for executives and managers, who don’t have time and usually are not within the full particulars.

Analytics report

When a designed product has been launched and has been operating for a whereas, your organization would possibly make some utilization analytics information obtainable to you. Trying into this information might supply nice insights into the best way to enhance usability, notably if this information incorporates customers’ transitions and behaviors in your product.

For instance, you would possibly discover that many customers in an e-commerce website usually are not registering to finish a buy. Does it imply that the registration course of is just not straightforward sufficient? Does it imply that they don’t see there’s such an choice? An analytics report incorporates the insights from this information and highlights areas the place the design would possibly be improved. Whereas it’s tempting to simply put within the good visuals and charts produced mechanically by merchandise such as Google Analytics, the UX designer’s job is not only to put down the info but in addition to interpret them. So, your report should include the info, but in addition believable explanations and suggestions on what to do. It’s additionally a helpful file as a way to see the affect that design modifications might need had in your website, after you might have recognized points and tried to deal with them.

Copyright holder: pexels, pixabay.com. Copyright phrases and license: CC0

An analytics report is extra than simply information and visuals. It ought to include your individual explanations for the noticed emergent person behaviors and suggestions on the place a design may be improved.

The Take Away

In a 2015 article for the Norman Nielsen group, UX specialist Web page Laubheimer analyzed the kind of UX deliverable that UX designers most often reported as being requested to create as a part of their function. Wireframes and prototypes have been reported to be mostly produced, adopted by flowcharts, web site maps, and value/analytics studies.

Copyright holder: Teo Yu Siang and Interplay Design Basis. Copyright phrases and licence: CC BY-NC-SA 3.0

An evaluation of essentially the most generally produced UX deliverables, based on the Norman Nielsen group. This reveals the frequency with which UX professionals are requested to provide and share a particular deliverable. Deliverables with a decrease frequency of demand are nonetheless produced, however are usually not shared as a lot with others.

These are what we contemplate to be “basic” UX deliverables, however one necessary level to bear in mind is that whereas these deliverables are produced and shared with others, many different forms of deliverables will be produced however by no means shared (therefore rating decrease on this examine). With the intention to produce a wireframe, ought to a designer not have a full understanding of the customers and their wants? Typically, administration, shoppers and different workforce members have an interest solely in the kind of deliverable that helps them advance their duties, as properly. Given this, the forms of the deliverables you produce would possibly have to be “tuned” to whom you will share them with, too.

Copyright holder: Teo Yu Siang and Interplay Design Basis. Copyright phrases and licence: CC BY-NC-SA 3.0

This chart reveals the forms of deliverables most often shared with different members of the event workforce and exterior shoppers. The interactive prototype is the one deliverable that everybody needs to see!

In your function as a UX designer, you will invariably have to provide deliverables for every stage of the design considering course of. Whether or not you retain these to your self or share them with others, it’s worthwhile to observe your abilities in as huge an array of instruments and methodologies as attainable, and turn into aware of all of the forms of UX deliverables on the market.

References & The place to Study Extra

Hero Picture: Copyright holder: Mark Congiusta, Flickr. Copyright phrases and license: CC BY 2.0

Laubheimer, P. (2015). Which UX Deliverables Are Most Generally Created and Shared?


Teixeira, F. & Braga, C. (2016). UX Design Strategies & Deliverables


Babich, N. (2017). A Full Listing Of UX Deliverables


Morville, P. (2009). Person Expertise Deliverables


Goodman, E. (2012). How I realized to cease worrying and love the deliverable. interactions, 19(5), 8-9.

web design

Website | + posts

Justin Malonson is the CEO of Coastal Media Brand and the Founder of LyfeLoop a 16+ year tech innovator and investigative media researcher. Justin is a highly sought-after tech entrepreneur, industry speaker and winner of the coveted Business Achievement Awards "Top Digital Marketer" award. With 16+ years of demanding experience, Justin has worked with over 3,000 businesses including amazing clients such as Blue Cross Blue Shield Association, Sotheby's International Realty, Duke University, White House Black Market, Tiffin Motorhomes, Bass Pro Shops and Beazer Homes USA.

love 0 Love
wink 0 Wink
lol 0 LoL
wow 0 Wow
cry 0 Cry
angry 0 Angry