UNIT 4: 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:
Sketching is a creative process, and while there are no strict rules, there are
some principles to keep in mind:

Start Light: Begin with light, loose lines that are easy to erase or adjust.

Basic Shapes: Use basic shapes like circles, squares, and triangles as building
blocks for more complex forms.

Proportions: Pay attention to proportions and relationships between objects in

your sketch.

Perspective: Understand basic perspective principles to give your sketch depth

and dimension.

Details Last: Focus on adding details after you've established the overall
composition.

Shading: Use shading to create depth and define light sources.

Practice: Regular practice improves your sketching skills over time.

Experiment: Don't be afraid to experiment with different techniques and styles.

Reference: Use references when needed to better understand the subject you're
sketching.

Critique: Be open to critique and feedback to improve your work.

 How can you Enhance UX Sketching and Prototyping?

 Start the good old way- with a pen and paper.

 Keep it simple, specific and detail-oriented.
 Use a style guide for consistency.
 Use comments for clarity.
 Create interactive prototypes for clear communication.
 Use visual design cues.
 Test and iterate- over and over.
Sketching Red Routes:
What are red routes in UX design?
Red routes are a matrix which helps prioritise your content and functionality
based on usefulness to the most users. They can be particularly helpful when
you have 2 equally distinct user groups. It's quite a simple exercise that you can
do internally with data on an existing app or with user interviews.
Identifying Red Routes

 Critical

 End-to-end tasks with multiple steps or actions

 Frequently utilised

 Built for scale

 Key value drivers

 Objectively successful

 Tied to critical product metrics

Responsive Design:
What is a responsive wireframe?
Responsive wireframes are sets of wireframes with different layouts for the
same design that: Show how web content adapts to different grid widths. Help
define the page structure. Show how content works with different layouts.

Wireframing:
Wireframing is a process where designers draw overviews of interactive
products to establish the structure and flow of possible design solutions. These
outlines reflect user and business needs. Paper or software-rendered wireframes
help teams and stakeholders ideate toward optimal, user-focused prototypes and
products.
Creating Wireflows:
Wireflow:
Wireflows are a visual representation of the screens in an app, alongside their user
interactions. They can vary from very low fidelity (see example below) to high
fidelity screens with arrows linking them. Wireflows provide an overview of all the
interactions on a screen, where they lead, and any decision points:
 Wireflow creation process:

1. Describe the need and problem in a user story. For example, user signup —
setting the username, email, and password .
2. Identify the key screens in the interface. ...
3. Connect the screens with arrows in the order users would move forward.

Building a Prototype:
Building a prototype is an essential step in the product development
process. A prototype is a preliminary model or version of a product
that allows you to test and validate your ideas, gather feedback, and
identify potential issues before moving on to full-scale production.
Here are the key steps to building a prototype:
Define Your Goals:
 Clearly define the purpose and objectives of your prototype.
 Determine what you want to learn or validate through the
prototype.

Conceptualize and Design:

 Create a rough sketch or design of your product. This can be a
simple hand-drawn sketch or a more detailed digital design.
 Decide on the materials and technologies you'll use for the
prototype.

Choose the Prototype Type:

There are different types of prototypes, such as:
 Proof-of-Concept (PoC): To test the core concept and feasibility.
 Wireframe Prototype: To focus on user interface and layout.
 Functional Prototype: To demonstrate the functionality of the
product.
 Visual Prototype: To show the visual design and aesthetics.

Create a Bill of Materials (BOM):

 List all the materials and components you'll need to build the
prototype.
  Source or purchase these materials.

Build the Prototype:

 Assemble the materials and components based on your design.
 You can build the prototype yourself or work with a team or a
prototyping service.
 Ensure that the prototype represents the key features and
functions of the final product.

Test and Evaluate:

 Test the prototype to ensure it functions as intended.
 Gather feedback from team members, stakeholders, or potential
users.
 Identify and document any issues or areas for improvement.

Iterate and Refine:

 Based on the feedback and test results, make necessary changes
and improvements to the prototype.
 Repeat the testing and evaluation process as needed.

Document Your Prototype:

 Maintain detailed records of the prototype's design, materials,
and any changes made.
 This documentation will be valuable for future iterations or
when scaling up for production.

Present and Share:

 Share your prototype with investors, stakeholders, or potential
customers to gather more feedback and generate interest.

Plan for Next Steps:

 Determine whether the prototype meets your goals and if it's

ready to move to the next stage of development.
  If the prototype is successful, begin planning for mass
production, marketing, and distribution.

Prototyping Tools:
 Figma
 InVision Studio
 Adobe XD
 WebFlow
 Axure RP
 Origami Studio

Building High-Fidelity Mockups:

What are low-fidelity wireframes?

Low-fi wireframes act as the initial blueprints for web pages and app
screens – a rough approximation of the final product. They’re
especially useful in the early stages of product development because
they put the focus on pure functionality, not aesthetics.

Advantages of Low-Fidelity Wireframes:

 Capturing ideas
 Foundational work
 Painless iteration
  Streamlined workflow

Disadvantages of Low-Fidelity Wireframes:

 Low visual impact
 Insufficient for tests

What are high fidelity wireframes?

A mockup becomes a high-fidelity prototype once interactions,
transitions, or animations are added. With clickable menus and
buttons, hi-fi prototypes provide a visceral sense of the user
experience. This allows teams to tweak usability before final design
approvals, testing, and hand-off to the developers.
Advantages of High-Fidelity Wireframes:

 Inspire enthusiasm
 Refined feedback
 Immersive experience
 Accurate testing
Disadvantages of High-Fidelity Wireframes:

 Resource intensive
 Revision resistant
Designing Efficiently with Tools:
Designing efficiently with tools and prototypes is a critical aspect of the UI/UX
design process. Using the right tools can help streamline your design workflow
and create more effective prototypes. Here are some tips on how to design
efficiently with the help of design tools and prototypes:

1.Select the Right Design Tools:

Choose design tools that align with your project requirements and team
collaboration needs. Popular tools for UI/UX design include Figma, Sketch,
Adobe XD, and InVision.

2.Wireframing and Low-Fidelity Prototyping:

Start with low-fidelity wireframes or prototypes to quickly explore and

communicate design concepts without getting bogged down by details.

3.Design System and UI Kits:

Create or use design systems and UI kits to maintain consistency in your

designs. These pre-designed components and styles can save you time and effort.

4.Responsive Design Features:

Utilize responsive design features in your tools to ensure your designs adapt to
various screen sizes and orientations.

5.Plugins and Integrations:

Take advantage of plugins and integrations available in your design tools to

extend functionality and automate repetitive tasks.

Art of Efficient Prototype:

Interaction Patterns:
Interaction design patterns are design patterns applied in the context
human-computer interaction, describing common designs for
graphical user interfaces. A design pattern is a formal way of
documenting a solution to a common design problem.
Ietration Design Patterns:
 Conducting Usability Tests:
How do you conduct a usability test?
A typical usability test will involve these four steps:
1. Find representative users from the target population. ...
2. Ask the users to perform representative tasks on the website. ...
3. Observe what the users do. ...
4. Summarize your results.

Other Evaluative User Research Methods:

5 Key evaluative research methods
 Surveys. User surveys can provide valuable quantitative insights into user
preferences, satisfaction levels, and attitudes toward a design or product. ...
 Closed card sorting. ...
 Tree testing. ...
 Usability testing. ...
 A/B testing.

Synthesizing Test Findings:

Synthesis is the step that comes after the designer has understood the
problem statement. Once the UX research is conducted and sufficient
raw data is received, it is converted to valuable insights. It is the
process of creating intuitive concepts based on the facts that are being
analysed.

Prototype Iteration:
What is 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.