An Introduction

to Product
Design
Women Techsters Cohort 3 Bootcamp

In partnership with
 Getting Started with Product Design

What is Product Design Being a Product Designer is an amazing

opportunity for
In the very shortest definition, product
design is the process of creating a you to explore. It is a generalist/specialist role

product that solves a problem. which means occasionally you will collaborate
with designers, product managers, engineers,
But when you break it down, it’s a big customer support, operations, sales,
process with lots of components. marketing.
The three main components are
user experience (UX), user The good news is, no matter what stage of your
interface (UI), and product design.
career you’re in or how far afield your
background may seem, if it’s something you
aspire to, it’s entirely possible to find your niche
 Opportunities and average

Opportunities Salaries

Since product design is such a multidimensional role, Product designers are one of the highest paid. And
it also allows for growth in many different directions. this salaries varies depending on level of
You’re building experience with a variety of skills and experience, company they work for and most
tools that can be useful for other career opportunities times where they are based
beyond product design.
Entry level : $500 -

As a product designer you can work in different

fields in tech, you can work with a Fin Tech, Block $1000 Mid Level:

Chain, Medical, Saas Start ups / company. You

$2000 - $5000 Senior
literally have lots of job opportunities from different
sectors
level: $5000 above
 Goals For Week 1

Bootsters should be able Resources

to: ● An Introduction to user Experience Desi
gn
● Distinguish between UI design and UX
| by Ben Ralph | Breaker & Flint |
design
Medium
● Understand problem solving using UX
design
● Differentiate between “Good UX’ and ● UX Tutorial 1: What Exactly Is UX Design
“Bad UX ?
● Know the different areas of UX (career- (Free Course) (careerfoundry.com)
wise)
● Have an understanding of some laws of ● UI, UX: Who Does What? A
UX Designer’s Guide To The Tech Industry
(fastcompany.com)
Task
● Attempt the task given here - ● Home | Laws of UX
 Tools

UX
UI
Microsoft word
Adobe
Microsoft
XD
Forms Google
Figma
Forms Miro
Invision
Framer
Sketch
 Introduction

What is Product Design

In the very shortest definition, product design is the process of creating a product that solves a
problem.

But when you break it down, it’s a big process with lots of components.
The three main components are user experience (UX), user interface (UI), and product design.

FULL-STACK DESIGNER:

UX “basically explains the how and the why. So how would this work? Why is it working that
way? What is the psychology behind this particular design?

UI is “what does it look like? When I get to that screen, what visual design do I see? What colors
do I see? What visual hierarchy do I see? What does it look like?”
 User Experience (UX) Design

What is UX Design

User experience
Ecompasess all aspects of the end-users’s interaction with the company,
it’s services, and it’s product.
Don Norma

Eg. when you buy a laptop, you unbox it, you use it for the first time,
you have the onboarding process, you learn how to navigate around it
all of this are your user experience

There are people who design this flow, this people are called UX designer
And this UX designers are influence by three forces
 Business goals

Every designer needs to design something to fulfil business goals,

their design has to be inline with the problem the organization is try to
solve.

It could be business goals like how to help people connect, or how to make
more sales or better users experience on a particular product, or perhaps
more loyalty from users
 Users Needs

UX designers fight for more empathy towards the end users, they research,
their needs, their problems and they try to make product that works best
for audience selected as their end users
 Technology

Everything that you build, every computer program, every system, every
website has some technological constraints. And this might just means you
have certain budget or time to be use on the development process. And
you need to think of how to make it all fit in the tight space.

In the middle of all this forces we have the UX design, which is basically the
bridge between the end users and the different aspect of the digital product
such as the UI designers and the developers
Let’s take Facebook for example
Everything is design with their business goals in mind and is made simple in
a way that is easy to navigate from one point to the other.

You have the search engine where you type someone’s name and a list of
people bearing same name will appear, and you make your choice base on
the person’s middle name or their profile picture

So as a UX designer you need to think of all this when designing a digital

product.
The Place of UX
design
Example
A stakeholder might be a product owner, that is the person that has the
business idea and goals.

Certain product team are organized in a way that the vision of the digital
product is set by product owner, someone who oversees the whole
experience working with the designers, develops and other people
You work with different people as a ux designer
Example
Customer
From the other side you have the
customers, people who would use your
website/Apps and you need to think of
them as somebody who will give you
feedback, and should have you
understand what it means to use such
interface from their own perspective
Example

Development Team
And the third we have Development
team, as the UX designer you will be
working with them on a daily basis so all
of your designs would go through them,
it will be consulted with them and in the
end they will be implemented by the
development team
Example

UX Designer
UX designers makes users journey
simple and straight to the point, their
goals are user centered design.
Design process could be visualized in thousand different ways, and i think
every company has their own step by step and stages and philsopy that
ecompassses all of them. This might be different from industry or from
company to company. From the research and article have consume so far the
design process goes the DOUBLE DIAMOND PROCESS, is the most
general way that explains what the design process should look like
The Design Process
The first is the problem which is the initiation point, every project or
product need a problem to be solved and this could be originated from a
business problem like, sales are dropping or it could originate from users
problem meaning users are struggling with a particular problem in their
lives.

You and your digital product are trying to solve it for them, to make life a
little bit easier for them

When you go through the stages of the design process right on to the final
solution you go through the phases of Divergent and Convergent
The Divergent thinking is you exploring all the different possibilities whether
the problem you want to solve or the possible solution you might generate

Then you have the Convergent thinking which means you’re focusing on,
you’ve gathered all this information, all this idea and you are trying to define
the single one or the ones you think is he best

The first stage of the process is the Discovery stage

The Design Process
The Discovery stage
This is where you and your team will try to understand what the real
problem is, quite often the problem that the client or your stakeholder
came to you is just simple term, like “sales are dropping”
Sales dropping might means customers are not just not buying things it
might means they are not interested in your brand anymore, the possible
problem are very wild.
That is why you have the divergent thinking, you need to explore all the
different problems or need that you could address on the product.
Only then after you’ve gather all the information you could try to Define
what the final, or the main problem you want to tackle is
The Design Process
The Define stage
And the main problem might be that people are not interested in the
recent happening on your website (digital product. They may not be
interested in the brand because they’ve grown out of it or perhaps
they’ve become old, young feeling doesn’t really resonate with them

Problem might be different from company to company, Industry to

Industry, your role as a UX designer is to understand all of them
and Define the one you will like to tackle in the next design process
The Design Process
The Develop stage
Then there’s the develop stage, where you go through all of the iterations
you’ll need and you have time for, in order to generate ideas concepts,
wireframe and prototypes of the final solutions

And still we have the divergent thinking here, you need to explore
different things, rarely do you get to this stage without out multiple ideas

The last stage of the design process is the Deliver stage which has to do
with convergent thinking
The Design Process
The Deliver stage
The deliver stage is a convergent thinking stage where you try to
understand all of the possible solution that are available and horn on
the best ones,
So, we choose which protype to, which concept are the best
through several iteration, through several runs of testing.

You select those ones, you implement them, which usually in digital
product it mean that you go through the UI design stage and then the
development stage. Then the final idea and final solution is
implemented, and this is in theory the end of design process.
To make it much tegible to you let’s
go through what a UX designer
would do at each point of the design
process
The Design Process
Let’s start with the problem (The Brief)
Usually you get a brief document or some sort of meeting with stakeholders from
the company you’re working with or from a client you would work with and the
brief usually outline some of the problems that you would need to solve through
the design process

The first stage would be the research stage, and I look at if from three
perspective,
First you need to interview some business owner, stakeholders or conduct
workshop with them to understand business objectives, business constraints or
any other requirement related to business or organization side of things
The second part is understanding the users. Understanding their underlying
problems and needs that you could address, that means basically empathizing
with them on a human level. But also understanding their function and how
you could support them with your digital product.

The third part is understanding the user experience. If the project means
redesigning of an existing project, then you need to go through the evaluation of
how the users experience is performing at the very moment.
The next stage will be analysis, this is where
you would go through all the knowledge
you’ve gathered so far and try to understand
what the underlying problems are and what
the organization you are working for needs to
tackle.

This can be done alone or with your team, you

gather together a room list out all the
observations you’ve gathered on a poster
notes
And try to cluster them to particular team, that will later be explored or address in
the design, that you would create on the team.
You create customer journey map and persona
After the whole team agreed on a problem to solve, you’ll need to move to the
next stage

After the whole team agreed on a problem to solve, you’ll need to move to the
next stage
This is the most fun phase because you will go on and explore different creative
solution to the problem you first define, ideation and then prototyping which actually
means designing particular screens and then going as wild as possible, trying to
explore different possible solutions, different approaches or layout, something that
might finally fit the users need and the business requirement.
The last part will be testing and UI
Which means the UI design, the wire Tools to Install
frame, the prototype that you’ve ● Create a Figma Account
gathered from the previous one, then ● Install Adobe XD
you would go on testing with the
users asking everybody for
feedbacks and try to select the best
ones.
 User Experience (UI) Design

What is UI Design

User interface (UI) design is the process designers use to build interfaces in
software or computerized devices, focusing on looks or style. Designers aim to
create interfaces which users find easy to use and pleasurable. UI design refers to
Visuals of a digital product

The user interface (UI) is a critical part of any software product. When it’s done
well, users don’t even notice it. When it’s done poorly, users can’t get past it to
efficiently use a product.

There are people who design this flow, this people are called UI designer
Example
The UI design principles are:

1. Balance
2. Hierarchy
3. Emphasis
4. Repetition
5. Rhythm
6. Contrast
 Balance

Every element of a design—typography, colors, images, shapes, patterns, etc.—

carries a visual weight. Some elements are heavy and draw the eye, while other
elements are lighter. The way these elements are laid out on a page should
create a feeling of balance.

There are two basic types of balance: symmetrical and asymmetrical. Symmetrical
designs layout elements of equal weight on either side of an imaginary center line.
Asymmetrical balance uses elements of differing weights, often laid out in relation
to a line that is not centered within the overall design.
Repetition Contrast
Repetition is a great way to reinforce an Contrast refers to how different
idea. It’s also a great way to unify a elements are in a design, particularly
design that brings together a lot of adjacent elements. These differences
different elements. Repetition can be make various elements stand out.
done in a number of ways: via repeating Contrast is also a very important aspect
the same colors, typefaces, shapes, or of creating accessible designs.
other elements of a design. Insufficient contrast can make text
content in particular very difficult to
read, especially for people with visual
impairments.
Emphasis
Emphasis deals with the parts of a design that are meant to stand out. In
most cases, this means the most important information the design is meant
to convey.
Rhythm
s
The spaces between repeating elements can cause a sense of rhythm
to form, similar to the way the space between notes in a musical
composition create a rhythm. There are five basic types of visual
rhythm that designers can create: random, regular, alternating,
flowing, and progressive.
Rhythms can be used to create a number of feelings. They can create
excitement (particularly flowing and progressive rhythms) or create
reassurance and consistency. It all depends on the way they are
implemented.
Element of UI design The UI design is divided into
stages
1. Font
1. low fidelity wireframes
2. Color
2. high fidelity wireframes
3. White space/ Negative space
4. Imagery
5. Icons
6. Navigations
 Low Fidelity wireframes

There are a few ways to include low fidelity wireframes in the UX design
process. Some designers will start by sketching out their web or mobile
interface’s screens on paper – these sketches are often referred to as paper
wireframes. They are typically concept sketches, a set of drawings or
storyboard, representing the skeleton of the interface.

The next level up is a low fidelity wireframe. Low fidelity wireframes include the
most basic content and visuals and are usually static (not interactive). They are
often used to help map out the shell of the interface, its screens and basic
information architecture. These wireframes are created using software, Adobe
XD, Figma, Framer Sketch etc..
Example of a Low Fidelity wireframe
 High Fidelity wireframes

high fidelity wireframes or prototypes are more complete representations of the end
product than low fidelity wireframes. Many are clickable and respond to the user’s actions,
mimicking authentic interface interaction.

Their aesthetics and content are more precise than lower down the fidelity spectrum, as
designers concentrate on refining the graphics, spacing and layout.

High fidelity wireframes are often built in the advanced stages of the design process to
communicate design decisions to the development team prior to coding the final product.

Additionally, they help validate complex interactions during user testing. These wireframes
provide test participants with realistic representations of what the product will look and
feel like, as well as how it will respond to them.
Example of a High Fidelity wireframe
Designers usually use different tools for depending on what
works better for them.

Tools: Figma XD, Invision, Sketch etc.

But we will be using Figma because is free and easily

accessible for everyone, maybe while exploring you could try
other design tools
UX vs
UI
UX vs
UI
UX vs
UI
UX vs
UI
UX vs
UI
UX vs
UI
 learning objectives

● Find our way around Figma’s interface

● Experiment with some of the key functions

● Learn important keyboard shortcuts

● Figure out how to control the interface (zooming etc.)

● Create Frames, Rectangles, and Text layers

● Use Arrange and Align command

 Set up your Figma account

Getting started in Figma is as simple as going to

www.figma.com, clicking “Sign up”, and entering your details.
Once you’ve done that, Figma will open up with a start screen
like this. Click on “New File” and we’ll get started!
 Set up your Figma
account
Take a look around the Figma interface
The look and feel of the Figma interface is quite minimal, but it belies a set of
powerful features. Here’s an explanation of the interface’s main areas (labeled
above):

Menu:

Unlike regular desktop design apps, Figma’s menus can be found by clicking the
hamburger button in the top-left of the screen. Take a minute to browse around
these menus and see what’s there! You can also search for the specific command
you need. Start typing in “rectangle” and you’ll quickly find the Rectangle Tool,
complete with a handy reminder of its keyboard shortcut (it’s R, by the way).
Tools:

Here you can quickly access the tools you’re likely to use most often: frames,
shapes, text, etc. (We’ll cover all these tools in the next couple of days!)

Options:

This area shows extra options for whichever tool you have selected. When no
object is selected (as shown above), Figma displays the file name. When an object
is selected, contextual options appear here.

Layers:

Where every element in the file is listed, organized into Frames and Groups.
Canvas:

This is where you create and review all your work.

Inspector:

The Inspector shows contextual information and settings for whatever object is
selected. In the image above, we’re seeing options for the Canvas itself. Note that
Figma gives us separate tabs in the Inspector (Design, Prototype, and Code)—we’ll
cover these later in the week.

Now that you’ve found your way around, let’s start making stuff! Note that we’ll be
referring to keyboard shortcuts a lot in these tutorials. It’s worth getting in the habit
of using these shortcuts right from the off, because they’ll significantly speed up
Getting Started with
Product Design
Mercy Muna Johnson

Twitter: @whatismunadoing