Welcome to week 3

Hi again. Earlier we explored how to design products that solve users' problems and give them
meaningful experiences. We covered the first three stages of the design process: empathize, define and
ideate.

Reproduce el video desde ::16 y sigue la transcripción0:16

Now that you've used empathy to identify and define a key user problem and ideated a solution, what's
next? The prototype stage. We'll define prototypes in more in detail later. But for now, you can think of
a prototype as an interactive representation of your design solution. In this module, we'll transition from
wireframes to low-fidelity prototypes. First, we'll create paper prototypes. Next, we'll learn from Figma
about how to use their tool to create digital prototypes. Then, I'll demonstrate how to create a low-
fidelity digital prototype in Figma. Finally, we'll explore ways to recognize potential bias in your designs
and learn how to avoid deceptive patterns. Let's get started!

Learn about low-fidelity prototypes

By now, you may have noticed that UX design is a cycle of continuous improvement. We come up with
an idea, conduct some research, and then update the idea. We're always trying to design the best user
experience possible, and that takes a lot of feedback and iteration. So, let's keep improving the designs
we've been working on. Earlier, you learned how paper wireframes become digital wireframes. Now
we're going to check out how a digital wireframe becomes a low-fidelity prototype. Let's start with the
basics. What is a prototype? A prototype is an early model of a product that demonstrates its
functionality, without actually building the entire product. A prototype shows stakeholders and your
potential users what your design idea can do.

Reproduce el video desde ::53 y sigue la transcripción0:53

Users can interact with the prototype and provide feedback before your team invests a significant
amount of time and money. So how does a wireframe become a low-fidelity prototype? To understand
the transition, you first need to know what a low-fidelity prototype is. We compared low-fidelity and
high-fidelity design in an earlier video. As a reminder, in UX fidelity means how closely a design matches
the look and feel of the final product. So a low-fidelity prototype is a simple interactive model that
provides a basic idea of what the product would look like. The goal is to make your designs testable so
that you can collect and analyze feedback early on. As we transition from a wireframe to a low-fidelity
prototype, the biggest difference is the interactivity or the ability to click from one screen to another. A
low-fidelity prototype can be on paper or digital. For a paper low-fidelity prototype. interactivity might
be a human acting as a computer and manually changing the design in real time. For a digital low-fidelity
prototype, interactivity might be connected wireframes where you can click on a certain part of the
wireframe, like a submit button, and be taken to the next wireframe. Later, we'll make a high-fidelity
prototype. But to get there, we need to build a low-fidelity prototype first. Alright, now you know the
differences between a wireframe and a low-fidelity prototype. Up next, we'll see this transition in action
and build a paper prototype.

Create a paper prototype

Hi there. The time has come to transition from wireframes to prototypes. We'll start with
building paper prototypes. So let's get cooking. You might be wondering, why would I want to
build a paper prototype? First, paper prototypes are inexpensive; all you need is a pen and
paper. Second, paper prototypes allow for rapid iteration. Because you're only using pen and
paper, you can whip up paper prototypes for lots of different ideas quickly. Third, building paper
prototype is low commitment. Digital prototypes take a while to make, so it can be painful if you
need to totally scrap them. But paper prototypes can be made quickly, so it doesn't burn so
badly if they need to be trashed.

Reproduce el video desde ::45 y sigue la transcripción0:45

Fourth, paper prototypes encourage honest feedback. Paper prototypes are less polished, which
makes your teammates and users feel more comfortable criticizing them. Finally, building paper
prototypes is a collaborative activity. There can never be too many cooks in the kitchen. For
example, different members of your team could each quickly sketch their own prototype for a
specific page of an app. There are, of course, some drawbacks to paper prototypes. It can be
hard to interpret a paper prototype. It requires a lot of imagination for users who are testing a
paper prototype to picture what the real product will actually look like. It's like a list of recipes
without any images. In addition, paper prototypes can only be tested in person. You need to
bring the paper prototype to the testing location, and a person has to act as a computer to
manually change the design in real time. Think of it this way: You can't taste a cake over a
computer. Lastly, paper prototypes are difficult to create with a remote team. Imagine trying to
make a cake when the baker and the decorator are in different countries. Because paper
prototyping is so hands on, collaboration is best for this activity when you're together in person.

Reproduce el video desde :2:2 y sigue la transcripción2:02

With all this in mind, when is building paper prototypes useful? Well, paper prototypes are great
to make during brainstorming sessions. You can quickly draw multiple ideas and compare those
ideas. You might also want to build a paper prototype to test your early product idea with users.
One more thing. It's important to point out that designers can take a number of different paths
when creating wireframes and prototypes. For example, once you've completed your paper
wireframe, you might discover that going straight to a lo-fi digital prototype works best for you,
or sometimes you might not use paper at all and build everything digitally, like if your app or
website is already well established. It all depends on what type of project you're working on and
what works best for you and your team.

Reproduce el video desde :2:50 y sigue la transcripción2:50

Alright, it's time to start cooking. Let's make our first paper prototype. For this example, we'll
build a paper prototype for a dog walking app. Remember the wireframe for the homepage that
I made earlier? While you were making your own wireframes, I also made wireframes for the rest
of the dog walking app: the user profile page, the scheduling page, and the checkout. Let's test
one of these wireframes out. Since we sketched a schedule button on the homepage, let's find
out what happens when we give it a tap. Absolutely nothing. So how do we take this wireframe
and turn it into an interactive, low-fidelity prototype? Well, it's time to get crafty. To make our
prototype interactive, I'll grab a pair of scissors and cut out every screen like this.

Reproduce el video desde :3:43 y sigue la transcripción3:43

To save time, I'll borrow a trick from popular cooking shows.

Reproduce el video desde :3:53 y sigue la transcripción3:53

And voila! We have our cutouts. But wait there's more! We also need the outline of a mobile
phone that the screens will fit inside of. Let me see if I have one in here. Oh, yes, here we go.
Now that we have our screens and mobile phone outline, how do we make them interactive?
First, think about the order that a user will experience each of the screens you've drawn. That's
the order we should lay them out in. Let's start with the homepage, since that's where our users
will enter the app. I'll place the screen with a homepage here. Next, I'll place the schedule screen
to the right of the homepage, where users can select a date and time for the dog walker to visit.
To the right of the schedule screen I'll place a screen with a list of available dog walkers on this
date and time. To the right of this screen, I'll place the dog walker profile page with a book
button. To the right of the profile page I'll place the booking confirmation page. We might also
want to consider what happens when a user visits the app to edit their profile. They wouldn't go
through the flow we just discussed. Instead, we'll place that screen to the left of the homepage.
To make our prototype interactive, let's imagine a user wants to schedule a dog walker on the
11th of the month at 5:00 p.m. Let's use the mobile phone outline to simulate how the user
moves through the app. This will require some imagination. The user opens the app and starts
on the homepage. They tap the schedule button and are brought to the schedule screen where
they can select a date and time for the dog walker to come to their home. Next, the user selects
a date and a time and presses the Book button. They're brought to a screen with a list of
available dog walkers on the date and time they selected. To select a dog walker, the user taps
on the dog walker's profile. This takes the user to the dog walker profile screen. Here, we click
book and we'll go to the checkout screen. Then the user clicks on the Confirm button. Whoops,
it looks like I forgot to make a screen for the confirmation page. This happens all the time and is
the reason why we make an interactive prototype. As I'm working with paper, it's super easy to
create the missing screen. Let me grab my supplies. Give me a couple seconds to draw this. I'll
start with a simple rectangle for the phone outline, and then I'll add a square with an X to
represent an image of the selected dog walker and add a few lines below the image to indicate
the confirmation text. Now let me quickly cut this out.

There we go. I can now finish the user's journey through the app.

And there you have it! A paper prototype. If you want to make your paper prototype a fancier
dish, you can add a scrolling element to the mix. Let me see if I have one in my picnic basket
that I can show you.

Reproduce el video desde :7: y sigue la transcripción7:00

Here we go. This paper is another version of the available dog walker screen that I made earlier.
It's a long list of many dog walkers, which is what a user would likely experience in the real app.
To simulate how a user scrolls, we place the mobile phone outline at the top of the screen. I'll
hold down the mobile phone outline and slowly scroll through the long screen using my finger.
There you go. You've just learned how to turn a paper wireframe into a lo-fi paper prototype.
Awesome job. Before we come to a close, it's time for a little pop quiz. Why do you think we
decided to design for mobile as a first step? Because it's the smallest space our designs might
appear in. If our design works well on the limited screen of a mobile device, there's a good
chance it'll fit on a larger interface like a computer monitor too. One other thing to keep in mind
when deciding whether to design for mobile or desktop is what's best for the product and
business. Either way, you can create paper prototypes like we did here. Coming up, we'll check
out how the wireframe to prototype transition works on a digital level.

Creative ways to make paper prototypes

There are a lot of fun and creative ways to make paper wireframes and prototypes. So far,
you’ve learned about the most common way: drawing wireframes and prototypes on a plain
piece of paper. If you’re feeling imaginative or want to try something new, explore the
methods that are introduced in this reading. 

Preprinted templates

Preprinted templates are a great timesaver for drawing wireframes and prototypes. Squares
or outlines of the device you’re designing for are preprinted on the page, so there’s no need
to draw them. In addition, the 8 ½” x 11” space of the paper allows you to include multiple
screens of your design on one piece of paper, which is helpful when drawing a flow or a
sequence of actions that you want to review side-by-side. 
Download and print these free PDF templates to draw your own paper wireframes and
prototypes: 

 Mobile phone outline for wireframes and prototypes

 Rectangle outline for wireframes and prototypes (standard mobile phone screen size)
 Rectangle outline for wireframes and prototypes (long screen for scrolling)
Here’s an example of how a Google UX designer, Kaiwei, used a preprinted template to create
wireframes for their app design. 

Index cards

Instead of sketching all of your ideas on one piece of paper, try drawing them on a bunch of
different index cards. Each index card can represent a mobile phone screen. Use tape or push
pins to stick the index cards to a whiteboard or wall, or arrange the index cards in order on a
table. 

Here’s an example of wireframes on index cards being used by a Google UX designer, Dane,
and his teammate. 
One advantage to using individual index cards to create each screen of your design is that you
can easily remove a drawing you don’t like without having to erase or cross anything out, like
you would when drawing multiple ideas on a piece of paper. Simply recycle the index card
that you no longer need! 

Designing on index cards is especially useful for brainstorming sessions because you can
easily add, reorder, or remove index cards from the user flow. Members of your team can each
create their own index cards with unique designs, which can be combined into one user flow
through the app or website you’re creating. In addition, you can quickly rearrange individual
screens, or index cards, and put them in any order to follow the user flow through your app. 

Sticky notes

Sticky notes are another way to explore creating paper wireframes and prototypes. As a UX
designer, it’s a good idea to always have sticky notes readily available so you can jot down a
single idea on each. 

Try using sticky notes of different sizes and colors to represent different parts of your design
idea. Or use colored sticky notes to call out important parts of your wireframes and
prototypes, like Dane and his team did.
Stencils

Pre-made stencils (for purchase) can be super helpful during the paper wireframing and
prototyping process, especially if you’re new to drawing or intimidated by it. Stencils often
include a built-in ruler, symbols, and icons that are common in UX designs. Using a stencil like
this one can help your drawings look neater and more realistic. 
Demo device

A demo device is a piece of paper or other material cut out in the shape of a mobile phone.
You can place your sketches inside of the demo device to simulate a more realistic user
experience with your product. Remember the demo device from the video with Karen that
you just watched?

Some demo devices are even fancier, like a pre-made, laser-cut holder in the shape of
different types of mobile phones that you can insert an index card into to simulate a
screen. Using a demo device allows you to see how your design will look at scale on a mobile
phone. Mobile phones come in all different sizes, so just because a design works for an
iPhone, for example, doesn’t mean that it will appear the same way on an Android. Demo
devices can help keep these differences in perspective and are made at scale for different
devices. 

It’s up to you

One method for creating paper wireframes and prototypes isn’t always better than another.
It’s just a matter of your particular preferences and needs. Do you need to know how your
design will look on a specific type of mobile device? Try a demo device cutout. Are you in a
meeting with a stakeholder and want to show them your wireframe ideas? Draw them on a
template or index cards. Get creative and find what works best for you!

Activity: Practice creating a low-fidelity prototype for the CoffeeHouse project

Puntos totales 10

1.
Pregunta 1

This activity will help you understand how to create low-fidelity prototypes using paper. A low-
fidelity prototype is a simple, interactive model that provides a basic idea of a product’s design, so
it can be tested early in the design process. Paper prototypes allow you to quickly draw and
compare multiple design ideas. This makes paper prototypes great tools for brainstorming sessions. 

In this activity, you will use the paper wireframes you created for the CoffeeHouse app in the activity
Practice creating paper wireframes to build your paper prototype. After completing this activity, you'll
have the opportunity to compare your work to a completed exemplar in the following course item.
You can use the research you conducted for the CoffeeHouse app to determine the user journey or
user flow your prototype follows, or you can use the research exemplars provided here.

CoffeeHouse app research

Below are the CoffeeHouse App user journey maps for example users Ali and Anika:
Step 1: Gather materials and tools
Gather the following materials and tools:

 The paper wireframes you created for the CoffeeHouse app in a previous course activity

 A pair of scissors

 A pen or pencil and paper, in case any screens are missing from the user flow

If you skipped the Create paper wireframes activity, go back and complete it so you can use the
paper wireframes for your paper prototype. 

Step 2: Cut out each screen

Using a pair of scissors, cut out each paper wireframe screen. All of the screens should be their own
separate pieces of paper that can be placed beside each other in a sequence. 

Step 3: Select the user journey to prototype

Review the user journey maps from your CoffeeHouse app research, and select the user journey
you want to prototype and test, like placing an order for coffee through the app. 

Step 4: Arrange the screens in order

Think about the order a user will experience the screens in the user journey. Arrange the screens in
a row to follow this user journey sequence: Begin the order with the screen the user will start on and
end the order with the last screen in the journey.

Step 5: Review your paper prototype’s sequence

Now that your paper screens are arranged to follow the user journey, try to imagine your new paper
prototype as an actual app. Then perform the sequence as a user would. This can help you
determine whether screens need to be rearranged, or if any screens are missing in the user
journey. 

If any elements in the paper screens would need to be tapped or clicked to progress in the mobile
app, it’s best practice to tap them on the paper screens during your review as well. This could
include any elements like menu icons or buttons. It might seem silly at first, but it’s a great way to
figure out whether these elements are in the best locations for the user journey. 

Feel free to rearrange screens to make sure the order you’ve decided creates a clear, focused user
journey. If any screens are missing in the user journey, use your pen or pencil and paper to draw
these missing wireframes.

After you’ve drawn any missing wireframes, repeat steps 2–5 to add the missing screens to your
prototype. 

Step 6: Reflect on the completion of this activity

For your low-fidelity paper prototype, did you:

 Cut out each screen of your paper wireframes for the CoffeeHouse app?

 Choose a specific user journey to test, like ordering coffee through the app?

 Arrange the screens in the sequence of the user journey?

 Ensure all screens for your chosen user journey were included?

 Test your user journey by interacting with your prototype? For example, physically pressing
the buttons on the screen in order to advance to the next screen.

 Resolve any missing steps to your user journey?

Did you complete this self-review activity?

Activity Exemplar: Practice creating a low-

fidelity prototype for the CoffeeHouse project
Here is a completed exemplar using the dog walking app from the course videos, along with
an explanation of how the exemplar fulfills the expectations for the previous activity. 
In this exemplar, each screen was cut out individually and placed sequentially from left to
right. The order was based on the chosen user journey of scheduling a dog walker with the
app. The images depict an example of how you users interact with this prototype by pressing
the schedule button to advance to the next screen.
The paper prototype follows a clear user journey through at least four frames in a
navigational flow (frames pictured as an example). Navigation cues are clearly indicated in
the prototype, and the successful completion of the flow’s activity is indicated.

Now compare the exemplar above to your completed deliverable. Assess what you’ve done
using the criteria used here to evaluate the exemplar. 

As you evaluate your work, review the following criteria and make sure it fulfills each one:

 The prototype is made of paper wireframe screens for the CoffeeHouse app.
 A specific user journey is being tested.
 All screens for the chosen user journey are included.
 The screens are arranged in the same sequence as the user journey.
 Navigation cues are indicated to the user.
 Successful completion of the user flow is indicated to the user.
 Any missing steps in the user journey have been addressed.
What did you do well? Where can you improve? Take this feedback with you as you continue
to progress through the course.
Learn more about lo-fi prototyping in Figma
Now that you’ve put your ideas on paper with wireframes and paper prototypes, you’re ready
to create a digital prototype in Figma! Digital prototyping makes it easy to share, edit, and
collaborate on your designs, and it helps you get one step closer to visualizing your final
product. In this reading, we’ll go through step-by-step instructions for creating a lo-fi
prototype in Figma.

Prepare to create your prototype

Before you start building a prototype in Figma, you should ask yourself how users might
interact with your product. Some questions to consider are:

 What are common user flows through your product?

 What buttons will users interact with? What order will they perform these actions in? 
 What will users expect to happen after they click a button or submit a form?
Thinking about these questions before you start prototyping will help you design for different
and diverse types of user interactions. You’ll be using these questions, along with your
wireframes and paper prototype, to build a digital prototype in Figma. 

Remember, wireframes are made up of text, basic shapes, and lines. You’ll use wireframes
and low-fidelity prototypes to show stakeholders how your design will look without including
color or detailed content. Your designs can (and will) change over time, so it’s totally normal
if you don’t know exactly where things should go yet. The important thing when it comes to
wireframes is to create an outline of your design that clearly conveys your ideas.

Below is an example of a wireframe created in Figma for the dog walker app. The dog walker
app will be used as the example throughout this reading.
When your wireframes are ready to go in Figma, it’s time to transition to a low-fidelity
prototype. Ready? Let’s go! 

Create a prototype in Figma

Follow these five steps to create a low-fidelity prototype in Figma for your own app designs:

1. Create wireframes in Figma. 

Open Figma and start a new project. As shown in the image below, click the hamburger icon
in the upper left corner of the screen, click File, then click New.
Select the Frame tool from the toolbar at the top of the screen, and choose a frame that
matches the device you're designing for. The correct frame will automatically appear on your
screen. Or, you can create a custom size frame by selecting the frame tool and dragging your
cursor across the screen to the desired size. 

Next, create the elements of your design using the Shape tools located in the toolbar at the
top of the screen, as outlined in the image below. There are several different shapes that can
be chosen by clicking the dropdown arrow. Remember that wireframes are typically drawn
using basic shapes like squares, rectangles, circles, and lines. To learn more, check out this
article about how to use shape tools on Figma’s blog.
Then, use the Text tool to add labels, descriptions, and headers to your wireframes. The Text
icon is outlined in the image below. Click where you want to add text, and start typing to
create a new text box. Text boxes can be moved by dragging, and modification options are
available in the menu on the right side of the screen. 

Repeat this process for each screen in your app. At this point, you should have a full set of
wireframes that represent the user flow through the app you’re designing. Make sure to
arrange the wireframes in a logical order to make prototyping smoother. 
2. Rename wireframes.

Click the name of a screen to select it. Then, go to the Layers panel on the left side of the
screen. Double click the name of the selected frame in the Layers panel to change its name, as
shown in the image below.

Repeat this process to clearly label each wireframe screen, like “Home” or “Settings.”  The
names of the screens in the dog walker app are outlined in the image below.
3. Move from the Design tab to the Prototype tab. 

The Design and Prototype tabs are in the menu at the top right of the screen. These tabs allow
you to switch between editing your designs and working on the interactive prototype
elements. Pay attention to which tab you’re in, otherwise some things may not work the way
you expect. To create a lo-fi prototype, switch to the Prototype tab.

4. Connect a node.

Hover over any element in your wireframes, and a small circle with a plus sign in the middle
will appear, as shown in the image below. This is called a node. A node means that you can
connect screens based on how you’d like users to move from one screen to the next. For
example, you can connect a screen that has an interactive element, such as a button, to the
screen that displays the result of that interaction.
Choose the element that you want to make interactive, and click the node that appears when
you hover over it. A connection arrow should appear. Using your cursor, drag the arrow to the
screen you want the element to connect to, then release the click. The two elements are now
connected, meaning the user will be taken to the landing screen when they interact with the
element you selected. 

The image below shows an example from the dog walker app. After the user clicks the
"schedule" button, they’re taken to a new screen where they can schedule a date and time for
the dog walker to come. The blue arrow represents how the two screens of the app connect.
5. Repeat this process for each element that connects to another screen.

In the dog walker app, the user starts on the home screen, clicks the "schedule" button, and
is taken to a new screen where they can schedule a date and time for the dog walker to come.
Next, the user can browse a list of available dog walkers. Then, the user clicks on the "learn
more" button beneath a dog walker’s profile, and selects the "book" button on the next
screen. They are taken to a payment screen, and finally directed to a confirmation screen
after submitting their payment. Notice how each step, or node, flows logically into the next
just like a real user would move through a real app.
To connect all of your wireframes together into a fully functional prototype, go through each
of the interactive elements in order and ask yourself what that element needs to connect to.
Think of this like an audit of your designs; make sure that every interactive element you’ve
designed has something it connects to. If an interactive element doesn’t have a screen to
connect to, that element needs to be removed from your design or a new screen needs to be
created! Visualize how the buttons and pages of your app will function to get a better idea of
which element is responsible for which actions. 

Now you know the steps required to create a low-fidelity prototype in Figma! You’re ready to
create your own low-fidelity prototype in Figma. It can be very exciting to watch your design
take shape and start to function like a real product! Good luck. 

Activity: Practice creating a low-fidelity CoffeeHouse prototype in Figma

Puntos totales 10

1.
Pregunta 1
This activity will help you apply the prototyping skills you've learned. In this activity, you will build a
low-fidelity prototype of your complete user flow for the CoffeeHouse app. Then, you can begin
testing basic functionality and usability.

After completing this activity, you'll have the opportunity to compare your work to a completed
exemplar in the following course item.

Before you begin, make sure you have the Figma project containing the wireframes you created in
the activity Practice creating digital wireframes in Figma for your CoffeeHouse project open.

Step 1: Change from the Design tab to the Prototype tab

In the upper-right corner, there's an option to change from designing wireframes to connecting them
in a prototype. Switch over to the Prototype tab.

Two
images of the the Figma menu with the options to view design, prototype, and inspect. On the left,
design is "Highlighted". On the right, "Prototype" is highlighted.

Step 2: Select an element’s connection node

In Figma’s prototype mode, when you click on an element of your wireframe, you will notice a small
blue circle. When you hover over it, a plus sign appears. This is called a connection node. With it,
you can tell Figma what screen to show next when that element is clicked.
 The graphic shows a hamburger menu built into a wrieframe.
The next image shows the side of the menu pressed so it can be connected to another screen

Step 3: Make a connection between an element and a

screen
Using that connection node, drag to make a connection to the following screen. When the
connection is made, you’ll have a few options available in the Interaction details pop-up. As this is
a low-fidelity prototype, the standard interaction (“On Tap - Animation: Instant”) will work well. If you
accidentally connected the wrong screen, you can change it in the dropdown in the Interaction
details pop-up as well. 

As you’re working on this process, think critically about the element you’re connecting. You can
connect any element to any page in Figma, but make sure that a user can tell that they can or
should interact with an element. Ask yourself: “Do my buttons look like buttons?” Navigation cues
help to guide a user through your product and are the foundation that your prototype is built on.

Repeat steps 2 and 3 until you’ve connected all elements to their respective screens. It might end up
a little messy, but that’s fine! You’re just observing all the ways a user can navigate your prototype.
Step 4: Preview your prototype in action
With your connections made, click the Play button in the upper-right corner to ensure everything is
working as expected. When viewing the prototype, you can also share it; this will be an asset to you
when you want feedback on your prototype. 

Congratulations! You’ve built your first low-fidelity prototype. Producing an interactive digital product
is a big deal. 

Step 5: Reflect on the completion of this activity

Be sure to address the following questions in your completed deliverable:

 Did you connect all the wireframes required to complete the main user flow?

 Did you provide a means for users to proceed forward and backward within the flow?

 Are cues for navigation clearly indicated within your prototype? 

 Did you indicate successful completion of the simulated activity?

 Did you return users to a sample origin after completing the simulated activity?
Step 6: Save your work
As you complete these activities, remember to: 

1. Take photos of your progress and save them. These can include progress photos of sketches,
photos of different stages of the activity, pictures of brainstorming sessions, and even
photos of you working. 

2. Save all of your work to your computer, a hard drive, or a Google Drive folder to make sure
you have all the resources you'll need later in the course for your portfolio.

Did you complete this self-review activity?

Activity Exemplar: Practice creating a low-

fidelity CoffeeHouse prototype in Figma
Here is a completed exemplar of the previous activity. As you view the prototype below, note
that it lets the user explore the potential functionality of the app, and it lets them understand
how information is displayed and prioritized.

View the prototype on Figma's website. Click on the labeled buttons to navigate through the
prototype.
Notice how this prototype:

 Connects all the screens required to complete the primary user flow
 Allows users to move backward and forward
 Includes navigational cues (the buttons look like buttons). For instance, the “Start New
Order” element is visually different from the “Team Favorites” element seen above. One
is a button that a user can interact with, and the other is a header for a section.
The primary user flow for the prototype is starting a new order, adding items to it, and then
paying for that order. This prototype’s task also has an end and sends users back to the home
screen after completion. 

Now compare the exemplar above to your completed deliverable. Assess what you’ve done
using each of the criteria used here to evaluate the exemplar. 

As you evaluate your work, review the following criteria and make sure it fulfills each one:

 All of the wireframes required to complete the main user flow are included.
 There is a way for users to proceed forward and backward within the flow.
  Cues for navigation are clearly indicated within the prototype.
 Successful completion of the simulated activity is indicated for users.
 Users return to a sample origin after completing the simulated activity.
What do you do well? Where can you improve? Take this feedback with you as you continue to
progress through the course.

Recognize implicit bias in design

Hi there, it's me, Karen, again. As you might remember from our earlier course on UX
Research, everyone is influenced by their personal biases. When bias creeps into UX Research,
you might move forward with a product that doesn't address the user's real pain points. UX
designers can also be affected by implicit bias. So we need to be aware of how our own points
of view can alter our designs, influence users and affect society. In this video, you'll learn how
to recognize bias and how to consciously avoid its impact on your designs. One of the most
common biases affecting designers is implicit bias. As a refresher, implicit biases are the
collection of attitudes and stereotypes we associate with people without our conscious
knowledge. Whether positive or negative, these biases can unconsciously be mistaken for
truth when in reality they aren't. Implicit bias can have detrimental effects on those who are
the subject of the bias.

For example, let's say that a restaurant manager is looking to hire a new employee. The
manager has two applicants. One is a 22 year old with no restaurant experience. The other is
a 53 year old with over 30 years of experience working in the food and beverage industry. If
the restaurant manager has an implicit bias that people above the age of 50 are easily
overwhelmed or move slower than younger people, they might overlook the older applicant
without reviewing the applicant's experience. This is an implicit bias against the older
applicant. Age alone doesn't speak to someone's behaviors, actions or abilities. Biases like
this can result in qualified people not being hired or even being terminated unfairly. Implicit
biases often find their way into the UX design development process. For example, imagine
you're designing a map application for New York City. Because your implicit bias is that
people walk as a primary form of transportation, the directions in your app assume the user is
walking. This means your app will give map routes following sidewalks and passing through
green spaces. But your implicit bias is flawed. While many New Yorkers walk to work, millions
of New Yorkers use the subway, take the bus, ride in cabs, drive and bike. You wouldn't want
your app to direct someone in a car through a green space because you assumed they'd be
walking. More importantly, many people are unable to walk. So your implicit bias that all New
Yorkers walk ignores ability as a constraining factor. Someone relying on public
transportation would need directions to the nearest subway or bus stop and someone in a
wheelchair might not be able to access a subway station. For example, only one in four
subway stations in Manhattan, a borough of New York City, are wheelchair accessible. In this
case, our bias about New Yorkers prevents us from creating a product that truly serves all our
users. Implicit bias is just one reason why creating and following personas and user journey
maps is so important. To refresh your memory, a persona is a fictional user whose goals and
characteristics represents the needs of a larger group of users. And the user journey is their
path to the product, meaning what the user's needs are and how the product can solve those
needs. When creating personas, UX designers need to be as inclusive as possible. We
shouldn't assume that a certain ethnicity, gender, age, ability or socioeconomic group is or
isn't part of our audience.

Users can be complex human beings with many unique qualities and distinct needs.

User research helps us avoid assumptions about who our users are. Instead, research helps us
better understand users and give them what they need. For example, imagine you're
designing an app to help parents buying childcare. To personalize your onboarding process,
you start by showing the message Welcome moms, we're here to help you find the right
babysitter for your little one. You might have thought that by addressing users directly as
moms, you're humanizing the experience. But there's something wrong with this message. It
immediately excludes every other type of caregiver, like grandparents, guardians, dads and
others. Implicit bias like this leaves out important users, which is bad for business. Addressing
users this way also reinforces the stereotype that moms are in charge of figuring out child
care and it presumes that every child has a mother. Being aware of your implicit biases and
combating stereotypes is important work. By creating inclusive user experiences, designers
help build a more equitable society. Okay, now you know how implicit bias can affect your
role as a UX designer. There are more biases we'll cover in the course readings. Coming up,
we'll discuss another ethical issue in UX design called deceptive patterns. See you there.

Avoid deceptive patterns

Have you ever checked the box in an app for a free trial, assuming there were no strings
attached, only to find out later that your credit card was charged? And even worse, there
wasn’t an easy way to cancel the membership? Or perhaps you’ve signed up for a newsletter
only to realize after you clicked “Submit” that you’d also agreed to sign up for multiple
“related” newsletters. It happens to everyone! 

These experiences are examples of deceptive patterns. Deceptive patterns trick users into
unintentionally completing an action online. Deceptive patterns can include a range of visual,
interactive, audio, or motion elements that are added to designs to deceive users.
Although the term “dark patterns” is often used in the industry, at Google and at other places,
designers often use the phrase “deceptive patterns” to avoid referring to something
problematic as “dark” and potentially “bad.” Instead, the word “deceptive” focuses on the
tactic itself that tricks users into doing or buying something they wouldn’t have otherwise
done or bought. 

Deceptive patterns were first exposed in 2010 by UX designer Harry Brignull. He listed 11
types of patterns; some of the patterns overlap with the ones discussed in the video. Let’s
take a closer look at some common deceptive patterns you might encounter in your work as a
UX designer.

Forced continuity: The practice of charging a user for a membership without a warning or a
reminder.

Think back to the scenario from the beginning of this reading: a user clicks a box on an app
thinking they’re getting a free trial with no strings attached, only to find out later that their
credit card was charged, and there’s no easy way to cancel the membership. As a UX designer,
be upfront and transparent with users. 

 Notify users before their free trial ends and before they are charged. 
 Make it easy for users to cancel their membership. Don’t make users search for the steps
to cancel.
 Provide a link to take users through the cancellation process. 
 Make sure the visual elements in your designs, like buttons, are labeled clearly.

Sneak into basket: When a user has to remove an item from their cart if they don’t want to
buy it, which is an extra step that could be easily missed.

An example of sneak into basket is when an extra item is added into a user’s shopping cart
while checking out, or an extra plan or service is pre-selected as “add to my cart” during the
checkout process. An easy way to avoid this deceptive pattern in your designs is to make sure
no boxes are pre-selected that add items to a user’s cart. There should not be any surprises
about what the user is expecting to purchase.
Hidden costs: Hidden or unexpected charges in the user’s cart that are not revealed until the
end of the checkout process. 

An example of the hidden costs deceptive pattern is when a user thinks that they’re paying a
specific amount for a product or service, but at the end of checkout, they find out there are
additional fees. Apps and websites add these hidden costs hoping that users will be too tired
to find another site with cheaper products and unwilling to go through the entire checkout
process again elsewhere. 

In your own designs, be sure to give users all pricing related information upfront. A good way
to avoid hidden costs is to make a calculator available during shopping where the user can
calculate extra costs, like shipping and taxes, before checking out.

Confirmshaming: When users are made to feel guilty when they opt out of something.

An example of confirmshaming is when a user is attempting to make a choice and the copy
inside of the button is attempting to make them feel guilty about their choice. These are
added with the hope that users will choose to opt-in to a service being provided because they
are worried they'll be missing out.

As you design, think carefully about the words you are using on buttons and confirmation
screens to avoid manipulating the emotions of your users.

Urgency: Attempting to convince users to purchase an item before they run out of time and
miss today’s “amazing” price.

An example of urgency can be when a pop up opens on a website to promote a deal just for
the next hour or a coupon that expires in thirty minute. The goal of urgency is to rush the user
into making a purchase in a limited amount of time otherwise they'll miss an amazing deal
and have to pay full price.

Urgency is not just about offers and deals that are limited, it's about adding increased
pressure on the user to commit to a purchase quickly. In your designs, think about how you
are utilizing urgency and ensure you aren't using this deceptive pattern to manipulate your
users into making sales quickly.

Scarcity: When a website makes users very aware of the limited number of items in stock.

An example of scarcity is when a website says that there are only five of this item left, usually
followed by a message that urges the user to make a purchase before it's too late. This is one
way that a sense of urgency, as mentioned above, can be applied to a product's sale.

In your designs, think about what user's need to know about a purchase that they are going
to make and if scarcity is being used to urge them to commit to an impulse purchase or if it is
meant to inform users of the availability of a product. Designers should always aim to inform
and not deceive users.

What can you do to avoid deceptive patterns?

In your role as a new UX designer, you can help prevent deceptive patterns by being aware of
them. That way, when you see a deceptive pattern in action, you’ll be able to correct them.
Remember, deceptive patterns are unethical and should be avoided. Being clear and honest
with your users will strengthen their trust in your brand and product.

Explore the effects of designs that deceive

In this video, we'll address the effects of deceptive patterns, and how you, as a UX designer,
can avoid using them in your work. Everyone's affected by deceptive patterns. Consumers
today are more aware than ever of the tricks that businesses and advertisers use to get them
to buy products. But consumers are still impacted by the psychological effects of deceptive
patterns. Deceptive patterns are harder to ignore than traditional forms of advertising
because they're designed to be difficult to identify.

Reproduce el video desde ::34 y sigue la transcripción0:34

Imagine you're in a brick-and-mortar clothing store shopping for jeans. A salesperson comes
up to you and asks if you need help and you politely send them away. Ten seconds later, the
salesperson comes back and asks again, telling you that there are only 4 more pairs of jeans
left in your size. Ten seconds after that, they bring you a stack of t-shirts that they think you
might want, and 10 seconds after that, they ask if you want to sign up for their store credit
card. All of this together would likely annoy or anger you. You'd probably leave the store
without buying anything. But imagine the same scenario happening in an online store. This
might have even happened to you. You open a clothing store's website and navigate to the
jeans department. You find a pair you like and notice a message that there are only 4 left in
stock. You don't want to miss out, so you quickly add a pair to your cart. Then a bar on the
side of the screen suggests a shirt to go along with those jeans. You imagine that if other
people bought this combination of shirt and jeans, it might look good on you too. When you
click on the shirt, a pop-up ad offers a 10 percent discount if you provide your email address.
What a deal! At the checkout page where you're buying the jeans and t-shirt, and using the 10
percent off coupon, you realize something else has appeared in your cart. It's laundry
detergent that's specially formulated for the jeans you're buying. Great. Maybe your jeans
won't fade now. What happened in each of these situations? In the brick-and-mortar store,
you may send the salesperson away and eventually leave without buying anything. In the
online store, you're convinced to buy more than the jeans you initially came for, and your
email address has also been captured for that site's future marketing campaigns.

Reproduce el video desde :2:30 y sigue la transcripción2:30

Deceptive patterns are designed to intentionally trick you. With so many deceptive patterns
that play, it's easy to miss one. Okay. Let's consider one more scenario. Think about how you
react when there's a bright red notification flag on your favorite social media app. Chances
are you feel a sense of urgency. The red flag makes a notification feel like something you need
to deal with right away. When those notifications pop up on your computer or phone
throughout the day, you get a dose of dopamine, which is a natural chemical in the brain
that's released when something pleasurable happens. That makes us feel good or intrigued.
For example, sometimes a jingle or a short sound accompanies a notification, or the red flag
might wave or use motion to grab your attention. The addition of sound and motion further
enhances that dopamine effect. But how does it feel on the flip side when you don't get any
notifications? Well, this is another physical effect of deceptive patterns. When you don't get
any notifications, you can feel anxious. You might even be able to imagine a time when you
refreshed your phone or computer waiting for a new notification.

Reproduce el video desde :3:45 y sigue la transcripción3:45

Keep in mind this takeaway. There are many techniques to encourage users to sign up for or
purchase your product without tricking them. As UX designers, we need to be aware of
methods for attracting users and ensuring that users have a good experience with our
product without deceiving them. If you detect deceptive patterns being used in the products
you're working on, you should raise that issue with your colleagues quickly. Beating
deceptive patterns is a team effort. The first step to fighting them is recognizing them, and
you're already gaining the tools you need to do just that.

Understand the attention economy

As a UX designer, the product you create will constantly compete for users’ attention. If users
are paying attention to one thing, like a notification on their mobile phone, it means they’re
ignoring something else. There are only 24 hours in a day, so users have to be selective about
how they spend that time! This battle over users’ attention is referred to as the attention
economy. 

The term attention economy originated with psychologist and Nobel Laureate Herbert A.
Simon, who believed that there are limits on what humans can think about and do at one
time. Many scientists believe that humans aren’t very good multitaskers; technology should
help users, not distract them. The more distracted a person is, the less likely they are to
complete a task well.

The clash between attention and distraction is why UX designers need to consider how the
products they design will affect a person’s behavior. Simon once said, “A wealth of
information creates a poverty of attention.” In your role as a new UX designer, it’s important
that technology improves the lives of your users and doesn’t harm them. Designers need to
make sure they don’t design their products in a way that encourages addictive behaviors that
could negatively affect users’ lives. 

On the left, they are greyscale and have their eye closed, and have icons to the left such as a
checklist, a house, a stationary bike, a calendar, a baby. On the right, they are more colorful and
have an eye open. To the right of them, there are icons like a video game controller, text
message conversation, a laptop, a phone with various app notifications

The concept of the attention economy also explains how interacting with technology may
cause depression or anxiety for some. For example, a user may feel sad when they don’t hear
or see new notifications on their phone, or they may experience the fear of missing out (also
known as FOMO) if they don’t continually refresh their social media feed or check their
messages. Even seemingly small details, like the colors used and the volume of notifications,
can be distracting to users or cause them to feel anxious. 

Technology makes many things faster and easier, but it shouldn’t control people’s lives.
Recently, companies have started to understand the psychological impact of technology and
are updating their designs to help users stay away from the pitfalls of the attention economy.
For example, at Google, the Digital Wellbeing toolkit helps users better manage how they use
their phones and the amount of time spent on them.

Apple also updated their apps so that they don’t send notifications while users are driving. It’s
human nature to want to check your messages as soon as you receive a notification, but
implementing this feature helps keep users safe. This is just one example of how design can
become more ethical and considerate.

It’s a good idea to think about the attention economy as you begin working as a UX designer.
Here are some best practices for you to consider to help you avoid bad design decisions:

 Avoid deceptive patterns. Be honest with users. Think about your purpose for
design and how your own values align with the design. 
 Think about goals and metrics. Understand your company’s business goals and
key performance indicators. Pay attention to how these business goals might
contradict or align with your users’ goals.
 Share good design practices with the people you work with. Understand your
position of power as a UX designer. You have the ability to influence the decision-
making process for good and make sure that the right design choices are being
made.
The idea of attention economy has become increasingly important to the discussion of how
design can positively and negatively affect users. The more we respect users’ time, attention,
and experiences, the easier it will be to keep the focus of design on people, their needs, and
the ways they can enjoy technology.

If you want to learn more about the attention economy, check out this article from the
Nielsen Norman Group or this article from the Berkeley Economic Review.
Understand your impact as a UX designer
UX designers have a unique opportunity to improve the way technology impacts the lives of
people around the world. Ethical design is about understanding how your design work
affects the world. This reading will help you better understand your impact on society as a UX
designer and ways to stay accountable as you move forward in your design career.

As a UX designer, you should consider the needs of all different types of people, regardless of
privilege or power. Society often enables those with the most privilege and power to shape
the dominant culture. A dominant culture affects the values or norms that are important for
other cultures. If a dominant culture’s influence is too strong, many cultural points of view
might not be considered in the design process. This means that some users might be left out. 

Your goal as a designer is to always put user needs front-and-center when creating a product,
and that means understanding all of the product’s potential users. Conducting thorough
research with a diverse group of people is a great way to make sure your work meets all users’
needs. Try to notice the assumptions about users that you bring to the research process, then
think of ways to challenge those assumptions. Consider questions like:

 How are the people using your product different from you? 
 How can you help people from non-dominant cultures feel more included in your
product design? 
 Are there any challenges that people from certain groups or backgrounds might
face as they experience your product?
 If you feel a certain way about the product you’re designing, what’s the opposite
of that feeling? Chances are, one of your users has that opposite perspective.

As you design products, consider how marginalized and underrepresented populations might
react to your designs. A marginalized population is one where people experience
discrimination or exclusion from mainstream society because of specific characteristics or life
experiences that are wrongfully deemed as inferior. Here are a few examples of marginalized
populations: 
  People with disabilities
 People with limited access to technology 
 People who speak different languages
It’s important to design products that are inclusive and easily accessible to all users. For
example, if a user is unemployed, they might not have access to a computer with internet at
home. Users should be able to fill out a job application just as easily on a mobile phone as
they could on a desktop or laptop computer.

Underrepresented populations are groups of people whose values and experiences aren’t
represented often enough in a society that’s shaped by the dominant culture and their point
of view. Underrepresented populations include people of certain genders or sexualities,
people of color, and ethnic minorities, among others.

Think about how a designer’s approach to design can be affected by their education,
background, and life circumstances. For example, if your default idea of a family is a home
with two parents, then you might not consider the needs or perspectives of families with one
parent or multigenerational homes when designing products. 

Both marginalized and underrepresented populations aren’t part of the dominant culture, so
they’re often not recognized in the design process unless the designer makes a conscious
decision to include them. As you make your way in UX design, try to find ways to include
marginalized and underrepresented users more often in your own design thinking. Ask
yourself:

 How can I design products so that the dominant culture is not always viewed as
the norm? 
 How can I design products in a way that encourages all perspectives to be
included?
By doing this, you’ll help make product designs that are inclusive for all users!

Edge cases are situations that a user experiences with a product that the designers didn’t
prepare for. The situation or obstacle that arises is beyond the user’s control to fix. As you
learned earlier in the certificate program, good UX anticipates edge cases and reroutes users
back to the happy path when things don’t go as planned.

You should approach edge cases with thoughtfulness because they might promote bias. It’s
important to anticipate potential issues that could pop up for all different types of users. Be
flexible and ready to adjust your designs throughout the process to account for these kinds of
unexpected issues among groups of users that you might not have initially considered.
Inclusive design means making design choices that take into account personal identifiers like
ability, race, economic status, language, age, and gender. Having a diverse team of
researchers and designers, including those from traditionally excluded populations, is key to
inclusive design. This practice ensures a variety of unique perspectives is present during all
phases of the design process.

The goal of a UX designer is to build experiences that are accessible to users with the widest
range of abilities. In other words, no one should be excluded from using a product because
designers didn’t consider their needs when building it. In inclusive design, there is no such
thing as normal, and there is no "average" person to design for.

For a real world example, check out this episode of the InVision podcast “DesignBetter” with
Airbnb Inclusive Design Lead, Benjamin Evans.

One way to help make sure that your product designs are inclusive for all users is to be held
accountable by the people you work with and the users you’re designing for. Seek out the
opinions of users, coworkers, and stakeholders who are different from you. As you learn more
about their perspectives, approaches, and how situations affect them, you can incorporate
their insights into your designs.

Here are a few ideas to put ethical design into action:

Create inclusive personas

Consider marginalized or underrepresented users when creating personas to avoid serving

only users who seem “typical” or universal to you. Being intentional and inclusive when
creating personas will prevent your product from advancing the same ideas about which
kinds of cultures are or are not valued. 
As a UX designer, you should still use practical demographic factors like age, gender, and
ability to create personas, but you need to be flexible and ready to change them whenever
you notice their limitations.

Broaden your definition of “stakeholder”

Traditionally, you might think of stakeholders as project leaders, managers, investors, and
those in high-level decision-making roles. But if you broaden the definition of the term, a
stakeholder is any person or place that a project can affect. By broadening the definition of
the stakeholders you’re designing for, you can design with a much wider audience in mind. 

Increase collaboration

The more you collaborate with the many different types of people who are impacted by your
products, the more insight you can gain from their participation. And while that’s generally
better for the greater good of society, it’s also often better for your product design, too!

Here are some things to consider to help you better collaborate with many different types of
people:

 Ask yourself: Do the small details that go into design decisions encourage all
perspectives to be included?
 Think beyond universal design. Even the most universal design principles need to
be modified to fit a new context, and that context becomes broader as you
engage with more diverse users.
 Consider "multiversal" design solutions. Multiversal (or, Pluriversal) refers to the
many ways that a design works for different people, while universal means that
one design method works for many users. A multiversal design principle means
making sure that a design has more than just one point of entry or more than one
way to meaningfully experience it. For example, when designing for someone
with sight and someone without sight, they should both be able to experience the
final design equally, without missing out on anything.

There’s still a lot of work to be done to make sure that UX designers incorporate more ethical
and inclusive practices, but by learning these concepts now, you’re playing an important role
in pushing the industry forward. You have an opportunity to make a difference in the world of
design for yourself, other designers, and the users of your products. Stay accountable, be
inclusive, and don’t forget the impact your work can make on the world.

There's so much to learn when it comes to the importance of equity-focused design. The
journey of designing for equity never truly ends. Constant learning and growth are required in
order to design meaningful experiences for users of all kinds. If you have time, we
recommend that you check out these optional resources to keep deepening your
understanding.

 Benjamin Evans: The power of inclusive design - An episode of the Design Better
Podcast by InVision
 How to design and manage equity-focused evaluations - UNICEF, focused on the
section about “What is equity and why does it matter?” which is on pages 18-24 of
the PDF (or pages 2-8 in the bottom left corner of the document)

Optional - Learn more about ethical design

As a UX designer, you have a responsibility to approach your work ethically and to keep the
user’s best interest in mind. The products you design will be a part of the users’ lives, but they
should not:

 Consume or control the user.

 Promote addictive behaviors.
 Promote unhealthy relationships between the user and a device or an app.
 Take advantage of the user.
Instead, the products you design should give users a choice about the actions they do want to
take while using your product. Remember, apps should engage users, but apps should also
be honest about their intentions and goals. To learn more about ethical design, here are a few
resources to check out: 

 Ethics in user experience design from Usability Geek

 The good, the bad, and the ugly in user experience design from User Experience
Magazine 
 10 principles for ethical UX design from UX Collective
Hello, my name is Priya and I'm a UX program manager at Google. UX program manager is
where cross-functionally with managers, designers, researchers, and engineering, teams to
ensure smooth collaboration. A lot of what we do is ensuring effective communication, and
managing project schedules and defining milestones. We try to create order out of chaos and
really keep teams aligned by managing, risk, roadblocks, priorities, and dependencies. We
really want to make sure that UX can focus on their craft and move along product
development. I love that my team is able to work across all products caries the company. It
feels really meaningful to be able to touch a lot of different products and people's lives. I
loved that, my team really focuses on finding diverse participants. One of the things that's so
meaningful to me is to be able to connect with external users to make sure that we're
designing equitably and inclusively. When we're able to design for something inclusively, it
makes me feel that we achieved part of our goal and trying to make the world's information
more assessable. One of the initiatives that I'm very passionate about the company is how
we're designing for our next billion users. Those are the people who are just starting to come
online right now, and I think a lot about how we really want to make sure regardless of
someone's language, their background, where they're located, their digital literacy, but they
have a means to reach the internet, and be connected in that we're truly designed and
internet for everyone.

Reproduce el video desde :1:26 y sigue la transcripción1:26

Some of the products that we're developing, we try to make sure that there is an equivalent
experience for those who are just coming online. For instance, are a lot of our initiatives on
Search and YouTube. We've really tried to customize what is that experience for someone
who may not be fluent in English, who may have never used a smartphone or use the Internet
before. We're trying to design a completely different experience to make sure those people
feel comfortable and are able to get the most of the technology and the resources available to
them. When designed for users, it's easy to assume what someone's experience might be like,
what their understanding is, or their ideas. I find it's useful to take a step back and make sure
well-aligned what it is that people really care about. I think it making sure that we're hearing
from people directly for me personally, whether it's my UX co-workers or external users of our
Google products. I think hearing from them to know what exactly are their journeys allows me
to build a lot of empathy and think more holistically and creatively about solutions that'll
actually resonate for them.