UX Design Deliverables

A UX designer is the person who defines the user experience of a product. To provide better user experience, as a UX designer, you follow the design process that helps you to better organize different stages of the product design. At each stage of the process, there are certain outcomes and deliverables that you build and they behave as input to the next stage of the process.

This article describes the best practices of a few common UX deliverables that are produced throughout the design process.

What are UX deliverables?

Traditionally, in user experience, a deliverable is a type of document that acts as a record of work has occurred. Many designers will collaborate with other team members on project deliverables.

There can be many deliverables that UX designers create while designing a product, however, this number varies depending on the process, the type of product and user requirements.

1. User Personas
2. User Flows
3. Wireframes
4. Prototypes

1. User Personas

What is a user persona?

User personas represent the users who are going to use your product. At the start of your design process, you conduct user research to know about your users, their behavior, characteristics, needs, and goals to create the potential user groups of your product. Based on this research, you define the user personas and refer to them in your design process to make correct design decisions. User personas help you to remain focused on your users' needs. A user persona includes the name, image, behaviors, motivations, challenges, and goals of a user group.

Importance of user personas in design process

The first and foremost step in the design process is to understand your users’ needs and requirements by doing user research. Different methods are used to perform user research like interviews, questionnaires, and observations of their behavior in the real environment. The outcome of this step is the user persona.

Personas are important for a product as they drive the design decisions at each stage of the process. Created at initial stages, these personas help you to fulfill users’ needs and goals during each stage of the design process. User personas help all your team members to make a consistent understanding of your users. They make it easier to design a user-centric product.

Do’s and Don’ts of user personas

Do’s

1. Do user research

To create effective user personas, it is important to perform user research first. The user personas will reflect the real user information only if you know about your user. And to know your user, you should meet, observe and talk to them. Understand their challenges and motivations. Use this information to define user personas and hence better user experience of your product.

2. Keep your personas simple

Try to make user personas simple by adding clear and precise information. Since you are going to refer to your user personas frequently in the design process, so make them easy to understand and don’t clutter them with a lot of information. Anyone in your team should be able to look at the persona and get the idea of the user group that it represents.

3. Use visuals

Use visuals to represent the information in your personas. Colors and spacing can help you to define better layouts. Use illustrations and icons where possible as it takes less time to understand visuals than textual information. For example, you can use sliding controls or series of dots to display the levels of skills/traits of a user persona.

4. Personalize your personas

Use an image for each persona. This image represents the age, lifestyle, and occupation of the user groups for whom this persona is being created. Name your personas as it will become easier to refer to them by name while designing your product.

5. Keep your personas updated

While working with your users, you will feel that things are changing with time. Persona creation is not a one-time activity in the design process, and you need to make sure that they are showing the current information and state of your user group.

6. Follow a template

Build a template for your personas and stick with it. Your product will be used by multiple types of users and you will be needing a persona for each user type. To make them easily understandable, use a consistent template and follow it for each user type.

Don’ts

1. Don’t skip personas

It is very tempting to jump directly towards the design or development phase without spending time on user research and persona creation. However, saving this time initially can lead you towards many problems in your design at later stages. You cannot relate your product features to your users when designing them.

2. Don’t rely on your opinion

Do proper research before you represent your user groups through personas. Don’t trust your own instincts while defining the personas. You do not represent your users. You cannot achieve the desired results if you design a product without understanding your real users and their needs.

3. Don’t ignore your personas

Don’t put your personas in the background. This is not a step that you just need to follow; they need to refer continuously throughout the design process. Give real names to your personas so that it becomes easier for you to refer and relate them.

4. Don’t create redundant personas

It is easier to overlap the information in different personas. To avoid this, define clear user groups and make your personas distinguishable from each other in terms of features and behaviors.

5. Don’t make complex personas

Don’t make your personas complex by giving them too many tasks. This can lead you towards a complex design as you will try to provide each feature to every user group. Clearly identify the tasks that a persona can perform while using your product.

Further reading

• A guide to creating personas 
• Replacing personas with characters

2. User Flows

What are user flows?

A user flow represents a series of steps that a user takes to achieve a meaningful goal using your product. In the design process, this flow is defined by using a visual representation showing steps and flow.

When user personas are defined, the next step in the design process is to define the flow of tasks the user is going to perform in the product. A user flow usually includes a name, steps, users, and a description of what happens at each step.

Importance of user flows in design process

User flows are related to product features and requirements. In order to complete a requirement, the user will perform different tasks. Each user flow represents a series of steps the user is following to complete a task. By defining the user flow, you will be able to determine the required modules, sections, screens, and the order in which they should appear on the interface.

User flows provide a simple way to understand what the user will do with your product, and hence make it easier to discuss, review and refine them with your internal stakeholders and clients. User flows define the user interactions with the product without getting worried about the layout and design. Remember, user flows can change anytime based on the requirement change or user feedback. 

If you already have a low or high fidelity prototype, Marvel can automatically generate a user flow for you with our Userflow tool. Check it out here.

Do’s and Don’ts of user flows

Do’s

1. Clarify requirements 
Since user flows are directly related to the product features and how users will interact with your product to achieve their goals, it is important to analyze requirements clearly when you are working on user flows. 

2. Start from paper

Paper or whiteboards are the best tools to start designing user flows. Multiple revisions will be required to clarify the requirements and to identify the best flow. Starting with a digital tool will take a lot of time in designing and then refining of ideas. However, while sharing the user flows as deliverable to stakeholders, designing them with a digital tool will give them a professional and elegant look.

3. Relate with user personas

User personas provide good input to design user flows. Using the personas you can identify the types of users, their challenges, behaviors, and goals. This will help you design the flow that best suits their needs.

4. Create a story

A user flow depicts a story from start till end by highlighting the users that are acting in the story. Make sure that your user flows are telling the stories well, and stakeholders take an interest in them.

5. Define user interactions

Understand the intended path that users will take to achieve the goals. For example, a user wants to order a pair of shoes from an online store. The path can be divided into a series of steps like searching the catalogue and finding the required items, choosing the item, adding it to the cart, checking out, adding payment details, and placing the order. All these steps will be part of the user flow.

6. Make them easy to follow

Add enough details in a user flow so that it represents all product features and the flow of a particular task. A detailed user flow will help you to communicate your ideas effectively to your clients.

7. Reduce the number of steps

Provide the best possible path for users to complete a task. Remove any redundant steps and make it easier and faster for them to achieve their goals. Ask only required information from the user.

Don’ts

1. Don’t make multi-directional user flow

Keep user flows simple and make them flow in one direction. Adding multiple directions within the same user flow will make it difficult to follow and explain in client meetings.

2. Don’t start with a digital tool

Starting from a digital tool will consume your time as it will be difficult to update the user flows. Also, your attention will divert towards the tool and its functionality rather than the concept and story you want to present in the flow.

3. Don’t add multiple scenarios in one user flow

Each user flow represents a task or a goal that the user is going to achieve by following the given path. Keeping the scope of a user flow limited to one goal or one task will make it easier to understand and quick to make changes.

4. Don’t span one task in multiple user flows

Similarly, breaking a task in multiple flows will lose the power of communication that a user flow should provide to its audience.

5. Don’t make an ambiguous flow

A stakeholder following a user flow should be able to follow the given path without any confusion. Don’t make ambiguous flows that are difficult to explain and understand.

Free User Journey generator

• Userflows by Marvel

Further reading

• A beginner’s guide to user journey mapping
• How to run an empathy & user journey mapping workshop

3. Wireframes

What are wireframes?

Wireframing is a way to define the basic structure and layout of your product. Using simple greyscale lines and boxes, you define the screens, layout, navigation, and functionality of the product. Wireframes define the building blocks of the product in a simple and quick way.

Importance of wireframes in design process?

The purpose of wireframes is to provide a visual understanding of the product early in the design process to your stakeholders and clients. Sharing the wireframe to the stakeholders and getting their feedback helps to improve the design ideas.

Since wireframing is a quick and cheaper way to create the design, it is easier to present multiple design ideas and update them on the spot to facilitate client discussions. If you skip wireframes in the design process, it will become costly to make changes at the later stages of the design.

Do’s and Don’ts of wireframes

Do’s

1. Start from lo-fi

Always start from the creation of low fidelity wireframes. A wireframe is a greyscale skeleton of the required layout and UI screens with no colors and styling. Define the user interactions on each screen.

2. Consider multiple devices

Depending on the needs of your users, design wireframes for the required devices. Use the relevant screen size according to the device you are targeting. One tip is to start your work with the smallest screen size for each device type.

3. Set goals and expectations

Discuss with your clients and decide the real purpose of wireframes for them. Few questions are good to clarify before starting your wireframes. For example, how much detail they want to see in wireframes, how close the wireframes should be to the real design, and what features they want to see in wireframes, etc.

4. Keep wireframes simple

Keep your wireframes simple so that they are easy to redesign and share with stakeholders. Use separate wireframes to present different options. Don’t make complex wireframes that are difficult to understand and take a long time to update. Use neutral colors like black, white, and grey and standard fonts like serif and sans-serif.

5. Be consistent

Although wireframes are a draft version of your design and are subject to change, however, they are the foundation of your design. It is very important to follow a consistent style throughout the wireframes while defining the layout and behavior. It will give a professional look to the wireframes and make them appealing to your clients.

6. Use real content

To save time you may want to use placeholder text like Lorem Ipsum to show the text in your design. You may also want to use small boxes in place of icons. However, using this type of content will not give a real look to your wireframes. And when the design will be created with actual content, the entire look of the layout will change. It is always a better idea to use real or close to real content in your wireframes.

7. Show a variety of ideas

It is a common practice that when you are in the design phase, always try to share multiple ideas for a single feature or user flow. Presenting as many ideas as possible will open new ways of thinking and discussions. It helps to reach the best possible design option. Wireframes provide a simple and easy way to create and present multiple design ideas to your client.

8. Use annotations

Annotations provide a good way to place comments and guidelines on wireframes when presenting your ideas to the client. Make sure to keep the annotations short and to the point. Use arrows to show the direction of the flow. Annotations should look different than the UI controls being used in wireframes.

9. Share and get feedback

Build wireframes and use them to collaborate and get user feedback. You can use available tools to design your wireframes and share them online with stakeholders to get their feedback. Improve your design options based on this feedback.

Don’ts

1. Don’t create wireframes without purpose

Do not start creating wireframes before you know the goal, purpose, target user types, and the problem that you are going to solve using wireframes. 

2. Don’t spend too much on styling

Wireframes are used to communicate your ideas about the intended design. They show the desired layout, content and flow. There is no need to spend much time and cost in styling of wireframes. The best way is to select a tool and stick to its features to create wireframes. Spending time and effort to create beautiful wireframes will make it difficult and costly to update them. At later design stages, you can focus on visual design.

3. Don’t afraid to iterate

Since wireframes are created to present ideas to stakeholders, get their feedback and update them, so don't be afraid to iterate them again and again. It is true that you put a lot of effort to design each version of the wireframes, but keep in mind that you are moving towards a better version each time with a lot of learning experience.

4. Don’t start with digital tools

It is tempting to open a tool and start designing the screens. However, sketching on paper or whiteboard at the early design stages will make it easier to brainstorm your ideas in a better way. 

5. Don’t use colors

Colors are a good way to distract the attention of the audience, and the purpose of wireframes is to focus on the layout, functionality, and flow. It is better to user white and grey colors in your wireframes. This will not distract the attention of your clients and will also save your time.

6. Don’t use graphics and images

If you want to display images and videos in your wireframes, use boxes to show the placeholders. Using heavy images will lose the purpose of wireframes.

Further reading

• Getting started with wireframes
• How to build a wireframe deck for clients
• Why you shouldn’t skip your wireframing

4. Prototypes

What is a prototype?

Prototyping is an iterative way of creating an interactive draft version of the product which is used to validate your design ideas without writing a single line of code. Prototypes can be low-fidelity with a less refined look, or high-fidelity describing the details of the final product. Prototyping makes it easier to communicate your design to your stakeholders, get their feedback and refine prototypes before creating the final product.

Importance of prototypes in design process

Getting early feedback and making updates in a prototype is much more convenient and less costly as compared to making changes in the final product. 

It is obvious that a prototype cannot cover all aspects of your product, but it definitely helps you finalize layout and user flow. A big advantage of prototyping is that if it is right, you will earn the project, and if it is wrong, then you will learn about things that need to be avoided in the future. 

by Orely

Do’s and Don’ts of prototypes

Do’s

1. Set expectations

Prototyping is a time-consuming activity and you cannot prototype every feature of your upcoming product for your client. To avoid any misunderstanding, be clear with your client that the prototype will not represent the finished product.

2. Collaborate

Real-time collaboration helps you to make small changes quickly and easily with less effort and time. Many prototyping tools allow you to share your prototypes by a link and your stakeholders can go through the link and add their feedback and collaborate with you remotely.

“This highly iterative process allows a design to be quickly reviewed, commented on, or validated, by team members or by a client throughout the prototyping phase.”

3. Involve technical team

It is a good idea to involve your technical team in the design process and share your prototypes with them to get feedback from the technical perspective. They will tell you the limitations they can face while developing the prototype, and how much time it will take to develop different design ideas. 

4. Test prototypes with real users

Test your prototypes with real users and get their feedback in terms of usability, experience, and functionality. Use the testing results to improve and finalize your design. 

5. Create high-fidelity prototypes

To make your prototypes look closer to the real product, use content, images and graphics like the actual design. This will help to set the expectations of your client for the final product.

6. Create templates

Prototyping is an exercise that takes your time and effort. Try to create templates that can be used in your future products. This will help you to define a consistent layout of your product and save your time.

Don’ts

1. Don’t prototype everything

It is not feasible to prototype all the features of your product. It will take a lot of effort and time, and the result would be a complex prototype. Updating this type of prototype based on user feedback is costly. Only prototype the features that you want to show and test with your users.

2. Don’t use placeholders

Do not use placeholder text and image boxes in your prototypes. Using Lorem ipsum text, the prototype will not show a realistic view of your product. Always try to use content that is closer to the actual product. Only then your client will be able to provide useful feedback for improvement.

3. Don’t be a perfectionist

A prototype doesn’t need to be perfect. If you are giving close attention to every detail of the prototype, it will be fatigue for you and you will get tired very early. Since this is a prototype, there will be few gaps in it.

4. Don’t make everything functional

Adding interactions in a prototype to link multiple screens cannot be done for every action item. You will have to select a few interaction points on each screen where the users can click and move to the next screen. Don’t forget that you are not designing a fully functional product.

5. Don’t prototype features that won’t be in the final product

Doing so will create wrong expectations. Try to present only those ideas that you are capable of implementing in the given time and budget. If you are presenting anything that is out of the scope, then you can take it as a new product or an enhancement in the existing contract with your client.

Further reading

• How to pitch and present ideas using prototypes to clients and stakeholders
• Ideate, prototype & pitch in no time applying this 3-in-1 method
• Mixed Reality User Flows: A New Kind of Template(Opens in a new browser tab)
• Intro to UX Research(Opens in a new browser tab)
• The Ultimate Guide to Prototyping(Opens in a new browser tab)
• A Google Design Sprint Gone Wrong (And What It Taught Me)(Opens in a new browser tab)

Conclusion

As a UX designer, you work and produce a number of deliverables throughout the design process. Few of them are delivered to stakeholders or clients, and few are for your own use while doing the design thinking. The listed best practices will help you to enhance your design skills in each phase of the process. Create each deliverable as an effective communication tool to sell your ideas to your clients.