UX Design Deliverables

Find out what exactly UX designers are expected to create and deliver
UX Design Deliverables Lesson

In the world of UX design, deliverables are more than just final products; they're the documentation and assets created along the design journey. They serve multiple purposes:

  • Communication tools: Deliverables help in sharing ideas, research findings, and design decisions clearly among team members and stakeholders.
  • Collaboration guides: These assets aid in smoothing out the workflow, making sure everyone—designers, developers, and other stakeholders—is on the same page.
  • Implementation blueprints: UX deliverables often serve as the roadmap for implementing designs, helping to ensure that the final product is user-centered.
Mind map

Mind maps are a visual tool used to represent ideas, tasks, or concepts linked around a central subject. By creating a visual structure, they help in organizing thoughts, brainstorming new ideas, and visualizing the relationships between different elements.

Mind maps often start with a central node, with related ideas branching out in various directions. They enable designers to quickly jot down ideas and connections, making them an invaluable tool in the early stages of project planning or creative problem-solving. They can be drawn by hand or created using specialized software, and are especially useful for collaborative work, fostering creativity, and encouraging clear communication among team members.

In the realm of UI/UX design, mind maps facilitate a deeper understanding of user needs and the overall scope of a project.

User persona

User personas are semi-fictional characters that represent your target audience. They usually include demographic details and information about users' education, skills, goals, and obstacles in the way of these goals. User personas help the design team empathize with users. Since UX design centers on users, creating user personas early on in the process is an important part of designing products.[1]

Good personas should rely on data. Conduct user interviews, evaluate analytics, and make use of other research tools within your budget and time limits.

Sometimes, UX practitioners create proto-personas based on assumptions, but they can only be used for testing ideas and should never become a reference point for developing final design solutions.

User flow diagram

User flows are visual representations of the paths users might follow within a product to complete specific tasks. They outline the journey from entry point through various steps, leading to a final goal. User flows are vital in the early stages of design, helping teams understand the navigation structure and uncovering potential usability issues.

To create effective user flows, designers need to understand users' goals, tasks, and pain points. Collaboration with stakeholders and user testing can help in defining accurate paths. User flows are often revised and updated based on feedback, ensuring that they align with both user needs and business objectives. By providing a clear roadmap of users' journey, they play a crucial role in creating an intuitive and satisfying user experience.

Storyboard

Storyboards are comic book-style visualizations of a story that gives the whole picture of the environment in which users interact with a product.

Storyboards consist of 3 main components:

  • Scenarios: Scenarios informally describe a specific fragment of a user journey taken by a persona.
  • Visuals: visuals (sketches, photos, or illustrations) represent each step of a journey.
  • Captions: captions are text comments that accompany each visual and describe users' actions, environment, emotional state, device, and other important details. 

Storyboards provide additional context and put teams in users' shoes, giving them additional insight into what they can do to improve the user’s journey. Involving your entire team in the generation process can create a more accurate and realistic storyboard.[2]

Customer journey map

Customer journey maps are diagrams of customers’ digital and non-digital touchpoints with a product, usually including all of the touchpoints they have.[1] 

Pleasant and unpleasant moments in a user’s journey are also included in these maps. Unlike user flow diagrams, they’re more focused on the emotional experience and behavior of users. User interviews are the best way to gain insights for creating customer journey maps.

You may choose to share these customer journey maps with other stakeholders and that can dictate the format they take. In general, you can use tools like sticky notes, spreadsheets, diagramming apps, or whiteboards, to create them.

Experience map

Experience maps are valuable tools for understanding general user behavior and the journey towards a goal. Unlike customer journey maps, which detail specific interactions with a product or service, experience maps capture a broader view. They depict the overall feelings and steps users take in a common experience, like ordering takeout food, without tying it to a particular brand such as McDonald's or UberEats.[3]

Their practical value lies in the ability to:

  • Uncover universal insights: By focusing on general behaviors, designers can identify trends and commonalities that apply across different products or industries.
  • Enhance empathy: Understanding the overall experience helps teams to empathize with users and create more user-centered designs.
  • Facilitate collaboration: Experience maps serve as a common reference that unifies different team members, fostering collaboration and shared understanding.
  • Guide strategy: The insights gleaned from experience maps can inform both design and business strategies, ensuring that decisions align with users' actual needs and experiences.
Empathy map

Empathy maps help your design team understand and prioritize user needs. Empathy maps are insightful tools that enable your design team to tap into the user's mindset. They consist of four main quadrants: Says, Thinks, Does, and Feels, each capturing a unique aspect of users' interaction with the product.[4]

By filling these sections from users' perspective, empathy maps can shed light on what users are likely to say, think, do, and feel while engaging with a product or service. Drawing from real user research, rather than mere speculation, provides a robust foundation.

Utilizing empathy maps can help in aligning the team around user needs and priorities, fostering a more user-centric approach in the design process. It’s a practical and collaborative technique to infuse empathy into design thinking.

Service blueprint

Service blueprints are practical tools used to visualize the comprehensive process of service delivery. These diagrams include every party involved, ranging from frontline staff and digital artifacts to those working behind the scenes. By offering a bird's eye view, service blueprints enable teams to identify and analyze potential gaps or weaknesses within the system.

This includes elements related to the user experience and the back-end operations that might be hidden from customer view. With this detailed understanding, organizations can more effectively align resources, enhance user interactions, and optimize internal processes. In essence, service blueprints act as a roadmap, guiding the creation or improvement of services to ensure they are user-centered and efficient.

Site Map

Site maps are strategic planning tools used in UI/UX design to provide a high-level overview of a website or application's structure. Represented as hierarchical diagrams, they delineate the relationships between various components and groups of content.

Constructed with consideration for user journeys and personas, site maps ensure that the navigation structure aligns with user needs. This organization fosters more intuitive user interactions, allowing users to navigate the product effortlessly.

By visualizing the entire layout, site maps aid both designers and developers in understanding the big picture and in identifying potential issues early in the design process, leading to more user-centric solutions.

Wireframe

Once you know the types of pages your product will include, you can start creating wireframes for those pages. Wireframes are static, low to high-fidelity models of your product.

Don’t worry about details like color palettes or typography at this stage. Focus instead on arranging the elements of the design and planning out the structure and navigation.

Wireframes are usually made up of grayscale lines and boxes, showing positions and visual hierarchy rather than full functionality. They’re an easy and cheap way to evaluate ideas and get user feedback.

Prototype

Prototypes are interactive models that simulate the user experience of the final product, allowing for the testing of interactions and functionality. Unlike static wireframes, which outline the structure and arrangement of elements without detail, prototypes add layers of content, visuals, and sometimes even animations.

They can range from high-fidelity versions with realistic images, videos, and mobile gestures, offering an accurate representation of the final product, to low-fidelity versions using digital or paper grayscale wireframes or hand-drawn sketches. Whether high or low fidelity, prototypes provide valuable insights by allowing users to explore and interact with the design, attracting high-quality feedback from users and stakeholders.

Usability report

Usability reports are vital tools in the design process, summarizing findings from usability evaluations. These reports include participant details, tasks, tools used, insights gained, and final recommendations for design modifications.

Usability reports not only guide designers but are often shared with stakeholders across different roles. Hence, the language should be clear and devoid of unnecessary jargon, making them accessible to all readers.

By analyzing user interactions and highlighting areas for improvement, usability reports play a crucial role in enhancing the overall user experience before the product reaches its final form.

Complete the lesson quiz and track your learning progress.
Start
<?xml version="1.0" encoding="utf-8"?>