Use research to inform ideation

Hi there. In the last course, we learned how to empathize with users and define their problems. We
used empathy maps, personas, user stories, and user journey maps to identify pain points the user
might experience. Our role as UX designers is to understand these pain points and come up with ideas to
solve them. Empathy maps, personas, user stories, and user journey maps are tools UX designers
commonly use to expand our understanding of the people we're designing for. A lot of planning and
detail goes into using these tools. If you need to refresh your memory, feel free to revisit earlier content.

Let's think back to empathy maps. As a reminder, an empathy map is an easily understood chart that
explains everything designers have learned about a type of user. Empathy maps help UX designers
understand a user's behavior when interacting with a product. To get a little more specific, empathy
maps focus on four main motivations of users: what the user says, thinks, does, and feels. In other
words, empathy maps tap into our users' minds and hearts to help us understand their thoughts and
feelings in a given situation. The insights gathered from empathy maps allow us to come up with ideas
for solutions that address the user's problems and appeal to the user on a deeper level. Next, let's recall
personas. As you might remember, personas are fictional users whose goals and characteristics
represent the needs of a larger group of users. As you're ideating, it's a good time to reference the
personas you created to help you remember who you're designing for. Ask yourself, are there any
specific goals they want to achieve? Or are there any needs that you should design for in order to
support the personas? In addition, you might want to review your user stories.

A user story is a fictional one-sentence story told from a persona's point of view to inspire and inform
design decisions. It introduces the user, lays out an obstacle, and states our ultimate goal. The user story
expands on the persona and deepens your understanding of a user group. A good user story can also
inspire empathetic design decisions by making our approach user centered. If you have a lot of user
needs to consider, user stories determine which ones are the most critical to resolve. This can help
narrow down which user needs to focus on when coming up with ideas for solutions. Lastly, think back
to the user journey maps you created. Remember, a user journey is the series of experiences a user has
as they interact with your product. User journeys build off the personas and user stories you've already
created. User journeys help you come up with ideas for designs that truly support the user's needs and
reduce their problems, or what we also like to call "pain points." Together, empathy maps, personas,
user stories, and user journey maps help us create a problem statement, or a clear description of a
user's needs that our design should address.

Coming up, we'll transition from the problem the user is facing to the solution we can provide as UX
designers. Get ready to dig in!
Optional - Learn more about how research
informs ideation

Thinking of ideas for your product design isn’t a random or mysterious process! The designs
you create will be supported by research, feedback from user interviews, and learnings from
observations. All designers have assumptions about users and what they think is important or
challenging for those users. Often, these assumptions are based on the designer’s own needs
and experiences.  But, to come up with ideas for designs that meet users’ specific needs, your
designs must be based on insights from actual user research, not assumptions. 

After you empathize with users and define the problems they’re facing, you’re ready for the
third stage in the design process: ideate. Your goal is to generate as many ideas as possible for
potential solutions to the user problems you’ve identified. To do this, you should try multiple
ideation techniques, and be prepared to have multiple ideation sessions. All of your ideas
don’t have to be great; you won't end up using them all in the end! Instead, ideation requires
you to push your creative boundaries and try to think of new perspectives to your design
approach. So, no limits!

Earlier in the course, you used four tools - empathy maps, personas, user stories, and user
journey maps - to help gain a deeper understanding of users’ needs. All of these tools
informed the creation of a problem statement and will guide your ideation process moving
forward. As a quick refresher:

 Empathy maps explore users’ four main motivations: what the user says, thinks, does,
and feels. The insights gathered from empathy maps help you come up with ideas for
solutions that address the user’s real problems. 
 Personas place the users who you’re designing for front-and-center. By creating detailed
user profiles, you can clearly envision potential users that you’d design for.
  User stories determine which user needs are the most critical to address with your
designs. This direction will help focus your ideation.
 User journeys help you come up with ideas for designs that truly support the users’
needs and solve their problems. 
 A problem statement is a clear description of the user’s need that should be addressed.
The problem statement you created in the last course will guide the focus of your
ideation. 
User research provides insights into how users behave, how users experience or think about a
product, and more. Whether you conduct the user research yourself or with the help of a
designated UX researcher, your research findings will help you understand how to design
your product based on what your users really need. As UX designers, we always keep users
top-of-mind, so using findings from research can go a long way in informing the ideation
process.

Want to learn more about the link between research and ideation? Check out this article
about ideation for everyday design challenges from Nielsen Norman Group.

[User name] is a/an [user characteristic] who needs [user need] because [insight].

With this template in mind, you might still be wondering: How do I create a problem
statement for my own project? Let’s build a problem statement now, using this template and
a real example. 

Consider this scenario: As the owner of a new construction business, Sawyer is looking for
ways to network with other professionals in their industry. They think that networking may
gain them more clients and help them learn from more experienced construction business
owners. In order to network, Sawyer wants to research all of the trade conferences in their
local area. 

With Sawyer and their needs in mind, we’ll use the template to create a problem statement. 

Sawyer is a construction business owner who needs to attend trade show conferences because
they need to network to find more clients.
Sawyer is a construction business owner who needs to attend local trade conferences because
they need to network to find more clients. 

And there you have it: A problem statement! This problem statement clearly lays out the
information that we need to know about who the user is and how our design could help solve
their problem. As you begin to come up with ideas and create wireframes for your app
designs, continue to revisit the problem statements you’ve created, so that your designs will
address important user needs. 

Create goal statements

Welcome back. It's me, Karen. Let's work on merging the insights from empathy maps, personas, user
stories, and user journey maps to come up with a focus scope for your designs. To focus the scope of
your designs will create a product goal statement, which is one or two sentences that describe a product
and its benefits for the user. In other words, the goal statement provides the ideal solution for the
design. At this point in the design process, we're transitioning from the problem the user is facing to the
solution we're providing as UX designers. So, the problem is defined in the problem statement and the
solution is listed in the goal statement. Goal statement cover what the product let's users do, who the
action affects, why the action positively affects users, and how the effectiveness of a product is
measured. To answer the who, what, why, and how you should lean on the user research you've already
conducted. Just like with many other research tools, there's a formula for creating an effective goal
statement. This template says, "Our product will let users perform specific actions which will affect a
specific user by an action, we will measure effectiveness by its impact." After we fill in this info, we will
have a working goal statement.

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

Now, the easiest way to find out the who, what, why, and how is to refer back to your problem
statement. Let's think back to the problem statement formula we introduced earlier. The user has some
specific characteristics and has a specific need for a specific reason. Now, imagine we're designing an
app that helps people find scheduled dog walkers. A problem statement we might create would be,
Drew is a pet owner in a small town who needs to find and schedule a dog walker because they work the
night shift. Before we connect those dots, remember, we are transitioning from the problem that Drew
is facing to a solution that meets their needs. With that in mind, let's begin building our goal statement.
Here's our goal statement template. We know what our product is, so let's fill that section in with dog
walking app. Our goal statements so far is our dog walking app let's use your schedule dog walkers
quickly and easily. Now we have to think about the specific actions our users will take, the who. This is
where we'll turn to our problem statement. The first part of the problem statement, Drew is a pet
owner in a small town, describes the who of our goal statement, pet owners. We'll add that to who the
actions affect. Now, we're going to look at how the actions affect the users we've just established. The
third part of the problem statement, because they work the night shift describes an insight about why
our user needs this product that informs our design. In this case, our dog walker app allows users to
choose the most convenient times and dates to have their pets walked. We'll add that to the why area
of our goal statement. We're almost there. The last section focuses on how we will measure the
effectiveness of our product. This can vary based on project needs and what tools your team has
available. We've decided that we will measure effectiveness for this app by analyzing the number of
daily and weekly appointments user set. Our goal statement reads, our dog walking app will let users
schedule dog walkers quickly and easily, which will affect users who are pet owners by allowing them to
choose the most convenient times and dates to have their pets walked. We will measure effectiveness
by analyzing the number of daily and weekly appointment. If you didn't create a problem statement,
don't worry. You can also pull the who, what, and why into your goal statement from other parts of your
research and ideation process. For example, who can come from the persona. What could come from
the user story. Why can come from the empathy map and user journey maps and how can come from
the brainstorming. The how is important because it helps make sure the goal is measurable and realistic.
Spend some time considering concrete ways you can evaluate how well the product is doing.

Reproduce el video desde :4:52 y sigue la transcripción4:52

Okay. We've made the transition from the problem the user is facing to the solution we can provide as
UX designers. Our solution is outlined in the goal statement. Now it's time to think about what our user
experience looks like using the solution. See you there.
Learn more about goal statements
It’s time to merge the insights from empathy maps, personas, user stories, and user journey
maps to come up with a focused scope for your designs. You’ll transition from the problem
the user is facing to the solution we can create as UX designers. To focus the scope of your
designs, you’ll create a goal statement. 

A goal statement is one or two sentences that describe a product and its benefits for the user.
In other words, the goal statement provides the ideal solution for your design challenge. Goal
statements cover who the product will serve, what the product will do, and why the product
solves the user’s need. 

Let’s explore how you can create a goal statement for your own design project.

1. Revisit your problem statement. 

You need to understand the problem that users are facing before you can design a solution to
address that problem. As a reminder, here is the template you can use to create a problem
statement: 

[User name] is a/an [user characteristics] who needs [user need] because [insight].

Here’s an example of a problem statement from earlier in the certificate program that you
might remember:
Sawyer is a construction business owner who needs to attend trade show conferences because
they need to network to find more clients.

Sawyer is a construction business owner who needs to attend local trade conferences because
they need to network to find more clients. 

If you didn't create a problem statement, you can still get the answers you need to create a
goal statement. You can pull the who, what and why into your goal statement from various
other parts of your research and work to date. You can find the who using the information
from your persona. The user story can provide the what. And the empathy map and user
journey maps will help you answer the why.

2. Transition from identifying the problem to defining the goal. 

At this point, it's time to transition from the problem that users are facing to the solution we
can design to meet their needs. This can be a single, specific goal or a greater idea that you’ve
chosen to be the focus of your design. 

Remember, the goal statement should be just one or two sentences that describes the
product and its benefits for the user. Your goal statement needs to address the problem that
you identified earlier in the problem statement. A strong goal statement:

 Describes a specific action users can take or what the product will do.
 Defines who the action will affect.
 States the positive impact of the action or why the product solves the user's need.
 Outlines success in measurable terms.
To create a goal statement, you can fill in this template:
Our [product] will let users [perform specific actions] which will affect [describe who the action
will affect] by [describe how the action will positively affect them]. We will measure
effectiveness by [describe how you will measure the impact].

Using this template, we can quickly write a goal statement that addresses the user problem
identified in the problem statement above:

Our tradeconference app will let users expand their business which will affect how business
owners connect with their new clients by giving them the ability to connect with clients at local
trade shows. We will measure effectiveness by analyzing show attendance.

Our TradeConference app will let users expand their business which will affect how business
owners connect with new clients by giving them the ability to connect with clients at local trade
shows. We will measure effectiveness by analyzing show attendance.
That's it! You now know how to create a great goal statement. With a little bit of practice,
you’ll be able to write goal statements that confidently guide the product development
process.

Activity: Build a goal statement for the CoffeeHouse project

Puntos totales 10

1.
Pregunta 1

In this activity, you’ll craft a goal statement based on your problem statement for the CoffeeHouse
scenario. This will be good practice for crafting goal statements for your portfolio projects in later
course activities.

This exercise will help you recognize how goal statements provide the ideal solutions for your
designs. A goal statement is one or two sentences that describe a product and its benefits for the
user. Your goal statement addresses a problem that you identified in the earlier problem statement.
A strong goal statement:

 Describes a specific action your users can take

 Defines who the action will affect (e.g., your users)

 States the positive impact of the action

 Outlines what success looks like in measurable terms

After completing this activity, you'll have the opportunity to compare your work to a completed
exemplar in the next course item.
Step 1: Access the goal statement template
To use the template for this course item, click the link below and select “Use Template.” 

Link to template: goal statement template.

OR 

If you don’t have a Google account, you can download the template directly from the attachment
below.

Google UX Design Certificate - Goal Statement [Template].pptx

Step 2: Review the problem statement

For this exercise, you’re going to create a goal statement that presents a solution to the following
problem scenario: Anika is a busy marketing intern who needs a faster, more collaborative way to
take many coffee orders at once because taking individual orders takes too long and isn’t a good
use of Anika’s time. Review the problem statement above. You can also review idea notes from
earlier in the course to help you craft your goal statement. 

Step 3: Formulate a goal statement

Craft a goal statement using the template. A goal statement can be written using this simple formula:

1. Start with your product. This could be an app, an object, or anything else. 

2. Describe the specific action your product enables users to perform. 

3. Describe who the action will primarily affect. This could be the user themselves.

4. Describe how the action will positively affect that person.

5. Describe how you’ll measure the action’s effectiveness.

If you need help identifying these attributes of your goal statement the who can come from the
persona, the what could come from the user story, and the why can come from the empathy map
and user journey maps you have applied to this problem in the past. You may also use the
information provided solely in the problem scenario.

Step 4: Reflect on the completion of this activity

Does your goal statement:

 Identify your product?

 Describe the specific action your product will let users perform? 

 Describe who the action will primarily affect?

 Describe how the action will positively affect that person?

 Describe how you’ll measure the action’s effectiveness? 

Did you complete this self-review activity?

Activity Exemplar: Build a goal statement for
the CoffeeHouse project
Here is the completed exemplar for a created goal statement, along with an explanation of
how the exemplar fulfills the expectations for the activity. 

For this example, we’re going to use a problem scenario for CoffeeHouse and examine a goal
statement solution. Our problem statement is: Anika is a busy marketing intern who needs a
faster, more collaborative way to take many coffee orders at once because taking individual
orders takes too long and isn’t a good use of Anika’s time. Remember, the problem is defined
in the problem statement, and the solution is listed in the goal statement. Our goal statement
solution for Anika’s problem is: 

The CoffeeHouse app will let users place group orders in advance, which will affect users who
have to make and pick up large orders by letting users skip the in-store order line and saving
them time. We will measure effectiveness by tracking orders of 5+ items placed through the app.
The goal statement is: “The CoffeeHouse app will let users place group orders in advance,
which will affect users who have to make and pick up large orders by letting users skip the in-
store order line and saving them time. We will measure effectiveness by tracking orders of 5+
items placed through the app.” This was a successful goal statement because it: 

 Identified the product as an app that will be created

 Defined the action the product lets people perform, which is placing group orders in
advance
 Indicated who the action will affect, which is people who need to make and pick up large
orders
 Described how the action will affect them, by skipping the line and saving time
 Defined how the app’s effectiveness will be measured, by tracking orders placed through
the app
Now compare the goal statement above to the CoffeeHouse goal statement you created. Did
you meet the five criteria for a successful goal statement?

If you met each of the five criteria, nice job! If there are criteria you missed, then these are
areas where you can improve your goal statement. Go back and try re-writing your goal
statement with these criteria in mind!

Activity Exemplar: Build a goal statement for

the CoffeeHouse project
Here is the completed exemplar for a created goal statement, along with an explanation of
how the exemplar fulfills the expectations for the activity. 

For this example, we’re going to use a problem scenario for CoffeeHouse and examine a goal
statement solution. Our problem statement is: Anika is a busy marketing intern who needs a
faster, more collaborative way to take many coffee orders at once because taking individual
orders takes too long and isn’t a good use of Anika’s time. Remember, the problem is defined
in the problem statement, and the solution is listed in the goal statement. Our goal statement
solution for Anika’s problem is: 

The CoffeeHouse app will let users place group orders in advance, which will affect users who
have to make and pick up large orders by letting users skip the in-store order line and saving
them time. We will measure effectiveness by tracking orders of 5+ items placed through the app.

The goal statement is: “The CoffeeHouse app will let users place group orders in advance,
which will affect users who have to make and pick up large orders by letting users skip the in-
store order line and saving them time. We will measure effectiveness by tracking orders of 5+
items placed through the app.” This was a successful goal statement because it: 

 Identified the product as an app that will be created

 Defined the action the product lets people perform, which is placing group orders in
advance
 Indicated who the action will affect, which is people who need to make and pick up large
orders
 Described how the action will affect them, by skipping the line and saving time
 Defined how the app’s effectiveness will be measured, by tracking orders placed through
the app
Now compare the goal statement above to the CoffeeHouse goal statement you created. Did
you meet the five criteria for a successful goal statement?

If you met each of the five criteria, nice job! If there are criteria you missed, then these are
areas where you can improve your goal statement. Go back and try re-writing your goal
statement with these criteria in mind!

Activity: Build a goal statement for your portfolio project

Puntos totales 10

1.
Pregunta 1

Now that you’ve had a chance to practice building a goal statement, this activity will help you create
a goal statement for your portfolio project. Remember that a goal statement is one or two
sentences that describe a product and its benefits for the user. Your portfolio project’s goal
statement should:

 Describe a specific action your users can take

 Define who the action will affect (e.g. your users)

 State the positive impact of the action

 Outline what success means in measurable terms

Step 1: Access the goal statement template

To use the template for this course item, click the link below and select “Use Template.” 
Link to template: goal statement template.

OR 

If you don’t have a Google account, you can download the template directly from the attachment
below.

Google UX Design Certificate - Goal Statement [Template].pptx

Step 2: Choose a problem or opportunity you have

identified for your portfolio project
For this exercise, you’re going to write a goal statement based on the problem statement you
created for your portfolio project in the Build a problem statement for your portfolio project activity in
Course 2 of the certificate program. The goal statement should be related to the Sharpen prompt
you've been developing throughout the course. Review the problem statement you wrote earlier for
your portfolio project. You can also review idea notes from earlier in the course to help you craft your
goal statement.

Step 3: Formulate a goal statement

Fill in a goal statement using the template. A goal statement can be written using this simple
formula:

1. Start with your product. This could be an app, an object, or anything else. 

2. Describe the specific action your product enables users to perform. 

3. Describe who the action will primarily affect. This could be the users themselves.

4. Describe how the action will positively affect that person.

5. Describe how you’ll measure the action’s effectiveness. 

Step 4: Reflect on the completion of this activity
Does your goal statement: 

 Identify your product?

 Describe the specific action your product will let users perform? 

 Describe who the action will primarily affect?

 Describe how the action will positively affect that person?

 Describe how you’ll measure the action’s effectiveness? 

Did you complete this self-review activity?

Outline a user flow

Designing an efficient product requires a full understanding of users and their needs. There’s
a lot that you can do with knowledge about the people you’re designing for. You can even
predict users' needs before they know what they want or need!

One example of predicting user needs is the process that happens when you order food from
a restaurant. The cashier asks questions about condiments for your burger, whether you want
a side of fries, and if you’d like a water or soda to drink. The cashier is anticipating your needs
as a user and meeting those needs, possibly before you recognized those needs yourself. 
As a UX designer, you can anticipate user needs when interacting with your product. A clear
and simple way to outline this process is by creating a user flow. A user flow is the path taken
by a typical user on an app or a website, so they can complete a task from start to finish.

UX designers often outline the user flow before they start to design because it can help to
picture how users will move through the app or website. In other words, before you design
screens of an app, you need to understand how users can effectively move through the app
overall. You need to determine:

 What actions will users take in the app?

 What decisions will users make?
 What screens will users experience after taking action or making a decision?
Draw a user flow

UX designers often outline user flows with common shapes: circles, rectangles, diamonds,
and lines with arrows. Each shape represents an interaction the user will have with the
product you're designing. Assigning a different shape to each interaction makes the user flow
clear to anyone on the team involved in creating the product.
Action: The actions users take when moving through a product design are represented as
circles. In other words, circles show steps that must be taken to complete a task from start to
finish. For the user flow of a dog walker app, actions might include opening the app, clicking
on a dog walker’s profile, and booking a dog walker. 

Screen: The screens of a digital product that users will experience while completing tasks are
represented as rectangles. For the user flow of a dog walker app, screens might include a
homepage or a booking confirmation page. 

Decision: Diamonds represent points in the user flow where users must ask a question and
make a decision. The decision users make will either move them forward through the flow or
back to an earlier part of the flow. For the user flow of a dog walker app, a decision could be
choosing whether or not to book the dog walker whose profile is being reviewed. 

User flow direction: Lines with arrows tie everything together and display the flow of
information. Solid lines indicate forward direction through the user flow, and the dotted lines
indicate backward direction or returning to a previous page.

Example of a user flow

To apply these concepts to a real product, check out an example user flow below, for the dog
walker app that’s been mentioned throughout this certificate program.
The user flow starts with a user’s entry into the app and continues all the way through to their
appointment confirmation with a dog walker. This user flow anticipates the user’s need to
browse multiple dog walker profiles before choosing the right walker. 

As a designer, you have to consider the entire journey that users take in order to get what
they need from the product. As you create your own user flow, reference the problem
statement you developed to ensure your designs will really address user needs. 

Keep in mind that the user flow could change based on the needs of users and their
circumstances. If your problem statement changes, the user flow will probably need to
change too. For example, imagine you learn that users of the dog walker app want tips on
hiring dog walkers before booking an appointment. The user flow would change by allowing
an option to break away from this planned user flow to visit a new screen within the app, as
shown below. This screen might branch off of the "read tips" action to provide extra
information on booking a new walker. You don’t need to come up with a new user flow for
every possible circumstance in the product, but you should ensure that the user flow you
create focuses on the needs that the majority of users will face. 

For your current project in this program, you’re designing an app from scratch and creating a
completely new user flow. But in the real world, you might work on an existing product with
an established user flow. For existing products, creating or updating the user flow can be
complicated. With thorough user research, screens can be reorganized, expanded upon, and
trimmed to better meet how users work through a product. Whether you’re working on a new
or existing product, remember that users and their needs must be at the forefront of the
product's design.
Designing with knowledge of your user’s needs will make you a better designer and will keep
users engaged in your product. Creating a user flow is a solid step. As a UX designer, one of
your best tools is being able to outline the path that users will take to complete a task in your
product. Now, it’s time to show what you know and create a user flow for your own app
design. Good luck! 

Activity: Outline the user flow for your portfolio project

Puntos totales 1

1.
Pregunta 1

In this activity, you’ll create a user flow diagram for your portfolio project. As you learned earlier, a
user flow is the path taken by a typical user on an app or website to complete a task from start to
finish. Outlining user flows is important to understand what users need as they interact with your
product.

You can use common shapes like circles, rectangles, diamonds, and lines with arrows to create a
user flow. 

As a reminder, here are the user interactions each shape represents: 

Circle: Circles show actions that a user will take when moving through your design. In other words,
circles show a task that must be completed or steps that must be taken to complete a task, from
start to finish.
Rectangle: Rectangles describe screens in your digital product, like a homepage or a confirmation
page, that users will experience while completing tasks. 

Diamonds: Diamonds ask a question where the user must make a decision. The decision a user
makes will either move them forward through the flow or back to start the process again. 

Lines with arrows: Lines with arrows tie everything together and display the flow of information.

Sticking to these common shapes makes it easier to visualize and communicate the steps in user
flows. After completing this activity, you'll have the opportunity to compare your work to a completed
exemplar in the following course item.

Step 1: Access the template

To create a user flow diagram, you can use either pencil and paper or the template provided below.  

To use the template for this course item, click the link below and select “Use Template.” 

Link to template: user flow template:

OR 

If you don’t have a Google account, you can download the template directly from the attachment
below.

Google UX Design Certificate - User flow [template].pptx

Step 2: Decide user task

Before you create a user flow diagram, you need to decide which user task to map. Choose a task
that is important to the app you’re designing. You can use the goal statement that you developed in
the build a goal statement activity earlier in the course to help identify a primary user task. 
For example, here is the goal statement from the CoffeeHouse scenario:

Our CoffeeHouse app will let users place group orders in advance, which will affect users who have
to make and pick up large orders by letting users skip the in-store order line and saving them time.
We will measure effectiveness by tracking orders of 5+ items placed through the app.

With this goal statement in mind, the primary user task might be: 

Use the CoffeeHouse app to place a group coffee order quickly and easily.

This provides a clear task and success criteria for task completion. The user flow diagram should
map this user task from start to finish.

Step 3: Outline user flow steps

With the user goal in mind, list the steps for the user flow. 

Start with the entry point, which is the place where users initially access your product. Since you’re
designing an app in this course, the most likely entry point is to open the app from a device like a
mobile phone. 

Next, list each step the user would take until they reach task completion. Task completion happens
when users successfully complete their goal. In the CoffeeHouse example, task completion will be
reached when users receive their order confirmation. 

Here is an example of user flow steps from entry point to task completion for the CoffeeHouse app:
 1. Open app

2. Home screen

3. Search coffee locations

4. Select coffee location

5. Order from here? Yes or No

6. Order screen

7. Click link to share coffee menu

8. Send menu to team? Yes or No

9. Start order timer

10. Team adds items to order

11. Order preview

12. Go to checkout

13. Insert checkout information

14. Confirm order? Yes or No

15. Order confirmation

Step 4: Diagram the user flow

It’s time to start mapping the user flow! Follow the steps you outlined in Step 3 to create the user
flow diagram. For example, the first shape in a user flow represents users’ entry point. 

Keep in mind that you might need to add steps or change the flow you outlined as you create the
diagram. That’s totally normal! 

Let’s diagram the user flow for the CoffeeHouse app. The entry point for this app was “Open app.”
Draw a circle to represent an action, and fill it in with a description of the action, which is “Open app”.

Next, draw a line with an arrow that connects this circle to the next step in the user flow. For the
CoffeeHouse app, connect the first action, “Open app,” to a rectangle that represents the user
landing on the home screen of the app. Make sure to include clear and simple labels within the
shapes for each step.

Continue this process for each step in the user flow. Remember to use the appropriate shape to
indicate whether users are completing an action (circle), landing on a screen (rectangle), or making
a decision (diamond), and connect each shape with arrows. 

Here’s a quick pro-tip: Don’t worry about making the user flow too complicated. Focus on mapping
the quickest and easiest way to get from the entry point to task completion. 

Step 5: Reflect on the completion of this activity

Review the user flow you created for your app to make sure you followed these guidelines:

 The user flow demonstrates the steps that users take to get from the entry point to task
completion. 

 All actions are in circles.

 All screens are in rectangles.

 All decisions are in diamonds.

 Each shape is connected by an arrow.

Step 6: Save your work

As you complete the user flow activity, remember to:

1. Take photographs or screenshots of the user flow you created.

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

Did you complete this activity?

Activity Exemplar: Outline the user flow for
your portfolio project
Here is a completed user flow for the CoffeeHouse app example we have been following in
this course, along with an explanation of how this exemplar fulfills the expectations for the
activity. 

Note that while this exemplar uses CoffeeHouse, your work should be for your portfolio
project.

Open app - Home screen - Search coffee locations - select coffee location - order from
here? - order screen - click link for menu - send menu to team - start order timer - add
items to order - order preview - go to checkout - insert checkout info - confirm order -
order confirmation

Self assess the user flow you created in the activity, using each of the criteria below. 

The exemplar user flow provides:

 A clear and easy flow for users to get from the entry point of opening the app, to
task completion of an order confirmation. 
 Clearly labeled steps that are each represented by the appropriate shape.
 Lines with arrows connecting all the steps of the user flow.
Compare this exemplar to the user flow diagram you created in the activity. What did you do
well? Where can you improve? Take this feedback with you as you continue to progress
through the course.

Introduction to storyboarding user flows

Welcome back. In this video, we'll focus on storyboarding, a tool for ideation that helps you outline an
ideal flow for your design. You'll have an opportunity to sketch a storyboard on a piece of paper soon.
For now, let's start with a definition. In UX, a storyboard is a series of panels or frames that visually
describe and explore a user's experience with a product. Keep in mind, we've made the transition from
the problem the user is facing to coming up with ideas for solutions we can provide as UX designers.
Think about storyboarding as a tool to visualize potential solutions to problems the user is facing. You
might have heard the term storyboarding used in reference to movies or commercials. In those cases, a
storyboard gets divided into a set of panels, and each panel tells a piece of the overall story.

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

Well, in UX design it's similar. Storyboarding is a tool for making a strong visual connection between the
insights you uncovered during research and the flow of experience. Using storyboards to sketch an idea
helps you work through the flow of the experience. It can also act as a visual aid to explain your ideas to
stakeholders, because they can visualize how the product you're designing will be used. A real product
might have many screens, but your storyboard should focus on just the most important parts of the
user's experience with a product, and as the name suggests, there's a story that should be told through
the panels of a storyboard. The four key elements of a storyboard are the character, the scene, the plot,
and the narrative.
Reproduce el video desde :1:51 y sigue la transcripción1:51

The first element, character, is the user in your story. The next element, the scene, helps us imagine the
user's environment. The plot describes the benefit or solution of the design. Finally, the narrative
describes the user's need or problem and how the design will solve the problem. Now, let's take a look
at the template that's often used to sketch a storyboard. The scenario is a short sentence that helps us
understand the user and their problem we're solving. The visuals guide us through the user's experience
with the app or service. This is where you'll actually sketch. And the captions combine the visuals and
scenario by describing how the user interacts with the product. Basically, it's the text that describes each
frame of the story. Here's a tip: The captions are useful for interactions that may be difficult to sketch
out. Let's check out an example of how to take a problem statement and turn it into a six panel
storyboard using the template we just reviewed. Let's revisit a problem statement from course 2. Amal
is an athlete who needs a way to sign up for workout classes, because the class he wants to participate
in fills up fast. Our first step is to turn this problem statement into a goal statement. Our goal statement
could be: Help users who are athletes sign up for workout classes early and quickly. Now it's time to
storyboard. To save time, I've already built out a six panel storyboard for this example. Let's walk
through it together.

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

In the first panel, in the top left of the page, Amal is at the gym and is frustrated because he can't get a
spot in today's workout class. In the second panel, Amal is sitting on his couch and opens an app on his
phone. Next, in the panel on the top right of the page, I zoom in on the phone and show Amal looking at
a calendar and selecting the date he wants to schedule a workout class on. In the fourth panel on the
bottom left of the page, Amal selects a workout class. The fifth panel shows Amal on a confirmation
screen and tapping a button to confirm his class. In the final panel, I sketched Amal smiling as he attends
his workout class. Now you know the basics of storyboards. Next, we'll explore two types of storyboards
and when to use each type. See you there!

Understand the two types of storyboards

Hi again. Let's continue our discussion about storyboards. Remember, storyboards are often used to
outline movies. In the film world, storyboards are used before a movie is created to show how each
scene of the movie will play out for a character. In the UX world, storyboards are similar. They show how
each scene of the journey will play out for a user as they interact with the product. Now, things are
about to get interesting. There are actually two types of storyboards. Keeping movies in mind, these two
types of storyboards are called big picture and close-up. First, let's discuss a big-picture storyboard,
which focuses on the user experience. Big picture storyboards think about how people will use the
product throughout their day and why that product will be useful. This helps you understand the entire
user experience, including the different challenges, potential pain points, and types of interactions the
user will encounter.
Reproduce el video desde :1:9 y sigue la transcripción1:09

Take a moment to think about a movie you watched recently. Maybe it was an action-packed superhero
movie or a thoughtful romantic comedy. Each panel of the big picture storyboard captures a part of the
character's actions that push the story forward. Again, it's similar in UX design. Each panel of a big-
picture storyboard captures a part of the user's journey with a product.

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

Let's revisit our dog walking app. Remember our problem statement was: Drew is a pet owner in a small
town who needs to find and schedule a dog walker because they work the night shift. Our goal
statement was: Help users with pets find and schedule dog walkers easily and quickly. Let's create a
storyboard to describe how Drew gets from the problem they're currently facing to the goal when using
our product. Remember, we want to include emotion in our big picture storyboard. First, the user leaves
their house in the evening, heading to their job as a nurse. Their dog is left at home overnight for ten
hours, so we see the dog with a sad face. Then as the user is driving to work, they think of their dog at
home. The user remembers that they forgot to take their dog for a walk that day. Whoops! Later while
the user is on a break at work, they grab their phone and open the dog walking app. The app shows the
faces of local dog walkers who are eager to meet the user's pooch. The user feels relieved knowing that
someone might be able to bring their dog for a walk. In the app, there's a clock icon and the user selects
a time for the dog walker to come into their house. There's also a calendar icon to schedule the dog
walker on a regular basis. The user clicks the Confirm button to finish scheduling. Their dog will be so
happy to have some company and go for a walk.

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

Finally, the user returns back to work and is smiling, feeling happy that their dog will be well taken care
of and will get more exercise in the future. Notice that this big picture storyboard is focused on how and
why. Think about questions like, How will the user use our dog walking app? Why will the app be useful?
And why will the user be delighted by the app? Like a good movie, a big picture storyboard can show the
emotional engagement that a user will have with our app or with any product. Understanding how a
user feels while experiencing your product is an essential part of the design process. You have the hang
of a big-picture storyboard. Let's transition to the second type of storyboards: close-up. In a close-up
storyboard, the sketches in each panel focus on the product instead of on the user experiencing that
product. While big-picture storyboards focus on the how and the why, close-up storyboards focus on the
what. Think about questions like, What happens on each screen of the product? What does the user do
to transition from one screen to another? And after you've created the storyboard, what are potential
problems with the flow? Keep in mind, we only need to pick a few key screens to sketch in order to
demonstrate the product experience. It's not necessary to do a detailed click-by-click play of every part
of your product. Let's think about our dog walking app again. In a close-up storyboard, you'll include the
same screens that a user will experience. First, the user taps the icon on their phone's home screen to
open the dog walking app. Next, the user enters their email address and password to log into the app.
The user navigates to the settings page of the app to share the location at their house for the dog walker
to visit.

Reproduce el video desde :5:23 y sigue la transcripción5:23

Then the user returns to the homepage and taps the clock icon to select a time for the dog walker to
come to their house. The user also taps the calendar icon to schedule the dog walker on a regular basis.
Finally, the user presses the Confirm button to finish scheduling the dog walker. What did you notice
about how this close-up storyboard was different from the big picture storyboard? The close-up
storyboard is less about emotion, since we're not focused on the user. Instead, the close-up storyboard
is focused on the practicalities of the design itself. So how do you decide which type of storyboard to
use? To decide, it's helpful to think about this stage of the design process you're in. If you're early in the
design process, you might want to present your high-level ideas to stakeholders to get them excited and
bought in. In this case, a big-picture storyboard makes sense. so your team can focus on the user, their
needs, and their experience with your product.

Reproduce el video desde :6:32 y sigue la transcripción6:32

On the other hand, a close-up storyboard is more useful after your initial design directions have been
explored. Since a close-up storyboard focuses on the details within your product, like screens of an app,
this type of storyboard can help you think through practical ideas about improving the product. One
more thing. In many cases, you might want to create both a big-picture and a close-up storyboard. There
are also ways to bring both types of storyboards together. For example, in this storyboard about Amal
booking a workout class, we change the focus from the user to their specific interactions within the app.
That's okay. As UX designers, it's good to have a flexible and creative approach to explaining your ideas.
So try experimenting with both styles. And that's a wrap! You now know about two types of
storyboards: big picture and close-up. Keep your storyboards close by, because later on we'll use the
sketches we created in this close-up storyboard to draw wireframes. Next up, we'll learn the basics of
wireframes. Keep up the great work.

Learn more about creating storyboards

In UX design, a storyboard is a series of panels or frames that visually describes and explores
a user’s experience with a product. Telling a story through visuals is often more effective than
using words. 

A real product might have many screens, but your storyboard should focus on just the most
important parts of a user’s experience with a product. As their name suggests, there’s a story
that should be told through the panels of a storyboard. The four key elements of a storyboard
are:

 Character: States the user in the storyboard.

 Scene: Gives designers a way to imagine the user’s environment.
 Plot: Describes the solution or benefit offered by the design.
 Narrative: Describes the problem the user is facing and how the design will solve
this problem.
There are two common types of storyboards in UX design, both of which incorporate these
four key elements:

 Big picture storyboards focus on what the user needs, their context, and why the
product will be useful to the user. Big picture storyboards are often used early in
the design process when designers are trying to get stakeholders to support their
ideas.
 Close-up storyboards concentrate on the product and how it works. They’re best
used in the middle to the end of the design process.
Let’s explore how we can create each of these storyboards with a real example. Imagine this
scenario: You’re designing an app called Bandmate for musicians to recruit talented band
members. A user that might come to your app for help is a guitarist in a rock band. We’ll call
them Dan. Their band’s drummer suddenly quit, so Dan needs to find a new drummer.

Create a big picture storyboard

1. Start with a problem statement. This will help establish character and set the scene for
your storyboard. 

For this example, the problem statement might be: 

Dan is a lead guitarist in a band who needs to hire a new drummer because they are having
issues replacing the previous drummer.

Dan is a lead guitarist in a band who needs to hire a new drummer because they are having
issues replacing the previous drummer. 

2. Create a goal statement. Your goal statement helps you determine a plot (the benefit or
solution of your design) for your storyboard. 
A goal statement for this example might be: 

Our bandmate app will let users recruit new substitute musicians which will affect users who
need new ban members by letting them easily find qualified musicians to hire. We will measure
effectiveness by reading user reviews and tracking successful hires.

Our Bandmate app will let users recruit new or substitute musicians which will affect users who
need new band members by letting them easily find qualified musicians to hire. We will
measure effectiveness by reading user reviews and tracking successful hires. 

3. Set up the storyboard. You can use the storyboard template shown in the videos about
storyboarding, or you can draw a similar outline on a piece of paper.

To use the template for this course item, click the link below and select “Use Template.” 

Link to template:  storyboard template

OR 

If you don’t have a Google account, you can download the template directly from the
attachment below.

UX Design Certificate - Storyboard [Template]Archivo PPTX

Descargar archivo
The storyboard template. At the top of the page, there's a place to describe the scenario. On the
template itself there are spaces for images and descriptions of action.

4. Add the storyboard scenario. Begin filling out the storyboard template by adding the
scenario. At the top of the template, write a sentence that sets the narrative for the
storyboard. Thinking back to the problem from the problem statement and the solution from
the goal statement, write a short, clear sentence that describes the user and the problem
your design solves for them. Consider the end result that will solve the user’s problem.

For this example, you want the Bandmate app to help Dan find a new drummer for their band.
So the scenario at the top of the storyboard might be:

An app that allows users to recruit qualified, new, or substitute musicians to join their band.

5. Draw one idea per panel. The first panel is used to set the scene for the story. Then with
each additional panel, think about actions that push the story forward and how the user feels
in each panel.

In the first panel, what is the event that triggers Dan to find a new drummer? In this case,
Dan’s drummer quit, so he needs to find a replacement drummer to join the band.

In the second panel, Dan finds and opens an app that can help him recruit qualified, new, or
substitute musicians that are located in his local area. This action should be drawn in its own
panel. 
In the third panel, Dan finds an experienced drummer who lives nearby while scrolling
through the app. He filters for drummers with at least five years of experience in a
professional band, who have good reviews, and who live within 30 miles of his current
location. 

Pro tip: Remember that big picture storyboards focus on the user experience. The
storyboard should show how people use your product and why your product will be helpful
to them. Because big picture storyboards are about the user, it's important to include
emotion by using a sad or happy face, for example, at different steps of the journey to make
the storyboard feel human and relatable. 

6. Expose pain points for the user along their journey. Dan had a bad experience in the past
when he hired a keyboard player for the band who turned out to be unqualified. While using
this new app, Dan needs to be able to identify qualifications from the musician’s profile, like
how many years they’ve played in a band or the ratings they’ve received from other users.
Dan might feel a little nervous because of his past bad experiences finding bandmates. This is
drawn in the fourth panel.

Then, in the fifth panel, Dan selects a drummer in the app and taps the “schedule” button to
set up an interview with the potential replacement drummer. 

7. Include the user goal or conclusion in the final panel. In this example, the conclusion is
that a new drummer joins the band. Dan is very happy, and his band schedules several gigs.
Make sure to include an emotion to demonstrate how the user feels at the end of the
experience with your product. In this case, Dan feels excited and satisfied. 

And that’s it! Check out the completed big picture storyboard for this example:
Scenario: An app that allows users to recruit qualifies, new, or substitute musicians to join their
band. 1. The drummer in Dan's band quite so he needs to find a replacement. 2. Dan finds and
opens the app. 3. Dan scrolls through the app and finds an experienced drummer who lives
nearby. 4. A former band member did not have experience with rock music so having relevant
experience is important. 5. Dan selects a drummer and taps submit to schedule an interview. 6.
Dan is happy and his band schedules several gigs.

You brought the user, Dan, on a journey to find a new drummer for his band. You’ve
addressed his pain points and helped him find a qualified drummer. Your user is delighted
with the app experience. Big picture storyboards can really help immerse you in the
experience of a user, which leads to better products overall.

Create a close-up storyboard

To create a close-up storyboard, steps 1-4 are the same as the big picture storyboard process:

1. Start with a problem statement. 

2. Create a goal statement. 
3. Set up the storyboard.
4. Add the storyboard scenario.
5. Draw one idea per panel. Big picture storyboards and close-up storyboards differ in step
five, when you draw each panel. Remember, big picture storyboards focus on the user, while
close-up storyboards focus on the product. For this close-up storyboard, think about which
product details you want to draw attention to on each panel and why. You want to
demonstrate the user flow within the product and how each action within the product will
lead to the next screen. 

 To begin, in the first panel, the user will open their phone, swipe through their
apps, and tap the icon for the musician app to open it. 
 Oftentimes when designing an app, one panel of a close-up storyboard will focus
on how a user begins their journey when they first open the app. For this example
of the app to find musicians, let’s imagine that a new user can create a profile or
an existing user can log in. This is shown in the second panel. 
 In the third panel, once the user is logged into the app, they can begin searching
for their bandmate. The user scrolls through profiles of musicians and can set
filters like level of experience, years played, location, instruments played, and
more. 
 In the fourth panel, the user taps the “view profile” button of one of the
musicians to review their experience, qualifications, and location. 
 Then, once the user finds a candidate they’re interested in contacting, they tap
the “submit” button to send a message to that musician. The user can write their
own message or send an automated message that asks about availability and to
schedule a conversation. There’s also an option for the user to provide a sample
of their music to the musician. This is shown in the fifth panel. 
 Finally, in the sixth panel, the user receives a confirmation that their message has
been sent and a description of the next steps to expect. The text below the
confirmation might say something like, “Your message to this musician has been
sent.” There will also be a button linking back to the user’s inbox and one that
leads them back to the search page they just came from. 
Check out the completed close-up storyboard for this example:
Scenario: An app that allows users to recruit qualifies, new, or substitute musicians to join their
band. 1. user finds musician app and tapes the icon to open the app 2. new user create profile or
existing user logs in 3. user scrolls through musician profiles to search for qualified candidates
and sets filters. 4. user selects "view profile" to review musician's experience, qualifications,
location, etc. 5. user selects the "submit" button to send a message to a specific musician 6. user
receives confirmation that message was sent and expected next steps.

That’s it! You now know how to create a big picture and a close-up storyboard. In the next
activity, you’ll have an opportunity to create your own storyboards. Have fun!

Activity: Practice creating storyboards for the CoffeeHouse project

Puntos totales 10

1.
Pregunta 1
This activity will teach you to create storyboards so you can outline an ideal flow for your
CoffeeHouse designs.

A storyboard is a series of panels or frames that visually describe and explore a user’s experience
with a product. Think about storyboarding as a tool to visualize potential solutions to problems the
user is facing. 

There are four key elements of a storyboard:

 Character

 Scene

 Plot

 Narrative

The character in your storyboard is the user your story is about. The scene helps you imagine this
user’s environment. The plot describes the benefit or solution of your design. Finally, the narrative
describes the user’s need or problem and how the design will solve the problem.

In this activity, you’ll create two storyboards (one for big picture and one for close up) for the
CoffeeHouse scenario you've been practicing with.

The next course item will provide you with a completed exemplar to compare to your work.

You can use your own CoffeeHouse app work, or you can use the course exemplars from the
CoffeeHouse app activities, which can be found below.

If you choose to use the provided exemplars to create your storyboards, we've included links to each
below so they can be easily referenced. Make sure you pick only one persona for your storyboards.

Anika

To see Anika's persona, click the link below and select “Use Template.” 

Link to exemplar: Anika's persona

OR 

If you don’t have a Google account, you can download Anika's persona directly from the attachment
below.

Google UX Design Certificate - Anika persona [Example].pptx

To see Anika's user journey map, click the link below and select “Use Template.” 

Link to exemplar: Anika's user journey map

OR 

If you don’t have a Google account, you can download Anika's user journey map directly from the
attachment below.

Google UX Design Certificate - Anika user journey map [Example].pptx

To see Anika's problem statement, click the link below and select “Use Template.” 

Link to exemplar: Anika's problem statement

OR 

If you don’t have a Google account, you can download Anika's problem statement directly from the
attachment below.

Google UX Design Certificate - Anika problem statement [Example].pptx

Ali

To see Ali's persona, click the link below and select “Use Template.” 

Link to exemplar: Ali's persona

OR 
If you don’t have a Google account, you can download Ali's persona directly from the attachment
below.

Google UX Design Certificate - Ali persona [Example].pptx

To see Ali's user journey map, click the link below and select “Use Template.” 

Link to exemplar: Ali's user journey map

OR 

If you don’t have a Google account, you can download Ali's user journey map directly from the
attachment below.

Google UX Design Certificate - Ali user journey map [Example].pptx

To see Ali's problem statement, click the link below and select “Use Template.” 

Link to exemplar: Ali's problem statement

OR 

If you don’t have a Google account, you can download Ali's problem statement directly from the
attachment below.

Google UX Design Certficate - Ali problem statement [Example] (1).pptx

CoffeeHouse

To see the completed CoffeeHouse goal statement for this course item, click the link below and
select “Use Template.” 

Link to exemplar: CoffeeHouse goal statement

OR 

If you don’t have a Google account, you can download the exemplar directly from the attachment
below.
 Google UX Design Certificate - CoffeeHouse goal statement [Example].pptx

Step 1: Access the template

To use the template for this course item, click the link below and select “Use Template.” 

Link to template: storyboard template

OR 

If you don’t have a Google account, you can download the template directly from the attachment
below.

UX Design Certificate - Storyboard [Template].pptx

You'll use the storyboard template to create both types of storyboards. Therefore, you’ll need two
copies of the template to complete this activity. You’ll use the templates to create a big picture
storyboard and a close-up storyboard.

You can print the storyboard templates and fill them out with a writing utensil such as a pencil or
pen, or you can use a digital program. The choice is yours, but remember to save your work so you
can access and share it. 

Step 2: Build a big picture storyboard for the CoffeeHouse

scenario
1.  First, you need a problem statement to identify the character and scene for your storyboard. 

You should already have a problem statement for the CoffeeHouse scenario that you created in the
practice activity Build a problem statement and a hypothesis statement. You can also use one from
the list of exemplars. 

2. Next, you need a goal statement. You can use a goal statement to help you determine the plot
(the benefit or solution of your design). 

You should have already written a goal statement for the CoffeeHouse scenario during the practice
activity Build a goal statement. You can also use one from the list of exemplars. 
3. Now that you understand the character, scene, and plot, begin filling out the storyboard template
by adding a one sentence description that explains the context of your story. To do this, add a
sentence that sets the narrative for your design at the top of the template. This should be a short
sentence that helps us understand the user and the problem your design solves for them. 

We’ve included an example of a storyboard with a one-sentence scenario, using the Dan’s band
scenario from earlier in the course:

4. Finally, fill in the six panels of the template with visuals that demonstrate the user’s experience
with your app. Each visual should highlight a key moment in the user’s journey, including their
context and motivations—why they want to use the app—and the high-level experience of
successfully using the service. (Tip: Captions are useful for interactions that may be difficult to
sketch out.) 

By this point your storyboard should clearly identify the character, scene, plot, and narrative of your
user’s big picture experience. Together, your six panels will tell the story of how the user has used
your design to fulfill their goal!

What to include in your big picture storyboard

Remember to focus on the user. Clearly communicate their environment or context and their
motivation for using the app. This could be a perceived pain point or a market opportunity.

Step 3: Build a close-up storyboard for the CoffeeHouse

scenario
The process for building your close-up storyboard involves the same four steps for filling out the
storyboard template:

1. Use your CoffeeHouse problem statement to establish the same character and scene for your
close-up storyboard.

2. Your plot is based on the same goal statement.

3. You can also use the same scenario statement!

 4. This time, fill in the six panels of the template with visuals and captions that describe how the
user interacts with your design, the CoffeeHouse app. Ensure that the visuals and captions
for your close-up storyboard focus on the product. For each panel, think about which
product details you want to bring attention to and why. Then sketch these product details.

With the six panels of your close-up storyboard, you’re trying to demonstrate the successful flow of
user actions within the product and how each step will lead to the next.

While creating your close-up storyboard think about questions like:

 What happens on each screen of the product?

 What does the user do to transition from one screen to another?

What to include in your close-up storyboard

Remember to focus on the product.

Your close-up storyboard should focus on the product’s user experience, highlighting key
interactions like onboarding (the first impression a user has of the app), placing an order, and
checking out. Indicate transitions between screens with clear actions the user will need to perform to
complete their goal successfully.

Step 4: Save your work

As you complete these activities, remember to:

1. Take photographs or screenshots of the progress you made on your storyboards.

2. Save all of your work to your computer, a hard drive, or a cloud drive like 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
storyboards for the CoffeeHouse project
Here is a completed exemplar with the two types of storyboards based on the CoffeeHouse
scenario. An explanation of how the exemplar fulfills the expectations for the previous activity
follows the storyboard examples. 

Scenario: CoffeeHouse app

For both the big picture storyboard and close-up storyboard, the activity begins with a
problem statement:

Anika is a busy marketing intern

who needs a faster, more collaborative way to take many coffee orders at once

because taking individual orders takes too long.

This problem statement gives you a good idea of a character for the story. It is Anika, a busy
marketing intern! This problem statement also sets a scene for the storyboards: Anika is
entering a large coffee order and picking it up for her office. Next, let’s consider a goal
statement based on this problem statement:

 The CoffeeHouse app will let users place group orders in advance which will
affect users who have to make and pick up large orders by letting users skip the
in-store order line and saving them time. We will measure effectiveness by
tracking orders of 5+ items placed through the app.
This helps set the plot for the story, which will be about a customer successfully placing a
large coffee order quickly and easily!

Now you're ready to come up with a scenario statement that describes the narrative that the
storyboards depict. Both of the storyboards will tell the story of how the app helps a user
submit a large coffee order for pick-up at their local CoffeeHouse shop. The next step is to fill
out the storyboard templates beginning with this simple scenario statement: “An app to help
users place large coffee orders quickly and easily.”
Then it's time to fill in the template panels with visuals and captions according to the
guidelines for a big picture storyboard.

Example of a big picture storyboard for the CoffeeHouse app:

Written description of big picture storyboard:

The storyboard contains six panels. In panel one, Anika wants to get coffee for the team.
Anika's surrounded by people giving orders at the coffee shop.

Next, Anika remembers that an app can help out in this situation. This is in the second panel.

In the third panel, Anika decides to use the CoffeeHouse app to take orders from her team. 

In the fourth panel, Anika learns that they can send the menu of items to the team within the
app so the team can place their own orders.

In the fifth panel, Anika sends the order to the coffee shop through the app and the coffee
starts brewing.

The final panel shows Anika and the team enjoying their coffee in the office.
Example of a close-up storyboard for the CoffeeHouse app:

Six frames showing sketched images, followed by short descriptions. First frame shows a hand
clicking an icon on the phone home screen. Anika opens up the app. Second frame shows a
phone screen; on the screen it reads "Coffee" at the top, and beneath it is a map with various
pins appearing. Anika selects nearest location. Third frame shows a phone screen; on the screen
it reads "Coffee" at the top, and beneath shows options for link or QR sharing. Anika sends out
the menu to the team. Fourth frame shows a hand interacting with a phone screen, with a
"Coffee" at the top and a stopwatch beneath it. Anika starts a countdown for the order. Fifth
frame shows 3 phones within the frame, all reading "5 mins". The app notifies the team that time
is almost up. Sixth frame show the phone screen; at the top, it reads "Coffee" and beneath, it
reads "Your order" and has a send button at the bottom. Anika sends the order to be made.

Written description of close-up storyboard:

The storyboard consists of six panels. In the first panel, Anika starts by opening the app on
their phone. 

In the second panel, Anika selects the nearest location to buy coffee.
In the third panel, Anika gets a link or QR code from the app which contains a menu they can
send out to the team.

Anika sees a clock with a countdown in the fourth panel which indicates how long the team
has to place their orders.

Next, in the fifth panel the app notifies the team that time is almost up.

In the last panel Anika sends out the order to be made by the coffee shop.

Big picture storyboard:

Notice that this big picture storyboard is focused on the how and the why behind the user’s
engagement with your design. When creating a big picture storyboard, think about questions
like:

 Why does the user need our app?

 How will the user use our CoffeeHouse app?
 Why will the user be delighted by the app?
Like a good movie, a big picture storyboard can show the emotional engagement that a user
will have with this app or with any product. Understanding how a user feels while
experiencing your product is an essential part of the design process.

A big picture storyboard should meet the following guidelines:

 Sketches should focus on the user.

 Sketches should indicate the environment or context where the user is located.
 Sketches should focus on the specific need or pain point experienced by the user.

Close-up storyboard:

While big picture storyboards focus on the how and the why, close-up storyboards focus on
the what. Think about questions like:

 What happens on each screen of the product?

 What does the user do to transition from one screen to another?
 What are some assumptions we are making about this experience?
  What are some potentially complicated interactions or pain points that will need
to be addressed?
The close-up storyboard is less about emotion since we’re not focused on the user. Instead,
the close-up storyboard is focused on the practical aspects of the design itself.

A close-up storyboard should meet the following guidelines:

 Sketches should focus on the product instead of on the user experiencing that
product.
 Sketches should indicate the interaction that a user may have with the product
by depicting sample screens.
 Sketches should indicate any transitions between screens or states that the user
may need to perform.
Now compare the exemplar above to your completed storyboards. Assess what you’ve done
using each of the guidelines used here to evaluate the exemplar. 

What do you do well? Where can you improve? Take this feedback with you as you continue to
progress through the course.

Introduction to wireframes
Hello! To kick things off, I'll introduce some common terms. They'll help describe what we'll work on for
the rest of the course.

Let's start by explaining what a design is in the context of this program. A design solves a real problem
that users are experiencing. And a strong design always puts the user front and center.

A design can have different levels of fidelity. In UX, fidelity means how closely a design matches the
look-and-feel of the final product.

If a design is low fidelity, that means it has a lower amount of complexity and is less refined or polished.
We call low-fidelity designs lo-fi for short. UX designers use low-fidelity designs when we want to get
ideas out quickly and leave room for exploration.

If a design is high fidelity, that means it closely matches the look-and-feel of the final product and is
more refined or polished overall. We call high-fidelity designs hi-fi for short. UX designers use high-
fidelity designs when we want to test a design that looks like a real product and get more specific
feedback from users. You can think of fidelity like a dial you can turn up or down. For example, imagine
you want to quickly draw the rooms of an apartment on a piece of paper with pencil.

You might use simple rectangles and squares to indicate where the rooms are and where the furniture is
positioned in each room.
That would be a low-fidelity design. Or you can dial it up and make a detailed drawing of the apartment,
including paint colors and images of pieces of furniture.

Your design is now high fidelity because it looks more like the real apartment. In this course,we'll focus
on low-fidelity designs. We'll cover high-fidelity designs in a future course. So let's dive into one kind of
low-fidelity design: wireframes.

A wireframe is a basic outline of a digital experience, like an app or a website.

As the name suggests, wireframes look like they were created with wires. They're mostly lines and
shapes with some text. So why do UX designers create wireframes? Wireframes establish the basic
structure of a page. before any visual considerations, like color or images, are added.

Wireframes serve as an outline to get the team on the same page early in the project.

Try using this as your guiding question when creating wireframes:

How do I organize information on the page in a way that makes sense for users? Second, wireframes
highlight the intended function of the product.

When drawing the wireframe, you should think about how the elements serve the overall functionality.

For example, the function of a button should be clear, and that functionality is expressed through the
way that it's drawn.

We'll go through this in more detail later on.

Finally, wireframes help designers save time and resources.

Wireframes allow the team to quickly try out different design options. They also serve as a guide for
everyone involved in the project, which saves time later.

You can create wireframes by hand or by using digital tools.

We usually start creating wireframes by drawing on a piece of paper.

We'll start drawing wireframes in the next video, so get ready to try it out!

Activity: Draw a wireframe of a favorite app

Puntos totales 10

1.
Pregunta 1
This activity will help you understand how to draw wireframes on paper. In this activity, you will
translate the ideas of one of your favorite mobile apps to a paper wireframe. Wireframes reduce the
app down to its basic structure to highlight each element’s intended function. To create the paper
wireframes, you'll work backwards from an already designed app. This activity will help you
understand how to design the structure of a page to test out different options before spending a lot of
time designing. This practice will also prepare you for later course activities when you'll be asked to
draw paper wireframes for your portfolio projects.

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

Step 1: Select a mobile app to wireframe

Think of a mobile app you enjoy using, and navigate to the app’s home screen. If the home screen
has common UI components, such as menus and buttons, it’s a good selection for practicing your
wireframe drawing skills. 

Step 2: Write a list of key home screen info

Before you start drawing, write a short list of the key information that is on the app’s home screen.
Your list might include a navigation menu, a search bar, images, text, and other elements that are
important to using the app. This will help you plan which elements need to be drawn in your paper
wireframe and how they should be drawn.  

Step 3: Draw the home screen’s frame

Using a piece of paper and a pen or pencil, draw a rectangle to represent the frame of the app’s
home screen. The dimensions don’t need to be exact. It’s only important that the home screen’s key
elements can fit in the rectangle and be placed similar to how they appear on the screen.
Step 4: Draw the screen’s key elements
Draw the key elements of the app’s home screen from Step 2 as lines and simple shapes—like
circles, squares, and rectangles—within the frame. Follow the industry standards explained in the
course video for representing certain elements:

 Text is represented by horizontal lines.

 Images, photos, illustrations, and icons are represented by squares with large Xs drawn on
top of them.

 Calls to action—like “submit” or “compose” buttons—are represented by rectangles or

circles, whichever fits the basic shape the element has on the screen.

Industry standards help you make sure your wireframes are simple and understandable, especially
for any collaborators. 

Step 5: Reflect on the completion of this activity

Does your paper wireframe:

 Fit all of the key elements of the home page in the home screen frame?

 Reflect all of the key elements of your chosen app’s home page?

 Follow industry standards for representing various elements?

Did you complete this activity?

Activity Exemplar: Draw a wireframe of a

favorite app
Here is a completed exemplar along with an explanation of how the exemplar fulfills the
expectations for the previous activity. 
The wireframe outlines the basic structure of the app’s home screen and highlights its
functions. It applies industry standards to keep the wireframe simple and understandable. 

 Text is represented by horizontal lines.

 Images, photos, illustrations, and icons are represented by squares with large Xs
drawn on top of them.
 Calls to action—like “submit” or “compose” buttons—are represented by
rectangles or circles, whichever fits the basic shape the element has on the
screen.
Now compare the exemplar above to your completed deliverable. Self assess what you’ve
done using the criteria used here to evaluate the exemplar.  What did you do well? Where can
you improve? Take this feedback with you as you continue to progress through the course.