{"id":35377,"date":"2022-06-09T08:15:00","date_gmt":"2022-06-09T15:15:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=35377"},"modified":"2023-03-17T08:43:12","modified_gmt":"2023-03-17T15:43:12","slug":"ux-artifacts","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/","title":{"rendered":"Most Important UX Artifacts That You Should Create"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts-1024x512.png\" alt=\"ux artifacts\" class=\"wp-image-35378\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Designers produce many UX artifacts throughout the product development process. These records help design teams iterate on previous work and provide valuable documentation for stakeholders, design handoffs, R&amp;D, and future projects.<\/p>\n\n\n\n<p>This article explores common UX deliverables and how each artifact guides the next. We&#8217;ll also discuss which UX artifacts matter most to different teams and stakeholders.<\/p>\n\n\n\n<p>Keep your UX artifacts like design files, documentation, components, prototypes, wireframes, and mockups in one centralized design tool. <a href=\"https:\/\/www.uxpin.com\/sign-up\">Sign up for a free trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-ux-artifact\">What is a UX Artifact?<\/h2>\n\n\n\n<p>UX artifacts (or UX deliverables) are the research records, sketches, design files, prototypes, reports, and other documentation that design teams produce during a project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-key-benefits-of-ux-artifacts\">Key Benefits of UX Artifacts<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Outlines project scope and define business, user, and technical requirements (UX design requirements document).<\/li>\n\n\n\n<li>Documenting the design process, so design teams can iterate on previous work and avoid duplication.<\/li>\n\n\n\n<li>Synthesizes research to guide the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stages-design-thinking-process\/\">design thinking process<\/a> and further decision-making.<\/li>\n\n\n\n<li>Simplifies communication and collaboration between teams and stakeholders.<\/li>\n\n\n\n<li>Enables design teams to research and understand user needs and pain points.<\/li>\n\n\n\n<li>UX artifacts provide valuable documentation for onboarding new team members.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-3-types-of-ux-artifacts\">3 Types of UX Artifacts<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/screens-prototyping.png\" alt=\"screens prototyping\" class=\"wp-image-35008\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/screens-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/screens-prototyping-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>To simplify matters, we&#8217;ve created five categories for UX artifacts to cover in this article, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Research<\/li>\n\n\n\n<li>Design<\/li>\n\n\n\n<li>Testing<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-research-artifacts\">Research Artifacts<\/h3>\n\n\n\n<p>Research artifacts include everything associated with research throughout the design process. Here are some common research artifacts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UX design requirements document<\/li>\n\n\n\n<li>Research plan<\/li>\n\n\n\n<li>User research<\/li>\n\n\n\n<li>Competitor research<\/li>\n\n\n\n<li>Market research<\/li>\n<\/ul>\n\n\n\n<p>Let&#8217;s look at a few of these in greater detail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-user-research\">User Research<\/h3>\n\n\n\n<p>User research artifacts are essential for the early design process. These documents help designers understand users to make human-centered design decisions. User research artifacts include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-designers-5-minute-guide-lean-personas\/\"><strong>Personas<\/strong><\/a><strong>:<\/strong> A fictional person representing a user group. Personas provide UX designers with a human representation to focus their empathy and understanding.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-practical-guide-to-empathy-map-creating-a-10-minute-persona\/\"><strong>Empathy maps<\/strong><\/a><strong>:<\/strong> A practice to empathize with users to visualize what they think, say, do, and feel when encountering a problem or situation.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/customer-journey-mapping-mistakes\/\"><strong>User journey maps<\/strong><\/a><strong>:<\/strong> A step-by-step visualization of a user&#8217;s journey as they complete a task.<\/li>\n\n\n\n<li><strong>Storyboards:<\/strong> Similar to journey maps but focus more on illustrations and storytelling to visualize an idea or concept.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\"><strong>User flows<\/strong><\/a><strong>:<\/strong> A start to finish visualization of a user&#8217;s journey through a digital product\u2013like an eCommerce checkout process.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-competitor-research\">Competitor Research<\/h3>\n\n\n\n<p>UX designers use competitor and market research to gain a broader understanding of a product&#8217;s demand and gaps for opportunities. A typical competitor research artifact is a <em>competitive analysis report<\/em>\u2013a document summarizing competitor research completed at the start of a design project.<\/p>\n\n\n\n<p>Learn how to do <em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/competitive-analysis-for-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">Competitive Analysis for UX<\/a><\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-artifacts\">Design Artifacts<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/mobile-screens-pencils-prototyping.png\" alt=\"mobile screens pencils prototyping\" class=\"wp-image-34093\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/mobile-screens-pencils-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/mobile-screens-pencils-prototyping-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Design artifacts will likely make up the bulk of artifacts designers create during the design process, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sketches &amp; paper prototypes<\/li>\n\n\n\n<li>Wireframes<\/li>\n\n\n\n<li>Sitemap\/information architecture diagrams<\/li>\n\n\n\n<li>Mockups<\/li>\n\n\n\n<li>Prototypes<\/li>\n\n\n\n<li>Style guide<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-sketches-and-paper-prototypes\">Sketches and Paper Prototypes<\/h3>\n\n\n\n<p>Designers create <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/5-tips-from-5-designers-to-improve-your-ux-sketches\/\">sketches<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paper-prototyping-the-practical-beginners-guide\/\">paper prototypes<\/a> to iterate on ideas before committing to the digital process. They also use these paper artifacts as a template reference when designing digital wireframes and mockups.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-wireframes\">Wireframes<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ui-design\/what-is-a-wireframe-designing-your-ux-backbone\/\">Wireframes<\/a> are usually the first artifacts designers create when transitioning from paper to digital. Designers use wireframes to determine each user interface&#8217;s structure and layout while providing a foundation for low-fidelity prototyping.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-sitemap-and-information-architecture-diagrams\">Sitemap and Information Architecture Diagrams<\/h3>\n\n\n\n<p>A sitemap (also referred to as information architecture) visualizes each product or website&#8217;s pages and how they&#8217;re linked. This information architecture is an essential UX artifact as it guides several key design and development decisions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Total number of screens required for the project and how to design them<\/li>\n\n\n\n<li>How to structure each user flow<\/li>\n\n\n\n<li>Which UI elements to use when connecting screens (i.e., a button or link)<\/li>\n\n\n\n<li>How to prioritize content and navigation<\/li>\n\n\n\n<li>Where to place navigational links (i.e., header vs. footer)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-mockups\">Mockups<\/h3>\n\n\n\n<p>Mockups are accurate visual representations of the final product&#8217;s look, including UI design elements. These designs are static but provide a foundation for high-fidelity prototypes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-prototypes\">Prototypes<\/h3>\n\n\n\n<p>Designers build <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\">low-fidelity and high-fidelity prototypes<\/a> as they iterate on ideas throughout the design process. Low-fidelity prototypes allow designers to test user flows and information architecture, while high-fidelity prototypes are valuable artifacts for user testing and stakeholder feedback.<\/p>\n\n\n\n<p>High-fidelity prototypes also provide engineers with a reference during the development process. They use these artifacts to understand each screen&#8217;s layout and how the product must function.<\/p>\n\n\n\n<p>One of the challenges with image-based prototypes is they lack fidelity and functionality, making them difficult to understand, creating friction between designers and engineers.<\/p>\n\n\n\n<p>UXPin is a code-based design tool\u2013meaning designers and engineers can speak the same language. Designers can use UXPin&#8217;s advanced features like <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\">States<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\">Interactions<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\/\">Variables<\/a>, and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/expressions\/\">Expressions<\/a> to build prototypes with code-like fidelity and functionality. <a href=\"https:\/\/www.uxpin.com\/sign-up\">Sign up for a free trial<\/a> to discover how UXPin can enhance your end-to-end design process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-style-guide\">Style guide<\/h3>\n\n\n\n<p>A product&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/style-guide-ux\/\">style guide<\/a> tells designers important information like colors, typography, logos, branding guidelines, and other visual and interaction design instructions. Style guides are crucial UX artifacts because they help designers maintain consistency and reduce design drift.<\/p>\n\n\n\n<p>Linked to a product&#8217;s style guide is a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference\/\">pattern library<\/a>\u2013a group of components that solve usability issues, like cards, navigational menus, CTAs, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-testing-artifacts\">Testing Artifacts<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/testing-observing-user-behavior.png\" alt=\"testing observing user behavior\" class=\"wp-image-32990\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/testing-observing-user-behavior.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/testing-observing-user-behavior-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Testing provides valuable data for designers to identify problems and opportunities to improve a digital product. These artifacts usually include important UX metrics for product roadmaps, project KPIs, and the overall <a href=\"https:\/\/www.uxpin.com\/studio\/ux-design\/the-11-minute-guide-to-bulletproof-ux-strategy\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX strategy<\/a>.<\/p>\n\n\n\n<p>UX researchers also generate data and documentation during usability testing, which is crucial for identifying issues and opportunities or validating design ideas.<\/p>\n\n\n\n<p>Some testing artifacts include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Survey reports<\/li>\n\n\n\n<li>Usability reports<\/li>\n\n\n\n<li>Analytics reports<\/li>\n\n\n\n<li>UX audits<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-survey-reports\">Survey Reports<\/h3>\n\n\n\n<p>Surveys usually produce a one-page report displaying the results. Designers use this data to make decisions or for presentations to stakeholders.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-usability-reports\">Usability Reports<\/h3>\n\n\n\n<p>Usability testing is a crucial part of the user experience design process. Every usability test produces a report describing specific issues and recommendations for fixing.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-analytics-reports\">Analytics Reports<\/h3>\n\n\n\n<p>Analytics gives design teams insights into user behavior and how they navigate a digital product. Analysts can generate various analytics reports, depending on what designers want to learn and analyze.&nbsp;<\/p>\n\n\n\n<p>Designers use analytics reports to identify issues and opportunities as well as validate research and test results.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ux-audit-reports\">UX Audit Reports<\/h3>\n\n\n\n<p><em>&#8220;A <\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-audit\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>UX audit<\/em><\/a><em> is a quality assurance (QA) process that reviews an existing digital product to ensure it meets business, user experience, and accessibility requirements.&#8221;<\/em><\/p>\n\n\n\n<p>A UX audit report summarizes the process, including actionable next steps, like fixing a broken link or replacing outdated content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-who-uses-ux-deliverables\">Who Uses UX Deliverables?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/common-ux-deliverables\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Research from the NN Group<\/a> identified three key entities that use UX artifacts outside of the design department:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Internal stakeholders<\/li>\n\n\n\n<li>External stakeholders\/clients<\/li>\n\n\n\n<li>Engineering teams<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-internal-stakeholders\">Internal Stakeholders<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wireframes<\/li>\n\n\n\n<li>High-fidelity interactive prototypes<\/li>\n\n\n\n<li>Competitive analysis report<\/li>\n\n\n\n<li>User journey maps<\/li>\n\n\n\n<li>Testing reports<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-external-stakeholders\">External Stakeholders<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Competitive analysis report<\/li>\n\n\n\n<li>User journey maps<\/li>\n\n\n\n<li>Testing reports<\/li>\n\n\n\n<li>High-fidelity mockups and prototypes<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-engineering-teams\">Engineering Teams<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sitemap<\/li>\n\n\n\n<li>User flows<\/li>\n\n\n\n<li>Style guide &amp; pattern library<\/li>\n\n\n\n<li>High fidelity prototypes and mockups<\/li>\n\n\n\n<li>Wireframes<\/li>\n\n\n\n<li>Design handoff documentation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-creating-sharing-and-managing-ux-artifacts-in-uxpin\">Creating, Sharing, and Managing UX Artifacts in UXPin<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-design-color-mobile.png\" alt=\"uxpin design color mobile\" class=\"wp-image-35380\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-design-color-mobile.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-design-color-mobile-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>UXPin provides designers with an end-to-end design solution, including creating, sharing, and managing UX artifacts. Let&#8217;s look at a few of these in detail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-wireframes-mockups-prototypes\">Wireframes, Mockups, Prototypes<\/h3>\n\n\n\n<p>Designing wireframes, mockups, and prototypes are crucial for developing and testing ideas. Designers can use UXPin to design these artifacts and share them with team members for collaboration or stakeholders for feedback.<\/p>\n\n\n\n<p>UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments\" target=\"_blank\" rel=\"noreferrer noopener\">Comments feature<\/a> allows team members and stakeholders to provide feedback on designs and <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments#assigning-comments\" target=\"_blank\" rel=\"noreferrer noopener\">assign comments<\/a> to designers who can make them as <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments#resolving-comments\" target=\"_blank\" rel=\"noreferrer noopener\">resolved<\/a> once actioned.&nbsp;<\/p>\n\n\n\n<p>Keeping these artifacts and feedback in one place makes it quicker for designers to test and iterate, streamlining the design process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-systems\">Design Systems<\/h3>\n\n\n\n<p>UXPin&#8217;s intuitive <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Systems<\/a> feature allows teams to build, share, and manage a project&#8217;s visual design elements, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Components<\/li>\n\n\n\n<li>Colors<\/li>\n\n\n\n<li>Typography<\/li>\n\n\n\n<li>Assets<\/li>\n<\/ul>\n\n\n\n<p>A dedicated designer or DS team can manage the project&#8217;s design system by adding <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/#adding-descriptions\" target=\"_blank\" rel=\"noreferrer noopener\">descriptions\/documentation<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/#setting-permissions\" target=\"_blank\" rel=\"noreferrer noopener\">setting permissions<\/a> to prevent team members from making unauthorized changes.<\/p>\n\n\n\n<p>UXPin&#8217;s Design Systems is an integrated feature, so you don&#8217;t need extra plugins or applications for it to function\u2013keeping everything in one centralized design tool.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-documentation\">Documentation<\/h3>\n\n\n\n<p>Design handoffs are notoriously stressful for designers and engineers. Designers often create multiple artifacts across several formats to explain designs and prototypes.<\/p>\n\n\n\n<p>UXPin is optimized for <a href=\"https:\/\/www.uxpin.com\/studio\/handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">design handoffs<\/a>, allowing design teams to <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/documentation\/\" target=\"_blank\" rel=\"noreferrer noopener\">create documentation on prototypes<\/a>\u2013no more external PDFs or explainer videos showing designers what something is &#8220;supposed to do.&#8221;<\/p>\n\n\n\n<p>UXPin also creates additional documentation automatically in <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">Spec Mode<\/a>, allowing engineers to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/#inspecting-properties\" target=\"_blank\" rel=\"noreferrer noopener\">Inspect properties<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/#distance-measurement\" target=\"_blank\" rel=\"noreferrer noopener\">Measure distances<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/#style-guide\" target=\"_blank\" rel=\"noreferrer noopener\">Read the style guide<\/a>, which includes starter CSS<\/li>\n<\/ul>\n\n\n\n<p>Engineers can also communicate with designers via UXPin&#8217;s comments to ask questions about specific UI elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-preview-and-share\">Preview and Share<\/h3>\n\n\n\n<p>Many design tools don&#8217;t offer the ability to prototype and test, while others provide limited functionality not suitable for accurate testing.&nbsp;<\/p>\n\n\n\n<p>UXPin&#8217;s Preview and Test feature allows designers to launch prototypes with the click of a button. Preview and Share allows researchers to conduct tests with users and even make quick changes to iterate during testing\u2013again, no external plugins or applications are required!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use UXPin for Product Design<\/h2>\n\n\n\n<p>Design better experiences for your users and keep your most valuable UX deliverables in one place with UXPin. Discover how code-based design can revolutionize your product design process. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Designers produce many UX artifacts throughout the product development process. These records help design teams iterate on previous work and provide valuable documentation for stakeholders, design handoffs, R&amp;D, and future projects. This article explores common UX deliverables and how each artifact guides the next. We&#8217;ll also discuss which UX artifacts matter most to different teams<\/p>\n","protected":false},"author":3,"featured_media":35378,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,172],"tags":[],"class_list":["post-35377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-documentation","category-product-design"],"yoast_title":"%%title%% %%page%% - by UXPin","yoast_metadesc":"Read the article to find out what are UX artifacts, who uses them, and what are they for. See which artifacts you should create.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Most Important UX Artifacts That You Should Create - by UXPin<\/title>\n<meta name=\"description\" content=\"Read the article to find out what are UX artifacts, who uses them, and what are they for. See which artifacts you should create.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Most Important UX Artifacts That You Should Create\" \/>\n<meta property=\"og:description\" content=\"Read the article to find out what are UX artifacts, who uses them, and what are they for. See which artifacts you should create.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-09T15:15:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-17T15:43:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Most Important UX Artifacts That You Should Create\",\"datePublished\":\"2022-06-09T15:15:00+00:00\",\"dateModified\":\"2023-03-17T15:43:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/\"},\"wordCount\":1566,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/ux-artifacts.png\",\"articleSection\":[\"Documentation\",\"Product Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/\",\"name\":\"Most Important UX Artifacts That You Should Create - by UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/ux-artifacts.png\",\"datePublished\":\"2022-06-09T15:15:00+00:00\",\"dateModified\":\"2023-03-17T15:43:12+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Read the article to find out what are UX artifacts, who uses them, and what are they for. See which artifacts you should create.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/ux-artifacts.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/ux-artifacts.png\",\"width\":1200,\"height\":600,\"caption\":\"ux artifacts\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/documentation\\\/ux-artifacts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Most Important UX Artifacts That You Should Create\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Most Important UX Artifacts That You Should Create - by UXPin","description":"Read the article to find out what are UX artifacts, who uses them, and what are they for. See which artifacts you should create.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/","og_locale":"en_US","og_type":"article","og_title":"Most Important UX Artifacts That You Should Create","og_description":"Read the article to find out what are UX artifacts, who uses them, and what are they for. See which artifacts you should create.","og_url":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/","og_site_name":"Studio by UXPin","article_published_time":"2022-06-09T15:15:00+00:00","article_modified_time":"2023-03-17T15:43:12+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Most Important UX Artifacts That You Should Create","datePublished":"2022-06-09T15:15:00+00:00","dateModified":"2023-03-17T15:43:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/"},"wordCount":1566,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts.png","articleSection":["Documentation","Product Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/","url":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/","name":"Most Important UX Artifacts That You Should Create - by UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts.png","datePublished":"2022-06-09T15:15:00+00:00","dateModified":"2023-03-17T15:43:12+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Read the article to find out what are UX artifacts, who uses them, and what are they for. See which artifacts you should create.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/ux-artifacts.png","width":1200,"height":600,"caption":"ux artifacts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/documentation\/ux-artifacts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Most Important UX Artifacts That You Should Create"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=35377"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35377\/revisions"}],"predecessor-version":[{"id":43816,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35377\/revisions\/43816"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/35378"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=35377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=35377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=35377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}