The UX Deliverables Timeless List

A Complete List Of UX Deliverables | by Nick Babich | UX Planet

The efforts of the UI/UX team can be translated and measured into a whole list of UX deliverables. The deliverables which are then passed on to the stakeholders, both internal and external to get an idea of what the app’s users would experience.

Being the leading mobile app design agency that has helped brands like Dominos redesign their offering, we often get asked questions in the line of –

  • What are the deliverables that you provide at the end of the project?
  • Will the development team be able to convert the design in code and then a functioning app, with the help of the deliverable?

To address all these questions, we have prepared a brief description of the different UX deliverables to help you understand what to expect as an outcome when you partner with a mobile app design agency.

The end result of our UX Design process which is what is shown in the illustration below, are all the deliverables that we are going to read in the section that follows

An Entire List of UX Deliverables

The deliverables that present themselves as an outcome of the Mobile app UX effort is a family that can be divided into four subsets –

User Research

Market Research

Design-Centric

Testing Deliverables

User Research Deliverables

This part of the UX deliverables is concerned with looking into the users’ side of the story – who they are, what they prefer in an application, etc.

User Persona

User Persona Template and Examples | Xtensio

The first deliverable that app UX designers work towards is the creation of a user persona. It is about drawing out an image of your probable user – who are they, where do they live, what do they like, what irritates them, what is their pain point, how do you prefer solving it, etc.

The study gives designers and the business as a whole the idea of whom their software design process is intended for – above all, whom they are not developing the app for.

The next part of user research specific UX deliverable is knowing how the user would move inside the application, something that helps draw out a customer journey map.

It is a visual representation to show the actions that a user would take to reach the end goal in an app.

Being in a visual form, the deliverable makes it easy to identify the steps needed to redesign or improve the app, thus setting the ground for understanding what counts as the UX for perfect user flow.

Experience Map

When & How to Use an Experience Map in UX Design | Adobe XD Ideas

This deliverable here is basically a diagram that looks into the many steps that are taken by the users when they engage with the application. It enables the designers to frame users’ needs and motivation in every step of the journey and create a design solution which is appropriate for every step in the customer journey map.

Use Cases

It is the written description of how the software design process would be and how your users would perform tasks inside the application. It showcases the users’ point of view and how the app would behave when their request is responded. Every use case inside the app is shown as the sequence of easy steps, starting with users’ goal and finishing when their goal is achieved.

Storyboard

A Comprehensive Guide To Product Design — Smashing Magazine | Storyboard design, Ux design, Storyboard

Inspired from movie industry, this part of the list of UX deliverables deal with creating an outline of users’ action and the motive behind them. The idea behind this stage is to not just show what is the environment that makes users behave the way they do inside the application.

Market Research

This part of the UX deliverable deals with the market part of the elements that are known to help businesses get an idea of how their app market is moving.

Competitive UX Analysis

EMD Website Flowcharts by Eric Miller, via Behance | Flow chart, Web design, Flow chart template

Designers while researching for the app design will be able to analyze your competitors’ apps – helping you understand the industry standard and find out an opportunity for innovating in a specific segment.

The next part in the list of UX deliverables is specific to the core designing part of the application.

Design Centered UX Deliverable

Moodboards

Mood board, a wise tool — DAY 23. Mood board is an useful tool to be… | by Roberto Pesce | Product Coalition

It is that UX design method where a collection of references and images are found which evolve as the product’s visual guide. It allows the designers to showcase the proposed look for the app to the stakeholders before they put any time, efforts, and money behind it.

Sketches

One of the quickest ways to visualize an idea – Sketching is what is next in the list of design deliverable. Made using nothing but a pen and paper, it is used to validate the concept of products and the approach related to design taken by both users and the team members.

Wireframe

It is the UX design method cum visual guide which showcases the structure of the page along with its key elements and hierarchy. They have proven to be very useful when the designers have to discuss ideas with stakeholders and team members.

Prototype

UX design deliverables - Best practises of how to use different UX deliverables - Marvel Blog

This part of the UX design process is the simulated version of a semi-final app which is also used for testing purposes before the software is launched. The aim of the prototyping process and answer to What is the role of prototyping in user experience design? is to test the products before developers are involved to move on to the MVP stage.

When it comes to creating them, there are multiple prototyping tools that you can make use of to share a clickable version of your design with the stakeholders, all of which can turn out to be pretty useful when it comes to conducting an A/B test for UX designing.

Once all the market, user, and design related UX deliverables are worked upon, the time comes to look at the deliverables which would help test the design in the market.

Testing Deliverables

Quantitative Survey

The need to prepare questionnaires and surveys that help measure user satisfaction and collect app feedback is what comes under the KRA of app UX designers

Usability Report

These reports rightly summarize the findings related to usability in a descriptive and precise way helping teams identify issues and then work for its solution.

Analysis Report

There is a huge number of insights that analytics tools like Google Analytics fetch and show how users are interacting with the application.

Sitemap

Website Flowchart & Sitemap for Illustrator, OmniGraffle or Sketch – UX Kits

The last UX deliverable, which is also an important part of the UI design methodology that acts as the outcome of the designing efforts is Sitemap. It mainly shows the navigation and hierarchy structure of the application – which helps in giving out the information on how content will get organized in sections or screens.

Which UX Deliverable is For Which Audience?

The stakeholders of your design are not just your users but also your teammates and the company’s board and the clients. So assuming that all the UX deliverables you just read would be intended to explain the concept to any one stakeholder category would be a grave misassumption. Your chosen deliverable will have to vary from your audience to audience.

Let us look at all the different combinations that you should work around.

A. In-house management

When it comes to communicating with the managers or internal stakeholders, the UX deliverables which are mostly deemed ideal is the prototype model and the analytics report.

The prototypes give the stakeholders an experience which is a very close reflection of the final app and thus prove to be a solid tool for showcasing what the users would experience.

On the other hand, usability and analytics reports are also found to be very useful when sharing information with the management, for they present clear evidence of the UX recommendation made.

B. Clients and External Stakeholders

When you have to share the UX designs with the external stakeholders like your client, interactive prototypes and mockups are usually the most opted for deliverables.

The idea behind this is when you work with people who have limited knowledge of UX design and ux review, it is always better to give them deliverables that would place the entire focus on visual design. Doing this will help them see the app’s functionality, its information architecture, and the interaction design which is integrated inside the realistic mockups.

C. Engineers and Mobile App Developers

Outstanding Set of Software Engineers Vectors 180258 Vector Art at Vecteezy

When we talk about communication the UX idea with the developers, interactive prototypes are once again chosen as the right option. But there are other deliverables as well which come across as ideal – site map, style guide, and flowchart.

Because of their detailed focus on interaction specifics and structural details, these deliverables prove to be very useful when it comes to the actual implementation process.

With this, we have seen everything there is to know about not just the types of UX deliverables to expect as an outcome from the UX/UI designing agency but also which deliverable is best for which stakeholder.

Now that you have the necessary deliverable related information, it is time to get started with working on your own app’s deliverables.

The laid out path to responsive web design

With every second person using their mobile device to access information over the Internet, there’s no option left for business houses than to build websites customized for smaller screens; because if they don’t, they risk losing out on a substantial share of potential customers.

But building a website that fits on a smaller screen is a challenge in itself since with the variety of mobile devices currently available, there are a plethora of screen sizes for which websites need to be customized.

So do organizations need to build a different website for every different screen sizes?

Well, of course not!

That’s where an approach called Responsive Web Design comes into the picture. Using this approach, an organization can suffice with creating one website that can fit onto any screen size. There are some code changes to be done to the programming of the website to make it mobile “responsive,” and that’s it!

So what is this Responsive Web Design approach, and what are its key benefits? Let’s find out.

What is Responsive Web Design?

Responsive website design - adapt, respond and overcome

Ethan Marcotte was the first person who came up with the term “Responsive Web Design,” and he also contributed significantly to developing the first mobile responsive websites. The man has deeply explained the basics of the design approach in a book called Responsive Web Design and also in this article on A List Apart.

According to Marcotte, a truly responsive website is one that “responds” or adapts its layout according to the screen size on which it is being viewed. The layout of a website changes based on the size and capabilities of the device being used. For instance, suppose a website has content and images laid out in three columns on a desktop. Now for that website to become responsive, it needs to automatically show the same content in a layout with two columns on a tablet and one-column on a Smartphone.

For any website to deliver optimum user experience, it must be responsive. Imagine what impression a potential customer would carry of your organization if, on his first visit of your website on his Smartphone, all the images you carefully handpicked appear at haphazard positions with content broken up and displayed at non-matching locations.

We’re guessing it wouldn’t be that appealing!

Is a responsive website and a mobile website the same?

What is a Mobile Friendly Responsive Website? - Digital Consulting

Not really. A responsive website is one that changes continually and fluidly based on several factors and device capabilities. In such a case, the same website is equipped with code which enables it to transform its layout at run time to fit any screen size.

Alternatively, a mobile website is one that is explicitly built on a new domain for mobile users. Such websites have their code, which is usually pretty lightweight, but often barred by constraints like obtaining two separate domains (one for desktop and one for mobile), browser sniffing, and more.

While several organizations opt for having two separate websites to serve two different sets of customers, it is not a great idea to have a different mobile site for your business. Having the same site adapt to smaller screen sizes is better since it maintains standardization and upholds your brand’s unique identity through a common portal.

How to make a webpage responsive?

Responsive websites: 30 examples and 5 best practices - Justinmind

We need to program HTML and CSS to automatically resize, hide, shrink, or enlarge the webpages to make them look good on all the devices so that the website becomes responsive. To start, you need to include a meta viewport tag in the document’s “head” section, which acts as an indication to the browser instructions as to how to control the displayed page’s dimensions.

To make a webpage responsive, add the following <meta> element in it:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What this command does is this:

  • The “viewport” tag tells the browser that an instruction to control its width and scaling follows
  • “width=device-width” matches the screen’s width in device-independent pixels
  • “initial-scale=1.0” works to form a 1:1 relation between device-independent pixels and CSS pixels

Attempt to deliver the best user experience, mobile browsers render non-responsive pages at desktop screen width first and then attempt at making the content look better fit by increasing the font size and scaling it as per the screen size. Thus for such pages, the font-size may appear to be inconsistent, and users may have to double-tap or pinch-and-zoom to read clearly.

However, if you include the code mentioned above in your webpages, mobile browsers match the screen’s width in device-independent pixels. It enables the page to reflow content such that it matches varying screen sizes, whether displayed on a Smartphone or a desktop.

While this is just the first step towards making a website responsive, there are several other aspects involved, like auto-scaling images, text, and CSS, to become truly responsive. Here’s an excellent resource where you can read some more about this.

The Basic Principles behind Responsive Web Design

Key Principles of Effective Responsive Web Design | Web Design | Graphic Design Junction

The three critical principles detailed below are what makes responsive web design services possible:

1. Flexible Images

How many times have you visited a webpage where an image is so large you have to scroll horizontally to view it completely? While it is possible to view the image in this way, doesn’t it ruin the whole UX? Thus, resizing images such that they fit entirely into the screen on which they are being viewed is a necessity for making websites responsive.

A great way to make images responsive is to use CSS’s max-width property. Using this property ensures that images load in their original size unless the viewport is narrower than their width. If you set the width to a maximum value of 100 percent of the viewing area, images shrink proportionally as the screen or browser becomes narrow.

2. Fluid Grids

Fluid grids stand for grid systems, which scale based on a user’s screen size as opposed to fixed-width layouts that always appear the same. Although the term is frequently used interchangeably with “liquid layouts,” fluid grids ensure that all elements on a page resize concerning one another.

3. Media Queries

A majority of the modern browsers support CSS3 media queries that enable websites to collect data from individual visitors and apply CSS styles conditionally. The media feature “min-width” lets designers implement particular CSS styles once the browser window falls below a specified width.

Say hello to a few Responsive Web Design Frameworks

Best Framework for Responsive Website Designing

A great way to introduce responsive within your websites is by using existing CSS Frameworks that offer responsive design. Such frameworks are usually free and easy to use. Here’s a quick look at some great responsive web design frameworks:

1. W3.CSS

W3.CSS is a responsive stylesheet which makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phone.

2. Bootstrap

Another popular framework is Bootstrap. It uses CSS, jQuery, and HTML for making responsive web pages.

Key Benefits of Responsive Web Design

10 Essential Benefits of Responsive Web Design - KeyCDN

Responsive Web Design brings many benefits to the table. Some of the most important ones are:

  • If your websites don’t distort at the change of screen size, there are more chances of users sticking around
  • Making a website responsive takes less time and resources than building a separate mobile website. It is also easier to maintain
  • A responsive website usually loads faster than a non-responsive one since it is optimized for smaller screen sizes
  • Responsive websites offer improved online as well as offline browsing experience

Along with the above mentioned vital benefits, having a single responsive website helps a business achieve better SEO rankings, analyze traffic reports better, convert more customers, and reduce bounce rates.

Summary 

Responsive web design means making websites that automatically adapt to the size of the visitor’s viewport. Modern businesses need to make websites responsive so that content can render them appropriately on the screen, depending on their size. The activity aims to ensure that visitors have an optimal experience no matter how they access a website. The key advantage of this strategy is that websites load quickly, and they do so without any distortions, such that users don’t need to resize anything to view content manually.

Basics of Integrated Information Architecture in UX design

The 7 principles of UX design—and how to use them - 99designs

Your website may have a lot to convey but if the content is not structured properly on your website it could mean people leaving your website soon after landing on it. It is no secret that websites that do well have been designed well and the information on them is easily accessible. However, it needs to be acknowledged that such websites cannot be created overnight and requires a lot of planning.

Well- planned Information Architecture is the secret sauce here that can be the difference between a website that is high on bounce rates and a website that has visitors staying on it for a long time.

By now you’re are probably thinking – But isn’t Information Architecture just another fancy word for UX and UI design?

The answer is No. Information Architecture is the scientific process of structuring the content that needs to be displayed on a website. IA helps to create a blueprint that will outline the hierarchy of information on your website and also tell you about what to highlight or how much to display.

IA helps to organize a website’s content in such a way that it helps a user to easily find it and use it.

UX on the other hand has a much broader umbrella under which IA is also included.Â

Thus to sum up, Information Architecture is responsible for ensuring that there a good user interface in place and it is the starting point for UX design.

Here are five innovative tips that will help you integrate Information Architecture into UX design.

Keep the goals of your products in mind

How to Achieve Your Company Goals in 6 Steps

Before you start constructing your information architecture you need to be clear about the expectations of your users from your website or app. This means that you should be able to see the bigger picture of what is the end goal of whatever is being offered on the website. There should be a clearly outlined product objective and product strategy that is understood by all the members of the creative team. Understanding of objectives means that there is a clear understanding of what to do and where to begin. When goals are clearly outlined, it helps to get all the teams on the same page and designers can get started without the possibility of wasted man hours due to clarity of targets to achieve.

Consider Gestalt principles of Psychology

The Gestalt principles of design: how psychology shapes perception - 99designs

Cognitive Psychology involves the study of the mind and mental processes which help people to acquire, process and store information in the brain.

Familiarity with psychological principles can help designers create designs that will facilitate users performing those actions that are desired of them. For example – making a purchase.

There are psychological principles known as the Gestalt principles that can help designers come up with effective designs.

These principles are

Similarity: Objects that look somewhat similar are going to be perceived as part of the same group. This similarity could on the basis of shape, colour, size, texture or value. This similarity helps users to see unity between the design features. The different circular tabs on the website which talk about the different areas that the WWF works on is are examples of the principle of similarity.

Similarity (geometry) - Wikipedia

Continuation: This principle talks about the flow of the human eye from one object to another. Elements that are arranged in a continuous line are considered by the brain as grouped together. In UI design, the continuity principle helps draw attention to grouped information that will create smoothness on a page and help a reader to move from one content slice to another. Amazon uses the principle of continuity to communicate that each of the products below are similar and related to each other.

Related products, Upsells, Cross-sells in Magento

Closure:  The principle of closure works on the human eye’s ability to close a shape or perceive a shape as complete even though the image or shape might not be complete by mentally filling in the missing pieces of the shape. Artists have long recognized the ability of the human mind to complete an incomplete image and used this in their art. The logo of the World Wildlife Fund www.worldwildlife.org  is   an example of the closure principle.

The Panda Behind the World Wildlife Fund&#39;s Logo | PopIcon.life

Proximity:  The principle of proximity says that when objects are placed next to each other, the human eye sees them together as a group even though the elements might not be related to each other. Lines or shapes can be used in UI to surround elements and create proximity. For e.g. putting words and a picture in a box can give the message to the brain that both are in proximity to each other and hence related. Pinterest uses the principle of proximity to great effect to group images together and create the impression that all the images are related to each other although they are not.

Get Pinterest - Microsoft Store

Figure/Ground: This principle concludes that the human eye will separate an object from its background and thus highlight the correlation between an object and the space surrounding it.  AngelList does a very good job with the figure-ground principle and tells us that the focus should be on the white on top of the black background.

AngelList - Wikipedia

Using the principles above designers have created powerful content that draws in visitors from the word go.

Plot the navigation system

A Step-By-Step Guide to Marine Chart Plotting

Navigation can be defined as a number of steps and procedures that guides users through an app or website to explore the various parts of the website or app and complete a successful interaction on the site where their goals are fulfilled.  When it comes to Information Architecture, users should be able to move seamlessly through content on the website or app.

So, navigation is inherently dependent on good IA.

Create Personas

How to Create a User Persona (with Examples) | CleverTap

Different people with different personalities will visit your website or app. Creating personalities or personas’ which are hypothetical representations of the people who will visit your website or app is also a good way to find out how to best position the content on the site.

Based on your research you can create these personas of different users who will visit your website or app for their different needs. These personas will help you understand the needs, aspirations, behaviour and targets of your real customers. The personas will help broaden your horizons about the different kinds of consumers that are out there and help you relate to them. Using personas will ease the process of designing and also help create a good UX for your target users.

Integrate Principles of Visual Hierarchy

12 Visual Hierarchy Principles Every Designer Should Know

The main agenda of visual hierarchy is to ensure that content on a website or an app is designed in such a way that the user on the site understands the amount of   importance that needs to be assigned to each block of content on their own.

This technique takes advantage of the fact that the brain differentiates between objects based on things such as size, colour, alignment and contrast.

Visual hierarchy is of utmost importance in interpreting the content on a website or app and also enhancing the visual performance on the site.

One of the core aspects of  visual hierarchy that designers should keep in mind  while working on the web pages is the scanning patterns of people  as studies have shown that people first scan a web page before reading it.

Designers who familiarize themselves with the principles of visual hierarchy can create an information architecture that will integrate vital elements of content on the areas that are most scanned and thus drive users towards taking the desired actions.

Conclusion

It is important for you to understand the people don’t want to wade through a maze of ambiguous content to finally reach what they need and this means that they should easily get access to whatever it is that they have come for in the first place. Here, information architecture is key to building an interface that will give your users exactly the kind of value that they are looking for. Remember, good information architecture and good UX design are mutually inclusive.

error: Content is protected !!