UNIT IV

WIREFRAMING, PROTOTYPING AND TESTING

Sketching Principles - Sketching Red Routes - Responsive Design – Wireframing - Creating

Wireflows - Building a Prototype - Building High-Fidelity Mockups - Designing Efficiently with
Tools - Interaction Patterns - Conducting Usability Tests - Other Evaluative User Research
Methods - Synthesizing Test Findings - Prototype Iteration

SKETCHING PRINCIPLES

If you’ve done any sort of serious creative work, you are all too familiar with creative
block. It feels like hitting a brick wall: None of the ideas you’re able to visualize are good
enough, or can’t work in real life.
For designers, the feeling is all too familiar. However, like any complicated problem
with no clear solution, a smart process can make all the differences. This is where UX
sketching comes in.

UX sketching is a crucial, yet often overlooked, aspect of user experience design.

Sketching is a very efficient way of communicating design while allowing designers to try
out a multitude of ideas and iterate them before settling on one.

In this UX design sketch tutorial, It is intend to cover everything you need to know about
sketching in UX design, including the following points:

• Introduction to UX sketches and wireframes

• UX sketching basics, tools, and techniques

• Clarifying sketches with notes, annotations, numbers

• UX sketching tips and tricks

• Mini-methods designed to boost quality and productivity

• All you need to know about Wireflows

• A quick guide to UX flow sketching

UX Design Sketching Is a Two-step Process

Many options must be considered in design, which results in the choice and the
execution of the best one. Designers consider their options, and then proceed to work out the
details, thus making UX design a two-step process:
 • Idea Generation

In the initial step, multiple ideas are generated, but since they cannot be fully shaped, it is
not uncommon for some of the elements to be incomplete or missing. The main thing is to
consider different approaches and to decide which is the most efficient in the context of your
task and the various constraints of the project.
• Adding Detail and Refinement

Step by step, settle on a few promising variants and proceed to work out the specifics,
thus rendering some ideas unsuitable.

UI/UX Sketching techniques

UX design is indeed a complicated multi-step process. There are no fit-all guidelines

and practices, and what you do will vary from project to project. One thing seems to stay
constant, however, whether you’re bettering or designing a new feature, part of a flow, or an
entire app from scratch — and that is a paper-pencil sketching step.

1. Pens and Paper

 Let’s start with the tools, you may have guessed that the pen and paper are a must. But if
you want your sketches to truly shine, you might want to get additional tools to complete your
selection. After all, having the right tools for the job (quite literally) is helpful no matter what
you do.

• 0.1-0.25 pen for finer details

• 0.5 pen for regular purposes

• Marker for thicker lines

• Shading pen for highlighting as well as showing depth (buttons, modals, popovers, etc)

• One color pen for drawing attention to specific parts (CTA button, interactions, etc)

You might not need all of these pens for all your sketches, but they come in handy when
there’s a higher level of detail required.

When it comes to paper, it’s really up to your personal preference, if you cherish more
freedom go for blank paper without any lines. If you want more structure, there are plenty
of ready-to-print templates available on sites like sketchize.

2. Mastering basic shapes

In order to quickly make professional sketches, you need to have a steady hand and
confidence in what you’re drawing. When it comes to UI/UX you only need to get good at
drawing most basic shapes. Everything else in UI sketches including icons is just a
combination of those. The trick is to draw everything in one continuous stroke, the strokes
also need to be steady and smooth.

• Lines - Text, Annotation indicators, Shading, Patterns, etc.

• Squares - Buttons, Elements, Containers etc.

• Circles - Tap indicators, Left/Right controls, Icons, Zoom technique etc.

• Ovals - Rounded-corner buttons, Speech bubbles etc.

• Triangles - Arrowheads, Parts of multiple icons etc.

3. Text and Annotations

When it comes to annotations and text, there are also a few general best practices and tips to
make them easy to read and understand.

• Use all capital letters if your handwriting isn’t the best

• Only write annotations horizontally

• Increase weight or size to highlight text, or use color if you have it

• Use the real text inside UI when you need to draw attention to it.

4. UI pattern conventions
 Like with many visual fields, there are certain conventions for drawing user interface
elements that people in the industry understand easily and without additional explanation. As I
cannot fit them all in one picture, I only used the major ones here and you can do your own
research regarding the rest, or better yet, using the above conventions as the basis, you might
even develop your own visual library if that works for you and the people you present your
sketches to.

The goal in sketching must not be to make it pretty or invest too much time into it, you
should not feel an attachment to your sketches as they are the lowest level of
prototyping/presentation and need to be destroyed and re-drawn most frequently, but
nevertheless, making them look a tad better won’t hurt.
• Add annotations and notes. These are required only if you’re planning to share the
sketches. However, they can be useful even if you’re doing them for your eyes only.
• Sketch alternatives. Sketch some quick alternatives to your solution.
• Pick the best solution. Choose the best options.
• Add shadow and bevel. This is particularly important for sharing purposes. Add a
shadow to make your sketch visually appealing, which is important if you plan to
share it with team members and/or clients.
• Save the sketch. Take a photo or put it in a folder. I have a few paper trays on my
table for sketches.
• Share. I usually use one of the following sharing methods:
o Scan sketches via Evernote and provide a permalink to other team members or
stakeholders.
o Take a photo and upload to InVision.
o Upload and map images to Realtimeboard.
o Or just email a photo.
• Review the sketches and add notes. Take a break and then come back to your
sketches a while later. Take a look at them again. Does the sketch still make sense to
you? A good sketch must be easy to follow.
SKETCHING RED ROUTES

The red route is one of the UX methods that helps you to identify the most essential user tasks
that your team needs to focus on. This will provide you with an incredible insight into what people
want to do most within the product as well.

Within the red routes method, the tasks need to focus on can be simply identified by 2 criteria.
One is “How many of your users carry out the task” and the other one is “How often your users carry
out the task”. This will give you a sense of what feature would be valuable.

It can be carried out by designing a 2-dimensional graph with x-, y-axis that each of them
measures the satisfaction of the two measuring standards. The answer to these two questions
determines where the tasks will plot in the table. The tasks that are used by many users and are
frequently used are finally classified as red routes in the product ( I selected 10 tasks, but the number
depends on your decision). And then you can focus on building product features based on the red
routes.

The benefits of using the red routes method are,

• Red routes help us solve a common problem like “We’ve got so many users, they want to do
so many things, how can we possibly deal with tons of need?” by designing for the most
common use case. As a reminder, the user interface doesn’t need to make users aware of all
edge cases!
• A second great thing about red routes is they produce actionable results. It affects the feature
within the product and focus on a few critical functions that are needed by most of the user.
• Focusing on red routes helps us decide on the important decision based on a user-centering
mind and reduces the number of choices.
The problems when you ignore to use the red routes method are,

• You will end up warping the information architecture. If you tried to include within the
product so many new features and functions, your product would require so many navigation
links and directions so making it difficult to find the content that users need.
• Besides, some people ask again that limiting the feature in a user interface will reduce its
flexibility. but the fact is that focusing on flexibility is a common design mistake.
• Based on Hick’s Law, flexibility in a system is really risky to cause results on decreasing
efficiency, adding complexity, and increasing time and money for development.

RESPONSIVE DESIGN

Responsive web design is the process of designing a mobile-friendly website that adapts

depending on the visitor’s device–desktop, tablet, smartphone. Developers use CSS media queries to

set breakpoints for each screen size so that users can browse a website within the constraints of their

device.

These media queries change column layout, typography sizes, image sizes, or hiding and

revealing content. The website’s functionality remains the same, but the content and structures adjust to

different screen sizes.

Why is Responsive Web Design important?

UX design is about creating the best user experiences; this includes optimizing interfaces to
adapt to someone’s device. Designers must create a consistent experience across different devices and
viewports.

Responsive web design is essential if you want search engines to index and rank your
website. Google’s mobile-first indexing prioritizes responsive websites for mobile search results.

Most people use their mobile devices to search the web. They’re also shopping for products
and services, so your website must be mobile optimized to take advantage of these customers.

The Responsive-Design Approach

There are two essential factors designers must consider for responsive web design:

• Breakpoints

• Visual Content
Breakpoints

Designers must identify these breakpoints and optimize layouts to match multiple devices during

the UX design process. In most cases, designers only have to consider three viewports:

• Smartphone/mobile

• Tablet

• Desktop

But, for a website to be fully responsive, designers should also consider both portrait and landscape

layouts for mobile and tablet for a total of five breakpoints:

• Smartphone/mobile–portrait

• Smartphone/mobile–landscape

• Tablet–portrait

• Tablet–landscape

• Desktop
Visual Content

Visual content includes images, videos, and GIFs. These visuals take up a lot of resources and can take

a long time to load on mobile devices, so designers must compress and optimize visual content to

reduce the file size.

10 Best Practices for Responsive Web Design

1) Flexible Everything

Flexibility is crucial for responsive website design. Layouts, images, text blocks, components,

everything must all be responsive.

2) Modify Images

Responsive images are essential for mobile-friendly design, including sizing and cropping. Smaller

screens might require you to crop certain images to retain their impact. For example, creating square

versions of landscape images for mobile devices.

Mozilla has an excellent article on responsive images, including considerations for designers and

developers.

3) Use Scalar Vector Graphics (SVGs)

Try to use SVGs in place of raster graphics, especially for icons and logos. Unlike raster graphics,

SVGs alter their resolution based on image paths, not pixels, so they remain the same at any size.

4) Pay Attention to Breakpoints

Each web page should have a minimum of three breakpoints (mobile, tablet, and desktop). As

mentioned above, we recommend five breakpoints for maximum device flexibility. In rare

circumstances, designers might also need to consider how websites perform on iOS vs. Android

devices.

5) Consider Card Interfaces

Card UI patterns act as content containers that are easier to move around, saving you a lot of time.

With UXPin’s Auto Layout, you can automatically resize, fit, and fill designs to make cards and other

components more responsive. UXPin’s auto-layout works on flexbox principles, making it easy for

engineers to copy/paste CSS during design handoffs.

6) Minimalism Matters

Here are three reasons why minimalism is an essential best practice for responsive web design.

1. Reducing content creates less clutter making it easier for users to read and digest.
 2. A minimalist UI design makes it easier to create consistency across multiple devices and

different screen sizes.

3. Web pages with less content, HTML, CSS, and Javascript load fast, creating a positive user

experience for your website visitors and enhancing your SEO.

7) Mobile-First Design Approach

Mobile-first design means you start with the smallest screen size and scale to your largest viewport.

Designers who start with the largest screen first often have to delete elements or make compromises as

they scale down.

Learn more about this approach in our free eBook, Responsive & Adaptive Web Design, where we

analyze ten major companies, including Facebook and Hulu.

8) Prioritize and Hide Content Appropriately

With limited space on smaller screen sizes, designers must identify which content is always visible and

what they can hide. The most common example is using a navigational drawer for the main navigation

on mobile devices.

Designers can also use progressive disclosure to hide non-critical content and information for a cleaner,

more minimalist user interface on all devices and screen sizes.

For example, most eCommerce websites hide size guides using modals, tabs, or accordions to reduce

visible content and create cleaner layouts. Shoppers can still access these guides by clicking a link.

9) Large Clickable Area for Buttons

Fitts’s Law (explained in Interaction Design Best Practices: Book I) states that buttons with large

clickable areas make it easier for user interaction. Designers must also create enough whitespace

between links and buttons, so users don’t accidentally click the wrong one–which can be frustrating!

10) Research Competitors & Industry Leaders

One of the best ways to learn and stay on top of the latest responsive web design trends is by

researching competitors and industry leaders. For example, if you’re designing an eCommerce website,
look at how major global brands Nike, Asos, H&M, and others design their stores. These brands spend

millions researching and testing best practices, so why not leverage that R&D to your advantage.

Responsive Web Design Examples

We’re going to deconstruct three globally recognized websites that do responsive web design right!

Keep in mind that some of these websites might look different from the screenshots below, as brands

continuously update their UI design. But, the principles of responsive web design are still relevant.

Smartphone View

The smartphone view is cohesive and inviting, with all the essential elements presented in a clear

visual hierarchy.

• At the top, the necessities are in the banner, with login, search, and the site’s title.

• Directly below are the most popular navigation categories (home, “US,” “world,” etc.) for easy

access. The Guardian hides additional navigation links behind the hamburger menu (following

the principle of progressive disclosure).

• The features story takes up most of the room with its enticing image, showing that it’s the most

important element.

• The user can access multiple secondary stories making headlines with a quick scroll, thus

facilitating browsing and giving users control.

No space is wasted on the mobile version, too–even the whitespace opposite the “headlines” title

features weather information, providing extra value to mobile users.

Tablet View

• Above the user interface on the tablet view, the Guardian includes an ad for business value.

• At the top, the banner remains the same, but the tablet view offers more room for additional

elements (“jobs” and the country edition), labels for the icons, and the Guardian’s subheading

below the logo.

• The hamburger menu remains, but there are more visible categories than the mobile version.
 • The most significant difference is that the tablet shows more stories and increases from a single

column to four. This creative use of the card UI pattern allows the designers to prioritize

stories using a size hierarchy.

Desktop View

The desktop view reveals the true mastery of the Guardian’s website. The site is consistent across all

three screen sizes, giving readers the same user experience no matter what device they’re using.

Each version is scroll-based, uses the same card components with similar header navigation and

branding. The only significant difference is the number of stories per screen size.
WIRE FRAMING

Basics of Sketching tools:

• Prepare your UX sketching tools. Find the most convenient place possible, a large
table with plenty of space. Take a lot of paper and prepare some pens and markers.
• Warm up. In order to get ready, we recommend drawing some lines, circles, basic
templates, and icons.
• Define your goals. Decide what you want to draw. Set your aim and decide what
story you have to tell. Determine the desired level of detailing. Decide whether you
are ready to draw a lot.
• Define your target audience. If you are doing this for yourself, you don’t need to
worry about the way your sketch looks. However, if you intend to show your
drawings to a client, make sure you allow some extra time to add more details to your
sketch.
• Set a time frame. Having decided on the amount of time you are ready to allocate for
sketching, let’s say 30 minutes, will help you focus on your work.

Now, you are all set and you can get started:

• Draw the edges. Draw the frames, a browser or phone window, a part of the
interface, and so on.
• Add the biggest or basic elements: menu, footer, main content.
• Add details. Add relevant details, but keep them simple at this stage.

Classification

Wireframes may differ depending on factors such as the desired level of detail, colors
and style, whether you are going to show them to someone, and so on.
 • Sketch: Idea Generation

These are initial sketches. Lower-level details are simply noted. A limited number of
colors is employed.

A lot of basic sketches to consider the problem from different angles and to consider
different solutions. While drawing such sketches, I am also striving to generate as many
solution variants as possible.

At this particular step, incompleteness frees my mind, which is why it is so important to

avoid getting bogged down in minutiae at this stage. My goal is to generate as many ideas as
possible and choose the most promising ones.

• Wireframe: Specification, Detailed Phase

This does not mean every single detail. Obvious things may just be noted. Moreover,
some aspects will be difficult to describe on paper.
At this step, draw all the important details but, do not yet draw wireframes
in Balsamiq. After everything is done on the paper, start drawing in Sketch.
Digital tools provide a lot more creative freedom than paper and you can easily shift
attention to minor things. For example, you can focus on “pixel polishing” instead of design.

• Visual Design Draft

This is a rarely used approach, but sometimes it can be helpful. Various visual solutions
are considered at an early stage of the project, but it may take a long time to create digital
sketches for all of them. That is why we need to draw design sketches on paper first, to
consider different options and choose a visual design direction.

• Components/Elements Breakdown
This technique useful when we already have a general idea and thinking about particular
page functionality or of the integral parts of interface components. Here to draw different
page elements, going into detail, and then draw different possible positions of the page
elements.

Elements, even the most simple ones, must have a state; a button can be pressed and it
has a hover text block that may or may not be empty. The more complex it is, the more states
it has.
CREATING WIREFLOWS :

Outlining System Flow and Branching

The wireflow is essentially a sequence of the system flow, screen after screen, with
branches and decision points. We should consider how a user addresses their task, the way
they move from screen to screen, and their overall experience of the product over time.

Wireflow, or what you are drawing and the way it is connected, could be organized according
to the following approaches:

• Sequence. A sequence is a straight journey, screen after screen. It can also be a story
with decision points; you show not only the journey but also decision points and
different paths the user can choose. You can show the structure of screen interaction.
 • State changes. Depict different screen states of some element and the conditions or
actions that cause the transitions between these states.
• Screen vs. screen elements. You can draw the whole screens or consider micro-
interactions and interactions.
• Platforms. You can consider one platform experience or multiple platforms.
• Scope. Will you depict a part of the user journey or the whole journey? One user
interaction with the system, or multiple users’ interactions?
I generally try to define the following wireflow types, depending on the organization and
practical use:

1. Mapping overall flow and high-level flow. Promptly sketch the screen shifts and
draw the general journey of your product usage. Here you can include some context
and you can optionally show some user interaction. For example, an eCommerce
shopping service is quite a long journey that may include a lot of steps: how the user
found the shop, the steps they went through to order the product, how they paid, and
so on.
2. Screen flow. This focuses on a specific functional flow through the system. It could
be a small straight sequence of screens or a journey with branching. For example, a
user uploading some photos or a video.
3. Navigation scheme. Draw your screen and the options it contains. This is not
supposed to map the journey. This step includes information that shows the options a
 user can choose, the directions users have, and various app parts. I usually create a
navigation scheme at the beginning of a project. It serves to understand how
navigation should be structured (what points should be included, how many levels are
necessary).
4. Screen states. Draw the screen or element states (an example might be a file upload
dialogue). In this case, for example, the screen will have the following states:
• Blank

• A user pulls the file in the active area

• The file is uploading

• The file is uploaded

• There is an error

BUILDING A PROTOTYPE

What is a Prototype?

Prototypes use wireframes and mockups with clickable elements to

simulate interactions and user flows.

UX teams might even create low-fidelity paper prototypes in the early design stages
to demonstrate how a user might navigate through a product.

Low-Fidelity Prototyping

UX designers use paper or digital wireframes, low-fidelity prototyping is the first step
in testing design ideas and user flows.

Low-fidelity prototypes are either hand-drawn or basic digital wireframes without

color or content. These low-tech designs allow UX teams to visualize each screen’s layout,
test navigation, and experience user flows.
 A great example of a digital low-fidelity prototype is a typical eCommerce checkout
flow. After creating a wireframe or low-fidelity mockup, UX designers will use buttons or
links to connect each screen and create a checkout flow.

The checkout flow might look something like this:

home page > product page > cart > payment/checkout > confirmation > thank you.

Using a low-fidelity prototype, UX designers can experience the checkout flow—ensuring

each screen has the correct elements and the user can navigate forwards and backward
throughout the flow.

Types of Low-Fidelity Prototypes

Paper prototypes are the fastest way for teams to create user flows and imagine interactions.
Paper prototyping is particularly beneficial during design sprints when teams have limited
time to develop flows and iterations. With paper “screens” laid out on the desk or whiteboard,
teams can visualize flows together, allowing effective collaboration and idea-sharing. None
of the elements are clickable, but paper prototypes enable teams to design screen layouts and
flows, reducing the time needed to create initial digital wireframes.

Clickable wireframes are a low-fidelity digital representation of how screens and flows.
Each frame will usually have simple lines and shapes with a prominent CTA for navigation.
Modern UX tools like UXPin enable teams to collaborate effectively with comments,
replicating the energy and excitement of a paper prototyping session.

Pros of Low-Fidelity Prototyping

Designers can make low-fidelity prototypes fast! This speed allows designers to make quick
changes during testing or meetings to visualize fresh ideas.

Low-fidelity prototypes are time efficient – inexpensive, which means teams can test
multiple variations and iterations at a low cost.

Anyone can create low-fidelity prototypes because they only use simple lines and shapes—
even non-design team members can provide valuable input.

Cons of Low-Fidelity Prototypes

Due to the basic layout and functionality, low-fidelity prototypes don’t provide accurate
results during testing. Stakeholders might also battle to visualize the final product resulting
in poor feedback or confusion.

Without color, interactions, transitions, or animations, low-fidelity prototypes can feel dull
and underwhelming.
High-Fidelity Prototyping

High-fidelity prototyping is where a product begins to take shape. Using mockups

with color and content, designers can create hi-fi prototypes that look and function as close to
the final product as possible.

Now designers can add interactions, transitions, and animations to create an

immersive user experience—making high-fidelity prototypes perfect for usability studies and
presenting to stakeholders.

If we go back to our eCommerce example, designers can include product images and
colored CTAs to entice users down a particular flow—like completing a checkout.

UX designers can also add interactions, like an overlay showing the user’s cart when
adding a new item. They might also add screen transitions to indicate a user’s movement
through the checkout flow.

Types of High-Fidelity Prototypes

A high-fidelity prototype using mockups gives users an accurate sense of how a

product will look and function. The designs will include color and content, while every link
and button should work as it would in the final product.

A high-fidelity prototype using code takes prototyping one step further. For
example, with UXPin Merge, designers can use React or Storybook components to create
prototypes that function exactly like the final product. Research teams using prototypes from
UXPin Merge get better results from usability studies and testing and cut down time to
market.

Pros of High-Fidelity Prototyping

High-fidelity prototypes provide meaningful feedback during usability

studies because participants can interact with the prototype like they would the final product.

UX designers can test interactions, animations, and transitions.

Hi-fi prototypes provide stakeholders with an accurate representation of the final
product. These prototypes could help startups get early-stage funding or pitch product
concepts to clients.

Cons of High-Fidelity Prototypes

UX designers must spend more time making changes with greater detail, so high-fidelity
prototypes cost more to produce.

Without clear objectives, UX designers can get distracted trying to find the “perfect”
interactions, animations, or transitions while creating high-fidelity prototypes. This fixation
could lead to unnecessary delays.

Which Prototype to Use and When?

Now that you have a solid foundation of high-fidelity vs. low-fidelity prototyping, we can
begin to explore which you would use and when.

When to Use Low-Fidelity Prototypes

Low-fidelity prototypes are best for the early stages of the design process. UX teams can use
paper prototypes before they even sit down at the PC. These low-tech paper designs are also
great for collaboration and exploring lots of ideas at speed—perfect for design sprints!

Digital low-fidelity prototypes help UX teams organize information architecture and user
flows before committing to mockups.

When NOT to Use Low-Fidelity Prototypes

Unless you’re testing basic user flows, low-fidelity prototypes do not provide meaningful
feedback during usability studies. Users might get distracted by the unfamiliarity of the
product and thus focus on the wrong elements.

When to Use High-Fidelity Prototypes

UX teams should only move from lo-fi to hi-fi prototyping once designers have completed
mockups to complete at least one user flow for testing.

These mockups must include clickable links and elements, color, and content—but might not
require interactions, animations, and transitions for the first round of usability studies.

High-fidelity prototypes are helpful for testing layouts and how page transitions or scrolling
might affect content and elements. UX designers can also test how interactions, animations,
and transitions affect the user experience.

High-fidelity prototypes should be the last stage of the design process before handing over to
engineering.

When NOT to Use High-Fidelity Prototypes

UX designers must not build high-fidelity prototypes before researchers have thoroughly
tested lo-fi prototypes and created mockups with content, and color.

If teams want to test design concepts fast, creating and editing high-fidelity prototypes will
severely hamper progress.

UXPin – The Best Prototyping Tool

UXPin provides design teams with powerful tools for prototyping at every stage of the design
process.

Teams can preview prototypes in the browser or scan a QR code to preview prototypes on
any mobile device using UXPin Mirror—great for getting feedback from usability
participants and stakeholders using multiple devices.

Lo-Fi Prototyping in UXPin

UX designers can design beautiful wireframes quickly with UXPin’s pre-built form fields and
icons—create buttons, input fields, dropdowns, radios, checkboxes, icons, and more with just
a few clicks.

With your wireframes complete, you can create basic lo-fi navigation between pages with
tap/click interactions. Achieve vertical or horizontal scrolling with a single click.

With your lo-fi prototypes complete, you can preview your design in the browser or test on
any device using UXPin Mirror.

Provide feedback and assign changes to designers using UXPin’s comments feature.
Designers can create private notes for themselves and click resolve once complete.

Hi-Fi Prototyping in UXPin

With lo-fi prototyping complete, UX teams can begin high-fidelity prototyping in UXPin.

If you have ever worked with Figma, Adobe XD, and other popular design tools, then
you’ll LOVE the added functionality UXPin provides—enabling you to take your high-
fidelity prototyping to the next level and beyond!

Create reusable components to maintain consistency and build page layouts fast! If
you need to make changes, simply edit the master, and the changes copy to all child
components.

UXPin’s variables feature allows you to store data from user inputs and take actions
based on the data provided. For example, on a signup page, the user enters their name. On the
next page, you can use the name (let’s say John) to personalize the experience

You might also want to store dummy credit card details so users can get a clearer
sense of how the product will capture and display credit card information at checkout.
BUILDING A HIGH FIDELITY MOCKUPS

Mockups are static visual screens that resemble the end product. They concentrate on
visual aspects such as colours and typography which play a key role in giving a realistic
impression of how the product will look and function.

For building mockups, you need to follow the process below. And a necessary prerequisite is
building a mood board

Step1: Select a tool

There are a number of tools such as Figma, Sketch, Adobe XD, UXPin etc that can do
the job. Select one which you are comfortable with.

Step 2: Define the style guide

You should build a style guide that defines the elements, components and
implementation rules that you could play within your designs. You should define the style
guide by referring back to the mood board of the product. All the basic specifications and
rules such as foundation and components are documented in this phase. Refer to Style Guide
for more details.

Step 3: Setup the Appropriate Grid System and layouts

Start the mockups by setting the grids. The grid system chosen should be based on the
content density and the ratios of the sections in your product by referring to the wireframes
you made. Grids act as the outlines that create the base structure for the design, and layouts
help to arrange the elements such as text, design patterns, icons, etc and manage the
proportions between UI elements, such as spacing and margins.

Step 4: Build the screens

Refer to the wireframe, its goal and the problems it is solving before starting the
visuals. Document the visual problems you need to solve and start doing visual design
variations for each problem. Now also look through the standard design patterns while doing
the variations or while iterating on the visuals. There are plenty of opportunities to be creative
and explore different ways of creating the screens. Finalize the variation based on the pros
and cons of it and move forward with adding more details. Name your screens and elements
properly using a standard naming convention so that you can easily find them when needed.
It is recommended that one should use the symbols/smart elements effectively to ensure a
consistent and structured design.

Step 5: Arranging the elements

Now once the components are built, think about the hierarchies and sectioning that is
required by using Gestalt principles. Ensure that the visual design principles are applied for
each section appropriately. These principles applied appropriately would bring visual appeal
and ease of use. Check for alignments and spacings and consistency across the system.

Step 6: UI states

Once you are done with arrangement, you are done with most of your work. Now
identify the states that are required for each component and page. Go through the list of UI
states and verify whether every required state is planned and mocked up either in style guide
or in screens. This helps the design to scale for multiple use cases.

Step 7: Export, Review and Hand-off

Now your mockups are ready in your tool, but most of the visual design tools are not
web apps, so if your design tool is not a web app, then export them onto collaborative tools
like Invision or Zeplin, where you could present and take feedback from the product leaders
on each aspect of design easily and also help the dev team in inspecting the design elements.

Add notes wherever it requires for further understanding of functionality and states so that
product leads and developers could refer to them in future without your presence.

Always export the screens in svg format to help the developers inspect the design elements
easily.
 This example is of a mockup of a food ordering application.

Next steps after mockups

• You can also make it a high fidelity interactive prototype by giving interactions that will
make your mockups more effective in nature.

• Go through the flows and problems and identify the areas that need micro-interactions,
as they bring liveliness to the product.

Tips / Best Practices

1. Pick the right mockup tool that works best for you and your team. We recommend
Sketch as it is one of the best tools customized for UI design.

2. Always define the grids and layouts before starting the components and screens.

3. Be aware of common design conventions and design patterns that are used in similar
contexts.

4. Establish the style guide that is aligned to the mood board before starting with screens.

5. Start designing unique screens first so that you can reuse them for sub-screens.

6. Add realistic content on the screen, avoid putting lorem ipsum as the content is an
important element to finalize.

7. Cross-check the intent with the wireframes and ensure that visuals are meeting all the
objectives.

8. Name your screens and components while creation itself, so that you can avoid rework
on naming.

9. Maintain a states tracker which helps you to ensure all the required states are designed.

10. Have discussions with stakeholders to finalize on the designs.

Checklist

1. Build a mood board before starting with visuals.

2. Build a style guide before starting with the screens.

3. Check for heuristic violations after finishing a flow.

4. Apply naming conventions to every element, component, pattern and screen.

5. Check if the layers are exported well onto the third party tools (Invision, zeplin, etc)

6. Review with your team and developers.

DESIGNING EFFICIENTLY WITH TOOLS

Mockplus allows designers to create highly interactive prototypes fast regardless of

the experience you have in designing and the fidelity you require.

It helps you to design smarter and faster with features like scroll box, pop up panel,
stack panel, and others.

The tool makes it easy for you to turn ideas into highly interactive prototypes and then
test them early before creating the final design. With it, you can create functional prototypes
looking like the real design you want to create in the long end.

Like most of the other high fidelity prototype tools, Mockplus allows for on-line
collaboration to help streamline the entire designing process. With its built-in elements and
icons, the tool is easy to use, even if this is your first time creating prototypes.
 The tool also makes it easy for you to customize UI libraries and customize them
fully. With its simple interface, designers can check specs, inspect prototypes and get all the
needed assets.

Pros

• An all-inclusive high fidelity prototype software supporting prototyping for several

platforms such as website, mobile apps and desktop apps.
• A wide range of drag and drop interactive functions available. You can set various
interaction states fast.
• Rich in design icons and components for easy and fast designing.

Cons

• Team collaboration requires improvement.

• Responsive design features missing.

INTERACTION PATTERNS

UX design patterns are repeatable solutions to recurring design problems. If you are
designing a new website, or the wireframes for that site, you will want to figure out the
easiest way that users can interact with your site.

Some basic things we ask users to do on nearly all sites are: sign up, sign in, log in
and log out. Each of us use numerous web and mobile applications on a daily basis and I
think we can all agree that re-entering our name, email, password and other information
repeatedly is tiresome. Sometimes we can use a design pattern to solve a common problem
like this.

The problem: Users understandably are short on time and patience from having to complete
this rote task repeatedly to access their information or get their work accomplished.

The solution: Finding ways to eliminate or at least diminish this pain point for them.

Design patterns: Although each designer could design their own solution to this problem,
several useful solutions have already been designed and proven to be effective.
 For example, some sites allow users to sign in using social media, others don’t ask
users to sign in until they really need to, and others save their users’ data and pre-populate the
sign in fields (with the permission of their users).

To see an example of a design pattern check out UI Pattern’s solution for allowing users to
create an account after they’ve had a chance to try it out. Or check out these three interaction
design examples.

Are UX patterns the same as UI patterns?

Now, as you’ve likely noticed, job titles in UX are many and varied. This is because
the genesis of user experience design only goes back about 100 years. In fact, the field itself
didn’t really exist until roughly the 1990s when Don Norman all but invented it, giving
himself the title: User Experience Architect. As such, some of the job titles and terminology
have yet to be standardized and some of the lingo can be a tad confusing.

Just like it sounds, a pattern library is a collection of information, resources and

examples of design patterns usually “housed” on a server and accessed through a website.
I.E. Websites with examples of problem solutions. The best one I’ve seen so far is Mail
Chimp’s.

Why are UX patterns valuable?

People naturally look for patterns. When we arrive on a web or mobile site, we often
think we already know where to click. This is based on our prior experience. Sometimes
we’re right and sometimes, to our chagrin, we are wrong…and we find ourselves fishing
around for next steps.

When sites incorporate known patterns, users often have an easier time getting where
they’re going or accomplishing their goals. Some would argue that if we all use design
patterns our sites will become cookie-cutter-like.

However, most designers agree that there are significant user benefits to following
previously established patterns…and then tweaking them a tiny bit when benefit can be
derived for our users.
 Designers also benefit from using design patterns. Patterns save us from having to
constantly reinvent the wheel. Engineers have known this for a long time. They now have
large repositories of open-source code like Github that other engineers can use whenever they
like, or that they themselves can recycle.

Rewriting similar code from scratch takes a lot longer than copying, pasting and
tweaking. Likewise, designers who use design patterns can free up time for creating and
tweaking, which is really the fun part, no?

What is the best way to use UX patterns as a new designer?

As a new designer, I find there is so much to learn that it’s hard to know where to
start. For myself, I find that picking just a couple of resources and then reading them
thoroughly has helped me to begin to get a feel for a few of the common design patterns.

Similarly, when I was designing my first prototypes, I didn’t really understand what
the patterns were for. I found all the resources to be overwhelming rather than helpful. I
would say that when you are imagining the steps (or wireframes) for a particular interaction,
first make a list of the things you normally dislike about these sorts of interactions.

Then, make a similar list about the times when you thought the process was more
bearable or even pleasant (if you can remember; if it was a good interaction, you may not
have even noticed how they got you from point A to B). The reasoning behind these first two
steps is to be able to weed out the well-designed patterns from the not-so-well-designed
patterns out there as you do your research.

Lastly, I would look for established design patterns for the interaction and incorporate
that into you design. And of course, remember, simpler is better.

According to the website by the same name, “a dark pattern is a user interface that has
been carefully crafted to trick users into doing things, such as buying insurance with their
purchase or signing up for recurring bills.”

This pattern library is curated by four user experience designers. They came together
to document and make public common ethically questionable user interfaces both to make the
public more aware and in the hope of urging the companies that use these bad practices to
change their ways.

They share some of the purposely poorly designed techniques companies use
like forced disclosure, friend spam, and sneak into basket to take advantage of users.
Incidentally, you know those sites that don’t let you unsubscribe? They call those Roach
Motels.

Where can I find UX pattern libraries?

If you do a Google search on UX patterns, you’ll find a plethora of resources. Here

are a few of my favourites.

UI Patterns – Clear, simple problems and solutions with wireframe examples and
explanations.

Little Big Details – They showcase design inspiration patterns that they’ve found
useful. They encourage anyone to make a submission to the library if they would like to. You
can also find them on Twitter

Design Details – Brian Lovin reviews what he considers to be some of the best digital
products. His focus is mostly on visual design and interactions. He also hosts a podcast called
Design Details which he hosts with Brin Jackson. They interview a designer on every
episode…worth taking a peek.

Final thoughts

We’ve talked about what UX patterns are and how and why to use them. Remember…

1. It’s not boring to use them. Rather, they make using your application easier for
your users. And, you can always tweak them (the patterns) if you have an explainable
and justifiable reason backed up by user research.

2. Most of the best patterns are surprisingly simple. Stick with these and free up
more time and space in your brain to dream up novel micro-interactions or tiny
tweaks.
 3. Start slow. There are a lot of patterns to learn. Choose a few sites. Then study them in
depth so you can more easily grasp the big picture in the beginning, or see the larger
patterns or commonalities within sets of smaller interactions.

CONDUCTING USABILITY TESTS

Usability testing (also called usability studies) tests user interfaces and flows with
real users.

A UX researcher (moderator or facilitator) will ask a participant to complete a series

of tasks (usually on a digital product prototype) while observing their behaviour and actions.

The moderator might ask the participant to verbalize their thoughts and actions so UX
researchers can understand how the person thinks and feels as they use the prototype.

Why do UX Teams Conduct Usability Tests?

Usability testing provides UX teams with valuable feedback and user insights, including:

• Validating design concepts to solve users’ problems

• Exposing usability problems to fix

• Discovering opportunities for improvement

• Learn more about the users

Usability testing is an iterative process of testing, exposing issues/learning about the user,
making adjustments, and retesting.

The ultimate goal of the usability testing process is to fix and improve prototypes as much
as possible before the design handoff, where engineers start the development process.

Usability vs User Experience Testing

• Usability testing – tests the product’s usability and performance—user interfaces,

navigation, micro interactions, etc.
 • User experience testing – tests the user’s enjoyment and satisfaction while using a
digital product.

While we define these terms differently, UX researchers test usability and user experience at
the same time.

For example, one UX researcher might observe how the participant completes a task
during a usability study (usability testing), while another researcher studies the user’s actions
and behaviour (user experience testing).

These are two important metrics to consider during product testing. If a user can
complete a task, UX designers might see this as a job well done. But what if the user was
frustrated during the process? They’ll likely switch to a competing product with a better user
experience.

Types of Usability Testing

There are two primary usability testing methods:

• Moderated tests

• Unmoderated tests

UX teams can apply both of these methods to remote and usability lab (face-to-face) testing.

Moderated

During a moderated usability study, the facilitator interacts with the participant, asking them
to complete tasks while observing and asking questions.

UX teams can conduct usability studies in a lab or remotely using Zoom, Skype, or purpose-
built testing tools.

Advantages of moderated usability testing:

• Moderator ensures the participant understands and completes the tasks correctly
 • Moderator can engage with the participant, asking questions about their actions,
responses, and behavior

• The above points provide UX teams with accurate, meaningful feedback

Disadvantages of moderated usability testing:

• Requires lots of planning to find a venue, participants, align with team schedules,
organize equipment, etc.

• Requires more resources, increasing testing costs

• Limited participants due to cost and time constraints

Unmoderated

During an unmoderated usability study, the facilitator is absent but provides the participant
with instructions to complete a series of tasks.

The participant might complete these tasks in a lab environment, the field (where the users
will typically use the product), or remotely.

Advantages of unmoderated usability testing:

• Researchers can test multiple participants at the same time

• Fewer resources make unmoderated testing significantly cheaper

Disadvantages of unmoderated usability testing:

• Relies on participants understanding tasks and instructions without guidance—might

lead to uncompleted tasks or inconsistent test results

Usability Testing Methods

Card Sorting

Card sorting is an early-stage usability method for testing element hierarchy and
establishing information architecture.
The moderator presents a group of topics or categories for the participant to sort—usually by
importance or group by relevance.

Paper Prototyping

Paper prototyping is another early-stage usability method where UX teams test user
flows and information architecture.

UX teams rarely test paper prototypes with participants because usability tests are
expensive, and paper prototyping doesn’t provide meaningful user feedback.

Still, paper prototypes can provide some insights into the user’s navigational expectations.

Digital Low-Fidelity Prototype Testing

Digital low-fidelity prototypes use a series of wireframes to test user flows and simple
navigation. Like paper prototypes, low-fidelity prototyping provides limited feedback about
the user experience.

High-Fidelity Prototype Testing

Testing high-fidelity prototypes allows UX teams to get accurate, meaningful

feedback. Participants use a fully functioning replica of the final product to complete tasks.

UXPin Merge lets designers connect design elements with interactive components
that also devs use to create high-fidelity prototypes with final product functionality. By
designing with code components, participants can interact with a UXPin prototype better than
any other design tool.

Click Tracking

Click tracking examines where users click or tap on a prototype. UX designers can
use this information to see where participants most frequently click (or tap on mobile).

Click tracking can help validate link structure or whether participants can easily identify
buttons and CTAs.
Eye Tracking

UX researchers use eye-tracking devices to learn how participants explore user

interfaces or what elements catch the eye first. These insights can help UX designers decide
how to prioritize screen layouts or where to place CTAs.

How to Conduct a Successful Usability Test in 6 Easy Steps

It’s crucial to have a plan and objectives for usability testing. Without a plan and goals, UX
researchers won’t know what to test or the value of the test results.

We’ve broken usability testing into six easy steps:

1. Define Goals

2. Choose the Test

3. Create User Tasks

4. Write a Research Plan

5. Conduct the Test

6. Draft a Report

Step 1 – Define Goals

The first step is to define the usability study’s goals. These goals might ask broad or specific
questions, for example:

• Broad: Which checkout method can user’s complete the fastest?

• Specific: Does animating a button increase clicks?

It’s important to prioritize goals and limit testing to a specific question you want to answer—
like testing an eCommerce checkout flow or completing a new user sign-up process.

It’s tempting to make the most of usability test sessions and get as much feedback as
possible, but this could lead to user fatigue and inaccurate results.
Step 2 – Choose the Correct Test

Once you know what you want to test, you can choose a suitable usability testing method.

In our free eBook, The Guide to Usability Testing, we outline 30 different usability testing
methods, which to apply, and when.

We divide usability tests into four categories:

• Scripted — These tests analyze the user’s product interaction based on set
instructions, with specific goals and individual elements. (tree testing, hallway
usability tests, benchmark testing)

• Decontextualized — Ideal for preliminary user testing and user research (see the
difference between user testing and usability testing). These tests don’t involve the
product necessarily, but analyze generalized and theoretical topics, targeting idea
generation and broad opinions. (user interviews, surveys, card sorting)

• Natural (or near-natural) — Researchers analyze users in the environment where

they’ll use the product most often. These tests examine how users behave, pinpointing
their feelings with accuracy, at the cost of control. (field and diary studies, A/B
testing, first-click testing, beta testing)

• Hybrid — These experimental tests forego traditional methods to take a distinctive

look at the user’s mentality. (participatory design, quick exposure memory testing,
adjective cards)

Once you select the testing method(s), you can share them with the team, summarizing your
goals and tactics in a usability planning document.

Step 3 – Create Your User Tasks

Everything you present to participants during usability testing, including questions and
phrasing, impacts their response.

Usability tasks are either open or closed, and your tests should incorporate a healthy mix of
both:
 • Closed – A closed task offers little room for interpretation—the user is given a
question with clearly defined success or failure (“Find a venue that can seat up to 12
people”). Closed tasks produce quantitative and accurate test results.

• Open – By contrast, participants can complete open tasks in several ways. These are
“sandbox” style tasks: “Your friends are talking about Optimal Workshop, but you’ve
never used it before. Find out how it works.” Open tasks produce qualitative and
sometimes unexpected results.

Moderators must be mindful of how they phrase questions to avoid bias.

For example, you want to know how a user will find a gift for their mother on an
eCommerce store. If you phase the question as “can you search for a mother’s day gift in our
store?” it might suggest that the participant use the search function instead of following their
natural intuition. This question also sounds more like an instruction than a question.

A better way to phrase this question might be, “how would you find a mother’s day gift in
our store?”

Step 4 – Write a Usability Research Plan Document

A usability research plan document should cover seven sections:

• Background — In a single paragraph, describe the reasons and events leading to the
user research.

• Goals — In bullet points, summarize what the study hopes to accomplish. Phrase the
goals objectively and concisely. Instead of “Test how users like our new checkout
process,” write “Test how the new checkout process affects conversions for first-time
users.”

• Questions — List out around 5-7 questions you’d like the study to answer

• Tactics — Where, when, and how UX researchers will conduct tests. Explain why
you’ve chosen this particular test.

• Participants — Describe the type of user you are studying, including their behavioral
characteristics. You could even attach personas for more context.
 • Timeline — Recruitment start dates, test start and end dates/times, and when
stakeholders can expect results.

• Test Script — Include a script if you have one prepared.

Encourage suggestions and feedback from stakeholders to ensure everyone is on board, and
you haven’t missed anything.

Step 5 – Conduct the Test

Here are some times for conducting usability testing:

• Make participants comfortable — Remind participants that you are testing the
product, not their capabilities. Creating a script beforehand will ensure the
moderator’s instructions, phasing, and tone are consistent.

• Don’t interfere — This avoids bias and may reveal user behaviour insights you hadn’t
predicted. Meaningful insights come from participants interacting with the product in
ways you never expected. Observe natural human behaviour and let them inspire
feature improvements.

• Record the session — Teams may need to review usability studies at a later point.

• Collaborate — A Rainbow Spreadsheet allows everyone to record their interpretations

of each usability test. UX researchers can compare notes to see what they observed in
common and any unique observations. Rainbow Spreadsheets worked well to
summarize results for stakeholders during our team’s Yelp redesign exercise.
(Source: Rainbow Spreadsheets by Tomer Sharon)
Step 6 – Draft a Report

A usability study report is an effective way to summarize results to share with stakeholders.

Here are some tips for compiling a usability report:

• Don’t be vague – “Users couldn’t buy the right product” isn’t very helpful because it
doesn’t explain why. Explain the specific issue from a UX perspective—“users
couldn’t buy the right product because they couldn’t find the search bar.”
 • Prioritize issues – Categorizing and prioritizing usability issues will help design teams
know where to start. We recommend categorizing the report (e.g., Navigation Issues,
Layout Issues, etc.) and using color codes for priorities (Low/Medium/High).

• Include recommendations – Lastly, you’ll want to include the team’s

recommendations to fix usability issues, so stakeholders know there is a solution.

Other considerations for a usability report include:

• Formal usability report

• Supporting charts, graphs, and figures

• Previous testing documentation

• Videos or audio tracks of the test

OTHER EVALUATIVE USER RESEARCH METHODS

• Evaluative research is all about validating your concepts, testing your prototypes, and
knowing whether or not your project is on the right track.

• UX researchers use evaluative methods—which include both qualitative and

quantitative methods—to answer questions about conceptual fit and the usability of a
product.

• The data collected through this type of research helps validate design direction,
informs changes, and enables product teams to execute on user feedback.

Basic Research methods :

• Qualitative usability testing, a popular UXR method in which participants think

aloud as they interact with a prototype or product.

• Preference testing. This method is used to find out which version of a design people
like better.

• Surveys, a deceptively simple process for collecting data from respondents through a
questionnaire.
 • Tree testing, a technique for testing your information architecture (IA). Tree testing
often follows card sorting.

• First click testing, which is just what it sounds like. First click studies help assess the
usability of a product by whether users are able to efficiently complete a task.

• Task analysis. This method, which is often paired with other methods, helps you
understand user goals and the steps they take to achieve them.

• A/B testing, for when you need to know which version of your product performs
better in a test.

Other Evaluative User Research Methods

• We previously mentioned the primary classification of methods into quantitative and

qualitative which can further be divided into attitudinal, and behavioral. Now let’s
take a look at the most frequently used methods in user experience research.

(i) Participatory Design:

• This method facilitates brainstorming in a very unique way by being heavily user-
centered. Anyone from users to company employees can contribute in a meaningful
way by expressing their ideas and suggesting creative solutions.

• Use-case scenario: When you are designing a product that relies on offering a heavy
personalized experience and wish to reflect that in both user experience and interface
design.
 (ii) Eyetracking:

Used to find out where exactly are your users looking during performing tasks and interacting
with your product.

Use-case scenario: Eyetracking will give you knowledge on how users interact with your
website or application. It will help you find any issues and optimize your user interface
design.

SYNTHESIZING TEST FINDINGS

Step 1: Identify the findings from each test

Use sticky notes (or a spreadsheet) to extract quotes that speak to pain points or
general confusion (we’ll call these “findings”) encountered during each test. It’s very likely
that you’ll see repeats, that’s expected in fact, it’s what you’re after.

In early tests I had two approaches to the class supplies list page and tested both. The
user would start on the landing page, enter search criteria, select their class from the search
results and get to one of two class supplies list pages afterwards I’d show them the second
one and get comparative feedback. Here’s what the two pages looked like:
Received a notable amount of feedback from all test respondents, which would look like a

word document with a lot of quotes and raw notes — transcribed from my interviews.

Step 2: Group your findings into themes

Now put all of your findings about similar topics together, creating clusters of
findings. You may find that as you cluster your findings that sub-clusters immerge, or that

you may want to re-cluster them in a different way, that’s ok, that’s why we’ve used sticky
notes! Once you are happy with your clusters, name them, we’ll call these “themes”.

In my case, these were the main themes I created:

1. Navigation

2. “Nice to have” functionality

3. Instruction / copy

4. Add to cart widget

5. Product information and functionality

Step 3: Consolidate finding and convert them into insights

Now that your themes are defined, you should see that the same pain points, frustrations and
confusion happen over and over again. Combine all findings that are about a single thing into
one and denote the issue (we’ll call this an “insight”).

Using School Tools as my lens, here are some sample insights that were derived from my
tests:

1. Ability to Share my list

2. The word “Bundle” is confusing

3. Clarity on the difference between Suggested & Optional products

4. Where can schools go for information?

5. Confusion around number of packages / bundles

6. What’s in my cart?

7. How do I search for / add products that aren’t displayed?

As you can see, some of these are simple labeling issues (#3), some are about desired
functionality that can likely be added easily (#1, #4, #6) and some are more significant and
general confusion that will be harder to solve (#2, #5, #7).

Step 4: Identify the solutions for each insight

Now it’s time to start thinking about how to solve the problems that have come to
light. Review each insight and list possible solutions. In some cases, you may not be able to
visualize the fix and may need to go back to the drawing board. Much like how you designed
the original approach, you may need to sketch, wireframe and test any new approaches
depending on their complexity.
Back to the School Tools test results…
“Ability to share my list” solutions:
1. Add share link to the top of the page
2. Add share icon to top of page
3. Add “share this list” widget to bottom of page
“The word bundle is confusing” solutions:
4. Remove the concept of a “bundle” and focus on product importance only (Required,
Suggested and Optional)
“Clarity on the difference between Suggested & Optional products” solutions:
5. Copydeck updates required
6. Add tooltip on mouse hover or mouse click of the “importance badge” with description
7. Decide if both types are needed
“Where can schools go for information?” solutions:
8. Add “Schools” landing page to navigation, this will be a static content page with program
benefits
“Confusion around number of packages / bundles” solutions:
9. Associate package quantity with “Summary”, instead of “Add to cart” button in “Add to
cart widget”
10. Add “How many packages do you need?” prompt to the top of the page
11. Consider moving this functionality later in the user experience (not on this page)
“What’s in my cart?” solutions:
12. Add staples.ca cart icon and # of items in cart to header
“How do I search for / add products that aren’t displayed?” solutions:
13. Use staples.ca header
14. Inject staples.ca search box
15. Consider this functionality to be available later in the user experience
You may have noted that some insights only have a single solution proposal, that’s alright,
some problems are simpler to solve than others. You may have also noted that all solutions
are numbered, and the numbers don’t reset with each insight. This is deliberate, see the next
step.

Step 5: Map out the solutions on a time vs value matrix

Of the solutions that are explored in step 4, you’ll likely be able to make some assumptions
on the perceived value of each one to the user (and the business), and how much time each
one will take to design (and build!). Some solutions that involve going back to the drawing
may turn out better, but they may equally not yield an improvement, it’s hard to say. The
simple truth is that you may not have time to design the ideal solution for everything now —
also, some things are just better solved only after you have real users using your product.
Additionally, what you perceive to yield the most value might take A LOT more time to fix.
So, you need to decide which solutions to attempt, and which to defer or ignore. You can do
it!

This is how I perceived the time to design vs value matrix for the solutions I identified in step
4. Anything that fell in the top right I focused on (fast and high value). If I had time for items
in the top left (fast, but low value) or bottom right (lengthy, but high value), I’d choose to
tackle them next. Anything in the bottom left was unlikely to get tackled (lengthy, and
minimal value) — luckily I had very few of these!

PROTOTYPE ITERATION

Iterative prototyping is a method of creating and testing a product in small,

incremental stages. It allows developers to quickly gather feedback, make adjustments, and
improve the overall user experience.
 Prototyping is the technique of creating preliminary models or simulations of a
product that show its design intent and functionality. Prototypes can have different levels of
fidelity, or how closely they resemble the final product.

For example, a low-fidelity prototype can be a sketch or a wireframe that shows the
basic layout and structure of the product, while a high-fidelity prototype can be a fully
interactive and realistic representation of the product that includes the visual design and
content.

Iteration is the technique of testing and refining the prototypes based on user feedback
and evaluation. Iteration allows you to identify and solve problems, improve usability, and
enhance user satisfaction. Iteration can occur at any stage of the design process, from the
initial concept to the final product.

Why are UI/UX prototyping and iteration important?

Prototyping and iteration are important for UI/UX design because they help you to:

• Explore different ideas and solutions in a fast and cost-effective way. Prototyping allows
you to experiment with various features, interactions, layouts, and styles without
investing too much time and money in development. Prototyping also helps you to
communicate your ideas more clearly to stakeholders, developers, and users.

• Validate your assumptions and hypotheses with real users. Prototyping enables you to
test your designs with actual users in realistic scenarios and contexts. This way, you can
gather valuable feedback and insights on how users perceive, understand, and use your
product. Prototyping also helps you to measure the effectiveness of your designs in terms
of user goals, needs, preferences, and expectations.

• Improve your designs based on user feedback and evaluation. Iteration allows you to
incorporate user feedback into your designs and make changes accordingly. Iteration
also helps you to refine your designs by eliminating unnecessary or confusing elements,
adding missing or desired features, enhancing usability and accessibility, and optimizing
performance and aesthetics.

How to create UI/UX prototypes and iterations?

There is no one-size-fits-all approach to creating UI/UX prototypes and iterations. However,

there are some general steps that you can follow:

• Define the problem and the goal. Before creating any prototype, you should have a clear
understanding of what problem you are trying to solve and what goal you are trying to
 achieve with your design. This will help you to focus on the most important aspects of
the product and avoid unnecessary distractions.

• Choose the appropriate level of fidelity. Depending on the purpose, scope, and stage of
the design process, you should choose the appropriate level of fidelity for your
prototypes. For example, low-fidelity prototypes are suitable for exploring different
concepts and ideas, while high-fidelity prototypes are suitable for testing specific
features and interactions.

• Select the appropriate tools and methods. There are various tools and methods available
for creating UI/UX prototypes, such as sketching, wireframing, mockuping, prototyping
software, HTML/CSS/JavaScript coding, etc. You should select the tools and methods
that best suit your needs, skills, budget, and time constraints.

• Test the prototypes with users. Testing is an essential part of prototyping and iteration.
You should test your prototypes with real or representative users in realistic or simulated
environments. Testing can be done in various ways, such as interviews, surveys,
observations, usability tests, A/B tests, etc. Testing should aim to collect both
quantitative (e.g., metrics) and qualitative (e.g., feedback) data from users.

• Analyze the results and iterate. After testing the prototypes with users, you should
analyze the results and identify the strengths and weaknesses of your designs. You
should also prioritize the issues that need to be addressed and decide on the actions that
need to be taken. Based on the analysis, you should iterate your prototypes by making
changes or creating new versions until you reach a satisfactory solution.