large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2v5meV8">UX Planet &mdash; Medium</a> | Nick Babich <img alt="" src="http://ift.tt/2u6EX5q"></p>
<p>The list below contains 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:</p>
<ul>
<li><em>User Research</em></li>
<li><em>Market Research</em></li>
<li><em>Design</em></li>
<li><em>Testing</em></li>
</ul>
<p>For each item in the list you’ll find additional links or video with detailed explanation or best practices.</p>
<p>Let’s start!</p>
<h3>User Research</h3>
<h4>Personas</h4>
<p>Persona is a fictional character created to represent a user type that might use a product in a similar way. Personas make it easier for designers to create empathy with users throughout the design process.</p>
<p><img alt="" src="http://ift.tt/2v4W059">Persona is a fictional character that highlights behaviors, needs and motivations of the target users. Image credit: <a href="http://ift.tt/1TzsWqV">xtensio</a></p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/1HUUVAP">Getting the most out of personas &#8211; UXM</a></li>
<li><a href="http://ift.tt/2v51DAw">Predictive personas &#8211; InVision Blog</a></li>
<li><a href="http://ift.tt/1GwIr2F">Creating Personas | UX Booth</a></li>
</ul>
<h4>User Flow</h4>
<p>A visual representation of the user’s actions to complete tasks within the product. Visualized user flow makes it easier to identify which steps should be improved or redesigned.</p>
<p><img alt="" src="http://ift.tt/2v5lcIG">User flow helps build a “common understanding” of each page of your app or site. Image credit: <a href="http://ift.tt/24NgOvw">Michael Pons</a></p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/2bl0sGJ">Stop Designing Pages And Start Designing User Flows</a></li>
<li><a href="http://ift.tt/2aZHVPV">Creating Perfect User Flows for Smooth UX</a></li>
<li><a href="http://ift.tt/1mgm9nx">A shorthand for designing UI flows</a></li>
</ul>
<h4>Experience Maps</h4>
<p>A diagram that explores the multiple steps taken by users as they engage with the product. Experience map allows designers to frame the user’s motivations and needs in each step of the journey, creating design solutions that are appropriate for each.</p>
<p><img alt="" src="http://ift.tt/2u6u046">A simple experience map reflects one possible path during one scenario. Image credit: <a href="http://ift.tt/2v5irHD">effectiveui</a><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FmSxpVRo3BLg%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DmSxpVRo3BLg&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FmSxpVRo3BLg%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2u6MJMI">http://ift.tt/2u6MJMI</a></iframe></p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/1mRBKzw">All You Need To Know About Customer Journey Mapping</a></li>
<li><a href="http://ift.tt/1oSZYUs">How to Create a Customer Journey Map &#8211; UX Mastery</a></li>
</ul>
<h4>Use Cases</h4>
<p>A use case is a written description of how users will perform tasks in your app. It outlines, from a user’s point of view, an app’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.</p>
<p><img alt="" src="http://ift.tt/2u6Krx1.">Use case is a list of actions or event steps, typically defining the interactions between a user and a system, to achieve a goal.</p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/1gRW3qu">Use case &#8211; Wikipedia</a></li>
<li><a href="http://ift.tt/1T5lDMI">Smart UX: Use Cases &#8211; Usability Geek</a></li>
</ul>
<h4>Storyboards</h4>
<p>Storyboards are illustrations that represent shots that ultimately represent a story. In UX this stroy illustrates the series of actions that users need to take while using the product. Translating functionalities into real-life situations, helps designers create empathy with the user.</p>
<p><img alt="" src="http://ift.tt/2v57wxz">Smile and sadness on human faces can add emotions to your story and it comes alive in the hearts and minds of your audience. Image credit: Chelsea Hostetter, Austin Center for Design</p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/2pxneBR">Storyboarding in UX Design</a></li>
<li><a href="http://ift.tt/12zfspI">Storyboarding in the Software Design Process</a></li>
</ul>
<h3>Market Research</h3>
<h4>Competitive-analysis report</h4>
<p>Analysis of products competitors that maps out their existing features in a comparable way. Report helps you understand industry standards and identify opportunities to innovate in a given area.</p>
<p><img alt="" src="http://ift.tt/2u6Ged3">A competitive analysis allows you to assess your competitor’s strengths and weaknesses in your marketplace and implement effective strategies to improve your competitive advantage. Image credit: <a href="http://ift.tt/2v59rST">yellowpencil</a></p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/1BwUlCx">Competitive Analysis: Understanding the Market Context</a></li>
<li><a href="http://ift.tt/2om61bj">Conducting a Solid UX Competitive Analysis</a></li>
</ul>
<h3>Design</h3>
<h4>Moodboards</h4>
<p>A collaborative collection of images and references that will eventually evolve into a product’s visual style guide. Moodboard allows UX desigenrs to show stakeholders and teammates a proposed look for the product before investing too much time or money on it.</p>
<p><img alt="" src="http://ift.tt/2v57wh3">A moodboard is a great tool for stopping to check that your idea of the app’s/site’s look and feel matches your stakeholder’s. Image credit: <a href="http://ift.tt/29PRmxt">usabilitygeek</a></p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/2ragw5X">Mood boards are for more than inspiration &#8211; InVision Blog</a></li>
<li><a href="http://ift.tt/2u6m6aG">How a Web Design Mood Board impacts User Experience Design</a></li>
</ul>
<h4>Sketches</h4>
<p>Sketching is a quick way of visualizing an idea (e.g. new interface design) by using paper and pen. Sketches are useful to validate product concepts and design approaches both with team members and users.</p>
<p><img alt="" src="http://ift.tt/2v5l8c0"><em>Sketching is a useful tool for validating product concepts and design approaches both with team members and users. Image credit: </em><a href="http://ift.tt/1owOiNG"><em>David Sleight</em></a></p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/2v58lq6">UX Sketching</a></li>
<li><a href="http://ift.tt/2dNcbAd">The art of UX sketching and paper prototyping</a></li>
<li><a href="http://ift.tt/2k31W9U">5 Tips from 5 Designers to Improve Your UX Sketches</a></li>
</ul>
<h4>Wireframes</h4>
<p>A visual guide that represents the page structure, as well as its hierarchy and key elements. Wireframes are useful when UX designers need to discuss ideas with team members/stakeholders, and to assist the work of visual designers and developers.</p>
<p><img alt="" src="http://ift.tt/2u68Djd"><em>Designers often use wireframes as the skeletons for mockups</em><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F8-vTd7GRk-w%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D8-vTd7GRk-w&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F8-vTd7GRk-w%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2v58lX8">http://ift.tt/2v58lX8</a></iframe></p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/2pBXYbh">UX Wireframing: Bedrock of Interface Usability.</a></li>
<li><a href="http://ift.tt/2ciNj3L">What is a Wireframe: Designing Your UX Backbone</a></li>
</ul>
<h4>Prototypes</h4>
<p>A prototype is a simulation or sample version of a final product, which is used for testing prior to launch. The goal of a prototype is to test products (or product ideas) before spending lots of time and money into the final product.</p>
<p><img alt="" src="http://ift.tt/2u6vUSe">Low fidelity paper prototype<img alt="" src="http://ift.tt/2v58nye">High fidelity prototype in <a href="http://ift.tt/1QX7ko7">Adobe XD</a></p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/1POcBNw">Considering Prototypes | UX Booth</a></li>
<li><a href="http://ift.tt/14zRgaC">What a Prototype Is (and Is Not) | UX Magazine</a></li>
</ul>
<h3>Testing</h3>
<h4>Quantitative Survey</h4>
<p>Questions that provide numbers as result. Quick and unexpensive way of measuring a level of user satisfaction and collecting feedback about the product. Survey is a quick way to collect information from a large number of users but their obvious limitation is lack of any interaction between the researcher and the users.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fbi2JMRpL9Ik%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dbi2JMRpL9Ik&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fbi2JMRpL9Ik%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2pXSCKA">http://ift.tt/2pXSCKA</a></iframe></p>
<p><em>Related links:</em></p>
<p><a href="http://ift.tt/1v8dIit">Better User Research Through Surveys &#8211; UX Mastery</a></p>
<p><iframe src="http://ift.tt/2u6GlW0" width="600" height="500" frameborder="0"><a href="http://ift.tt/2v5225K">http://ift.tt/2v5225K</a></iframe></p>
<h4>Usability report</h4>
<p>Usability report summarize usability findings in a clear, precise and descriptive way that helps the product team identify the issue(s) and work toward a solution. When reporting results from a usability test, UX designer should focus primarily on the findings and recommendations that are differentiated by levels of severity.</p>
<p><img alt="" src="http://ift.tt/2u6VsyF"></p>
<p><em>Related links:</em></p>
<p><a href="http://ift.tt/2ktCNIQ">Making Usability Findings Actionable</a></p>
<h4>Analytics report</h4>
<p>Numbers provided by an analytics tool on how the user interacts with your product: clicks, user session time, search queries etc. Analytics report can also “uncover the unexpected”, surfacing behaviors that aren’t explicit in user tests.</p>
<p><img alt="" src="http://ift.tt/2u6HgWh">Google Analytics</p>
<p><em>Related links:</em></p>
<ul>
<li><a href="http://ift.tt/1nIiqky">Complete Beginner&#8217;s Guide to Analytics | UX Booth</a></li>
<li><a href="http://ift.tt/2oyQsk0">How A/B Testing And Analytics Can Make You A Better Designer</a></li>
</ul>
<p><strong>Have more deliverable to share? Please let me know in the comments!</strong></p>
<p><em>Follow UX Planet: </em><a href="https://twitter.com/101babich"><em>Twitter</em></a><em> | </em><a href="http://ift.tt/1rBot0L"><em>Facebook</em></a></p>
<p><iframe src="http://ift.tt/2tUWMVC" width="800" height="480" frameborder="0"><a href="http://ift.tt/2sBAPah">http://ift.tt/2sBAPah</a></iframe><img src="http://ift.tt/2v58p9k" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2u6COqK">A Complete List Of UX Deliverables</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


A Complete List Of UX Deliverables

A Complete List Of UX Deliverables

Top Stories