Product Design,

Prototyping, and
the Role of
Design Systems
Learn the basics of product design.
Discover how to create fast and
effective prototypes before designing
your final app using a robust design
system.

WORKSHOP PAUL BOAG

 - Nearly 30 years of experience working in
digital with a focus on user experience.

ABOUT ME
- Extensive experience in designing web apps.

Paul Boag - Worked with enterprise and B2C SaaS

companies in a range of sectors.

- Clients include Shopify, PUMA, the UK

Government, and UNICEF.
Agenda Section 03
Prototyping in Figma

Section 01 Section 04
Product Design Fundamentals Testing Your Prototype

Section 02 Section 05
Identifying Use Cases and Top Building a Design System in
Tasks Figma
01

Product Design
Digital Product design is different from
traditional web design. In this section, we

Fundamentals will explore how and what fundamental

principles underpin the discipline.
What is Digital
Product Design?
Digital product design is the process of
conceptualizing, creating, and refining digital
products like SaaS apps, and software interfaces. It
involves a blend of user experience (UX) design, user
interface (UI) design, and interaction design.

PRODUCT DESIGN FUNDAMENTALS

Web Design Product Design
Informational Task Orientated
Typically, document-based Typically, web apps such as
websites such as news or design tools, accounting apps
marketing sites. and other online software.

Hybrid
Sites that are both interactive
and informational such as
ecommerce or social sites.

PRODUCT DESIGN FUNDAMENTALS / WHAT IS DIGITAL PRODUCT DESIGN? /

 WARNING!

More Than You Think

There is a tendency to see product design as UI
design for SaaS applications. However, it is more
than that. It involves looking beyond the
interface to include many additional factors.

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

 Unique Challenges

Repeated Use Complex Tasks Procedural Knowledge

A minor point of Unlike traditional Making changes can
friction can become document-based sites, frustrate regular users,
irritating when web apps provide a wide breaking their procedural
regularly encountered. range of functionality. knowledge.

PRODUCT DESIGN FUNDAMENTALS / WHAT IS DIGITAL PRODUCT DESIGN? /

Why Product Design Matters?
Customer acquisition Customer retention Cost savings
An easy-to-use web app Intuitive web apps that Well-designed internal
that allows users to solve a users are comfortable web apps can provide cost
real pain point will grow using will earn customer savings to companies by
organically. loyalty. improving staff
productivity.

PRODUCT DESIGN FUNDAMENTALS / WHAT IS DIGITAL PRODUCT DESIGN? /

Core Principles of
Product Design
Digital product design means balancing
occasionally conflicting principles.

PRODUCT DESIGN FUNDAMENTALS /

Market Awareness
Competitors Market Trends Positioning
Who else is operating in What is happening in the What differentiates your
the market? What do they market? How are user product? How do you
do well, and what do they expectations changing? compare to your
do poorly? How do they How dynamic is the competitors? How clear is
price? market? that difference?

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

 User Centric

Goal Pain Point Need

What does your web app What problem or pain Is there a legitimate
allow people to achieve, point is it solving for need for the product
and how hard would it users? and functionality you
be to do otherwise? are creating?

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

User Group Awareness
Different user groups will use your app in
different ways, whether those groups are based
on role, objectives, or even experience with the
app. For example, power users and new users will
have different requirements.

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

Task Orientated
What tasks will Which tasks are What tasks are
users need to more crucial to completed most
complete? success? often?

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

Functionality
What functionality will be required to allow the
user to achieve their goals and address their pain
points? How will it be implemented?

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

Technological Feasibility
and Scalability
What functionality is required and how easy it is to
operate needs to be balanced against its technological
feasibility. It may not be cost-effective or feasible to
build everything the user wants.

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

 Simplicity

Remove Hide Shrink

Can this element be Can this element be Can we visually
removed from the app? hidden deeper into the deemphasis the element
app or within another to focus users on more
element.? important functions?

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

Usability
Is it easy to learn? Is it quick to Is it forgiving of
complete common mistakes?
tasks?

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

Accessibility
User Accessibility Device Accessibility
Does it meet the needs of users Does it need to support a range of
with special needs, whether screen sizes, platforms, and input
permanent, situational, or methods?
temporary?

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

 - Sliders - Download

- Forms - Export

Interactivity - Drag and drop - Tooltips

- Tag management - Popovers

Because web apps are more
like software than websites, - QR codes - Drawers
careful consideration needs to
- Date and Time - Modals
be given to a wide range of
Pickers
interactions. - Alerts
- Accordions
- Etc.
- Upload

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

 Security and Privacy

Login Account Management Communications

How can you balance How easy is it for users How do we reassure
security with ease of to manage their privacy users about their security
use? Can you avoid users settings or delete their and privacy and give
needing passwords? account and data? them a sense of control?

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

Brand Identity
Consistency Recognition and Recall Emotional Connection
A strong brand identity It needs to be easy for users A brand helps a user draw
helps in creating a to recognize and remember conclusions about the type
consistent user experience your brand, as it aids in of app and whether it is
across all touchpoints. referrals and renewals. aimed at them.

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN / BRAND IDENTITY
Start With a Minimum
Viable Product

PRODUCT DESIGN FUNDAMENTALS /

What is an MVP?
A Minimum Viable Product (MVP) is a product
version with enough features to attract early
adopters and validate a product idea early in the
development cycle, gathering user feedback for
future iterations and improvements.

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

Why start with an MVP?
Reduce Risk Faster to Market Focus on Core
Validates product concept Allows quicker launch, Helps identify and refine the
with minimal resources, gaining a competitive edge product's value proposition
lowering the risk of large- by being first to market. by concentrating on
scale failures. essential features.

Attract Investors Learn Targeted resourcing

Show potential to Offers a practical learning Better informs decisions on
investors with tangible experience about the where to allocate resources
product and user data. market, users, and product for development, marketing,
viability. and scaling up.

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

 The MVP Loop

Build the simplest Listen to the Adapt the product Observe visitor
version of your feedback you as required to behavior and adjust
product cheaply. receive and improve attract new visitors. to fit user needs.
it over time.

PRODUCT DESIGN FUNDAMENTALS / STARTING WITH A MINIMAL VIABLE PRODUCT /

 WARNING!

Creating an MVP the right way

DON'T BUILD THIS BUILD THIS

PRODUCT DESIGN FUNDAMENTALS / STARTING WITH A MINIMAL VIABLE PRODUCT /

 Identifying your MVP

User Needs Value Proposition Time and Effort

What is the absolute What makes your Which features can be
core tasks users need product different from built relatively easily?
to complete their goal? the competition?

PRODUCT DESIGN FUNDAMENTALS / STARTING WITH A MINIMAL VIABLE PRODUCT /

Trialing your prototype
Prototype Testing Soft Launch Monitor Post Launch
Run usability testing with Launch your app with a After launching the MVP,
a small number of users small group of early use heat maps, session
on your initial prototype. adopters and gather recordings and analytics to
feedback. monitor behavior.

PRODUCT DESIGN FUNDAMENTALS / STARTING WITH A MINIMAL VIABLE PRODUCT /

 Gathering MVP Feedback

Listen Watch Ask

Monitor social media, Use a session recorder Send surveys, arrange
look for reviews, and like Microsoft Clarity interviews, and create
read every message and watch how users a feature suggestion
you get. interact with your app. poll using PollUnit.

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

Iterating on your MVP

PRODUCT DESIGN FUNDAMENTALS /

 How the iterative cycle works

PRODUCT DESIGN FUNDAMENTALS / USING AN ITERATIVE CYCLE /

Iterate upon...
The initial MVP build
Each future feature

PRODUCT DESIGN FUNDAMENTALS / USING AN ITERATIVE CYCLE /

Building a backlog

PRODUCT DESIGN FUNDAMENTALS / USING AN ITERATIVE CYCLE /

Building a backlog

PRODUCT DESIGN FUNDAMENTALS / USING AN ITERATIVE CYCLE /

 Identifying your MVP

Picking a new feature

User Needs Value Proposition Time and Effort

What is the absolute What makes your Which features can be
core tasks users need product different from built relatively easily?
to complete their goal? the competition?

PRODUCT DESIGN FUNDAMENTALS / STARTING WITH A MINIMAL VIABLE PRODUCT /

 WARNING!

Three Common Mistakes

Rushed Discovery No Post launch No Holistic Thinking
The pressure to deliver is
Iteration Features are delivered in
too high and people jump After a feature is isolation without
straight into prototyping. delivered, nobody checks consideration of how they
back to ensure it performs. will impact the overall
experience.

PRODUCT DESIGN FUNDAMENTALS / STARTING WITH A MINIMAL VIABLE PRODUCT /

Establishing a future vision

PRODUCT DESIGN FUNDAMENTALS /

 Why Create a Future Vision?

Design Consistency Future Planning A Goal

It allows us to think It allows us to consider It provides a shared
holistically about how, upcoming features and vision the entire team
ultimately, everything put the foundations in can work towards.
will work together. today.

PRODUCT DESIGN FUNDAMENTALS / ESTABLISHING A FUTURE VISION /

 WARNING!

Not a Straight Jacket

The future vision is precisely that; a vision. It is
not a specification that you need to slavishly
work towards. You will need to adapt based on
user feedback and monitoring.

PRODUCT DESIGN FUNDAMENTALS / ESTABLISHING A FUTURE VISION /

Creating your vision

01 02 03 04 05 06
Research Brainstorm Prototype Test Backlog Share

PRODUCT DESIGN FUNDAMENTALS / ESTABLISHING A FUTURE VISION /

Conclusions
Start with an MVP, and continually iterate upon it.
But remember to create a vision that you work towards.
And never forget what makes product design different
from web design.

PRODUCT DESIGN FUNDAMENTALS /

Next
Identifying Use Cases and Top Tasks
02

Identifying Understanding what users want to do in

Use Cases and

your product is fundamental to success.
However, building around their top

Top Tasks tasks will take your app to another level.

Identifying and
understanding your
audience.
Understanding your audience is fundamental in
product design. It ensures products are tailored to
meet real user needs, enhancing usability and
appeal.

IDENTIFYING USE CASES AND TOP TASKS

 Why segment your
audience?

Different Questions Different Tasks Different needs

Different audiences have Different audiences Some users have specific

different questions, so also want to do needs to comprehend
segment your audience different kinds of content due to language
using groups with tasks, so segment by or cognitive
similar questions. those as well. requirements.

IDENTIFYING USE CASES AND TOP TASKS / IDENTIFYING AND UNDERSTANDING YOUR AUDIENCE /
You cannot serve everybody
Existing Employee

New Employee

HR Managers

Joiners/Switchers

IDENTIFYING USE CASES AND TOP TASKS / IDENTIFYING AND UNDERSTANDING YOUR AUDIENCE /
 WARNING!

Be careful focusing on
demographics
There is a temptation to focus on demographics
when segmenting audiences as you would in
marketing. However, demographic groups are not
as important as use cases.

PRODUCT DESIGN FUNDAMENTALS / CORE PRINCIPLES OF PRODUCT DESIGN /

 Feeling Influences
How is the user feeling What people, things, or
about the experience? places influence them?

Questions and Tasks Journey

What tasks are users Where is the user in their
trying to complete? What experience and what (if
questions or objections do any) interactions have they
they need answering? already had?
Name of

Pain Points Goals

What pain points are What is the users
the users experiencing ultimate goal? What are
that they hope to they trying to achieve?
overcome?
Identifying and understanding
your use cases.
Once we understand who our user groups are, we
need to identify the specific things they want to
be able to do within our application.

IDENTIFYING USE CASES AND TOP TASKS

You could skip this stage
Because we are going to run a survey that allows people to
suggest tasks, it is not strictly necessary to gather tasks in
advance. However, seeding the survey with at least some
tasks improves results.

IDENTIFYING USE CASES AND TOP TASKS / IDENTIFYING AND UNDERSTANDING YOUR USE CASES /
Gather potential tasks
01 Customer feedback 02 Site behavior

03 Stakeholder interviews 04 Search analysis

05 Competitive analysis 06 Social media

IDENTIFYING USE CASES AND TOP TASKS / IDENTIFYING AND UNDERSTANDING YOUR USE CASES /
Cheating with
Chat GPT
Creating user story cards.
As a... I know when I am done
when...

I want to...

So that I can...

IDENTIFYING USE CASES AND TOP TASKS / IDENTIFYING AND UNDERSTANDING YOUR USE CASES /
Identifying and
understanding user top tasks.
Top task analysis is a user-centered method that identifies the
most crucial tasks users aim to achieve on a website, streamlining
the design for enhanced usability and satisfaction.

What Really Matters: Focusing on Top Tasks

IDENTIFYING USE CASES AND TOP TASKS

Why focus on top tasks?
It is crucial to make the primary tasks of your
users readily accessible on your website as they
are the most vital actions that people want to
perform. It is imperative to ensure that smaller
tasks do not impede the visibility of the top tasks.

IDENTIFYING USE CASES AND TOP TASKS / IDENTIFYING AND UNDERSTANDING USER TOP TASKS /
How to create a
top task survey
You can complete a top task analysis
"Lite" using a poll maker like
PollUnit. This will be significantly
faster when compared to traditional
top-task analysis.
Cleaning the results
Remove duplication Simplify wording
There will be a significant number We want to be able to use the
of suggested tasks that are results in card sorting and so we
similar. We need to combine these want the description of each task to
tasks and their associated votes. be as clear and concise as possible.

IDENTIFYING USE CASES AND TOP TASKS / IDENTIFYING AND UNDERSTANDING USER TOP TASKS /
Organizing around the
user's top tasks.
It is crucial to make the primary tasks of your
users readily accessible in your web app as they
are the most vital actions that people want to
perform. It is imperative to ensure that smaller
tasks do not impede the visibility of the top tasks.

IDENTIFYING USE CASES AND TOP TASKS

Start with top-level
navigation
If users get the first click was correct, they have
an 87% chance of completing the action
correctly, as opposed to just 46% if the first click
was wrong.

“First Click Usability Testing” by Bob Bailey and Cari Wolfson

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
 3 Steps to Top Level IA

Open Card Sort Closed Card Sort Tree Testing

Users organize top Users organize other Users are asked to
tasks into groups that functionality into a navigate to
make sense to them. predefined set of functionality within
groups. the site structure.

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS / OPEN CARD SORT
IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS / OPEN CARD SORT
Reviewing
results
Merge Similar Groups
Look for conceptually similar
groups and merge them.
Reviewing
results
Review card assignments
Switch to the cards view and
list which groups each card
has been assigned to.

This will be the basis for your

top-level sections.
 - Look for conceptually similar groups
and combine them.

- Total the numeric values of any

Chat GPT can help combined groups.

- Create a maximum of 7 master

If you are feeling adventurous, exporting
groups containing any groups that
the results and uploading them to Chat GPT
are conceptually similar.
is possible. You can then ask Chat GPT to
help with identifying your top-level - Based on the number of times a card
sections. is assigned to a group, assign each
card to the master group with the
most votes.

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
Deciding on top-level sections
Fewer Options is Better Group Options Keep Labels Short
We can only easily hold If you need more than Labels must be no more
four items in our short- four options, consider than one or two words to
term memory. grouping similar options. aid scannability.

Avoid Ambiguous Make Options Distinct Don't Fear Clicks

Users often waste time When sections are too Users do not mind
looking at sections that similar, the user is multiple clicks to reach
they do not understand. unsure where to look. an action as long as they
are confident in the
direction.
IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS / CLOSED CARD SORT
IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS / CLOSED CARD SORT
 Reviewing closed card sorting
results

Assign to top group

Assign each card to its
group with the highest
agreement score.

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
 Reviewing closed card sorting
results

Cross link as required

When there is no clear
winner, link from both
sections.

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
 Reviewing closed card sorting
results

Deal with 'not sure'

Assign cards with not
sure as winners to the
next highest group.

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
IA is not an exact science
You will need to make a judgment call My general rule of thumb
You will need to make judgment calls Generally, I don't worry too much as
around what level of agreement score long as the agreement score is at least
you are happy with and what to do 50%.
with cards assigned to "not sure."
Most "not sure" options can be added
This will depend on the culture of the to their second most common group.
organization, the makeup of the
audience and the type of content you Tree testing will reassure any
are working with. concerned stakeholders.

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
Dealing with lower sections
If you have a large number of "tasks" assigned to a
single top-level section you will need to organize
those tasks into sub-sections. Avoid having more
than 7 child elements within a parent.

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
2 options with lower sections
More card sorting An educated guess
If a sub-section of your site has In certain situations, relying on
a lot of content, a specific your current understanding and
audience, or is especially research can suffice to determine
important, it may be helpful to suitable sub-sections. To confirm
conduct a card sorting exercise your assumptions, you can employ
specifically for that area. tree testing.

IDENTIFYING USE CASES AND TOP TASKS / IDENTIFYING AND UNDERSTANDING USER TOP TASKS /
Put Chat GPT to work
Act as an information architect. You have been asked to organize the content I will
give you into sub-sections within a University HR website's "benefits" section.

Avoid having more than seven sub-sections. Keep the labels of each section to one or
two words. Avoid ambiguity in labeling or two labels being too similar.

Assign content to sub-section based on conceptual similarity.

The goal is to ensure users can easily find any content within the hierarchy.

Are you ready for the content, or do you have questions?

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
Testing with tree testing
Tree testing allows us to test our assumptions
and content that had a low agreement or was
assigned to the "not sure" group.

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS / TREE TESTING
 What to test

Low agreement Top tasks in

Not sure
scores sub-sections

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS / TREE TESTING
Reviewing tree
testing results
The success score and
01 where those who failed
ended up.

The directness and

02
what route people took.

The time it took

03 people, on average, to
complete the task
If there is a problem...
Move it Cross-link to it
If most people look in the wrong If there is confusion about where
section when completing a the action should sit, consider
particular task, move it to that having links to it from multiple
section. sections.

IDENTIFYING USE CASES AND TOP TASKS / IDENTIFYING AND UNDERSTANDING USER TOP TASKS /
Conclusions
Identify the user's top tasks, organize them with open card sorting.
Check that tiny tasks are supported using a closed card sort.
Use tree testing to confirm that your information
architecture is working.

IDENTIFYING USE CASES AND TOP TASKS /

Next
Prototyping in Figma
03

Prototyping in
Fast, iterative prototyping is an essential
tool of Product Design. Done right, they

product design allow you to explore ideas at a fraction

of the cost of building them.
The role of prototyping
Prototyping is essential for testing and refining
digital products early on, ensuring they align with
user expectations and business objectives.

PROTOTYPING IN PRODUCT DESIGN /

 Why prototype?

User Testing Reduce Risk Communication Tool

A prototype provides By identifying A prototype reduces
something tangible potential issues early misunderstandings
that you can put in on, you can avoid and ensures the
front of users and gain mistakes that would alignment of the
feedback. prove costly later. project vision.

PROTOTYPING IN PRODUCT DESIGN / THE ROLE OF PROTOTYPING /

 The different prototypes
LOW FIDELITY HIGH FIDELITY

Paper prototyping Clickable prototyping

Greyscale prototyping Interactive prototyping

PROTOTYPING IN PRODUCT DESIGN / THE ROLE OF PROTOTYPING /

Planning your prototype
Resist the urge to jump into prototyping too soon.
Some upfront planning will ensure you use your
time as efficiently.

PROTOTYPING IN PRODUCT DESIGN /

Plan the user flow
• Entry Points: Consider how users can
enter your web app.

• Key Actions and Steps: Outline users'

essential steps to reach their goals.

• Decision Points: Include critical

decision-making moments.

• Error Handling and Feedback: Plan

for errors with helpful feedback.

• Alternative Paths: Account for varied

paths and shortcuts within the flow.
PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE /
Decide on the level of
fidelity required
Ideation Convergence Iteration Solution
Explore a wide Narrow down Iterate on best Finalize the
range of ideas. to best idea. idea. approach.

Paper Greyscale Clickable Interactive

Prototypes Prototypes Prototypes Prototypes

PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE /

Engage with stakeholders
using prototyping
Another benefit of prototyping is that it is an
excellent way of engaging with stakeholders and
giving them a sense of ownership.

PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE / COLLABORATIVE WIREFRAMING

 Why collaborate?

Better Product Faster Approval More Support

The broader the If stakeholders help If stakeholders help
perspective on the create the prototype, create the prototype,
problem, the better the they are more likely to they are more likely to
solution. approve the direction. defend it to others.

PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE / COLLABORATIVE WIREFRAMING

Wireframing
workshops
If you have limited time with your stakeholders,
consider running a wireframing workshop.

PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE / COLLABORATIVE WIREFRAMING

 What to focus on

Core Journeys Controversial Screens High Effort Screens

Screens or Screens that may Screens that will
functionality that are divide opinion among involve much work by
central to the user stakeholders. many different people.
experience.

PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE / COLLABORATIVE WIREFRAMING

Crazy Eights
• Generate eight ideas: Each team has 8
minutes to generate 8 ideas on a single
piece of paper.

• Pick the best four: Each team picks the

four ideas they like the most.

• Merge teams: Two teams merge and

pick the best four again.

• Repeat: Repeat the above steps until

you have four ideas remaining.

PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE / COLLABORATIVE WIREFRAMING

Design sprints
Design sprints are a prototyping technique
created by Google that involves a week of
research, prototyping, and testing.

PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE / COLLABORATIVE WIREFRAMING

 How design sprints work
Diverge Build
Sketch various Build a realistic
solutions prototype

Understand Converge Test

Make a map & Decide on the Test with target
choose a target best approach customers

PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE / COLLABORATIVE WIREFRAMING

 I'm not a fan

Hard to arrange Exhausting Too rushed

Getting all Design sprints are Design sprints leave
stakeholders in a room exhausting and highly little time to consider,
for a week is very hard. intense for attendees. leaving stakeholders
feeling rushed.

PROTOTYPING IN PRODUCT DESIGN / PLANNING YOUR PROTOTYPE / COLLABORATIVE WIREFRAMING

Low fidelity prototyping
Low-fidelity prototypes are ideally suited to the
fast creation and iteration of ideas at the beginning
of a project.

PROTOTYPING IN PRODUCT DESIGN /

'Paper'
prototyping
Paper prototypes are best suited to
workshop exercises and the
creation of large number of ideas
quickly.

PROTOTYPING IN PRODUCT DESIGN / LOW FIDELITY PROTOTYPING /

Why 'Paper' prototyping?
• Low barrier: Anybody can create a • Disposable: Because of the ease
pen and paper prototype. No special with which they are created, people
skills are required. do not become attached to a sketch
as easily.
• Everybody can participate: The
whole group can easily create and • Cost-effective: The speed with
share approaches. which they can be created
combined with the lack of need for
• Fast to create: Sketching out an special software makes they
approach only takes seconds. extremely cheap to create.

PROTOTYPING IN PRODUCT DESIGN / LOW FIDELITY PROTOTYPING /

'Greyscale'
prototyping
Greyscale prototypes add an extra
level of detail over paper
prototyping and are good for
initial testing.

PROTOTYPING IN PRODUCT DESIGN / LOW FIDELITY PROTOTYPING /

 Why 'Greyscale' prototyping?

Fast to create Focuses on function Ideal for early testing

With the right tools, a Without the distraction Greyscale prototypes
greyscale wireframe is of colors, fonts, and can be used to conduct
almost as quick to other design details, usability tests while
create as paper greyscales keeps the the cost of change is
prototypes. focus function. low.

PROTOTYPING IN PRODUCT DESIGN / LOW FIDELITY PROTOTYPING /

 Greyscale wireframing tools

PROTOTYPING IN PRODUCT DESIGN / LOW FIDELITY PROTOTYPING / 'GREYSCALE' PROTOTYPING

High fidelity prototyping
High-fidelity prototypes are primarily for testing
with users. However, they can also act as a
functional specification for developers.

PROTOTYPING IN PRODUCT DESIGN /

'Clickable'
prototyping
Clickable prototypes are 'good enough' for
high-fidelity testing without replicating
every user interaction.

PROTOTYPING IN PRODUCT DESIGN / HIGH FIDELITY PROTOTYPING /

 Why 'Clickable' prototyping?

Aesthetic approval Navigational testing

Hierarchy testing
Stakeholders can see Testing can be carried
Testing can be used to
how the brand applies out to ascertain if
ascertain if users see
to the interface. users can successfully
the most important
Aesthetics can also be navigation the
page elements.
tested in context. interface.

PROTOTYPING IN PRODUCT DESIGN / HIGH FIDELITY PROTOTYPING /

 Lyssna

PROTOTYPING IN PRODUCT DESIGN / HIGH FIDELITY PROTOTYPING /

 Maze

PROTOTYPING IN PRODUCT DESIGN / HIGH FIDELITY PROTOTYPING /

'Interactive'
prototyping
These prototypes recreate as much of the
final experience as possible including
animation and the ability to interact with
interface elements.

PROTOTYPING IN PRODUCT DESIGN / HIGH FIDELITY PROTOTYPING /

 Why 'interactive' prototyping?

Realistic experience Act as a specification Great sales tool

It is an ideal tool for A realistic prototype It is an excellent way
testing the final app avoids misunderstandings of winning over
because it closely and allows accurate stakeholders or
mirrors its behavior. estimating. potential investors.

PROTOTYPING IN PRODUCT DESIGN / HIGH FIDELITY PROTOTYPING /

 Justinmind

PROTOTYPING IN PRODUCT DESIGN / HIGH FIDELITY PROTOTYPING /

Interface Design
Fundamentals
Prototyping in product design requires a good
understanding of interface design.

PROTOTYPING IN PRODUCT DESIGN /

 Three steps to simplicity

1. Remove 2. Hide 3. Shrink

What would happen if I Could I hide this Can I visually reduce

removed this element? element under an its emphasis on the
Would the design still accordion or tab? screen, so as not to
work? Perhaps I could place it distract from
deeper in the app? important elements?

PROTOTYPING IN PRODUCT DESIGN / INTERFACE FUNDAMENTALS /

Limited Options
We can only hold 4 items in our short-
term memory, so limit the number of
options you show at any one time.

Focus on the top tasks, with the ability

for the user to access other options if
required.

PROTOTYPING IN PRODUCT DESIGN / INTERFACE FUNDAMENTALS /

Chunking
When you cannot reduce the number of
options, break them down into groups to
help people process the information.

PROTOTYPING IN PRODUCT DESIGN / INTERFACE FUNDAMENTALS /

Progressive Disclosure
Break more complex interactions down into a series of
steps to avoid overwhelming users.

PROTOTYPING IN PRODUCT DESIGN / INTERFACE FUNDAMENTALS /

Good defaults
Give careful consideration as to what information you are showing to users
by default. On average only 5% of users will change these defaults.

PROTOTYPING IN PRODUCT DESIGN / INTERFACE FUNDAMENTALS /

Prioritizing
critical content
Ensure that user attention is drawn to the
elements on the page that are most
important to them and that they are not
distracted by secondary information.

PROTOTYPING IN PRODUCT DESIGN / INTERFACE FUNDAMENTALS /

Building a prototype
ready for development
If you design your prototype in the right way, you
can significantly speed up how long it will take to
build the frontend code.

PROTOTYPING IN PRODUCT DESIGN /

Always use
AutoLayout
AutoLayout mirrors the CSS box model,
allowing developers to identify padding,
margins, positioning, and wrapping
quickly.

PROTOTYPING IN PRODUCT DESIGN / HELP YOUR DEVELOPER /

Don't forget
states
Don't make your developer guess as to
what the various states of a button or
select menu are meant to look like.

PROTOTYPING IN PRODUCT DESIGN / HELP YOUR DEVELOPER /

Include animation
Take the time to demonstrate how
animations should work so that the
developer can simply copy what you have
prototyped.

PROTOTYPING IN PRODUCT DESIGN / HELP YOUR DEVELOPER /

Add annotation
Use comments and descriptions within
Figma to clearly explain to your developer
how you want the interface to behave and
how components should be used.

PROTOTYPING IN PRODUCT DESIGN / HELP YOUR DEVELOPER /

Conclusion
Prototyping is a powerful tool for both testing and
communication.

However, they need to be carefully planned, and the

correct type of prototype needs to be chosen.

PROTOTYPING IN PRODUCT DESIGN /

Next
Testing your prototype
04

Testing your
Testing of your prototype can make the
difference between a feature succeeding

prototype or failing. However, they key is to do it

in a lightweight, non-intrusive way.
Testing is essential in
product design
If testing with users is not baked into your
process then you are not doing product design,
you are creating 'pretty' interfaces.

TESTING YOUR PROTOTYPE

 Why testing is essential

Better Product Resolve arguments Saves money

Testing significantly Testing can ensure Testing can identify
reduces the chance of momentum by quickly issues early when the
developing something resolving disagreements cost of fixing them is
that is not fit for purpose. over approach. significantly lower.

TESTING YOUR PROTOTYPE / TESTING IS ESSENTIAL IN PRODUCT DESIGN /

 Test lightweight
but often

TESTING YOUR PROTOTYPE / TESTING IS ESSENTIAL IN PRODUCT DESIGN /

 WARNING!

Test early
People tend to leave testing until the end of the
project. This is utterly pointless as the cost of
making changes at this point are too high. Test
early and test often.

TESTING YOUR PROTOTYPE / TESTING IS ESSENTIAL IN PRODUCT DESIGN /

Testing opportunities
LOW COST HIGH COST

Design Build Post Launch

- Paper prototypes - Navigation - Exit points

- Wireframes - Functionality - Friction points

- Mockups - New functionality

- Prototypes

TESTING YOUR PROTOTYPE / TESTING IS ESSENTIAL IN PRODUCT DESIGN /

Be pragmatic
about testing
Testing something is better than Don't ask management to invest
testing nothing as long as you are heavily in testing until they see
aware of the biases in your the benefits.
testing.

TESTING YOUR PROTOTYPE / TESTING IS ESSENTIAL IN PRODUCT DESIGN /

Recruitment
• When testing usability you don't
always need your exact audience.

• However, do not test with anybody

related to your company or the project.

• Many testing tools will recruit

participants for you for as little as a $1
per person.

TESTING YOUR PROTOTYPE / TESTING IS ESSENTIAL IN PRODUCT DESIGN /

Numerous user testing methods
- Moderated testing - Semantic Surveying - Interviews

- Unmoderated testing - Session recording - Card sorting

- AB testing - Heat maps - Tree testing

- First click testing - Eye tracking - Field studies

- 5-second testing - Focus groups - Participatory design

- Preference testing - Diary studies - Concept testing

TESTING YOUR PROTOTYPE / TESTING IS ESSENTIAL IN PRODUCT DESIGN /

Testing initial wireframes
Your early greyscale wireframes are a great
starting point for testing because they are easy to
change.

TESTING YOUR PROTOTYPE

Basic requirements
Testing low-fidelity wireframes without basic content and
navigation will be largely pointless.

TESTING YOUR PROTOTYPE / TESTING INITIAL WIREFRAMES /

Testing
navigation
First-click testing is a technique
that analyzes the initial click
made by people using an interface.

If the first click is correct, users have

an 87% chance of completing the
action instead of just 46% if wrong.

TESTING YOUR PROTOTYPE / TESTING INITIAL WIREFRAMES /

Testing focus
and impressions
A 5-second test involves showing users
the design for only five seconds, after
which they are asked to recall specific
details or first impressions, assessing
the clarity and effectiveness of its visual
communication.

TESTING YOUR PROTOTYPE / TESTING INITIAL WIREFRAMES /

 What are you looking for?

Did they get it? Did they see it? What stood out?
Did they understand Which elements on the Which elements stood
the interface and what page did they spot and out more than others?
they could do with it? did they see a Is that the right
particular action? elements?

TESTING YOUR PROTOTYPE / TESTING INITIAL WIREFRAMES /

Testing mockups
Static mockups of critical pages provide an
excellent opportunity to address questions and
concerns with testing.

TESTING YOUR PROTOTYPE

Did they like it?
Stakeholders will often disagree about
the best visual approach. Testing with
users can break this deadlock.

TESTING YOUR PROTOTYPE / TESTING MOCKUPS /

Agree on brand
keywords
Agree with stakeholders which words
you want the design to communicate.
Brand deck is an excellent tool for
determining these words.

TESTING YOUR PROTOTYPE / TESTING MOCKUPS /

Option 1:
Surveying
A semantic differential survey can
be used to see if the design
matches the brand keywords you
seek to communicate.

TESTING YOUR PROTOTYPE / TESTING MOCKUPS /

Option 2:
Comparison
If you are in a competitive marketplace,
it may be beneficial to see how your
design compares to the competition.

Alternatively, you might want to

compare different design approaches.

PROTOTYPING IN PRODUCT DESIGN / HIGH FIDELITY PROTOTYPING /

Did they see it?
Another common concern among
stakeholders is whether users will
spot a particular element. This, too,
can be easily tested with a mockup
with either a 5-second test or eye-
tracking.

TESTING YOUR PROTOTYPE / TESTING MOCKUPS /

 Eye Tracking
simulation
Because eye-tracking is expensive and
time-consuming, simulation software
is often a more viable alternative.

I use Attention Insights to estimate

where user attention will go.

TESTING YOUR PROTOTYPE / TESTING MOCKUPS /

Testing prototypes and beta build
Once you have an interactive experience in the
form of a beta build or prototype, new testing
opportunities open up.

TESTING YOUR PROTOTYPE

Unfacilitated
testing
In unfacilitated testing, participants use
the interface without a moderator
guiding the session. However, they are
encouraged to think out-loud during the
interaction.

TESTING YOUR PROTOTYPE / TESTING INTERACTIONS /

Want recordings?
Lyssna is great but doesn't allow you to
watch back individual sessions. Instead,
it provides data on the sessions. If you
want to watch sessions, Lookback will be
better suited.

TESTING YOUR PROTOTYPE / TESTING INTERACTIONS /

Facilitated testing
In facilitated testing, you guide the user
through the tasks you wish them to
complete, asking questions throughout
the experience.

TESTING YOUR PROTOTYPE / TESTING INTERACTIONS /

You could use
Zoom... but
Lookback has useful tools like
built-in transcriptions, the ability
to add timestamped comments,
and easy sharing.

TESTING YOUR PROTOTYPE / TESTING INTERACTIONS /

Tips for facilitated usability testing
- Clearly define your objectives. - Remain neutral.

- Define realistic tasks. - Answer questions at the end.

- Prepare a script, but be flexible. - Show gratitude.

- Work hard to relax people. - Debrief quickly.

- Encourage think-aloud feedback.

TESTING YOUR PROTOTYPE / TESTING INTERACTIONS /

Which to pick?
Unfacilitated Facilitated
- Easier to run. - Guided interaction.
- Increased numbers. - More adaptable.
- More natural behavior. - Easy clarification.
- Faster results. - Observable non-verbal queues.
- Better for 'is it working' testing. - Better for 'why isn't this working' testing.

TESTING YOUR PROTOTYPE / TESTING INTERACTIONS /

Testing live apps
Many of the best opportunities to test with users
happen once your app has gone live. Only then
can we observe users interacting with the app
completely naturally.

TESTING YOUR PROTOTYPE

The right tools
To monitor a live app, you need an
analytics tool like Google Analytics
and a user insights tool like
Microsoft Clarity.

TESTING YOUR PROTOTYPE / TESTING LIVE APPS /

Identifying
the problem
- Exit pages

- Misclicks

- Rage clicking

- Excessive scrolling

- Quick backs

TESTING YOUR PROTOTYPE / TESTING LIVE APPS /

Additional clarification
Heat maps Session recordings

TESTING YOUR PROTOTYPE / TESTING LIVE APPS /

Testing small
solutions
When you want to test whether
a small solution like changing a
label or updating an image
works, AB testing can be a quick
and effective solution.

TESTING YOUR PROTOTYPE / TESTING LIVE APPS /

Testing big
solutions
Building and testing a prototype will be
required when your solution involves
changing multiple elements or how
functionality operates.

TESTING YOUR PROTOTYPE / TESTING LIVE APPS /

Conclusion
Testing is essential to product design.

It should be done often and early.

It can be carried out through the

development cycle from initial
wireframes to post-launch iteration.

TESTING YOUR PROTOTYPE

Next
Building a Design System
05

A design system can save you time and

Building a money when working long-term on a

web app. However, there is a lot more to
Design System a design system than knowing how to
use Figma.
Design Systems: What and why?
A design system is a set of guidelines, standards, and components
that unify design and development efforts across an organization.
It's the blueprint for design and development collaboration,
streamlining the process of building digital products.

BUILDING A DESIGN SYSTEM

Why create a design system
- Consistency: Ensures uniform design
and functionality, enhancing user - Quality: Raises product quality by
experience and brand identity. standardizing design principles and
practices, ensuring user-friendly
- Efficiency and Speed: Accelerates
solutions.
product development with reusable
components, enabling faster - Cost Reduction: Cuts costs by
iterations. reducing rework and duplicative
efforts, freeing resources for
- Collaboration: Improves teamwork
innovation.
with a shared language and resources,
leading to aligned outcomes.

BUILDING A DESIGN SYSTEM / WHAT AND WHY? /

 Basic building blocks of a
Design System
Styles Elements Components
Typography, colors, etc. Buttons, forms, etc. Menus, carousels, etc.

BUILDING A DESIGN SYSTEM / WHAT AND WHY? /

Planning your design system
A design system takes careful planning. Failure to
do so will result in over-engineering, a system
not fit for purpose and a lack of adoption.

BUILDING A DESIGN SYSTEM

Avoid buying in a design system
- They are over-engineered.

- They take a long time to learn.

- They will need customization.

- They can result in bloated code.

Caveat
Buying a design system to speed
up the creation of your design
system can work. But avoid using
their system wholesale.
Get buy-in upfront

Collaborate Sell the idea

Include designers, developers, product Ensure executive and team buy-in by
managers, and other stakeholders in demonstrating the value a design system
the process. Their input is crucial for brings to the organization, such as cost
creating a design system that meets savings, brand consistency, and faster
everyone’s needs. time to market.

BUILDING A DESIGN SYSTEM / PLANNING YOUR DESIGN SYSTEM /

Reluctant management?

BUILDING A DESIGN SYSTEM / PLANNING YOUR DESIGN SYSTEM /

Shhh... go stealth!
If management is reluctant to run a design
system project, build components as and when
you are required to mock them up.

BUILDING A DESIGN SYSTEM / PLANNING YOUR DESIGN SYSTEM /

 Agree on Objectives

Purpose Scope Goal

Define your goals. Unify Determine the scale. Define what success
your brand, create a Will it cover a single looks like. Is it faster dev
consistent design, product or multiple cycles, improved user
streamline development, products across your experience, or increased
or something else? organization? brand consistency?

IDENTIFYING USE CASES AND TOP TASKS / ORGANIZING AROUND THE USER'S TOP TASKS /
Ask questions upfront
Accessibility Versioning
How does your design system ensure What is your strategy for managing
accessibility for all users? Agree on updates and changes? Think about
aspects like color contrast, keyboard how to track component evolution and
navigation, and screen reader support. maintain consistency across projects.

Responsiveness Dark Mode

How do your design components and Do you want to provide a dark mode?
layouts perform across different Even if you do not, how will
screen sizes and devices? How flexible components adjust when placed on a
do you need to make the design? dark background?

BUILDING A DESIGN SYSTEM / PLANNING YOUR DESIGN SYSTEM /

Auditing an existing app
- Existing Assets: Review current design
and code assets. Understand what
elements (colors, typography, UI
components) are being used and how.

- Gaps and Inconsistencies: Identify

discrepancies in your current designs
and interfaces. This will help you
understand what needs to be
standardized.

BUILDING A DESIGN SYSTEM / PLANNING YOUR DESIGN SYSTEM /

 Build as you go for a new service

Context Focused Faster and cheaper

Building components in By only building It avoids the upfront
isolation is hard. It is components that you are investment in a system
easier when you are using it keeps the system that may need large
building them in context. focused and streamlined. revisions later.

BUILDING A DESIGN SYSTEM / PLANNING YOUR DESIGN SYSTEM /

Creating your design system
How you build your design system is crucial to
ensuring it is fit for purpose.

BUILDING A DESIGN SYSTEM

Start with styles
Styles are the foundation of your design system upon
which everything else is built. If you do not have
your styles in place before you begin, making
changes later will be very time-consuming.

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM /

Layout grid
Your grid is the framework
within which everything fits.
Make sure you include ample
columns to allow for
maximum flexibility.

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM / START WITH STYLES
Layout padding
Define a set of padding values
that you can use in
components. That way, if you
want to change the spacing,
universally, you can change it
in a single place.

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM / START WITH STYLES
Typography
- Define all 5 levels of headings.

- Include variations of weighting.

- Add additional styling such as

underline, strikethrough or all capitals.

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM / START WITH STYLES
Color
I tend to define my colors as variables (e.g. Primary 1) and
then apply those variables to styles (e.g. border active)
Color
If you are going to put a component
on a dark background, you may
wish to explore modes in Figma.

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM / START WITH STYLES
Aesthetics

Define rounded Define other

corners as effects like
variables to allow shadows, blurs,
you to change etc., to allow
them easily later. global changes.

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM / START WITH STYLES
Create basic elements
- Form Elements - Links - Dividers

- Buttons - Iconography - Tags

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM /

Don't forget
states
- Hover - Buttons

- Active - Links

- Selected - Form elements

- Expanded - Accordions

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM / BASIC ELEMENTS

Building out components
- Menus - Galleries - Dashboards

- Hero - Tables - Logins

- Footer - Forms - Cards

- Calls to action - Modals - Maps

- Features - Drawers - Messages

- Pricing - Charts - Notifications

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM / BUILDING OUT COMPONENTS
Avoid too much abstraction
News listing Events listing Combined
- Image - Image - Image

- Heading - Heading - Heading

- Description - Description - Description

- Publish date - Start date/time - Start date/time or publish date

- Author - End date/time - End date/time

- Author

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM / BUILDING OUT COMPONENTS
Components usage

BUILDING A DESIGN SYSTEM / CREATING YOUR DESIGN SYSTEM / BUILDING OUT COMPONENTS
Step back
It is so important to
approach your design
system holistically.
Individual components need
to work together to be
effective, so regularly
mockup up entire screens
using various components.
Implementing and evolving
your design system
Creating a design system in Figma is just the start.
Ensuring it is implemented consistently is the real goal.

BUILDING A DESIGN SYSTEM

Turn components
into code
If your components exist in code form they
are much more likely to be consistently and
commonly implemented.

By using a tool like ZeroHeight you can link

your design components with your code base.
Storybook
 Design systems are never done

New features
User feedback Brand evolution
As your application adds
User feedback can
As a brand evolves, its new functionality, it
highlight improvements
visual identity, tone, and may require additional
or reveal usability issues
messaging may change, components to be built
that weren't apparent
requiring an update to or existing ones
during initial testing.
the design system. amended.

BUILDING A DESIGN SYSTEM / IMPLEMENTING AND EVOLVING YOUR DESIGN SYSTEM /

Process for adding new
components.
1. Research 2. Design, iterate and test
- Can we use an existing component?
3. Develop and Document
- Can we revise an existing component?

- Is anybody working on a similar

4. Review and Approve
component?

BUILDING A DESIGN SYSTEM / IMPLEMENTING AND EVOLVING YOUR DESIGN SYSTEM /

Managing version control
- Clear versioning strategy: Establish a - Deprecation Strategy: When
clear and consistent approach that components or guidelines are to be
allows users to understand the deprecated, provide a clear timeline,
changes between versions. alternatives, and communication
plan.
- Documenting changes: Keep a precise
log of changes made and update - Access to Previous Versions: Ensure
training documentation. that users have access to previous
versions of the design system. This is
- Rollout strategy: Have a process for crucial for projects that cannot
how changes are rolled out, especially immediately update to the latest
around whether they replace previous version.
versions universally.
Adoption and communication
Communicating value Ownership, influence & improvement
People may see a design system as If people feel a sense of ownership and
limiting. Offset this by regular and the ability to influence the direction of
compelling communication of the value the design system, they will be more
to stakeholders. likely to adopt it.

Champions Training and support

Seek out individuals who can advocate Provide training sessions, workshops, and
for its use and benefits. These documentation that will support teams in
advocates can be influential in driving using the design system. Ensuring teams
adoption and enthusiasm. feel supported is key to encouraging
adoption.
Taking your design system
to the next level
A design system is more than a set of UI
components.

BUILDING A DESIGN SYSTEM

Design Principles
Design principles are a framework that can
help make design decisions, ensuring your
service is user-centric and fit for purpose.

Design principles provide:

- Consistent decision-making.

- A focus on the overall objectives.

- A more user-centric approach.

Digital Playbook
A digital playbook is a comprehensive guide
that outlines best practices, strategies, tools,
and workflows to streamline digital projects
and operations within an organization.

A digital playbook provides:

- An agreed set of processes.

- A shared repository of knowledge.

- Improved collaboration and empowerment.

Content Style Guide
A content style guide is a set of standards for
the writing and formatting of digital content,
ensuring consistency, clarity, and brand
alignment across all online platforms.

A content style guide provides:

- Consistency

- Quality

- Efficiency
Conclusions

A design system can be an invaluable tool, if it is planned carefully.

When creating your design system, start with styles, move to
elements, and finally work on components. But remember that a
design system needs a considered rollout and is much more than a
set of UI elements.

BUILDING A DESIGN SYSTEM /

 Fundamentals
Product Design,
User Research
Prototyping, and
the Role of Prototyping
Design Systems
I genuinely want to help, so email me Testing
anytime to [email protected].

Design Systems