Listen to the audio version of this article

The work of a UX designer happens in many different environments—from lean startups and Agile environments where teams work with little documentation, to consulting engagements for third-parties, or large enterprises and government entities with strict documentation requirements. Regardless of the nature of the engagement or environment (and the one thing that ties it all together), is a need for UX professionals to effectively communicate their design ideas, 将研究成果和项目背景介绍给一系列受众.

During the UX design process designers will produce a wide variety of “artifacts” and project deliverables as part of their UX design methodology. These may take many forms: product design deliverables help UX designers communicate with various stakeholders and teams, document work, 并为会议和构思会议提供工件. They also help create the “single source of truth” — guides and specifications for implementation and reference.

Here are the 10 UX deliverables a UX designer typically produces during an engagement. (This UX design deliverables list is by no means comprehensive and may potentially be longer depending on the nature of the engagement.)

1. Business Goals and Technical Specifications

This is a fundamental step. For a UX professional it all starts with an understanding of the product vision, i.e. 从商业的角度来看产品存在的原因. Written in simple terms, 声明应该包括要解决的问题, the proposed solution, 以及对目标市场的总体描述. It should also describe the delivery platforms and touch lightly upon the technical means by which the product will be delivered.

It need not be longer than one page, but should describe the core of the What, Why and How. Here is an example: “The Fantastic App Co. has identified a gap in gift-giving applications on mobile platforms for the Millennial market (iOS and Android). 很多千禧一代都记不住特别的日子, identifying the best gift, then finding and buying those gifts. 我们的解决方案旨在减轻这种压力. Employing anticipatory design and the latest AI technologies the App delivers a useful and almost magical user experience.”

2. Competitive Analysis Report

For anyone starting to design a new product, it’s vital to make sure it’s a good market fit. Crucially, as part of a UX strategy the product must also have a compelling competitive advantage and a UX that is superior to others in the marketplace.

Competitive analysis means: “Identifying your competitors 评估他们的策略来决定他们的 strengths and weaknesses relative to those of your own product or service.”

One of a UX designer’s initial tasks is to research what products or services the target customers are currently using to solve the problem. 有没有类似的产品或服务? Is there an alternative solution people are using that’s good enough but not perfect? A Band-Aid—a vitamin but not a painkiller? How can better UX make a difference?

A competitive analysis report is a UX research deliverable that identifies the top five competitors and examines what it is they are doing right, as well as what they’re doing wrong. This step will help set a design direction where clear goals are defined and the elements to be focused on spelled out.

3. Personas and UX Research Reports

UX designers need to make sure stakeholders understand the needs of the product’s customers. Creating personas to encapsulate and communicate user behavior patterns and conducting user research are tried-and-true ways to do it. Personas are representative of a product’s typical users—by incorporating their goals, needs and interests, they help the team working on the project develop empathy towards the user.

用户研究也是用户体验设计过程中不可或缺的组成部分. 它涉及一系列用于提取行为模式的技术, 添加背景并深入了解设计过程. There are many types of user research tools and techniques available—it’s all about choosing the right “lens” for the right situation.

Before embarking on user research, it’s important to take the time to develop a research plan. This is a document that will help communicate research aims and methods as well as get buy-in from stakeholders. It is also a great tool that can be used to help keep everyone on track during the research project.

At the conclusion of the user research phase a report translating the research findings into actionable items is generated. 然后，用户体验团队将围绕这些内容设计产品.

4. Sitemap and Information Architecture

A sitemap is a visually organized model of all the components and information contained in a digital product. 它代表了应用程序或网站内容的组织. Along with wireframes, they are one of the most fundamental of UX deliverables and rarely skipped in a UX design process.

Sitemaps help lay out the information architecture—the art and science of organizing and labeling a product’s components—to support navigation, findability and usability; they also help you define the taxonomy and user interface.

Sitemaps are handy references to have as a resource and adjust as the product evolves based on iterative prototyping and user testing. During the design workflow, a numbering system is often employed to keep everyone on the same page when discussing the product’s content.

5. Experience Maps, User Journeys and User Flows

An experience map is a visual representation that illustrates a user’s flow within a product or service—their goals, needs, time spent, thoughts, feelings, reactions, anxieties, expectations—i.e. 他们与产品互动的整体体验. It’s typically laid out on a linear timeline showing touchpoints between the user and the product.

User journeys and user flows 更多的是关于用户采取的一系列步骤吗, and demonstrate the way users currently interact—or could potentially interact with a product. They demonstrate behavior, functionality and the key tasks a user might perform. By examining and understanding the “flow” of various tasks a user might undertake, you can start to think about what sort of content and functionalities to include in the user interface, 以及用户需要什么样的UI来完成它们.

用户体验在很大程度上是为用户解决问题. When crafting a user journey, the designer needs to understand the persona, the user’s goals, motivations, 当前的痛点和他们想要完成的主要任务.

What’s the difference between a user journey and user flow? Think of a user flow 当用户通过您的产品或服务完成一个任务或目标时，e.g. booking a car on Lyft; a user journey illustrates the bigger picture. A user journey expands beyond tasks, and looks at how a particular customer interaction fits into a larger context.

6. UX Wireframes

A staple of UX design methodology, wireframes are two-dimensional “blueprint” illustrations of a design framework and interface elements, and show what goes where. Primarily a layout tool, they help define the information architecture, the spacing of content, functionalities, the interaction design and intended user behaviors.

Wireframes are bread-and-butter for designers and one of the most common UX design deliverables on a project. “Show me your wireframes” is probably heard more often than anything else during a UX designer’s interview.

A major phase in the UX design process, wireframing is a cost-effective way to explore ideas and generate innovative concepts that address customer goals. 它们是快速构思草图之外的伟大工具, 它们有很多不同的口味——从低保真度(没有款式), black and white boxes, greeked text) to high-fidelity (fully styled, color, very detailed).

有时在工作场所速记中被称为“电线”, wireframes can save a ton of time and money down the line because they’re so pliable and quick to produce. They serve as a centerpiece around which to have conversations with stakeholders and team members while figuring out the design direction.

Wireframes are foundational, 因此，在帮助定义设计结构方面是很有帮助的, and how a user flow works through an App or site under different use case scenarios. 线框图有一些有趣的变化，比如“线框图”。 在Toptal Design Blog的前一篇文章中讨论过 and “wireflows工作流和应用程序的用户体验交付 NNGroup.

7. Interactive Prototypes

Another dominant deliverable during a user-centered design process，交互式原型为产品注入了生命. Rudimentary prototypes save a ton of time and money—they demonstrate how things will work in an actual use case scenario, 并且允许快速设计迭代和用户测试. They also help a designer communicate their design effectively at different stages of the UX design process.

Prototyping can happen at any point in the journey of discovery through iteration. From paper prototypes to highly polished designs, an internal review of a product prototype lets everyone on the team see how things will work when an actual user interacts with it.

Static sketches and wireframes don’t bring a product to life in a way that an interactive prototype can. Almost magically, it is seen and felt how the product will behave—how everything connects. Different designs and features can be explored; new ideas may emerge. 可以发现问题点，发现尴尬的互动.

交互原型极大地帮助了用户测试. 而不是让人们浏览静态页面, 潜在用户可以测试感觉100%真实的产品, provide ideas and give valuable feedback.

如今，设计师的原型设计工具有各种各样的形状和大小. Here are 21 interactive prototyping tools for UX design.

8. Visual Design

Visual design is the “final coat of paint” on the product. However, 不仅如此:视觉设计可以极大地影响产品的用户体验, 因此必须非常小心地处理. Hopefully, a lot of interaction design and usability heuristics were worked out during prior steps of the UX design process so that the designers can focus on the visuals. 这是让产品更上一层楼的最后机会.

Visual design is the last step before handoff to developers and the phase where a styleguide and final specs are crafted. It’s not just about “making things pretty,” but an opportunity to define, 或者实现品牌配色方案，并影响布局的可用性, contrast, and visual hierarchy.

9. Styleguide and Specifications for Developers

The final step in the UX design workflow is to put together specifications and a styleguide for developers. Styleguides are a must if a product’s design is to succeed in the long run.

A styleguide is for making sure designs are implemented consistently across branding, visual styles, colors, fonts and typography. It’s also used for design patterns, language, 规则(如键盘快捷键和数据显示规则), 并指定UI行为(如错误处理).

一些样式指南和规范是手工放在一起的, and others are generated automatically. Putting together a styleguide manually is a tedious process and can often take six months, so any automation tool is a welcome timesaver.

自动化的方法取决于所使用的工具. 它们是一种更敏捷、更渐进的设计交接方式. styleguides crafted over a long time. They can be thought of more like “bibles of style” on the shelf that everyone on the team can refer to.

如果你在Sketch中工作，会有诸如 Zeplin. Zeplin是一个面向UI设计人员和前端开发人员的协作工具. It goes beyond the design workflow and helps teams with the design hand-off.

In addition, a design styleguide can be generated in a few seconds from Sketch with the Craft plug-in, or measurements and CSS grabbed from the design by generating an HTML file with the Marketch plug-in as outlined in this article.

Here are 50 great styleguide examples. Also one from the BBC, and one from IBM, both of which host their guides online which makes it easy for everyone to view it.

10. 可用性测试和使用分析报告

A UX designer’s job is never done. Even after a product’s release there are opportunities to gather feedback, collect data on usage, refine, release and start the cycle all over again.

A usability test will tell you whether your target users can use your product. 它有助于识别人们在使用特定UI时遇到的问题, 并揭示了难以完成的任务和令人困惑的语言.

Usability testing reports are typically delivered during the prototyping phase, but it’s not unusual to test existing products with users to see where there may be room for improvement.

理解可用性测试收集过程中收集的数据, sorting and the generation of reports, 正在成为用户体验实践者中越来越普遍的任务——事实上, it’s becoming a critical UX skill. Here’s a usability testing report template.

After the product is released into the wild another set of data gathering—a quantitative method—will tell the design team how the product performs with users on a mass scale.

There are countless tools and ways to capture user behavior and analyze it. 从眼球追踪到点击追踪和热图(显示点击), taps, and scrolling behavior) to UI element tagging which tracks the digital footprint of every user across mobile and web devices.

分析报告显示客户使用哪些功能, 他们在你的手机应用或网站上花了多少时间, 随时间变化的趋势，以及跨地域的综合结果, accounts, users, and custom segments. They provide full visibility into how features are being used and by whom.

Analytics companies usually automatically generate customized reports on demand. These reports are very useful and can provide surprising insights into your product’s usage. That amazing feature you thought would win over all your customers may turn out to be hardly ever used. On the flipside, a small, insignificant function in the UI may prove to be getting a lot of use and you may decide it’s time to focus on expanding that particular functionality.

A UX designer’s mission is to empower companies to make products and services based on a deep understanding of human behaviors, goals, and motivations. The UX deliverables checklist above includes some of the most common outputs produced by UX designers as they craft great experiences as part of “design thinking” and a user-centered design process.