Top UX Deliverables : What will I make as a UX Designer | Complete Guide from Beginner to Expert

1. Top UX Deliverables
What will I make as a UX Designer?

2. A UX design process typically follows something similar to
a design thinking approach, which consists of five basic
phases
1. Empathize with the users (learning about the audience)
2. Define the problem (identifying the users’ needs)
3. Ideate (generating ideas for design)
4. Prototype (turning ideas into concrete examples)
5. Test (evaluating the design)

3. User Research Deliverables
A persona is a fictional character which the designers build as a sort of user stereotype.
It represents the typical users, their goals, motivations, frustrations and skills. Other
information such as demographics and education backgrounds complete the persona.
Example of a user persona. Demographics, abilities, skills, goals and motivations are
represented either graphically or in the text.
Personas

4. User Persona

5. User Research Deliverables
A storyboard is an idea borrowed from the movie industry. It essentially consists of a
comic strip, outlining the user’s actions and circumstances under which these are
performed. The power of this idea is that it doesn’t only demonstrate what the user does,
but it also reveals the environment, which might be affecting how or why the user does
something. A storyboard helps visualize the users’ actions and also the environment in
which they take place.
Storyboards

6. User Storyboards

7. User Research Deliverables
A customer journey map (experience map) is a diagram that represents the steps (i.e.,
the process) taken by a user to meet a specific goal. By laying the process out along a
timeline, the designers can understand the changes in context as well as the
motivations, problems and needs along the way. By identifying the major stumbling
blocks for users, the designers can better relate to their problems and begin to see
where a product or service might fit along the way to help the user.
Customer Journey Map

8. Customer Journey Map

9. Ideation Deliverables
Brainstorming is a process whereby a team of designers generate ideas about how to
address the issues and opportunities identified in the user research phase. The concept
here hinges on the generation of as many ideas as possible (even if they are completely
wild) so that the designers can later sift through these and reduce them to the ideas that
seem most promising. Brainstorming is often done with lots of sticky notes, where
designers write down all of their ideas. Sticky notes can then be discussed,hierarchically
sorted, grouped into themes and arranged so that they represent a visual map of the
best ideas generated for solving the design problem.
Brainstorming

10. Brainstorming

11. Ideation Deliverables
A user flow diagram is a simple chart outlining the steps that a user has to take with
your product or service in order to meet a goal. In contrast to the customer journey map,
the user flow diagram considers only what happens with your product (that is to say,
ignoring all external factors). These diagrams can help designers quickly evaluate the
efficiency of the process needed to achieve a user goal and can help pinpoint the “how”
(i.e., execution) of the great ideas identified through brainstorming. An example user
flow diagram showing the user’s actions within an application.
User Flow

12. User Flow

13. Prototyping Deliverables
Sitemaps show the hierarchy and navigation structure of a website. Such maps are also
often produced for mobile apps, as well. They serve to show how the content will be
organized into “screens” or sections, and how the user may transition from one section
of your service to another. An example sitemap showing how the content on a website is
organized and how users can transition from section to section.
Sitemaps (Information Architecture)

14. Prototyping Deliverables

15. Prototyping Deliverables
Once you have your sitemaps ready, you can begin to sketch how the content will be laid
out on each screen. A low-fidelity prototype omits any visual design details and serves
as a rough guide to allow designers to get a feel of how and where they should place
content. Low-fidelity prototypes can start as hand-drawn sketches (which are great,
because they are fast and cheap to produce, so you can easily throw them away if you
change your mind) and later refined as computer-drawn wireframes, which are more
faithful to the presentation of information on a real screen, but still lacking visual design
details.
Low-fidelity prototypes

16. Low-fidelity prototypes

17. Prototyping Deliverables
These prototypes are a step up from low-fidelity prototypes. Often they are called
pixel-perfect prototypes because they try to show all the visual and typographic design
details of a product, as it would be shown on a real screen. They take into consideration
physical screen dimensions and are produced in a size that corresponds to the physical
device’s size. Although these require a lot more time to produce compared with
low-fidelity prototypes, they are often the type of illustration that you would want to show
to a customer or stakeholder. Even though these look like screenshots from a
completed, real app, they are little more than a mock-up
High-fidelity prototypes

18. High-fidelity prototypes

19. Prototyping Deliverables
These prototypes are a step up from low-fidelity prototypes. Often they are called
pixel-perfect prototypes because they try to show all the visual and typographic design
details of a product, as it would be shown on a real screen. They take into consideration
physical screen dimensions and are produced in a size that corresponds to the physical
device’s size. Although these require a lot more time to produce compared with
low-fidelity prototypes, they are often the type of illustration that you would want to show
to a customer or stakeholder. Even though these look like screenshots from a
completed, real app, they are little more than a mock-up
Interactive prototypes

20. Interactive prototypes

21. Evaluation Deliverables (Test)
Once you have a design that is implemented (even if only as an interactive prototype),
you can begin to run some evaluations of this design with real users. You can have some
users try out your design and then interview them, or work with them in a focus group:
This is an example of qualitative evaluation. You could bring users into a lab and ask
them to accomplish specific tasks with your prototype, while you measure things such
as the number of errors, number of clicks, or time taken to complete the task. You could
also ask them to perform the same task using prototypes that offer alternative design
implementations, so you can compare them and see which design is better
Usability report

22. Usability report

23. Evaluation Deliverables (Test)
When a designed product has been released and has been running for a while, your
company might make some usage analytics data available to you. Looking into this data
may offer great insights into how to improve usability, particularly if this data contains
users’ transitions and behaviors in your product. UX designer’s job is not just to lay down
the facts but also to interpret them. So, your report must contain the data, but also
plausible explanations and recommendations on what to do. It’s also a useful record so
that you can see the impact that design changes might have had on your website, after
you have identified issues and attempted to address them.
Analytics report

24. Analytics report

25. Thank You
Source: interaction-design.org

26. Some people think design
means how it looks. But of
course, if you dig deeper, it’s
really how it works.

27. Thanks!
Contact us:
Ravi M Nariya
Think Crazy Be Different
nariyaravieng@gmail.com
www.ravinariya.com