Google UX Design

Explore

Wireframes and prototypes

Storyboarding and wireframing.

Research informs Ideation

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.

All of these tools informed the creation of a problem statement and will guide your ideation process moving forward:

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.

Create goal statements

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

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.

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.

⁠

User Flows:

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.

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.

⁠

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.

⁠

Create 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.

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.

Create a big picture storyboard

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

2. Create a goal statement. Your goal statement helps you determine a plot (the benefit or solution of your design) for your storyboard.

3. Set up the storyboard.

storyboard template⁠

⁠

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.

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.

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.

7. Include the user goal or conclusion in the final panel

⁠

Create a close-up storyboard

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

Start with a problem statement.

Create a goal statement.

Set up the storyboard.

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.

⁠

Wireframes

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.

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.

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

Wireframes establish the basic structure of a page. before any visual considerations, like color or images, are added.

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.

Industry standards are common ways to indicate page elements.

The first is text, which should be represented by horizontal lines.

Second is images, photos, illustrations, and icons, which are represented by a circle and an X overlapping each circle.

Third, calls to action are often represented by rectangles or circles.

Benefits of wireframes:

Seeing the elements laid out on a page will help everyone decide if the right elements are included.

Second, wireframes help you catch problems early.

Wireframes allow you to map out how all the elements will look on each page and how users will navigate from page to page.

This lets you check if elements are missing, out of order, or disorganized. Also, wireframes get stakeholders to focus on structure instead of the details like color and text.

The magic of a wireframe is its simplicity.

A wireframe is a basic outline made up of lines and simple shapes, so there are no details for stakeholders to get hung up on.

This allows you to make decisions early on the structure of the website or app.

Wireframes allow you to iterate quickly.

⁠

Course 3 Week 1 - Glossary⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.