Welcome to week 3

Welcome back. By this point in the course, 

you've created wireframes and 
low-fidelity prototypes 
for the dedicated mobile app portion 
of your final project. 
I hope you've been enjoying designing for social good 
and are having ongoing conversations 
with the community you're designing for. 
Now, you're ready to move into high-fidelity design. 
You'll build new iterations of 
your designs that incorporate 
visual design elements like 
typography, color, and iconography. 
You'll also create a high-fidelity prototype 
with more complex interactions and animations. 
Here's a more detailed preview 
of what's to come in this part of the course.
Reproduce el video desde ::41 y sigue la transcripción0:41
To kick things off, you'll start by 
designing mockups for your dedicated mobile app. 
You'll continue to design on the platform of your choice, 
Figma or Adobe XD. 
Along the way, you'll save elements 
and components in your design system. 
This way, you can use 
the components and colors from your dedicated mobile app 
again when you design 
a responsive website in the next part of the course. 
Then you'll turn your mockups 

1
into a high-fidelity prototype. 
Finally, you will have the option to plan and conduct 
a usability study to gather 
feedback about your high-fidelity prototype. 
You'll analyze and synthesize the observations from 
your usability study to come up with 
actionable insights to improve your designs. 
You'll iterate on your high-fidelity designs 
based on the insights from your research. 
I'd recommend that you conduct 
a usability study of 
your high-fidelity prototype if you had 
a lot of feedback and made 
many changes to your designs in the low-fidelity phase. 
You might also want to test 
the visual design of your product to 
understand whether or not it resonates 
with the community you've been designing for.
Reproduce el video desde :1:51 y sigue la transcripción1:51
In this part of the course, 
your basic black and white low-fidelity designs 
will come to life with details and color. 
I really enjoy this part of 
the design process because I can start 
to really imagine how my designs will serve real users. 
I'll continue to guide you each step of the way. 
So if you're ready, let's get started.

Create mockups
2
Hi there. Earlier in the course, you created wireframes for 
your dedicated mobile app. 
Now it's time to bring your designs to life using visual design elements and 
adding more details. 
And the best way to do that is with a mockup. As a reminder, mockups 
are static, high-fidelity designs used as a representation of a final product. 
Keep in mind, 
going from a wireframe to a mockup should not feel like a paint-by-number exercise. 
For example, it's okay to place an image in a different part of your mockup design 
than you planned for your in wireframe. 
You should build your mockups in the same tool you used to build your wireframes and 
low-fidelity prototype. 
It's a best practice to place a copy of your digital wires above the area 
where you plan to create your mockups, so you can easily reference them. 
Mockups include visual and UI elements, so UX designers and their 
collaborators can get a better idea about the final state of the website or app. 
Mockups are not clickable or highly interactive, which means they can be 
used to make multiple iterations without affecting the functionality.
Reproduce el video desde :1:12 y sigue la transcripción1:12
Let's explore the differences between wireframes and 
mockups in a bit more detail. 
Here's an example from an earlier course when my colleagues were working on 
the homepage of the dog walker app in Figma. 
On the left, the wireframes are static images that give us an overview of 
the page layout and hierarchy. You'll notice that the wireframes 
outline the content without providing a lot of detail or color. 
On the right, the mockup of the homepage includes typography, color, and iconography. 
These elements make it easier to map out the user flow and 
can help UX designers visualize the user journey in a more dynamic way. 
As you start creating your own mockups, 
there are a few visual design elements you'll want to include. 

3
The first one is typography. Typography is the practice of arranging text and 
typefaces, also known as fonts, to make language legible, readable, and 
visually appealing. 
Typography can help add hierarchy to your designs, 
make text easy to read, and add visual style. 
You'll also use color in your mockups. 
As you design, think about the messages that certain colors communicate; 
how people understand color, and how colors mix, match, or contrast with one another.
Reproduce el video desde :2:28 y sigue la transcripción2:28
In addition, you will probably want to include a few icons in your mockups. 
Iconography refers to the images or symbols associated with a subject or idea. 
Think about the hamburger icon that's often used for navigation in apps. 
It's really just three stacked horizontal lines, but most people know that this 
icon indicates there's a menu you can open up for more navigation options. 
You'll also need to think about layouts, 
which are ways to arrange elements on a page. 
Layouts usually refer to the specific placement of text, style, icons, and images. 
The goal of layouts is to present information in a logical way, 
making the important elements stand out. 
Without a thoughtful layout, 
your app designs will be difficult for users to interact with. 
Finally, keep in mind the visual design principles that you learned about earlier, 
like emphasis, hierarchy, scale and proportion, and unity and variety. 
These principles help inform your design decisions. 
Adhering to them can lead users to have 
a more positive experience with your mobile app. 
If any of these terms or concepts are unfamiliar, you can review materials from 
earlier in the certificate program, which are linked in the course readings. 
Awesome, you're ready to create your own mockups. Remember to share your designs in 
the discussion forum to get some quick feedback from your peers.

4
Review foundational elements of visual design
You’ve put in so much hard work to create wireframes and low-fidelity prototypes for the dedicated mobile app portion of
your final project. Now, you’re ready to move into creating mockups. 

As a reminder, mockups are static, high-fidelity designs used as a representation of a final product. As you transition from
digital wireframes to mockups, keep in mind that your designs can change greatly at this point in the process. For
example, it’s totally okay to place an image, icon, or text in a different part of a mockup than you planned for in a
wireframe. Going from a wireframe to a mockup should not feel like a direct copy/paste exercise, so think critically!

As you begin to design mockups, remember the importance of the foundational elements of visual design. On a basic
level, the term visual design in UX refers to how a product or technology appears to the user. If you’ve been taking the
courses of the certificate program in order, then you know all about three foundational elements of visual design:
typography, color, and iconography.

We won’t cover these foundational elements in this final course of the program because we assume that you learned
about them in previous courses. If you need a refresher, check out this video that introduces the foundational elements of
visual design. After that, revisit videos and readings that detail each of the three foundational elements of visual design
that were covered, including:

 Typography: Review this video about typography in UX design, this video about the importance of typography, and
this reading about working with type in mockups. 
 Color: Review this video about using color in UX design, this reading about working with color in mockups, and this
reading about accessibility considerations for using color in design. 
 Iconography: Review this video about iconography in UX design and this reading about working with icons in
mockups.
If this information is unfamiliar, you can return to complete Course 5 of the program: Create high-fidelity designs and
prototypes in Figma. Remember, we recommend that you complete the courses of this certificate program in sequential

5
order so that you can effectively complete your design projects, learn the information required to successfully land a job as
an entry-level UX designer, and benefit from the optimal user experience!

Review arranging elements in mockups

You’ll need more than just the foundational elements of visual design - typography, color, and iconography - to create
successful designs! UX designers also often start by focusing on three methods to arrange elements in designs: grids,
containment, and negative space. Think of these methods as rules used to create order for foundational elements. 

First, you need to plan the layout of your mockups, which are ways to arrange elements on a page. The goal of layouts is
to present information in a logical way, making the important elements stand out. You learned about common website
layouts earlier in the certificate program, including single and multi-column layouts, the grid of cards layout, featured image
layout, and more. If you need a refresher, watch this video about common website layouts or this reading with examples of
common website layouts. 

To create an effective layout, you can utilize grids. Remember, grids are lines that are evenly spaced to help you design
consistently and manage spacing of elements. If you’ve been designing your responsive website in Figma, check out this
video about using grids to guide layouts and this reading about creating grids in Figma to learn more. Or, if you’re
designing in Adobe XD, review this video about creating wireframes in Adobe XD where grids are discussed. 

6
As you create mockups, it’s also important to think about the way the elements are contained. Containment uses visual
barriers to keep designs neat and organized. There are four common methods of containment: 

 Dividers: Single lines to separate sections of a page.

 Borders: Continuous lines that often form shapes, like squares or rectangles, to break up sections of a page.
 Fill: Assign colors to borders and shapes.
 Shadows: Create dimension in combination with borders or fill.
If you’d like to learn more about using containment in your mockups, check out this video from an earlier course of the
program about using containment in layouts. 

Finally, as you determine how to arrange elements in your mockups, you will need to consider the use of negative space.
Remember, negative space is the area that surrounds an object within an image. It’s the gaps between the elements in the
design or the space that’s not being used. To learn more about negative space, review this video about using negative
space in layouts and this reading about using negative space from the previous course of the program.

Review visual design principles

In the previous two courses of the certificate program, you refined and improved your mockups using visual design
principles like emphasis, hierarchy, scale, proportion, unity, and variety. If any of these terms are unfamiliar, return to an
earlier course of the program, Create high-fidelity designs and prototypes in Figma, and review Week 2, which is all about
applying visual design principles to mockups. 

Or, if want a quick refresher about visual design principles, check out these videos and readings from that course: 

 Revisit this video about emphasis in UX design and this reading about using emphasis in mockups.
 Revisit this video about hierarchy in UX design and this reading about using hierarchy in mockups.
 Revisit this video about scale and proportion in UX design and this reading about using scale and proportion in
mockups. 
 Revisit this video about unity and variety in UX design and this reading about using unity and variety in mockups. 

7
  If you want to take your mockups one step further, you should also consider reviewing this video about applying
Gestalt Principles to mockups and this reading that introduces additional Gestalt Principles.
 

Completado(a)

Document a design system

Hello again. Now that you know 
how to go from wireframes to mockups, 
it's time to start defining your design system. 
A lot goes into creating mockups, 
and you'll need a way to save and reuse 
the design elements and components you will use. 
This is where having a design system can really help. 
As you might remember, a design system is a series of 
reusable visual elements that allow teams to 
design and develop a product quickly and consistently, 
following predetermined brand standards. 
At this stage of the design process, 
one of your goals is to document 
the decisions you're making about your visual designs. 
This means documenting the font, 
colors, layout, text, illustrations, 
iconography, animation, 
and other visual elements that your product 
includes as part of your design system.
Reproduce el video desde ::51 y sigue la transcripción0:51
Why should you use a design system 
for your current project? 

8
When you're designing across devices, 
having a good design system setup 
can save you lots of time. 
If you save your preferences as you go, 
you won't need to make new decisions about a color 
or style choice each time you adjust your mockup; 
you can simply copy the element or component you've 
already created and use it again in the new design. 
Design systems also help keep your designs consistent. 
Having consistent designs help ensure 
a uniform user experience across devices and products. 
For example, you want to use the same style of 
buttons and the same font in 
the dedicated mobile app you're designing now 
and in the responsive website you'll design later.
Reproduce el video desde :1:36 y sigue la transcripción1:36
Creating a design system for 
your project is a little 
different depending on the tool you're using. 
If you're designing in Figma, 
you'll need to create a sticker sheet, 
and if you're working in Adobe XD, 
you can use the assets panel. 
If you need more information about 
how to build your design system, 
you can revisit demonstration videos 
from earlier in the program. 
In addition to creating your own small design system, 
it can be useful to leverage 
an external organization's design system. 
For example, downloading a UI kit from Google 

9
or any other company can help you get 
a head start on your designs. 
You'll have buttons, navigation bars, icons, 
and more that you can easily 
customize to meet the needs of your own designs. 
Awesome. Now it's time for you to create 
a design system in the tool you're using. Have fun.

Learn more about design systems

A design system is a series of reusable elements and guidelines that allow teams to design and develop a product,
following predetermined standards. Design systems include all kinds of elements from color palettes to icons to buttons.
Design systems create consistency for both designers and users, and make designing faster and easier. As you create
mockups, you might develop your own design system or utilize an existing design system. 

To learn more about using design systems in mockups, review this video that provides an introduction to design systems
and this video about the benefits of design systems from an earlier course of the certificate program.

Develop your own design system

If you’re designing in Figma, you can create a simple design system called a sticker sheet. A sticker sheet is a frame within
Figma where you save colors and components that you can copy-and-paste into designs. Revisit this video from earlier in
the certificate program if you’d like to learn more about creating a sticker sheet in Figma.

If you’re designing in Adobe XD, you can use the Assets Panel to save colors, character styles, and components to develop
your own small-scale design system. Review this video from the previous course of the certificate program if you’d like to
learn more about using the Assets Panel in Adobe XD (starting at 3:36). Or, check out this article from the Adobe blog to
learn more about working with the Assets Panel in Adobe XD or this guide to creating a design system in Adobe XD from
Let’s XD.

10
Utilize an existing design system

As a UX designer, you’ll utilize design systems all the time to improve the speed and consistency of your work. Especially
when you’re new to the field, design systems can help you get a feel for best practices in design and can improve the
quality of your work. Explore popular design systems, like the ones linked below, and take note of design elements or
components that you might want to leverage in your own designs:

 Google’s Material Design

 Shopify’s Design System Polaris
 Apple Human Interface Guidelines
 Microsoft Fluent Design System
 AirBnb's design system
 U.S. Web Design System, a design system for the U.S. federal government

Activity Exemplar: Create mockups of a mobile app

11
Here is a completed exemplar, along with an explanation of how the exemplar fulfills the previous activity’s expectations. 

Featured below are complete mockups of the Food Saver mobile app.

12
Food Saver mobile app mockups:

13
14
To review these mockup screens in detail, access the PDF below.

Food Saver_mobileapp_mocks.pdfArchivo PDF

Abrir archivo

Food Saver sticker sheet:

15
16
The designer took their low-fidelity wireframes and built them out into high-fidelity designs called mockups. In the designs,
you’ll find:

Typography: The designer chose a minimal, sans-serif font for headings and body content, making this design feel modern
and lean. These choices are applied consistently across all the mockup screens.

17
Color: The designer chose green as a primary color, closely connected to feelings of freshness. The icons are white
creating a high contrast with the green background.

Icons: The designer implemented a consistent style of icons throughout the design and used a white indicator to help them
stand out when they’re selected.

Dividers and Borders: The designer used color as dividers and used cards to present recipes.

Negative Space: The designer provided more negative space around items that grab a user’s attention, like food items.

As these decisions were applied, the designer assembled all of the UI elements onto a neat, tidy sticker sheet to make
future mockups more straightforward to build.

Now compare the exemplar above to your completed deliverable. Assess what you’ve done using each of the criteria used
here to evaluate the exemplar. What did you do well? Where can you improve? Take this feedback with you as you
continue to progress through the course.

Build a high-fidelity prototype

With your mockups ready to go, 
it's time to create a high-fidelity prototype 
of you're dedicated mobile app. 
You're getting close to having a final product 
that can benefit the community you've chosen to serve. 
Do you remember the steps to create 
a high-fidelity prototype that were 
introduced earlier in the program? As a quick refresher. 
They are, one: lay out 
the mockups in the order of the main user flow. 
Two: Connect the screens or elements within the screens. 
Three: Add interaction details. 

18
In both Figma and Adobe XD, 
the trigger defines what type of 
interaction will cause the prototype to advance forward. 
You'll probably stick to interactions like tap for 
your dedicated mobile app or mouse 
click for your responsive website later. 
Four: Adjust the animation. 
Remember the animation settings determine how 
the prototype moves from one screen to the other. 
Five: Complete this process 
for all of the screens in your dedicated mobile app.
Reproduce el video desde :1:5 y sigue la transcripción1:05
So, why would you create a high-fidelity prototype? 
Well, the main reason is that hi-fi prototypes 
give you the opportunity to 
test your app designs with users. 
Testing helps you decide how to refine 
your mockups based on the feedback that users provide. 
Testing proves whether the potential solution you've been 
designing addresses 
the community problem you're trying to solve. 
That's it for our quick refresher 
on high-fidelity prototypes. 
Go ahead and turn your mockups into 
a high-fidelity prototype now. I know you can do it.

Activity Exemplar: Build a high-fidelity prototype of a mobile

app
19
Below is a completed exemplar, along with an explanation of how the exemplar fulfills the previous activity’s expectations. 

20
To review this prototype click here.

21
In this exemplar, the user can explore various functions as they move through the primary user flow. The user can review
items close to expiring, explore recipes, and add items to their shopping list.

The user has access to the bottom navigation bar on every applicable screen and there are visual cues that highlight
buttons to move forward as well as indicate where the user is (white indicator on the bottom navigation). Though there isn’t

22
a checkout confirmation screen, the user can reach the end of their user flow by adding used food items to their shopping
list. 

To assess your own high-fidelity prototype, click through your design and make sure there are no dead ends that you may
have missed—these render your prototype unusable for testing. Make sure your task scenario can be completed, and
consider usability as you complete the tasks. 

If you can easily and intuitively complete the main user flow in your prototype, you're ready to move onto the next phase of
the project. On a professional project, this would be an important moment to get feedback from testers. In future optional
activities, you’ll have the opportunity to build a research plan, run a usability study, and implement changes with this
prototype.

If you find broken connections or need to take an unexpected path, go back and update your prototype to correct the
issue.

Now compare the exemplar above to your completed deliverable. Assess what you’ve done using each of the criteria used
here to evaluate the exemplar. What did you do well? Where can you improve? Take this feedback with you as you
continue to progress through the course.

Plan and conduct a usability study for a hi-fi prototype

I bet the high-fidelity prototype 
of your dedicated mobile app 
is coming together nicely. 
So it's time to put your prototype to the test. 
You're about to conduct a usability study. 
As you know by now, 
a usability study is a technique used to 
evaluate a product by testing it on users. 
You've already conducted a usability study to get 
feedback about your low-fidelity prototype of the app. 
Now you have the option to plan and conduct 

23
a usability study to gather 
feedback about your high-fidelity prototype. 
While the choice is yours, 
I'd recommend that you conduct 
a usability study of your high-fidelity prototype 
if you had a lot of feedback 
and made changes to your designs 
in the low-fidelity phase. 
You might also want to test 
the visual design of your product to understand 
whether or not it resonates 
with the community you've been designing for.
Reproduce el video desde ::52 y sigue la transcripción0:52
And if you aren't already convinced, 
research shows that usability is 
key for the success of mobile apps. 
Common trends among successful mobile phone apps 
are that users feel they're easy to learn, 
user-friendly, and make completing tasks quicker. 
Even though designers agree 
mobile app usability is important, 
there's not a single list of 
guidelines to follow to create a mobile app. 
Instead, the best way to test the usability of 
a mobile app is through a usability study. 
Because you recently conducted 
a usability study on your low-fidelity prototype, 
I'm just going to quickly remind you 
of how this process works. 
First, you'll plan the study, 
which includes seven elements. 

24
Second, you'll conduct a study 
which could be moderated or unmoderated. 
Third, you'll analyze and 
synthesize the observations you 
collected during the study. 
Remember, the goal here is to turn 
your observations into insights.
Reproduce el video desde :1:50 y sigue la transcripción1:50
Finally, you'll iterate on 
your designs based on 
the insights that your research uncovered. 
If you'd like a refresher on any of these steps, 
please go back to the earlier course material. 
Now before you conduct your study, 
I'd like to share a few things 
to consider when conducting 
usability studies on hi-fi prototypes 
for dedicated mobile apps. 
These are some insider tips 
based on my years of experience in the field. 
First, it's helpful to brainstorm interaction issues that 
users may have with the product 
and then test those interactions. 
Since you've added more complex interactions 
in your high-fidelity prototype, 
like overlays and motion, 
you want to make sure they're working correctly. 
Second, it's important to test your prototype on 
the correct platform and mobile app screen size. 
For example, if you designed your app for 
Apple iOS and its platform-specific interactions, 

25
don't test it on Android phones, or with 
Android users, who may be 
unable to easily use that platform. 
In addition, it's important to verify that 
your app meets all the platform requirements. 
You don't want to design an experience that's 
incompatible with its conventions and user expectations.
Reproduce el video desde :3:4 y sigue la transcripción3:04
Third, spend some extra time thinking 
about who your study participants will be. 
Since you're designing an app focused on social good, 
you should probably include 
study participants who are 
members of the community you're trying to serve. 
They can give you authentic and direct feedback 
about whether your designs meet 
the real needs of the community 
and if they're able to use your product effectively. 
Whether you conduct a moderated 
or unmoderated usability study, 
be sure to take lots of notes 
and carefully record feedback from participants. 
Remember what you've already 
learned about spreadsheet note-taking, 
and put your skills to the test 
during this final usability study. 
So now you have the chance to 
plan and conduct your own usability study 
in order to get feedback about 
the high-fidelity prototype of your app. 
Keep an open mind and 

26
be ready to make changes to your designs.

Learn more about usability studies

Your high-fidelity prototype for the dedicated mobile app portion of your final project is now ready for testing with real
users! You should aim to get feedback about the visual design of your mobile app, like the type, colors, and icons, as well
as the interactive elements, like button states and animations. 

For the purposes of this course, planning and conducting this usability study are optional. But in the real world, you would
definitely conduct research on your high-fidelity designs before finalizing them. Why? Well, testing and iterating are hugely

27
important parts of the UX design process. The only way you can continue to improve your designs is to get lots of
feedback. 

You planned and conducted a usability study earlier in this course for your low-fidelity prototype, and if you’ve been taking
the courses of this certificate program in order, you also planned and conducted usability studies in earlier courses. You're
basically a professional at this point! If you need more guidance or a refresh of what to do, check out the resources listed
below from earlier courses in the certificate program.

Plan a usability study

If you’d like a refresher, watch this video to get to know the seven elements of a research plan at a high level. Then, check
out the following videos that dive into each of the seven elements, and build your own research plan as you go:

 Project background, research goals, research questions .

 Key Performance Indicators (KPIs).
 Methodology.
 Participants.
 Script.
You can also use this template for a UX research plan. Make a copy of this document or print it out, so that you can fill in
each section of the plan as you watch the videos listed above. 

To use the template, click the link below and select “Use Template.” 

Link to template: UX Research Study - Plan [Template].

OR 

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

Google UX Design Certificate - UX Research Study Plan [Template]Archivo DOCX

28
Descargar archivo

Conduct a usability study

If you need some reminders about conducting a usability study, you can check out these resources from earlier in the
certificate program:

 This video explores best practices for starting a usability study.

 This video explores best practices for communication during a usability study, such as asking open-ended questions,
asking follow up questions, and summarizing participant responses for confirmation. 
 This reading will help you learn more about usability study best practices, including helping participants get
comfortable, putting people first, filling out necessary paperwork, communicating clearly, and asking the right
questions as the researcher.
 During usability studies, taking notes is key. Check out this video that introduces note-taking methods that are
commonly used during usability studies, and this video that dives deep into using a spreadsheet to take notes. You
might also want to utilize this template for spreadsheet note-taking, which contains an empty tab that you can copy for
your own study and a completed tab to serve as an example. 
To use the template, click the link below and select “Use Template.” 

Link to template: note taking spreadsheet template

OR 

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

Google UX Design Certificate - Note taking spreadsheet [Template]Archivo XLSX

Descargar archivo

29
Analyze and synthesize research study results

Once you have a ton of feedback from research participants, you’ll need to gather, organize, and synthesize the research
results to come up with strong insights that’ll help you improve your product. In just four steps, you can turn the
observations from research into actionable insights: 

 Gather the data in one place

 Organize the data
 Find themes
 Come up with insights 
If you’d like to learn more, review this video about turning observations into insights to recall the four steps at a high level.
Then, check out videos that describe each of the steps in detail: 

 Gather the data in one place and organize the data with affinity diagrams. You can also check out the reading that
follows the video, which dives deep into creating affinity diagrams to organize data. 
 Find patterns and themes in research data.
 Come up with insights, keeping these qualities of strong insights in mind.
Good luck conducting a usability study to gather feedback about your high-fidelity designs. You've got this!

30
Activity: Create mockups of a mobile app
Puntos totales 1

1.
Pregunta 1

31
This activity will help you apply your visual design and design system building skills. You'll convert your low-fidelity wireframes from the
Create digital wireframes for your portfolio project website activity into mockups. 

In addition to building mockups, you'll create a sticker sheet to host all of the design assets used throughout your design. 

Feel free to use the design program of your choice (Figma or Adobe XD). The examples in this activity were built using Figma.

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

33
Step 1: Open the low-fidelity wireframes for your portfolio project
Open your wireframes in Figma or Adobe XD. These are the same wireframes from the Create digital wireframes for your portfolio project
website activity.

In Figma: Go to the Figma website or start the Figma desktop app. Make sure you are logged in and click on Recent in the upper left-hand
navigation bar, then click on your project to open it. 

In Adobe XD: Start the Adobe XD desktop app. Make sure you are logged in and click on your project in the Recent section to open it.

34
Step 2: Prepare to design for high-fidelity 
Before you start building your mockups, make sure you organize all of your screens. For example, put them in the order your user would
observe them as they move through the main user flow. Also, make sure you name all of your frames or artboards. Naming and organizing
your frames will help you keep track of the screens you are working with as you iterate on your design.

35
 Step 3: Build your mockups one screen at a time
Starting with your home screen, begin converting your low-fidelity wireframes to mockups. Apply the visual design elements you’ve learned.
Some you’ll want to incorporate are:

 Typography 
 Iconography 
 Images

36
37
 In the screens above, the low-fidelity wireframe was converted into a mockup. The designer added:

 Color: Green buttons and background colors

 Typography: Fonts are applied consistently across elements, like buttons
 Iconography: Icons replace placeholders to make the product feel more realistic
 Imagery: Product photos replace the image placeholders to make it more clear what an element is and does
 Negative Space: White space around elements draws attention to the most important elements on the screen

Step 4: Save your high-fidelity assets as components 

As you’re creating your high-fidelity design assets, such as navigation bars or icons, save them as components so you can quickly use them
to build out the rest of your screens.

An added benefit of creating components is that any update you make to the parent component will be translated into the rest of the
instances where that same component is being used. 

In Figma:

Right-click on the element, then select Create component.

38
39
In Adobe XD:

Right-click on the element, then select Make component.

40
41
In Figma, you can access all the components you've made for your designs in the Assets tab located at the top left of your screen, right
next to the Layers tab.

42
43
In Adobe XD, you can access all the components you have made for your designs in the Libraries panel located at the bottom left of your
screen.

Step 5: Create a sticker sheet with all of your high-fidelity design assets 
As you build the rest of your screens, add the design assets you’re creating to a sticker sheet like the example below. This sticker sheet will
be a great resource to reference all of the individual assets in your design, such as font size, color, etc. Keeping your design organized like
this will help make sure the design remains consistent throughout its development. 

44
Food Saver Sticker Sheet:

45
46
Step 6: Build out the rest of the mockups for your main user flow
Repeat steps 3 and 4 until you've built enough screens to convey your product’s main user flow successfully. You’ve already built out the
low-fidelity version of your main user flow, so you have a good idea of what screens you need to build out. Take the time to think about any
additional screens that you might need, to make your future prototype feel more realistic and polished. A profile page, perhaps. Build those
out, too, if time permits. 

Step 7: Save your work

As you complete these activities, remember to: 

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

47
Activity Exemplar: Create mockups of a mobile app

48
Here is a completed exemplar, along with an explanation of how the exemplar fulfills the previous activity’s expectations. 

Featured below are complete mockups of the Food Saver mobile app.

49
Food Saver mobile app mockups:

50
51
To review these mockup screens in detail, access the PDF below.

Food Saver_mobileapp_mocks.pdfArchivo PDF

Abrir archivo

Food Saver sticker sheet:

52
53
The designer took their low-fidelity wireframes and built them out into high-fidelity designs called mockups. In the designs,
you’ll find:

Typography: The designer chose a minimal, sans-serif font for headings and body content, making this design feel modern
and lean. These choices are applied consistently across all the mockup screens.

54
Color: The designer chose green as a primary color, closely connected to feelings of freshness. The icons are white
creating a high contrast with the green background.

Icons: The designer implemented a consistent style of icons throughout the design and used a white indicator to help them
stand out when they’re selected.

Dividers and Borders: The designer used color as dividers and used cards to present recipes.

Negative Space: The designer provided more negative space around items that grab a user’s attention, like food items.

As these decisions were applied, the designer assembled all of the UI elements onto a neat, tidy sticker sheet to make
future mockups more straightforward to build.

Now compare the exemplar above to your completed deliverable. Assess what you’ve done using each of the criteria used
here to evaluate the exemplar. What did you do well? Where can you improve? Take this feedback with you as you
continue to progress through the course.

55
Activity: Build a high-fidelity prototype of a mobile app
Puntos totales 1

1.
Pregunta 1

56
This activity will help you apply your prototyping skills. You'll be converting the mockups you made in the Create mockups of a mobile app
activity into a high-fidelity prototype. 

As you build your prototype, remind yourself of what task you're building for the user to test during the next usability study. As you build your
prototype, you may realize that you need to change a few things or create additional screens. That's perfectly fine. Remember, designing is
an iterative process that evolves and changes as it goes along. 

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

58
Step 1: Open your mockups for your portfolio project
Open your mockups in Figma or Adobe XD. 

In Figma: Go to the Figma website or start the Figma desktop app. Make sure you are logged in and click on Recent in the upper left-hand
navigation bar, then click on your project to open it.

In Adobe XD: Start the Adobe XD desktop app. Make sure you are logged in and click on your project in the Recent section to open it.

59
Step 2: Prepare your mockups for prototyping
Organize all of your screens into a logical order before you begin prototyping your design.

Notice how, in the example below, all of the screens have titles and are arranged in a numerical order? This helps anyone accessing the file
understand the order of steps without clicking through the prototype itself.

60
Organizing your design like this will make adding the connections to your prototype easier and smoother.

61
62
In Figma, be sure to change from the Design tab to the Prototype tab. In the upper-right corner of your screen, you'll notice the option to
change from designing wireframes to connecting them in a prototype. Switch over to the Prototype tab.

In Adobe XD, be sure to change from the Design tab to the Prototype tab. In the upper-left corner of your screen, you'll notice the option to
change from designing wireframes to connecting them in a prototype. Switch over to the Prototype tab.

Step 3: Make a connection between an element and a screen

Using the Connection node, drag to make a connection from an element on one screen to the desired destination screen. 

In Figma:

63
In Adobe XD:

When the connection is made, you’ll have a few options available in the Interaction Details pop-up in Figma or the Interaction panel in
Adobe XD. The standard interaction (“On Tap - Animation: Instant” in Figma and “Tap - Animation: Dissolve” in Adobe XD) will work great. If
you accidentally connect the wrong screen, you can change it in the dropdown of the Interaction Details pop-up and Interaction panel as
well. 

64
As you’re working on this process, think critically about the elements you’re connecting. You can connect any element to any page in Figma
or Adobe XD, but make sure that the user can tell whether they are able to interact with an element. Ask yourself: “do my buttons look like
buttons?”

Navigation cues help guide a user through your product and are the foundation that your prototype is built on.

With that in mind, begin building your prototype, one connection at a time.

We recommend starting with the home screen. From there, ask yourself what a user can click on to progress to the next step of their task.

65
66
Take your time and do this for every screen. This process will ensure minimal sticking points during the testing phase.

Once you've finished making all of your connections, your prototype should appear similarly to the image below. You'll notice a web of
connections going all over the place, from one screen to the next.

67
68
Step 4: Test your prototype
Before submitting this activity, make sure that you've successfully tested your prototype and ensured that it works properly. Pay close
attention to whether or not the main user flow is possible to complete. 

You can preview your prototype by pressing the Play button to the right of the Share button on the top-right corner of the screen. It is in the
same location and represented by the same icon in Adobe XD. 

In Figma:

In Adobe XD:

69
Step 5: Save your work
As you complete these activities, remember to: 

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

70
Activity Exemplar: Build a high-fidelity prototype of a mobile
app

Below is a completed exemplar, along with an explanation of how the exemplar fulfills the previous activity’s expectations. 

71
To review this prototype click here.

72
In this exemplar, the user can explore various functions as they move through the primary user flow. The user can review
items close to expiring, explore recipes, and add items to their shopping list.

The user has access to the bottom navigation bar on every applicable screen and there are visual cues that highlight
buttons to move forward as well as indicate where the user is (white indicator on the bottom navigation). Though there isn’t

73
a checkout confirmation screen, the user can reach the end of their user flow by adding used food items to their shopping
list. 

To assess your own high-fidelity prototype, click through your design and make sure there are no dead ends that you may
have missed—these render your prototype unusable for testing. Make sure your task scenario can be completed, and
consider usability as you complete the tasks. 

If you can easily and intuitively complete the main user flow in your prototype, you're ready to move onto the next phase of
the project. On a professional project, this would be an important moment to get feedback from testers. In future optional
activities, you’ll have the opportunity to build a research plan, run a usability study, and implement changes with this
prototype.

If you find broken connections or need to take an unexpected path, go back and update your prototype to correct the
issue.

Now compare the exemplar above to your completed deliverable. Assess what you’ve done using each of the criteria used
here to evaluate the exemplar. What did you do well? Where can you improve? Take this feedback with you as you
continue to progress through the course.

Activity: Plan a usability study

Puntos totales 1

1.
Pregunta 1

74
This activity will help you create a research plan so you can conduct a usability study on the high-fidelity prototype you created for your
portfolio project. A research plan is a step-by-step examination of when, where, how, and why a usability study will be conducted.
Research plans are essential to conducting a successful usability study that identifies the parts of a design that are usable, and the parts
that need to be refined or adjusted. 

A complete research plan has seven steps:

75
1. Project Background: What led you to conduct the research and why it’s needed
2. Research Goals: What the desired outcome of the research is 
3. Research Questions: The questions the study is trying to answer
4. Key Performance Indicators (KPIs): Measurements of progress toward a research goal
5. Methodology: The steps you take to conduct your research 
6. Participants: The people who will participate in your usability study
7. Script: A list of tasks and follow-up questions given to participants during the usability study

In the activity, you’ll create your own research plan to conduct a usability study on the high-fidelity prototype you’ve been working on by
following these steps. If you’ve completed the previous courses in order, you should be familiar with research plans. If you want to brush up
on your research plan knowledge, review the video on planning usability studies. 

76
To complete a research plan for your project, follow the instructions below: 

Step 1: Access the template

To use the template, click the link below and select “Use Template.” 

77
Link to template: UX Research Study - Plan [Template].

OR 

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

Google UX Design Certificate - UX Research Study Plan [Template] Archivo DOCX

Descargar archivo

Step 2: Write the project background

In the Project Background panel of your research plan template, write a short explanation of why you’re doing this research. You can do this
by answering each question in order. This puts your team on the same page at the beginning of the study and demonstrates that you
understand why you’re conducting the research. 

78
79
UX Research Study — Plan Template - Introduction: Introduction Title: A few words about the focus of the study Author: Your full name, job
title or role, and email address on one line Stakeholders: List the names of project stakeholders and their roles Date: Update the date listed
every time you edit this plan Project background: What led you to conduct this research? Research goals: What design problems are you
trying to solve for the user and/or the business? How will the results of the research affect your design decisions?

Step 3: Identify research goals

Next, write down your research goal or goals in the space provided. Your research goals should address what problems you’re trying to
solve by conducting this research, or what you expect the outcome of the research to be. Since you’re working with a high-fidelity prototype,
ask yourself what you want to find out at this stage in the design cycle. What is important to learn more about? 

80
UX Research Study — Plan Template - Research plan. Research goals: What design problems are you trying to solve for the user and/or the
business? How will the results of the research affect your design decisions?

Step 4: Create 5-7 research questions

Now, come up with research questions and write them in the corresponding panel of the template. These questions should represent the
questions you’re trying to answer by conducting this research and should support your research goals. Keep the number of questions
manageable so your research has a clear focus and doesn’t become scattered. 

Note that your research questions aren’t the same questions you will ask your usability study participants in the interview stage. Research
questions help you decide what questions are important to answer as a result of your research, rather than questions you ask usability
study participants directly. 

81
UX Research Study - Plan Template - Research questions Research questions: What are the questions your research is trying to answer? Pro
tip: Five research questions is a solid place to start. Do not include more than 7-10 research questions.

Step 5: Choose KPIs to measure

Using the template, write down 2-3 KPIs that will help you measure your progress towards your research goal. 

There are six types of KPIs that are typically used in UX research:

82
 Time on task: How long it takes a user to complete a task 
 NOTE: Time on task may change depending on whether the user uses assistive technologies or has other accessibility needs 
 Use of navigation vs. search: The number of users who navigate casually compared to those who use the search function
 User error rates: How often users make mistakes 
 Drop-off rates: The number of users who give up without accomplishing a goal
 Conversion rates: The number of users who reach their goal successfully
 System Usability Scale (SUS): A series of 10 questions evaluating how easy your product is to use

Think about what parts of your design you want feedback on, and what will help you evaluate progress made towards your research goals.

How can you measure progress toward the research goals? KPIs might include: Time on task, use of navigation vs. search, user error rates,
drop-off rates, conversion rates, system usability scale (SUS), etc.

Step 6: Propose a methodology

Decide on a methodology for your usability study. Here, you’ll address how your study will be conducted and what you’ll do with the data
once it’s collected. Choosing a methodology is important because it affects how your data is gathered and the questions you will ask your
participants during interviews. 

83
 Your methodology should include:

 Procedures for running the test

 The time and location of the test
 The person who will be conducting the test
 The way the test will be conducted

The methodology should clearly demonstrate what you did, how you did it, and why you did it so that stakeholders and other designers can
understand how you conducted the research. 

84
UX Research Study - Plan Template - Methodology. Methodology How will you collect data? How will you analyze the data once you get it?
The methodology should be detailed so that other researchers can understand what you did, the choices you made, and the limitations of
the methods employed to decide if or when further research is needed.

85
 Step 7: Choose participants
When recruiting participants for your usability study, you want to have a small group of participants in your study that represent your key
user group, as well as user groups that are often marginalized.

The participants section of your UX research study plan should have:

 Primary characteristics of people you’ll recruit to participate

 Justification for why you chose your target group 
 Considerations for users who use assistive technologies and have other accessibility needs

Take some extra time to think about who your study participants will be. Since you’re designing an app focused on social good, you should
probably include study participants who are members of the community you’re trying to serve. They can give you authentic and direct
feedback about whether your designs meet the needs of the community and if they’re able to use your product effectively.

86
UX Research Study - Plan Template - Participants Participants Who will you include in this study? What characteristics do the participants
have? Why did you choose them? Note: If you’re intentionally including specific populations (e.g., users with diverse abilities and
perspectives), be clear about the needs of the study.

Step 8: Write a usability study script

In the last panel of your research plan template, write a script for your usability study. These are the tasks and questions you will present to
your participants. They will complete each task, then respond to your follow-up questions. Implementing this script is how you will gather
your data, so keep your script aligned with the goals and ideas in the rest of the research plan. 

87
 Your script should include:

 An introduction
 A warm up to help the participants settle in
 Specific tasks related to your research goals
 Follow-up questions for each task

UX Research Study - Plan Template - Script. Script: What questions will you ask study participants?

When you’re finished, you should have all seven panels of the research plan template filled out. If you need to review UX research plans in
detail, revisit the Course 7 video on planning usability studies and the reading that covers usability study planning in further detail

88
Activity: Conduct a usability study
Puntos totales 1

1.
Pregunta 1

89
 This activity will help you conduct a usability study for your high-fidelity prototype. A usability study is a research method that evaluates
how easy it is for participants to complete tasks in a design. An effective usability study provides actionable feedback about your design,
which helps you decide what to do next. In this activity, you’ll be conducting a usability study for your portfolio project using the research
plan you’ve already created as well as the hi-fi prototype that you’ve been working on.   

At this point, you should have created a UX research plan and working high-fidelity prototype for your project. You’ll use these resources to
conduct your usability study. If you don’t have a high-fidelity prototype and a research plan, you need to complete them before beginning
this activity.

Before you begin the usability study, keep two things in mind:

1. Consider what interaction issues users may encounter as they use your prototype, then test those things to make sure they work before
conducting the usability study. 
2. Include considerations for assistive technology and other accessibility needs that participants may have
3. Conduct your usability study using the device platform and screen size that you designed for, otherwise the prototype may not work the
same way as it did when you were designing it. 

With these considerations in mind, you’re ready to conduct your usability study. 

90
Step 1: Open the note-taking spreadsheet template
To use this template, click the link below and select “Use Template.” 

91
 Link to template: note taking spreadsheet template

OR 

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

Google UX Design Certificate - Note taking spreadsheet [Template] Archivo XLSX

Descargar archivo

Step 2: Instruct participants to complete each task

Now it’s time for your interviews. An interview is the portion of a usability study where you give your participants usability tasks, then ask
them follow-up questions about their experience. 

By now, you should have five participants that represent your user group who have agreed to take part in the study. Now it’s time to read
the script from your research plan to each participant.

After welcoming the participant and letting them settle in, confirm that you have their permission to record and use the interview. Then,
present them with the tasks and follow-up questions in your script. Remember to take notes throughout the interview so you can revisit
important things that participants mentioned. 

As a usability study moderator, be sure to:

 Ask questions that are open-ended and encourage elaboration

92
 Ask follow-up questions whenever possible
 Summarize the participant’s answers for confirmation
 Encourage participants to think out loud
 Phrase everything neutrally so it doesn’t sound like you’re making assumptions
 Phrase questions identically for each participant to avoid skewed data
 Avoid helping participants with tasks and explaining how parts of the design work 
 Take detailed notes on each participant’s behaviors, questions, and feedback

Your goal during these interviews is to learn as much as possible about what users feel and experience while interacting with your design.
Encourage your participants to elaborate as much as possible in order to understand the motivations behind their actions and feelings. 

Step 3: Record interview feedback

Using your note taking spreadsheet, organize your observations by column, with one column for each participant. Record your observations
in each row of the column the current participant’s name is in. 

When organizing the notes from your interviews, think about:

 How easy or difficult it is for the participant to complete their tasks

 What tone of voice or attitude the participant has while completing a task
 How useful the participant believes the product is
 Meaningful quotes that summarize the participant’s experience
 Whether the participant is frustrated or speaking in a positive tone
 Your thoughts and impressions on the participant’s overall experience

Add your observations for Participant A to the corresponding column in the spreadsheet, then do the same for the other participants in their
own columns. Here’s an example:

93
94
Sees uses for labels Doesn't see uses for labels Knows how to get started Confused how to get started Has a hard time knowing what to do first to
create a label Feels frustrated getting started Has trouble changing the color of the "Shopping" label Has trouble finding the 3 dots for the sub-menu
Frustrated finding where to add a sublabel Speaks in a positive tone Speaks in an indifferent tone Speaks in a frustrated tone Speaks in an annoyed or
impatient tone Speaks in a confident tone

Next, look at the participants’ behaviors, questions, and feedback. Input the number one into the field that corresponds with the behavior or
attitude you’ve observed, like this:

95
96
 If you observe a behavior that has not already been identified in the spreadsheet, add a new row for the observation. 

The example above also uses different colors to help separate your feedback into categories. Here’s one way to do this:

 Opinions on the product’s usefulness. These are indicated in red.

 Ease or difficulty completing the assigned tasks. These types of behaviors are indicated in blue.
 Attitude, or tone of voice, when completing the assigned tasks. These are indicated in green. 

Step 5: Reflect on the completion of this activity

Once you’ve finished your interviews and organized your notes, ask yourself if you’ve satisfied the following criteria:

1. Did you interview five distinct people?

2. Did you ask open-ended interview questions and didn’t lead the user towards answering in any particular way?
3. Did you account for accessibility and other inclusive design observations when interviewing and analyzing the data?
4. Did you take notes in the note taking template?
5. Did you carefully summarize user behaviors, questions, and feedback?

If you didn’t answer "yes" to any of the questions, go back and make sure to address anything you missed. 

Activity: Synthesize research and modify designs

Puntos totales 1

97
1.
Pregunta 1

You recently completed a usability study to test your high-fidelity prototype. Now, it’s time to organize the data and uncover insights from it. 

98
This activity will help you analyze and synthesize your data to uncover insights. You’ll then use the insights to make changes to your design.
An insight is an observation that helps you understand the user and their needs from a new perspective. Insights help explain what data
means and what to do with it.

You need to complete a usability study for your prototype before beginning this activity. If you haven’t done one yet, go back and do it now.
To do this, revisit the activity on conducting a usability study.

99
Step 1: Gather your notes
Open the note-taking spreadsheet you used to record your observations during the usability study. You’ll sort the responses you recorded in
the next steps of this activity.  If you took notes anywhere else, gather those so all of your data is in one place. 

100
If you didn’t use the note-taking spreadsheet to organize your notes in the previous activity, take a moment to add them to one before
proceeding to the next step. 

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

Link to template: note taking spreadsheet template

OR 

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

Google UX Design Certificate - Note taking spreadsheet [Template] Archivo XLSX

Descargar archivo

Step 2: Identify themes in the data

Now that you’ve organized your notes, it’s time to categorize them into themes. A theme is a pattern that is common across participants. 

In this step, you’ll create an affinity diagram and use it to sort the data into themes of your choosing. You can use physical sticky notes to
create your affinity diagram, or use digital resources like Jamboard, Miro and Note.ly. To review affinity diagrams, visit the reading on
learning more about analyzing and synthesizing research results. 

Ask yourself two important questions while identifying themes:

101
 What common patterns stand out in the data I collected? 
 What do the patterns tell me about my product’s design? 

Using the tool or medium that works for you, write down the themes you chose on the cards in front of you. Once you have all of your
themes labeled, add each data point under the corresponding theme.

When you’re finished, all of your data should be sorted into themes on your affinity diagram. If you finish sorting your cards and you want to
move some of them to different themes, that’s okay. You don’t have to commit to putting a card under a certain theme if another theme feels
like it matches better. Sometimes it’s easier to see patterns after your initial round of sorting. Once you’re finished with your final affinity
diagram arrangement, you’re ready to start identifying insights from the cards. 

Step 3: Synthesize the themes into insights

Next, it’s time to come up with insights based on the themes you identified. To recap, an insight is an observation that helps you
understand the user or their needs from a new perspective. Strong insights answer the research questions in your research plan. The
insights you identify will help you make changes to your design that improve the user experience. To review the process of identifying
insights, visit the video that discusses how to analyze and synthesize research results. 

Analyze the themes you chose, and the data that you grouped with the themes. What did you learn from them? What answers or questions
did they bring up? 

On a piece of paper or a digital document, write down a list of insights that you uncovered while studying your themes. You should be able
to generate at least one meaningful insight that will help you improve your design so that it meets the needs of your users. Write down as
many as you can identify. 

Think about how these insights can be applied to your design, because in the next steps you’ll make changes to your prototype based on
them. 

102
 Step 4: Open your prototype project file
Open your high-fidelity prototype in the UX software of your choice. We recommend using Adobe XD or Figma to work on this project, but
anything you are comfortable with is okay. Once in the program, open the file containing your prototype. 

If you don’t have a hi-fi prototype for your project yet, you need to go back and make one before beginning this activity. You can find
instructions for creating a high-fidelity prototype in the activity called build a high-fidelity prototype of a mobile app.

Step 5: Use your insights to update your prototype

Edit your prototype using your list of insights as a guide. Look at each insight that you wrote down, and identify how you can implement
what you uncovered in your design. The better you address the things that users felt were missing, the more complete and usable your
design will be. 

For a refresher on how to implement feedback from your insights, visit the video that discusses how to iterate on designs based on research
insights. If you want to go even further, you can also revisit the reading titled learn more about iterating on designs based on research
insights. 

Implement all of the feedback from your list of insights. When you’re finished, you should have an updated prototype that accounts for all of
the insights you identified in the previous step. 

Step 6: Save your work

As you complete these activities, remember to: 

1. Take photos of your progress and save them. This includes photos of sketches, notes, and affinity diagrams. 

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

104
105