ux artifactsDesigners 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&D, and future projects.This article explores common UX deliverables and how each artifact guides the next. We’ll also discuss which UX artifacts matter most to different teams and stakeholders.Keep your UX artifacts like design files, documentation, components, prototypes, wireframes, and mockups in one centralized design tool. Sign up for a free trial to explore UXPin’s advanced code-based design features.What is a UX Artifact?UX artifacts (or UX deliverables) are the research records, sketches, design files, prototypes, reports, and other documentation that design teams produce during a project.6 Key Benefits of UX ArtifactsOutlines project scope and define business, user, and technical requirements (UX design requirements document).Documenting the design process, so design teams can iterate on previous work and avoid duplication.Synthesizes research to guide the design thinking process and further decision-making.Simplifies communication and collaboration between teams and stakeholders.Enables design teams to research and understand user needs and pain points.UX artifacts provide valuable documentation for onboarding new team members.3 Types of UX Artifactsscreens prototypingTo simplify matters, we’ve created five categories for UX artifacts to cover in this article, including:1. Research ArtifactsResearch artifacts include everything associated with research throughout the design process. Here are some common research artifacts:UX design requirements documentResearch planUser researchCompetitor researchMarket researchLet’s look at a few of these in greater detail.2. User ResearchUser 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:Personas: A fictional person representing a user group. Personas provide UX designers with a human representation to focus their empathy and understanding.Empathy maps: A practice to empathize with users to visualize what they think, say, do, and feel when encountering a problem or situation.User journey maps: A step-by-step visualization of a user’s journey as they complete a task.Storyboards: Similar to journey maps but focus more on illustrations and storytelling to visualize an idea or concept.User flows: A start to finish visualization of a user’s journey through a digital product–like an eCommerce checkout process.3. Competitor ResearchUX designers use competitor and market research to gain a broader understanding of a product’s demand and gaps for opportunities. A typical competitor research artifact is a competitive analysis report–a document summarizing competitor research completed at the start of a design project.Design Artifactsmobile screens pencils prototypingDesign artifacts will likely make up the bulk of artifacts designers create during the design process, including:Sketches & paper prototypesWireframesSitemap/information architecture diagramsMockupsPrototypesStyle guide1. Sketches and Paper PrototypesDesigners create sketches and paper prototypes 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.2. WireframesWireframes are usually the first artifacts designers create when transitioning from paper to digital. Designers use wireframes to determine each user interface’s structure and layout while providing a foundation for low-fidelity prototyping.3. Sitemap/Information Architecture DiagramsA sitemap (also referred to as information architecture) visualizes each product or website’s pages and how they’re linked. This information architecture is an essential UX artifact as it guides several key design and development decisions:Total number of screens required for the project and how to design themHow to structure each user flowWhich UI elements to use when connecting screens (i.e., a button or link)How to prioritize content and navigationWhere to place navigational links (i.e., header vs. footer)4. MockupsMockups are accurate visual representations of the final product’s look, including UI design elements. These designs are static but provide a foundation for high-fidelity prototypes.5. PrototypesDesigners build low-fidelity and high-fidelity prototypes 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.High-fidelity prototypes also provide engineers with a reference during the development process. They use these artifacts to understand each screen’s layout and how the product must function.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.UXPin is a code-based design tool–meaning designers and engineers can speak the same language. Designers can use UXPin’s advanced features like States, Interactions, Variables, and Expressions to build prototypes with code-like fidelity and functionality. Sign up for a free trial to discover how UXPin can enhance your end-to-end design process.6. Style guideA product’s style guide 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.Linked to a product’s style guide is a pattern library–a group of components that solve usability issues, like cards, navigational menus, CTAs, etc.Testing Artifactstesting observing user behaviorTesting 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 UX strategy.UX researchers also generate data and documentation during usability testing, which is crucial for identifying issues and opportunities or validating design ideas.Some testing artifacts include:Survey reportsUsability reportsAnalytics reportsUX audits1. Survey ReportsSurveys usually produce a one-page report displaying the results. Designers use this data to make decisions or for presentations to stakeholders.2. Usability ReportUsability testing is a crucial part of the user experience design process. Every usability test produces a report describing specific issues and recommendations for fixing. 3. Analytics ReportsAnalytics 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. Designers use analytics reports to identify issues and opportunities as well as validate research and test results.4. UX Audit Report“A UX audit is a quality assurance (QA) process that reviews an existing digital product to ensure it meets business, user experience, and accessibility requirements.”A UX audit report summarizes the process, including actionable next steps, like fixing a broken link or replacing outdated content.Who Uses UX Deliverables?Research from the NN Group identified three key entities that use UX artifacts outside of the design department:Internal stakeholdersExternal stakeholders/clientsEngineering teamsInternal StakeholdersWireframesHigh-fidelity interactive prototypesCompetitive analysis reportUser journey mapsTesting reportsExternal StakeholdersCompetitive analysis reportUser journey mapsTesting reportsHigh-fidelity mockups and prototypesEngineering TeamsSitemapUser flowsStyle guide & pattern libraryHigh fidelity prototypes and mockupsWireframesDesign handoff documentationCreating, Sharing, and Managing UX Artifacts in UXPinwebdesign design color mobileUXPin provides designers with an end-to-end design solution, including creating, sharing, and managing UX artifacts. Let’s look at a few of these in detail.1. Wireframes, Mockups, PrototypesDesigning 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.UXPin’s Comments feature allows team members and stakeholders to provide feedback on designs and assign comments to designers who can make them as resolved once actioned. Keeping these artifacts and feedback in one place makes it quicker for designers to test and iterate, streamlining the design process.2. Design SystemsUXPin’s intuitive Design Systems feature allows teams to build, share, and manage a project’s visual design elements, including:ComponentsColorsTypographyAssetsA dedicated designer or DS team can manage the project’s design system by adding descriptions/documentation and setting permissions to prevent team members from making unauthorized changes.UXPin’s Design Systems is an integrated feature, so you don’t need extra plugins or applications for it to function–keeping everything in one centralized design tool.3. DocumentationDesign handoffs are notoriously stressful for designers and engineers. Designers often create multiple artifacts across several formats to explain designs and prototypes.UXPin is optimized for design handoffs, allowing design teams to create documentation on prototypes–no more external PDFs or explainer videos showing designers what something is “supposed to do.”UXPin also creates additional documentation automatically in Spec Mode, allowing engineers to:Engineers can also communicate with designers via UXPin’s comments to ask questions about specific UI elements.4. Preview and ShareMany design tools don’t offer the ability to prototype and test, while others provide limited functionality not suitable for accurate testing. UXPin’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–again, no external plugins or applications are required!Use UXPin for Product DesignDesign better experiences for your users and keep your most valuable UX deliverables in one place with UXPin. Sign up for a free trial and discover how code-based design can revolutionize your product design process.