App Design Curriculum: Prototyping a Mobile App

App Design Curriculum
MODULE OBJECTIVES
Prototyping a Mobile App
SWBAT = Students will be able to...
MODULE OBJECTIVES
SWBAT communicate the existence of the STEM skills gap.

SWBAT communicate the implications of the STEM skills gap.
Module 1 SWBAT communicate what Computer Science is.

STEM Skills Gap & Computer Science
SWBAT comprehend the varying roles computer scientists can play in industry.
SWBAT discover that Computer Science can change the world by using creativity
and logic to solve problems.
SWBAT identify design thinkers in the global workforce.

SWBAT use deductive reasoning to correctly order the steps of the Design
Module 2 Thinking Model along with their corresponding definitions.
Design Thinking
SWBAT apply their understanding of the Design Thinking Model to reason
through scenarios involving missteps in the process.
Module 3 SWBAT empathize with their classmates to identify a relevant problem in their
Identifying the Problem community or world.
SWBAT create a storyboard that demonstrates a strong understanding of UI/UX

design principles.
Module 4
UI/UX, Wireframing and Storyboarding SWBAT iterate on their design based on feedback to create the best possible
product that addresses the problem they are trying to solve.
SWBAT create crystal-clear logic statements that start, execute, and stop a
programmed task.
Module 5
Prototyping SWBAT communicate using basic programming logic statements.
SWBAT design a basic app using a block-based coding tool.
SWBAT identify strong and weak presentation skills.

SWBAT create a slide deck that supports their presentation.
Module 6
Pitching Your Product SWBAT identify and order the parts of a pitch.
SWBAT pitch their product to a panel of judges.
1 2 3 4 5 6
MODULE 1 | 1 HOUR
MODULE 2 | 1 HOUR
Design Thinking
MODULE 3 | 1.5 HOURS
Identifying the Problem
MODULE 4 | 2–4 HOURS
UI/UX, Wireframing and Storyboarding
Prototyping
MODULE 6 | 2–3.5 HOURS
Pitching Your Product

MODULE 1 | 1 HOUR

LESSON PLAN
The number of STEM degree pursuers and career seekers is dramatically
MAIN IDEA less than the current STEM workforce demand. This gap is known as the
STEM Skills Gap and it is continuing to widen. Computer Science is a field
that is involved in all industries of STEM. It is NOT just about computers
and technology but about using creativity and a systematic process to
solve problems.
This lesson will introduce the concept of the “STEM Skills Gap,” explain
OVERVIEW what it is, and communicate the urgency for students to become
the computational thinkers of tomorrow. This lesson will also examine
the concept of “Computer Science” and explain what a “Computer
Scientist” does.
à SWBAT communicate the existence of the STEM Skills Gap.

OBJECTIVES
à SWBAT communicate the implications of the STEM Skills Gap.
à SWBAT communicate what computer science is.
à SWBAT comprehend the varying roles computer scientists can
play in industry.
à SWBAT discover that computer science can change the world
by using creativity and logic to solve problems.
60–70 minutes
TIME
(Depending on reflection time)
à Printed Module 1 Skills Gap Gallery Walk Posters

MATERIALS (10 Pages for Canada or 12 for the US)
à Printed Module 1 Student Graphic Organizer (one per student)
à Printed Module 1 Job Title Page (one per student)
à Timer
à Tape
STEM Skills Gap &

Computer Science
1 2 3 4 5 6
PACING GUIDE
Pre-Lesson Prep
à Print and post the Module 1 Skill Gap Gallery Walk Posters throughout the room (evenly spaced) using tape.
Select US or Canada posters for this activity.
à Print and distribute the Module 1 Student Graphic Organizer and Job Title worksheet to each student.
RELEVANT SLIDES ACTIVITY TIMING
SLIDE 3 Activity 1 | True or False Gallery Walk 15 min

à Read aloud instructions from the student organizer or have students read the instructions.
à Individually, students will have four minutes to walk around the room, read each statement,
and determine if the statement is true or false. Students should record their answers on the
student organizer.
à Lead students in an open discussion about the various true or false statements
(focus on ONE AT A TIME, but note to yourself that they are all TRUE).
à Questions you can ask to prompt discussion:
What facts stood out to you, and why? Does anybody disagree with other students’
answers, and why?
What did you mark as false, and why?
à Listen carefully to student responses, interject ONLY WHEN NECESSARY.

à Reveal that all statements are true.
SLIDE 4
Reflection 15 min
à Open reflection on the activity (Reflection context provided for facilitator use).
à Close the activity by asking students to reflect on what their key takeaways were from this
series of statements.
à Try prompting questions like:
What is the STEM Skills Gap? What should be our main takeaways?
After all of this, what is the most important thing Why do you think the STEM Skills Gap exists?
to keep in mind?
What stood out to you?
à Double down on the connection between statements 1 and 2, reinforcing the idea that there
are currently not enough people pursuing computer science as there are open jobs within the
field. Use the reflection context below to help drive that point home.
STEM Skills Gap &
Computer Science
1 2 3 4 5 6
SLIDE 5
Activity 2 | What is Computer Science? 10 min
à Students will have 60 seconds to write down as many words as they can think of that answer
the question, “what is computer science?”
à Answers can be anything from have computers, too hard, nerdy, etc.
à Responses are shared as a group and then as a class.
à One student will compile a long list of ideas shared as a whole class—on a chalkboard,
whiteboard, or on wall post-it-note paper. The goal is to create as long a list as possible.
à As you are adding to the list, ask students to share words that speak to:
The impact of Computer Science. How CS is seen in the community?
The 21st-century skills or essential skills in CS.
à Ask students to help you highlight words that fit the categories above.
à Share with students: “We will be creating a definition for Computer Science later, but we're
going to save this list for now.”
SLIDE 6
Extension Exercise 1 | Myths About Computer Scientists 5–7 min
Let’s discuss myths of Computer Science. The goal of this exercise is to allow students to
talk about how they envision Computer Science and computer scientists.
à First, set a timer for two minutes and allow students to imagine what it means to be a computer
scientist. Show Slide 6. Ask students to close their eyes and envision a computer scientist doing
“computer science things.” Who are they? What do they look like?
What is their environment? What are they doing?
à Then ask students to draw or verbally describe (teacher’s choice) their image of a
computer scientist.
à Students might come up with some of the following examples or images:
A middle-aged balding man sitting at a cubicle A man in his basement playing video games and
with a pocket protector and khaki pants. drinking energy drinks.
A man in a science coat in a lab, like Albert Einstein. Guys in hoodies in a cool office with bean bags and
Ping-Pong tables.
SLIDE 7
Reflection
à Show Slide 7 with the reflection questions:
What did you think of and why? How many of you thought of a male?
What is your opinion of these images of Do you see yourself as one of these images?
computer scientists? Why or why not?
STEM Skills Gap &

Computer Science
1 2 3 4 5 6
SLIDES 8–11
Activity 3 | The Truth About Computer Scientists 5–7 min
à Ask students to create groups of 3–4 with their neighbors.
à For 60 seconds, students will work together to sort the truths and myths on Slide 8 using the
second page of the graphic organizer.
à Show Slide 9 to the students and share the formal definition of what Computer Science is:
Computer Science is a science that you physically engage in that uses creativity, collaboration, and
logic to solve problems and improve society in such a way that a computer can solve it.
à Show Slide 10 and ask students to take one minute to look at their graphic organizer again and
sort the truths and myths after seeing the Computer Science definition.
à Show Slide 11, showing the final answers and ask students to share their thoughts with the class
by asking the following questions:
Which of the following phrases did your group What kind of person does this describe?
think was truth or myth?
How might we describe someone in

Computer Science?
SLIDES 12–13
Extension Exercise 2 | Redesign Your School Website 5–10 min
In the second extension exercise, students will learn about how Computer Science is a
collaborative process involving many different people, careers, interests, and skill sets.
à Show Slide 12 and ask students if they have a school website. Is it as pretty or functional as it
can be? In this exercise, students have been given the power from administration to completely
redo their school website.
à Ask students—what is their first step in redesigning the website?
à Call on a few students, who will most likely give answers such as “change the code,” or “change
the colors of the website.”
à Ask them to think of the very first steps, before you start designing and ask, how do you know
what should go on the website in the first place? Steps should be as follows (shown on Slide 13).
Step 1 Ask people what they want!
Talk to teachers, students, administrators, parents, etc., to ask what they need in a website. This is
correlated with a career called “User Experience Research.” Individuals who like talking to people and
understanding human behavior.
Step 2 Design the website.

Once you understand what people want, you can then design your website, thinking about content
(what goes on the website), colors, and layouts. This is called “User Experience Design.” Individuals who
are artistic are excellent for this job!
STEM Skills Gap &

Computer Science
1 2 3 4 5 6
Extension Exercise 2 | Redesign Your School Website (cont.)
Step 3 Start coding!
Once you know what you’re actually building, you can start coding your product. These individuals,
called “developers,” should enjoy paying attention to detail, solving problems, and creating and building.
Although this career is behind a computer, it is still highly collaborative.
Step 4 Market and sell your website.

Now that you have built an amazing website, let people know about it! Individuals who get the word out
about their products are often in marketing or sales. In addition to being comfortable talking in front of
people, these individuals need to have a strong product knowledge, and be able to explain their
technology in simple terms to individuals who are less technologically savvy.
SLIDE 14
Reflection
à Show Slide 14. There are many different skill sets and interests that go into Computer Science. It
is an industry that requires collaboration and teamwork, and every interest or skill has a place in
the Computer Science industry.
à Computer Science is not about sitting behind a computer! Ask students:
Has your perception of Computer Science Do you think you have an interest that could fit
changed? How and why? into the world of Computer Science?
Teacher Note: Over the course of goIT, students will be mimicking this lifecycle for mobile apps
instead of websites.
SLIDE 15
Activity 4 | Does This Job Involve Computer Science? 8 min
à Show Slide 15 to the class.
à Using the Module 1 Job Title page, students will individually have three minutes to circle five
jobs that do not involve Computer Science.
à After the time is up, ask students to take one minute to discuss with their neighbors to compare
their answers.
à Ask the class, “Which do not involve Computer Science and why?”
(Answer: They all involve Computer Science).
à Students should defend their answers, and their classmates can help.
SLIDES 16–17
Extension Exercise 3 | Career Vignettes 3–9 min
à Depending on timing, watch 1–3 Computer Science career vignette videos:
ignitemyfutureinschool.org/resources/career-vignettes
à These videos provide some examples of how Computer Science affects different industries.
STEM Skills Gap &

Computer Science
1 2 3 4 5 6
SLIDES 18–20
Final Reflection 6 min
à To wrap up the module, show Slide 18, and ask the class the following questions
Why should the STEM skills gap matter? Who can be a computer scientist?
How might computer scientists solve problems in How would you define what Computer Science is?
our communities?
à Show Slide 19 and summarize what the class has learned:

MAIN IDEA
There are currently not enough skilled professionals to meet the STEM workforce demand.
Computer Science is a field that is involved in all industries of STEM.
à In this lesson, we have:

à Learned about the existence and impact of the STEM skills gap.
à Learned that Computer Science can change the world by using creativity and logic to
solve problems.
à Learned about the varying roles computer scientists can play in industry.
STEM Skills Gap &

Computer Science
1 2 3 4 5 6
Approximately 60,000
people graduate with a Computer
Science degree every year.
20,000 developers complete
coding bootcamps.
USA
There are one million more
computing jobs nationally than
there will be graduates to
fill them, resulting in a
$500 billion opportunity gap.
USA
2
Computer Science plays a
role in every industry.
USA
3
Women who try AP Computer
Science in high school are
10 times more likely to major in it.
Black and Latinx students
are 7 times more likely.
USA
4
Computer scientists work
together using their creativity
USA
5
Computing is the fastest-
growing, highest-paying, and
largest sector of new jobs.
USA
6
A Computer Science major
can earn approximately 40% more
than the college average.
USA
7
Only 22% of AP Computer
Science students are women.
Only 13% are Black/African
American or Hispanic/Latinx.
USA
8
Computing makes up more
than 60% of projected new jobs
in STEM (Science, Technology,
Engineering, and Math).
USA
9
10% of STEM graduates
are in Computer Science.
USA
10
67% of computing jobs are
outside the tech sector.
USA
1
By 2030, there will be 85.2 million
unfilled tech jobs globally.
USA
12
Out of 527,000 Canadian
graduates, only 6% graduated
from an IT field.
CANADA
By 2021, Approximately
216,000 new ICT jobs will need
to be filled in Canada.
CANADA
2
Computer scientists work
together using their creativity
CANADA
3
Out of over 1.3 million Canadians
who apply to university,
approximately 4% of students
apply for Computer Science and Math.
CANADA
4
25–42% of Canadian jobs
will be heavily disrupted by
technology within 20 years.
CANADA
5
A Computer Science major
can earn 30% more than the
average university degree.
CANADA
6
More than 53% of companies in
Canada struggle with attracting and
retaining skilled employees.
CANADA
7
900,000 young Canadians
are not in any education,
employment or training.
CANADA
8
Computer Science plays
a role in every industry.
CANADA
9
Out of 1,220,000 ICT professionals
in the field today, female
professionals only make up 24%.
CANADA
10
TRUE OR FALSE KEY CANADA
All Statements are True
1. Out of 527,000 Canadian graduates, only 6 % graduated from an IT field.

Source: Tech Jobs Will Boom in Canada, But Country Lacks People to fill them – Huffington Post
2. By 2021, Approximately 216,000 new ICT jobs will need to be filled in Canada.
Source: Navigating the Digital Shift – Outlook 2021, Page 13 – ICTC
3. Computer scientists work together using their creativity and logic to solve problems.
4. Out of over 1.3 million Canadians who apply to university, approximately 4% of students apply for
Computer Science and Math.
Source: Canadian Postsecondary Enrolments and Graduates 2016/2017 – Statistics Canada
5. 25–42% of Canadian jobs will be heavily disrupted by technology within 20 years.

Source: Canada2067 Youth Insights, Page 16 – Canada2067
6. A Computer Science major can earn 30% more than the average university degree.
Source: Grad Survey Report – Council of Ontario Universities
7. More than 53% of companies in Canada struggle with attracting and retaining skilled employees.
8. 900,000 young Canadians are not in any education, employment or training.

Source: RBC Humans Wanted Report: How Canadian Youth Can Thrive, Page 34 – RBC
9. Computer Science plays a role in every industry.
10. Out of 1,220,000 ICT professionals in the field today, female professionals only make up 24%.
STEM Skills Gap &

Computer Science
1 2 3 4 5 6
TRUE OR FALSE KEY USA
All Statements are True
1. Approximately 60,000 people graduate with a Computer Science degree every year. 20,000 developers complete coding
bootcamps.
Source: Assessing and Responding to the Growth of Computer Science Undergraduate Enrollments, A Consensus Report of the National
Academics of Sciences, Engineers, and Medicine. nap.edu/read/24926/chapter/1
2. There are one million more computing jobs nationally than there will be graduates to fill them, resulting in a
$500 billion opportunity gap.
Source: HR Magazine: The U.S. Needs to Prepare Workers for STEM Jobs – shrm.org/hr-today/news/hr-magazine/summer2019/
pages/the-u.s.-needs-to-prepare-workers-for-stem-jobs.aspx
3. Computer Science plays a role in every industry.
4. Women who try AP Computer Science in high school are 10 times more likely to major in it. Black and Latinx students are 7
times more likely.
Source: Code.org/promote
5. Computer scientists work together using their creativity and logic to solve problems.
6. Computing is the fastest-growing, highest-paying, and largest sector of new jobs.

7. A Computer Science major can earn approximately 40% more than the college average.
8. Only 22% of AP Computer Science students are women. Only 13% are Black/African American or Hispanic/Latinx.
Source: Code.org/diversity
9. Computing makes up more than 60% of projected new jobs in STEM (Science, Technology, Engineering, and Math).
Source: csedweek.org/resource_kit/blurbs
10. 10% of STEM graduates are in Computer Science.

Source: Bureau of Labor Statistics, National Center for Education Statistics
11. 67% of computing jobs are outside the tech sector.

12. By 2030, there will be 85.2 million unfilled tech jobs globally.
Source: kornferry.com/insights/articles/talent-crunch-future-of-work
STEM Skills Gap &

Computer Science
1 2 3 4 5 6
REFLECTION
Context for Reflection Conversation
In today's world, technology is disrupting the way we live, eat, shop, work, and play; and there is tremendous potential
for tech-enabled innovation. Every individual possessing foundational skills for 21st-century careers will have the
unique opportunity to include themselves and their families in the pursuit of prosperity and upward mobility. However,
we are faced with a daunting gap between education and opportunity that has resulted in social, economic, gender,
and ethnic inequities. Efforts to address the opportunity gap have to be grounded in providing every young Canadian
access to education that is relevant and contextual to the needs of today's society. Research from OECD has consistently
shown a positive correlation between education attainment and economic prosperity for individuals and families.
Many young people may only be steps away from gaining access to a pathway to prosperity, as they could aspire to
be hired for the one million more computer science-related jobs in North America than there will be students
qualified to fill them. As a society, we need to recognize that computational thinking is a foundational skill for all
21st-century jobs, including the fastest-growing jobs of today and jobs of tomorrow that have not yet been invented.
Students who gain proficiency in computational thinking can transition from merely being consumers of technology
to being creators and innovators. They will build resilience to disruptions caused by the adoption of automation,
artificial intelligence, and other technologies in the quest of enhancing productivity and maintaining competitiveness
in the industry.
Computer Science is too often defined by what it's not. Students, teachers, and administrators frequently characterize
Computer Science as a discipline dominated by people who stare at screens, mindlessly inputting reams of arcane
code or geniuses who thwart bank heists and assassinations. Others believe that mastering office applications or
producing a webpage form the core of Computer Science education.
Computer Science is an engaging and collaborative activity that includes far more than the ones and zeroes for which
it has become famous.
Computer Science is one of the most amazing art forms in the world. Not only is it incredibly expressive—allowing for
an infinite number of combinations of words, images, and ideas—but when done well, it produces a functional and
useful product that can entertain, inform, and help the masses.
Every industry needs computer scientists. They're needed in biology, video gaming, schools, healthcare, public
service, and anywhere that innovation is involved. But what is Computer Science and who are computer scientists?
Today, students will gain a clear understanding of what Computer Science is, who computer scientists are, and how
Computer Science can improve your life and the lives of others.
STEM Skills Gap &

Computer Science
1 2 3 4 5 6
MODULE 1
STEM Skills Gap Gallery Walk

Fill in the numbers and which statements are true or false.
# TRUE OR FALSE # TRUE OR FALSE
After the correct answers have been revealed, consider the questions below. Be prepared to share your answers
with your group and the class.
S What is the STEM Skills Gap? S What stood out to you?

S After all of this, what is the most important thing S What should be our main takeaways?
to keep in mind? S Why do you think the STEM skills gap exists?
What is Computer Science?

For 60 seconds, list as many words as you can think of that you associate with Computer Science.
MODULE 1
The Truth About Computer Science

In your group, take the next two minutes to sort the truths and myths about Computer Science using the list
shown in the PowerPoint Slide. Sort the phrases into the two boxes below.
TRUTHS MYTHS
MODULE 1
Does This Job Involve Computer Science?

INSTRUCTIONS: Below are 75 job titles from varying industries. For the three minutes, circle five job titles that
DO NOT involve Computer Science.
1. Computer Engineer 26. Software Developer 51. Human Resource Worker

2. Psychologist 27. Fashion Designer 52. Technical Support
3. Farmer 28. Telecommunications Manager 53. Nutritionist
4. Optometrist 29. Physiotherapist 54. Interior Designer
5. Museum Curator 30. Journalist 55. Mobile App Developer
6. Social Worker 31. Network Manager 56. Social Media Specialist
7. Astronaut 32. Stunt Coordinator 57. Photographer
8. Electrician 33. Network Security Engineer 58. Quality Tester
9. Veterinarian 34. Digital Marketer 59. Technology
10. Musician 35. Animation Designer 60. Architect
11. 3-D Animator 36. Chiropractor 61. Translator
12. Car Mechanic 37. Illustrator 62. Accountant
13. Video Producer 38. Meteorologist 63. Software Engineer
14. Doctor 39. Nurse 64. Motion Graphics Designer
15. Sports Performance Analyst 40. Music Producer 65. Welding Operator
16. Police Officer 41. Game Developer 66. Computer Programmer
17. Programmer Analyst 42. Customer Service Agent 67. Film Crew Member
18. Dentist 43. Physician 68. Surgeon
19. Civil Engineer 44. Anesthesiologist 69. Pilot
20. Lawyer 45. 3-D Modeler 70. Teacher
21. Construction Worker 46. Web Developer 71. Research Scientist
22. Visual Effects Technician 47. Real Estate Agent 72. Electrical Engineer
23. Pediatrician 48. Pharmacist 73. Digital Media Editor
24. Environmental Engineer 49. Software Security Analyst 74. Graphic Designer
25. Insurance Sales Agent 50. Technical Writer 75. Biochemist
MODULE 2 | 1 HOUR
Design Thinking
LESSON PLAN
Design thinking (DT) is the iterative and agile process of solving problems.
MAIN IDEA The design thinking process is grounded in empathy for the relevant
stakeholders in the problem.
Students will learn the steps of the design thinking process and apply their
OVERVIEW understanding of the steps to complex, real-world scenarios.
à SWBAT identify design thinkers in the global workforce.

OBJECTIVES
à SWBAT create a logical map outlining the Design Thinking Model (DTM).
à SWBAT apply their understanding of the DTM to adjust real-world product
life cycles.
TIME 60 minutes
à Printed Module 2 Student Graphic Organizer (one per student)

MATERIALS
à Printed Module 2 Design Thinking Cards (one per group)
à Module 2 Case Study Posters (one per class)
à Module 2 Case Study Answer Key (one per class for facilitator)
à Paper Clips or Binder Clips
à Tape
Design Thinking
1 2 3 4 5 6
PACING GUIDE
Pre-Lesson Prep
à Print the following:
Module 2 Design Thinking Cards. Module 2 Case Study Answer Key.
Cut out the steps and definitions. Clip them together out of Set it to the side.
order using paper clips or binder clips. Module 2 Student Graphic Organizer.
Module 2 Case Study posters.
Post them around the classroom using tape.
SLIDES 1–8 Warm-Up | Innovate It! 10 min

Activity Goal: Allow students the opportunity to exercise their creative muscles,
by brainstorming innovative ideas.
à Explain the game. In teams of three to four, students will work collaboratively to rethink an
ordinary object or idea.
1. Share the game modes. There are two main approaches to innovation:
à Make It Better
Find a way to improve the product or object shown on the projector slide. Think wildly and
there are no limits!
à Disrupt It
Find a way to use a different way or new product to complete the same task as the object
shown on the projector slide. Share how that new object would be able to accomplish the task.
2. Rules of this game are the following:

à The object(s) are shown to the class via the PowerPoint slides or your own version.
à Teams will have two minutes to rethink the object as a group, based on the game mode.
3. Sharing ideas. Announce that teams will have one minute to present their re-imagined object
in front of the entire class.
à Ask each group to take 60 seconds to share what their new innovation is.
Design Thinking
1 2 3 4 5 6
Warm-Up | Innovate It! (cont.)
4. Repeat the process for two to four rounds, depending on time.
à goIT provides four rounds in the PowerPoint Slides and facilitators are free to add their own
objects as well.
à Connect this activity to the program on the whole. Explain that we will be thinking this way
for the next x-days together.
Design thinking involves thinking creatively. There are many ways that we can solve a problem and
many angles that we can look at a problem. What we’ve just done is the ideation step in the
Design Thinking model where the wildest ideas can become real solutions to real-world problems.
SLIDE 9
Activity 1 | Identify Design Thinkers 8 min
à Have a student read aloud the short statement at the top of the first page of the Module 2
Student Graphic Organizer. Pause to address tough or key vocabulary words.
à After the passage is read, ask students to share their interpretations in their groups.
à Ask the class for two to three interpretations of the passage (This student recap does not need
to be perfect; it is intended to get students to be comfortable speaking about design thinking
as a topic before diving into the individual steps—clarity on the steps and process will happen
as the activities progress).
à Students will have 60 seconds to write down as many jobs as they can think of that use
design thinking.
à Create a discussion around the connections between design thinking and the careers that
students listed. Try prompting questions such as:
What careers use design thinking? Is design thinking an important skill to have?
How does design thinking help in some of

these careers?
SLIDES 10–12
Activity 2 | Steps of Design Thinking Matching 15 min
à Ask students to form groups of two to four with their neighbors.
à Distribute the Design Thinking Cards—one set per group.
à Students will have two minutes to match the terms with a description and arrange the step
cards provided into some logical order or sequence.
à When time is up, multiple groups will be called on to share and defend their order/sequence in
front of the whole class.
à Once multiple groups have been called on and the room is in agreement or split, the facilitator
will call attention to the front and present the names of the steps in order (on slide 11 or written
on the board). Then reveal definition matches (on the slide or the board).
Design Thinking
1 2 3 4 5 6
Activity 2 | Steps of Design Thinking Matching (cont.)
à Share with students that the design thinking process is not linear. As empathy is the core of the
process, it is a step that we continuously go back to.
à Show Slide 12 to class and describe how every step is connected to empathy.
à Ask each student to spend five minutes writing the definitions in their own words on Page 2 of
the Module 2 Student Graphic Organizer.
à Optional: Give students four minutes to put definitions in their own words and make their
sketches in their Student Graphic Organizer.
à One minute to share their own definitions in their groups.
à Two minutes to allow a few students to share their definitions and drawings with the entire
class (call on one to three students to share while the rest of the class listens).
SLIDES 13–20
Activity 3 | Case Studies: Bringing It All Together 20 min
à Show Slide 13 and read aloud instruction from Page 3 of the Module 2 Student Graphic
Organizer or have a student read the instructions.
à As a class, review and complete Case Study 1 (this helps to model for students what the other
case studies will look and feel like).
à In groups of three to five, assign teams to one of the six remaining case study scenarios taped
around the room.
à Students will have three minutes per station to read the excerpt and respond to the questions
on the case study.
à Once the time is called, ask students to rotate one station to their left.
à Call students back to seats.
à Lead students in an open discussion about the various case studies (focus on ONE AT A TIME).
You can use the provided answer guide to help you steer the conversation.
à Use the Case Study Answer Key as a reference during the discussion. The answer key will
provide the missing steps and possible answers to the questions. Students may be able to take
other approaches to arrive at the answer.
à Close the activity by asking students to reflect on what their key takeaways were from this
series of exercises.
à Try prompting questions like:
What is a design thinker? What stood out to you?
After all of this, what is the most important thing What should be out main takeaways?
for a design thinker to keep in mind?
Design Thinking
1 2 3 4 5 6
SLIDES 21–22
MAIN IDEA
Design thinking is an iterative, agile process of solving problems that are grounded in empathy with
key stakeholders.

à Learned how design thinkers relate to careers in the global workforce.
à Learned about the steps of the Design Thinking Model and how it’s used.
à Applied the Design Thinking Model to reason through scenarios involving missteps
in the process.
Design Thinking
1 2 3 4 5 6
Cards for Activity #2
(one set per group)
Words and definitions should be cut

and mixed out of order before activity.
Steps of Design Thinking
The core of design thinking. This skill allows the designer to understand and share the same feelings that the
Empathy stakeholders feel.
Define the Problem Combines the identified common needs and wants into a meaningful statement, that clearly defines the issue.
The stage in the design process that focuses on idea generation. It provides fuel for building prototypes and
Ideate
creating innovative solutions for users. The goal of this step is to develop a huge number of potential solutions.
Create a Prototype Any item, physical or digital, that serves as a model of the solution that users can interact with.
In this phase, designers get feedback about the solution from the users. This provides you with valuable
Test
insights that aid you in narrowing down your solutions and refining the most promising ones.
MODULE 2
Design Thinking
Have you ever tried to solve a problem for a friend? Have you ever asked for someone else's opinion about
possible solutions to this problem? Of course, you have! You are already a design thinker; you just may not have
realized it. Design thinking is all around us. From corporate executives to computer programmers to farmers to
students in a classroom, people use design thinking to solve problems every day. Design thinking is a
straightforward and systematic (following a series of steps) way of identifying and approaching a solution to a
problem. Today, you will discover the steps of the design thinking process and have an opportunity to apply
what you have learned to propose a solution to a real-world problem of your own! Today, you are going to
think like a computer scientist. So, get ready to goIT!
An issue or situation that gets in the way of something.

Constantly changing and improving.
This DOES NOT have to mean conflict between people.
Design thinking is the iterative process of solving problems

that are grounded in empathy for key stakeholders.
Every person or thing that is

affected by this problem.
Activity #1
For 60 seconds, list as many professions that you can think of that use design thinking.
Don’t let your pencil stop moving!
MODULE 2
Design Thinking
Activity #2
In your teams, use the cards provided to match the step of the design thinking process with the appropriate
description of that step. Only once the time is called will the final answers be reviewed and captured in the
boxes below.
ILLUSTRATION
STEP IN MY OWN WORDS (Draw what this looks like to you)
5
MODULE 2
Design Thinking
Activity #3
Case Study Practice. Using your understanding of the design thinking process, consider the provided excerpts
(parts of a larger piece of writing) to answer the corresponding questions. Use the organizer below to record
your answers and provide a rationale for your responses.
CASE STUDY ANSWERS Answer the case study scenario questions. Be sure to provide your rationale.
Hector
Mia
Rohit
Cathy
Tamika
Daniel
CASE STUDY POSTERS | ANSWER KEY
Activity #3
Case Study Practice. Using your understanding of the design thinking process, consider the provided excerpts (parts
of a larger piece of writing) to answer the corresponding questions. Use the organizer below to record your answers
and provide a rationale for your responses.
CASE STUDY ANSWER KEY
IDEATE/PROTOTYPE
Hector’s job is to find solutions to problems people face while taking the bus. He interviews passengers on 50 bus
rides in three weeks. After figuring out a trend in the complaints, he determined that the problem is that there is no
way to know if buses are late or on time. He takes the problem statement and hands it off to his team members but
doesn’t give them the research data from his surveys. The team misunderstands the need and ends up spending
more money to add more buses to each route.
Hector 1. What step of the Design Thinking Model does Hector seem to misunderstand?
Hector seems to misunderstand the ideate/prototype stage. It will be hard for the team member to
create ideas if they don't have the research data. Hector needs to be more involved with the project.
2. What should Hector do next?
Hector should work alongside his team to follow the Design Thinking Model steps all the
way through. His team needs the research data and Hector can share his experience in any
conversations that he had.
PROTOTYPE & TEST

Mia has identified a problem at work in her chemistry lab. She has a great idea for a product that might solve her
problem and many of her coworkers and chemists from other labs agree that her product might help them solve
the problem. She sends a written explanation of her product to a company to make her final product. To save time,
she tells the company that she does not need to see a prototype of the product because she is sure it will work
and wants to start using it in the lab and to sell to other labs. She is disappointed, however, to find out that all the
products she ordered looked great but were not strong enough to accomplish the task in the lab that they needed
to accomplish.
1. What step of the Design Thinking Model did Mia skip?

Mia Prototype & Test. Mia went right to the design to market, and they did not have a chance to test to
see if it would work.
2. What should she have done instead?
Take the time to review the prototype and see if it matched what Mia and her coworkers were
thinking. Mia should have also spent time testing the product to see if it was usable and effective.
3. How would not skipping this step have saved Mia a lot of money?
Mia lost a lot of money by spending a lot of it to mass-produce something that no one will use.
Now Mia is not able to get any sales on her product since it does not work. If Mia went through the
whole process, she would have been able to sell.
Design Thinking
1 2 3 4 5 6
EMPATHY & IDEATE
Rohit identified a problem in his community. He surveyed 100 people from the neighborhood and the results
confirmed that others in the community are dealing with the same problem he is facing. He decided to try and find
a solution to the problem on his own. He really wants his first idea to work because he thinks it is a fun idea but is
struggling to make it work as a solution to the actual problem.
1. During which step of the Design Thinking Model did Rohit go wrong?
Empathy & Ideate. Rohit was focused on determining if 100 people had the same issue that he did,
Rohit
missing out on empathy. He needed to focus on what problems do people have in general. For
ideate, he is focused on trying to get his favorite idea to work, but it seems like he realized that it's
not going to solve the problem.What should Hector do next?
2. How should he move forward?
Rohit could empathize with his stakeholders in asking what problems they face daily. This could
help to create a more defined problem statement. Rohit could also check with the 100 people he
surveyed to see what ideas could work to solve the actual problem.
EMPATHY / ALL
Cathy has a fun idea for a mobile app. She wants to start building the app right away without consulting anyone
first. A few weeks after publishing the app online, Cathy realizes that no one is using it.
1. Was Cathy’s approach a good one? Explain your rationale.

Cathy Cathy’s approach could use some work. She skips steps 1–3 and wants to start building an app
right away.
2. What should Cathy do instead?
If Cathy is building an app to solve a problem in the community, then she should start at empathy
and see what kinds of problems she could solve with an app.
IDEATE
Tamika and her friends work for a leading car company. Tamika is the lead designer and is responsible for
designing seats that can be comfortable for long distances. After her team surveyed 100 drivers and defined the
problem, Tamika draws up a model of how she thinks the seat should be designed. After development and testing
with the 100 drivers, only 40% of them thought it was comfortable.
1. What step of the Design Thinking Model did Tamika and her team missed out on?
Tamika
Ideate. Tamika did not spend much time in brainstorming different designs and concepts. Tamika
did not check in with her stakeholders to see if the ideas would solve the problem.
2. How could this have gone differently?
Tamika should have worked with her team to come up with multiple ideas collaboratively for the
design. The team could have checked with stakeholders to see which ideas/designs would have
worked the best.
Design Thinking
1 2 3 4 5 6
DEFINE THE PROBLEM

Daniel has a conversation with a friend, Kimiko, who struggles with getting her homework done. After a brief
conversation, Daniel assumes the root of the problem is that Kimiko forgets to do her homework before it’s due.
After creating some ideas, Daniel creates a prototype to remind her of all the homework she has and when they're
due. When Kimiko tries it out, she said that it didn’t work. She told Daniel that she always remembered when her
homework is due, but she tends to just put it off until the last minute.
1. During which step of the Design Thinking Model did Daniel go wrong?
Daniel Define the Problem. It seems like Daniel did not have a good idea of what the problem was.
Daniel could have gone back and checked with Kimiko to see if the problem statement was correct.
2. What could be Kimiko’s real problem?
Kimiko’s problem is that she tends to procrastinate when there’s homework. In the last sentence,
it mentions that she puts it off until the last minute.
3. What should Daniel have done in the beginning?
Daniel should have gone back and checked to see if his problem statement was correct by
asking Kimiko.
Design Thinking
1 2 3 4 5 6
CASE STUDY
Cathy
1. Was Cathy’s approach a

Cathy has a fun idea for a mobile app. She wants to start good one?
building the app right away without consulting anyone Explain your rationale.
first. A few weeks after publishing the app online, Cathy
realizes that no one is using it. 2. What should Cathy do
instead?
CASE STUDY
Daniel
1. During which step
Daniel has a conversation with a friend, Kimiko, who
of the Design Thinking
struggles with getting her homework done. After a brief
Model did Daniel go
conversation, Daniel assumes the root of the problem
wrong?
is that Kimiko forgets to do her homework before it’s due.
After creating some ideas, Daniel creates a prototype to
2. What could be Kimiko’s
remind her of all the homework she has and when they’re
real problem?
due. When Kimiko tries it out, she said that it didn’t work.
She told Daniel that she always remembered when her
3. What should Daniel
homework is due, but she tends to just put it off until the
have done in the
last minute.
beginning?
CASE STUDY
Tamika
Tamika and her friends work for a leading car company. 1. What step of the
Tamika is the lead designer and is responsible for designing Design Thinking Model
seats that can be comfortable for long distances. After did Tamika and her
her team surveyed 100 drivers and defined the problem, team missed out on?
Tamika draws up a model of how she thinks the seat should
be designed. After development and tested with the 2. How could this have
100 drivers, only 40% of them thought it was comfortable. gone differently?
CASE STUDY
Hector
Hector’s job is to find solutions to problems people face
while taking the bus. He interviews passengers on 50 bus 1. What step of the
rides in three weeks. After figuring out a trend in the Design Thinking Model
complaints, he determined that the problem is that there is does Hector seem to
no way to know if buses are late or on time. He takes the misunderstand?
problem statement and hands it off to his team members
but doesn’t give them the research data from his surveys. 2. What should Hector
The team misunderstands the need and ends up spending do next?
more money to add more buses to each route.
CASE STUDY
Rohit
Rohit identified a problem in his community. He surveyed 1. During which step

100 people from the neighborhood and the results confirmed of the Design Thinking
that others in the community are dealing with the same Model did Rohit go
problem he is facing. He decided to try and find a solution wrong?
to the problem on his own. He really wants his first idea
to work because he thinks it is a fun idea but is struggling to 2. How should he move
make it work as a solution to the actual problem. forward?
CASE STUDY
Mia
Mia has identified a problem at work in her chemistry lab.
She has a great idea for a product that might solve her 1. What step of the
problem and many of her coworkers and chemists from Design Thinking Model
other labs agree that her product might help them solve did Mia skip?
the problem. She sends a written explanation of her product
to a company to make her final product. To save time, she 2. What should she have
tells the company that she does not need to see a prototype done instead?
of the product because she is sure it will work and wants to
start using it in the lab and to sell to other labs. She is 3. How would not skipping
disappointed, however, to find out that all the products she this step have saved
ordered looked great but were not strong enough to Mia a lot of money?
accomplish the task in the lab that they needed to accomplish.
MODULE 3 | 1.5 HOURS

LESSON PLAN
Demonstrate and apply the design thinking process by practicing empathy
MAIN IDEA and identifying problems and stakeholders in the local community.
By becoming familiar with the concept of empathy, students will be able to

OVERVIEW strategically identify problems facing their target stakeholders. In doing so,
students ensure their proposed idea is both relevant and meaningful to their
potential “customers.”
à SWBAT empathize with their classmates to identify a relevant problem in

OBJECTIVES their community or world.
à SWBAT work with their group to ideate a technological solution to the
identified problem.
à SWBAT understand and communicate the UN Sustainable Development
Goals.
1.5 Hours
TIME (2 Hours with Extensions)
à Printed Module 3 SDG Posters—Total of 16 Pages (one per class)

MATERIALS
à Printed Module 3 SDG Mapping Pages (one set group)
à Printed Module 3 Bug List Packet (one per student)
à Printed Module 3 Problem Declaration Page (one per student)
à Printed Module 3 App Organizer Page (one per group)
à Computers / Tablets for Research (for extension exercise)
à Tape
à Timer
Identifying the
Problem
1 2 3 4 5 6
PACING GUIDE
Pre-Lesson Prep
à Print out the following:
Module 3 SDG Posters SDG Matching pages Module 3 Problem Declaration Page
16 Pages 1 per student
Module 3 SDG Matching Answer Key Module 3 Student App Organizer
1 teacher copy 1 per group
Module 3 Bug List
1 package per student
à Post up the SDG posters around the room using tape.

à If the theme has been predetermined, add the SDG image into Slide 11.
SLIDES 3–4 Activity 1 | Rethinking the MRI 6 min

à Show the image of a standard MRI machine on Slide 3 to the class.
à Ask students to share what they know about the machine and the experience within it
(answers should be along the lines of—it’s scary, loud, claustrophobic, etc.).
à Ask students to re-imagine the MRI machine with the interests of a small child in mind.
à Allow students to talk in their groups for one minute to generate ideas then have a few students
share out a few (answers will likely involve adding color, opening it up, playing music, etc.).
à Show students a picture of a more colorful, more inviting MRI machine on Slide 3.
à Close the conversation by acknowledging that, by empathizing with your stakeholders (in this
case, the small children), we can have a better understanding of the needs and wants of our
target audience. State that this is the MOST integral component of the design thinking process.
SLIDES 5–8
Activity 2 | Intro SDGs 20–25 min
à To introduce the Sustainable Development Goals to the class, share the following the video:
We The People for Global Goals (2:58)
youtube.com/watch?v=RpqVmvMCmp0
à For younger students, feel free to play this video afterward:
What is Sustainable Development? (4:00)
youtube.com/watch?v=7V8oFI4GYMY
Identifying the
Problem
1 2 3 4 5 6
Activity 2 | Intro SDGs (cont.)
à After showing the video(s), discuss the following with students:
What are the SDGs? Why are they important?
How would you explain the SDGs to

another student?
à SDG Mapping Activity

à Ask students to form groups of three to four.
à Distribute the SDG Matching Worksheets to each group.
à Ask students to match the statements on Page 1 to the correct SDGs on Page 2 of the worksheet.
à Students will need to write in the number of the statement into the corresponding box.
à Give students five minutes in their groups for the activity. Students can use the SDG Posters
around the room as a reference.
à If students have access to a phone or tablet, they may scan the QR codes to access the
videos for each SDG Poster.
à When time is called, ask a few groups to share and defend their matches to the class. Refer
to the SDG Matching Answer Key for this discussion.
à Show Slide 8 to show the answers to the class.
à Share that each SDG is carefully crafted to make sure that every human need is met and that
these SDGs will help to determine the theme for our apps.
SLIDE 9
Activity 3 | Theme Selection 10–20 min
à Show Slide 9 to the class and discuss how the theme will be selected.
à Below are options to determine the SDG for your program. Choose Option A or B.
SLIDE 10
Option A | Student Vote
à Show Slide 10 and give students two minutes to vote for their top three SDGs. This may be
done by students adding their initials on the three of the goals around the room. This can
alternatively be done with stickers.
à Collect the pages and determine which one has the most votes. If there is a tie, put it to a class
vote. This will be the theme for the rest of the program.
à Proceed to lead a discussion using the questions above on Slide 13.
Identifying the
Problem
1 2 3 4 5 6
SLIDE 11
Option A Extension | Students Determine Their Own SDG Focus Area
à Set up the laptops, or any device students have access to, to prepare for some research.
à Provide students the following resources:
à SDG Gallery Walk Posters
à The UN SDGs: sustainabledevelopment.un.org/sdgs
à The SDG Zone: sdgzone.com
à Allow students, individually or in pairs, 10–15 minutes of research time to understand the
16 goals. Using the resources above, ask students to look at the goals and the different targets
each goal aims to achieve.
à Ask a few students to select and share the SDG that they are the most interested in.
à Proceed to lead a discussion using the questions above on Slide 13.
SLIDE 12
Option B | Predetermined SDG
à If you have selected the theme for the class, move to Slide 12.
Insert the SDG # into the slide.
à Proceed to lead a discussion using the questions on Slide 13.
SLIDE 13
Activity 3 | Theme Selection (cont.)
à Show Slide 13 and consider the following questions:
What does this SDG mean to you? What are some of the problems in this SDG?
What does it focus on?
SLIDES 14–15
Activity 4 | The Bug List 15 min
à Show Slide 14 to show what the students will be doing through the bug list.
à The types of problems that the class will identify will revolve around the theme that was
chosen from the Activity 2, Option A or B.
à Connect this slide with the Design Thinking Model.
Step 2 will be where the students will practice empathy.
What problems have their peers seen or experienced in their homes or community?
Step 3 is the Problem Definition Stage.

Students will create a problem statement for the bugs that their neighbors shared.
Step 4 will be an opportunity for students to brainstorm possible app ideas for their peers.
Identifying the
Problem
1 2 3 4 5 6
Activity 4 | The Bug List (cont.)
à Hand out the bug list package to each student and have students write the theme/SDG at the
top of the page.
à Explain that the word “bug” can be substituted for “issue.” Little bugs are pet peeves and small
annoyances (Example: Not a lot of trashcans in my neighborhood). Big bugs are things that
drastically affect students’ lives (Example: No fresh produce in my neighborhood).
à Show Slide 15 to students and ask students to take two minutes to create a list of things that
“bug” them that are explicitly related to the theme/SDG they've written at the top. Ask students
to create as long of a list as possible, but they must have a minimum of 10 bugs (it does not
matter if they are big or little, just 10 total).
à After the time is up, ask students to share their bugs to the class. Encourage students to write
down bugs that their peers identified that resonated with them. Then, ask the students to
identify one to two bugs that they can potentially solve with technology. An incorrect answer
is, “My sibling is annoying.”
SLIDE 16
Activity 4 | Empathize with your Neighbor 4–6 min
à Show Slide 16 for Step 2 of the Bug List.
à Ask students to turn to the second page in the “Bug List.”
à Students will pick a partner in the room and take two to three minutes each to talk through the
bugs identified from the step before.
à One student will be the interviewer and the other will be the interviewee.
à The interviewer should ask exploratory questions about the bug to understand the root of the
issue better.
à Questions that students could ask are:
What is your bug? Has anyone tried solving this?
Why is it a bug? What could help solve this?
à Students will write down notes and may draw sketches in the worksheet.
à Students should strive to get a sentence describing the bug. If the bug was “Pollution,” students
should ask, “What specifically about pollution bugs you?”
à After the first two to three minutes have passed, ask students to switch roles and repeat the
interview process.
Identifying the
Problem
1 2 3 4 5 6
SLIDE 17
Activity 4 | Synthesize the Need 6–10 min
à Show students Slide 17 and on the third page of the “Bug List” packet, students will create a
high-level solution for their partner in the lined box. Students will write their partner's name, a
general solution, and the problem.
à The structure will be:
à Name of who was interviewed.
à A general direction or high-level solution for their partner.
à Because of the identified bug.
à Example: “I interviewed Student A, and they need a way to prevent bullying because they
experienced bullying in and outside of school daily.”
à Ask students to take three minutes to write their problem statement for the partner that
they interviewed.
à Students will then turn back to their partners and ask the following questions:
Is this problem statement accurate? Does this match the theme?
Is it easy to understand?
à If their partner answers no, have them ask: What needs to change?
à Give students some three to four minutes to adjust their problem statements if needed.
SLIDE 18
Activity 4 | Ideate Solutions 8 min
à Show Slide 18 and ask students to flip to the fourth page of the “Bug List” packet, ask students
to create at least two mobile app solution for their partner’s bug.
à Take three minutes each to share your potential app design concepts with your partner.
Partners should be giving feedback on one another's ideas.
SLIDE 19
Activity 5 | Problem Sharing 20 min
à Show Slide 19 and using the “Module 3 Activity 3 Problem Declaration Sheet,” each student
should write down the problem they want to explore that:
1. Meets the predetermined theme.
2. A mobile app can solve.
3. The SDG focus that the problem falls under.
à Students may write down:

à The problem statement they created for their partner.
à A new one that they are more passionate about.
Identifying the
Problem
1 2 3 4 5 6
Activity 5 | Problem Sharing (cont.)
à After they finish writing down their topic and their proposed solution, students will get a piece
of tape and tape their sheet to the front of the classroom.
à Once all problems are up around the room, students should take two to three minutes to do a
review of the problems identified, along with the initial app ideas.
à Students may then take a problem statement and claim it as their own.
à All students will meet in the middle to form their groups by pitching the problem statements
they claimed to their peers.
à Students have five minutes to form their groups.
à If student B successfully recruits student A, then student A will put the problem statement they
have back at the front of the classroom. This problem statement may be claimed for others to use.
à Once students have formed their groups, ask them to sit with together.
à Facilitators may need to help those that cannot find a group.
à These are the groups the students will remain in for the duration of the program.
SLIDE 20
Activity 6 | App Features 10–15 min
à Once the students are in groups, each group needs to align their ideas into one single idea.
à Show Slide 20 and using their “Module 3 Student App Organizer” worksheets, students will
need to identify or define the below. They will only need one package per group.
à Students will complete the first page, Activity 4a Structuring Your Solution.
1. Define the goal of your app in only one sentence. This allows the students to come up with
a single idea to build ideas around (Example: Kik is a messaging app that does not require a
phone number).
2. Determine three to five main features of your mobile app. Features can include a camera,
map/GPS, a blog, etc. However, too many features will bog down an app and make it
useless. Encourage simplicity and ask the students, “Do the features help meet the goal of
the app or help solve the problem you are trying to address?”
Identifying the
Problem
1 2 3 4 5 6
SLIDE 21
Activity 6 | Extension 10–15 min
Market Research: This activity provides students with extra time to research existing apps
and possible competitors. Computers and Internet access are required for this activity.
à Once groups have created a structure around their app ideas, students should take 15–20
minutes to perform basic market research for their app. Using their “App Organizer,” students
will identify the following in Activity 4b.
à Three to four specific groups of stakeholders: Good examples include parents, doctors,
individuals who are handicapped. Do not accept age ranges like “11–15, 16–21, and 22–25.”
That is another way of saying “everybody,” and that is not an acceptable answer either.
à Three to four competitors: Students should find products that are similar to what they
are creating. They should state what the product is and what it does, and then say why
they are different.
à At least two to three validating statistics: Support the value of the product based on
reliable sources. Acceptable statistics can come from government organizations or
research. Unacceptable stats would come from social media sites or Wikipedia, or not
have a numeric value.
Note: They will need this information for their presentation, and it can help provide structure and
guidance for their design, so although this is an optional step now, it’s highly recommended and
will need to be done eventually in Module 6.
SLIDES 22–23
MAIN IDEA
Empathy can be used to identify problems and create potential solutions. This makes your solution
more relevant to the stakeholders around you.

à Learned how to empathize with their classmates to identify a relevant problem in their
community or world.
à Learned and can communicate what the UN Sustainable Development Goals are.
à Ideated and identified how to use an app to solve a community problem.
Identifying the
Problem
1 2 3 4 5 6
APPENDIX
SDG Video Links
youtube.com/watch?v=uDpIAcT3mqU youtube.com/watch?v=fKQZRxrNBcE
youtube.com/watch?v=0klcaICeJA4 youtube.com/watch?v=46TsIUa77o8
youtube.com/watch?v=NZB9Kh0za7E youtube.com/watch?v=FAuoxTHq_zw
youtube.com/watch?v=mmSbX1Rg2L0 youtube.com/watch?v=NqI3tmF-o30
youtube.com/watch?v=IdZNdSaDH4I youtube.com/watch?v=IELvwDvbtmo
youtube.com/watch?v=NVz1thUnMLk youtube.com/watch?v=puEWxGStQrE
youtube.com/watch?v=xivQ8zjqaRo youtube.com/watch?v=pBn8ZCQvFoo
youtube.com/watch?v=556QXoUpjUY youtube.com/watch?v=O6GliJdrwF0
youtube.com/watch?v=a0nfvKCQtfk
(Not Included)
Identifying the
Problem
1 2 3 4 5 6
END POVERTY IN ALL
ITS FORMS EVERYWHERE
FOCUS AREAS COULD INCLUDE RELEVANT PROBLEMS
SHARING WHAT WE HAVE WITH OTHERS
EDUCATING COMMUNITIES ON
SOCIAL PROTECTION SYSTEMS
MAKING SURE EVERYONE HAS A HOME
GIVING EVERYONE A CHANCE TO LEARN ACCESS TO BASIC SERVICES

FOR THE POOR AND VULNERABLE
CREATING WAYS TO HAVE A HEALTHY LIFE

SPREADING AWARENESS OF HOW
WE COULD HELP THOSE IN POVERTY
WAYS TO GIVE SECONDHAND

CLOTHES TO THE COMMUNITY
SCAN TO LEARN MORE

ACHIEVE FOOD SECURITY
AND IMPROVED NUTRITION
SHARING FOOD WITH OTHERS
BUYING GROCERIES AT AN
AFFORDABLE PRICE
MAKING SURE NO ONE GOES HUNGRY
PROMOTING A HEALTHY DIET SHARING FOOD WITH

THOSE WHO NEED IT
FINDING AFFORDABLE WAYS

TO GROW FOOD CONNECTING LOCAL FARMERS TO
THEIR SURROUNDING COMMUNITIES
FINDING A WAY TO HAVE A

HEALTHY DIET ON A BUDGET
SCAN TO LEARN MORE

ENSURE HEALTHY LIVES
AND PROMOTE WELL-BEING
ENSURING HEALTH LIVES
PROMOTE AWARENESS AND TREATMENT

FOR ADDICTION AND DISEASE
PREVENT POLLUTION IN OUR
COMMUNITIES
WAYS TO MAKE IT EASIER TO CONNECT

NURSES AND DOCTORS TO COMMUNITIES
SPREAD AWARENESS FOR MENTAL HEALTH
REDUCE THE IMPACT OF MAJOR DISEASES GETTING ACCESS TO MORE

AFFORDABLE MEDICINE
REDUCING THE NUMBER

OF TRAFFIC ACCIDENTS
SCAN TO LEARN MORE

INCLUSIVE AND QUALITY
EDUCATION TO PROMOTE
LIFELONG LEARNING FOR ALL
ACCESS TO EDUCATION FOR ALL
CREATING ACCESS TO EDUCATION

FOR ALL STUDENTS
MAKING SURE THAT SCHOOLS ARE SAFE
TRAINING FOR IMPORTANT FINDING WAYS TO REDUCE BULLYING

IN AND OUT OF SCHOOL
FUTURE READY SKILLS
PROMOTE CONTINUOUS LEARNING CONNECTING PEOPLE OF ALL AGES TO

RELEVANT SKILLS TRAINING OPPORTUNITIES
SUPPORT DEVELOPING COUNTRIES WITH

MORE QUALIFIED TEACHERS
SCAN TO LEARN MORE

ACHIEVE GENDER EQUALITY &
EMPOWER WOMEN & GIRLS
END DISCRIMINATION AGAINST

WOMEN AND GIRLS
EMPOWERING WOMEN IN LEADERSHIP
POSITIONS AND MENTORSHIP
FAIR OPPORTUNITIES IN WORK AND PAY
WAYS TO KEEP WOMEN AND GIRLS

SAFE AT WORK OR SCHOOL
EQUAL ACCESS TO EDUCATION
AND SOCIAL SERVICES
SPREADING AWARENESS ABOUT GENDER INEQUALITIES IN

PREVENTING VIOLENCE AGAINST SCHOOLS & THE WORKPLACE
WOMEN AND GIRLS
END DISCRIMINATION AGAINST

WOMEN AND GIRLS
SCAN TO LEARN MORE

ENSURE ACCESS AND
MANAGEMENT OF CLEAN
WATER FOR ALL
ACCESS TO CLEAN AND

SAFE DRINKING WATER
DEVELOP A WAY TO MANAGE
CLEAN WATER SUPPLIES
PROTECT WATER-RELATED ECOSYSTEMS
HOW TO RESTORE AND PROTECT OUR

NATURAL WATER-BASED ECOSYSTEMS
WAYS TO MAINTAIN CLEAN WATER
REDUCE THE AMOUNT OF WATER USED SPREAD AWARENESS OF HOW

WE CAN USE LESS WATER
HOW TO PROVIDE EVERYONE ACCESS

TO CLEAN WATER FOR ALL
SCAN TO LEARN MORE

ENSURE SUSTAINABLE,
MODERN ENERGY FOR ALL
INCREASED ACCESS TO
SUSTAINABLE ENERGY
PROVIDE AFFORDABLE WAYS TO
ACCESS CLEAN ENERGY SERVICES
RESEARCH IN CLEAN
ENERGY TECHNOLOGY
DEVELOP A WAY TO REDUCE ENERGY
USE AT HOME OR WORK
IMPROVED ENERGY EFFICIENCY
SPREADING AWARENESS ABOUT THE

EXPAND AND UPGRADE NEED FOR CLEAN, MODERN ENERGY
ENERGY SERVICES FOR ALL
HOW TO SHARE AND COLLABORATE

IN CLEAN ENERGY RESEARCH
SCAN TO LEARN MORE

PROMOTE GROWTH,
EMPLOYMENT AND DECENT
WORK FOR ALL
CREATING MORE JOBS IN OUR

COMMUNITIES
PROMOTE AWARENESS OF WHAT A
SAFE WORKPLACE LOOKS LIKE
SKILLS TRAINING AND

CAREERS FOR YOUTH
JOB OPPORTUNITIES FOR ALL, INCLUDING PERSONS WITH
DISABILITIES, THE FORMERLY INCARCERATED
PROMOTE SAFE WORK AND EQUAL PAY
PROVIDING SKILLS TRAINING FOR

EQUAL OPPORTUNITIES FOR ALL SUSTAINABLE CAREERS AND OCCUPATIONS
REGARDLESS OF GENDER
END MODERN SLAVERY, TRAFFICKING

AND CHILD LABOR
SCAN TO LEARN MORE

IMPROVE INFRASTRUCTURE,
PROMOTE INNOVATION AND
DEVELOPMENT
IMPROVING CITY SYSTEMS AND SERVICES
FINDING WAYS TO IMPROVE OUR

CITIES’ DEVELOPMENT
PROVIDING INTERNET ACCESS FOR ALL
ENHANCE RESEARCH AND PROMOTE AND UPGRADE

CLEAN ENERGY FOR BUSINESSES
UPGRADE TECHNOLOGIES
ENABLE ACCESS AND PROMOTE ENSURE EQUITABLE ACCESS

THE USE OF CLEAN ENERGY TO INTERNET FOR ALL
PROVIDE RESOURCES TO SUPPORT LOCAL BUSINESSES

IN THE DEVELOPMENT OF NEW TECHNOLOGIES
SCAN TO LEARN MORE

REDUCE INEQUALITY WITHIN
AND AMONG COUNTRIES
MAKING SURE EVERYONE IS PAID FAIRLY
IDENTIFY A WAY TO STOP

DISCRIMINATION IN OUR COMMUNITIES
END DISCRIMINATION IN
OUR COMMUNITIES
REDUCING THE OPPORTUNITY GAP

BETWEEN THE RICH AND THE POOR
GIVING EVERYONE ACCESS TO
EQUAL OPPORTUNITIES
PROMOTE DIVERSITY AND INCLUSION IN

CREATING SAFE WAYS FOR GOVERNMENT, LAWS AND OUR COMMUNITIES
PEOPLE TO MIGRATE
MAKING IMMIGRATION AND EMIGRATION

SAFER, EASIER AND AFFORDABLE
SCAN TO LEARN MORE

MAKE CITIES INCLUSIVE, SAFE,
RESILIENT AND SUSTAINABLE
ACCESS TO SAFE AND

AFFORDABLE HOUSING
REDUCING THE AMOUNT OF
POLLUTION CREATED IN OUR COMMUNITIES
ENVIRONMENTAL IMPACT ON CITIES
EXPANSION OF AFFORDABLE HOUSING FOR

THOSE IN NEED AND AT RISK OF HOMELESSNESS
AFFORDABLE PUBLIC TRANSIT OPTIONS
PROTECTION OF NEGATIVE IMPACTS MORE AFFORDABLE OPTIONS

FROM NATURAL DISASTERS TO TRAVEL TO WORK OR SCHOOL
PREVENTION AND PROTECTION OF CITIES

AND PEOPLE FROM NATURAL DISASTERS
SCAN TO LEARN MORE

ENSURE SUSTAINABLE
CONSUMPTION &
PRODUCTION PATTERNS
REDUCING FOOD WASTE
SPREADING AWARENESS IN HOW TO

RECYCLE & REUSE HOUSEHOLD PRODUCTS
PROMOTING USE OF AND DESIGN
OF REUSABLE MATERIALS
HOW TO REDUCE THE AMOUNT

OF FOOD INDIVIDUALS WASTE
CUTTING DOWN THE WASTE WE CREATE
USING MATERIALS AND FINDING ALTERNATIVES TO

RESOURCES EFFICIENTLY PAPER-BASED PRODUCTS AND PLASTICS
SHARING AND REUSING SECONDHAND PRODUCTS
SCAN TO LEARN MORE

COMBAT CLIMATE CHANGE
AND ITS IMPACTS
SPREADING AWARENESS ON
CLIMATE CHANGE
EDUCATING COMMUNITIES AND GOVERNMENTS
ON CLIMATE CHANGE AND ITS IMPACT
TAKING ACTION AGAINST CLIMATE CHANGE
PROTECTING COMMUNITIES FROM

THE EFFECTS OF CLIMATE CHANGE
PREPARING FOR THE ECONOMIC
CLIMATE RELATED DISASTERS
SPREADING AWARENESS IN
PROMOTE CLEAN TECHNOLOGIES USING CLEAN TECHNOLOGIES
WAYS TO GIVE SECONDHAND

PRODUCTS TO THE COMMUNITY
SCAN TO LEARN MORE

CONSERVE THE USE
OF OCEANS, SEAS AND
MARINE RESOURCES
REDUCE MARINE POLLUTION
HOW TO MONITOR THE HEALTH OF

OUR MARINE ECOSYSTEMS
EFFECTS OF OVERFISHING
PROTECT AND RESTORE ECOSYSTEMS WAYS TO PREVENT AND REDUCE THE

POLLUTION IN OUR LOCAL WATERS
SUSTAINABLE USE OF MARINE RESOURCES

SPREADING AWARENESS OF THE
IMPORTANCE OF OUR LAKES AND OCEANS
CONNECTING LOCAL, SUSTAINABLE

FISHERS TO MARKETS
SCAN TO LEARN MORE

PROTECT, RESTORE &
PROMOTE SUSTAINABLE USE
OF ECOSYSTEMS ON LAND
PREVENTING AND STOPPING

DEFORESTATION
EDUCATING COMMUNITIES AND GOVERNMENTS
ABOUT OUR LOCAL AND GLOBAL ECOSYSTEMS
STOP POACHING &

TRAFFICKING OF ANIMALS
WAYS TO RESTORE
UNHEALTHY FOREST AREAS
PROTECTING OUR NATURAL HABITATS
PROMOTE THE PROTECTION AND

MANAGING THE HEALTH OF RESTORATION OF ANIMALS AND PLANTS
OUR LOCAL ECOSYSTEMS
PREVENT THE ILLEGAL TRADE AND

TRAFFICKING OF ENDANGERED ANIMALS
SCAN TO LEARN MORE

PROMOTE PEACEFUL AND
INCLUSIVE SOCIETIES
REDUCE VIOLENCE IN OUR COMMUNITIES
EDUCATING COMMUNITIES ON THEIR

RIGHTS AND FREEDOMS
PREVENT CRIMES BY GANGS
PROTECT CHILDREN FROM HOW TO PREVENT VIOLENCE IN

SCHOOLS AND WORKPLACES
ABUSE AND EXPLOITATION
ACCESS TO PUBLIC INFORMATION ON BETTER WAYS TO CONNECT COMMUNITIES

CONSTITUTIONAL HUMAN RIGHTS TO THEIR LOCAL LAW ENFORCEMENT
ENHANCE RESOURCES TO PROTECT

OUR YOUTH FROM ABUSIVE HOMES
SCAN TO LEARN MORE

MODULE 3
SDG Mapping Activity #2

Take five minutes to match the statements on the page to the SDG table on the second page. Use the SDG
Posters around the room to learn more about each SDG. Write the number of the statement in the SDG that
your group thinks matches the most.
1. Helping those who currently live on $1.25 a day 13. Create affordable housing and basic services
across the world. for those in vulnerable situations.
2. Fight and end harmful diseases that spread by 14. Reduce waste generation through prevention,
air and water. reduction, recycling, and reuse.
3. End discrimination against women and 15. Reduce the amount of youth who are not in
girls everywhere. education, employment, or in training.
4. Provide access to safe and affordable drinking 16. Create and promote affordable Internet
water for all. services for all.
5. Promote the inclusion of everyone, no matter 17. Protect and maintain underwater and
their age, sex, disability, ethnicity, religion, or coastal ecosystems.
another status.
18. Increase the prevention of drug and harmful
6. Equal access to affordable quality education alcohol abuse.
and training for all.
19. Making sure that all women have equal
7. Increase the use and access to renewable opportunities in the workplace.
energy across the world.
20. Stop all violence and abuse for everyone
8. Making sure everyone has access to safe and everywhere.
nutritious food all year round.
21. Create sustainable ways to produce food that
9. Access to affordable transit services in our local help to maintain our local ecosystems.
cities (buses, trains).
22. Make sure that students have access to safe,
10. Increase services to prepare for natural educational facilities and inclusive learning
disasters for all countries. environments.
11. Create job opportunities for all with equal pay 23. Access to financial services for small companies
for work of equal value. that focus on research for technologies in cities.
12. Stop and prevent poaching and trafficking 24. Promote the rule of law and the equal access to
endangered wildlife. justice for all.
MODULE 3
SUSTAINABLE DEVELOPMENT GOALS TABLE

SDG MAPPING ACTIVITY | ANSWERS
SUSTAINABLE DEVELOPMENT GOALS TABLE
1 8, 21 2, 18
6 3, 19 4
7 11, 15 15, 23
5 9, 13 14
10 17 12
20, 24
Identifying the
Problem
1 2 3 4 5 6
MODULE 3
Create a list of stuff that bugs you. (2 min)

Write down as many bugs as possible! Do they relate to the theme? Can a mobile app solve it?
Write down the theme here:
LITTLE BUGS BIG BUGS

(What affects you and/or a few others) (What affects large groups of people)
Created by
Arizona State University
MODULE 3
Empathize with your neighbor. (2 min each)

Interview your partner about their bug.
WRITE YOUR NOTES AND SKETCHES HERE
Created by
MODULE 3
Define the problem. (3 min)

SYNTHESIZE THE NEED GETTING FEEDBACK
I interviewed: Things to ask your partner:
1. Is this problem statement accurate?

2. Is it easy to understand?
3. Does this match the theme?
They need a way to...
If your partner answers “no,” what needs to change?
because...
Created by
MODULE 3
Ideate solutions. (3 min)

What app ideas could solve your partner’s issue? Sketch or make notes below.
Created by
MODULE 3
In the space below, complete the sentence starter in large, neat writing.
(Your classmates will be reading this)
I would like to build an app that addresses the problem of...
MY INITIAL IDEA(S) FOR AN APP INCLUDE(S):
Created by
MODULE 3
Student App Organizer

Activity #4a: Structuring Your Solution
This is the first time in history you and your group are coming together to solve your identified community
problem! Right now, you might have a lot of similar but slightly different ideas for how you should address this
problem, so your first step is to come together to define the goal of your app in only one sentence, as well as
figure out which features your app will have. Remember, keep it simple and relevant to the problem at hand!
DEFINE THE GOAL OF YOUR APP IN ONE SENTENCE
WHAT FEATURES WILL YOUR APP HAVE?
NAME OF FEATURE WHAT PURPOSE DOES THIS FEATURE SERVE?
4
MODULE 3
Activity #4b: Market Research

Now that you have an idea of what your app is and what features it will use, it's time to do some market research!
Market research will help you understand what other apps or businesses are already trying to solve the same
problem you are already addressing, and how you can stand out or be different. The research will also help you
gain a better understanding of the problem at hand, at a local, national, or global level. Finally, once you understand
how your business will stand out in the market, you can more accurately define who your stakeholders are.
COMPETITORS What App, Websites, or Businesses are Similar to Yours?
NAME OF COMPETITOR WHAT DO THEY DO? WHY IS YOUR APP DIFFERENT?
STAKEHOLDERS Who is Using Your Product and Why?
NAME OF STAKEHOLDER GROUP WHY WOULD THEY USE YOUR APP?
4
MODULE 3
VALIDATING STATISTICS Real Evidence to Support Your Product
WHAT DOES THIS

STATISTIC WHERE DID YOU FIND IT? STATISTIC PROVE?
Americans generate 10.5 million tons of plastic

seastewards.org/projects/ Americans generate a lot of
waste a year but recycle only 1 or 2% of it.
healthy-oceans-initiative/ garbage that is harmful to
Ex. An estimated 14 billion pounds of trash—most
marine-debris-and-plastics our environment, especially
of it plastic—is dumped in the world's oceans
our oceans.
every year.
6

LESSON PLAN
User Experience (UX) and User Interface (UI) design play an integral role in the
MAIN IDEA process of app creation, well before the first lines of code are written.
Designers must visualize how an app's features look and interact with each
other by creating prototypes (storyboards) by drawing out each screen
(wireframes) of their app and showing how each component interacts with
other components.
In this lesson, students will be introduced to UX design, the role of designers,

OVERVIEW and the design process as they create their own storyboards for their mobile
app concepts.
à SWBAT create a wireframe and storyboard that demonstrates a strong

OBJECTIVES understanding of UI/UX design principles.
à SWABT iterate on their design based on feedback to create the best
possible product that addresses the problem they are trying to solve.
2–4 hours
TIME (depending on time constraints within your program)
à Printed Module 4 Student Graphic Organizer (one per group)

MATERIALS
à Printed Module 4 Paper Cell Phone Wireframes (two sheets per group)
à Poster-size Post-It Paper or Poster Board (one sheet per group)
à Cell Phones or Laptops
à Pencils
à Tape
à Scissors
à Colored Pencils or Markers (for storyboard)
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
PACING GUIDE
Pre-Lesson Prep
à Print the following documents:
Module 4 Paper Cell Phone Wireframes Module 4 Student Graphic Organizer
Cut out each wireframe. To start, print one sheet per student one per student
(1 sheet = 4 wireframes) and have multiple additional copies
prepared for students who need more wireframes.
à Prepare poster paper and pencils, markers and colored pencils, and tape for each group.
SLIDES 3–4 Activity 1 | Look, Ma, No Hands—What is UX? 10 min

à Show Slide 3 and start by asking students to describe their experience using a phone:
Is it easy? Intuitive? What makes it so easy?
Functional for day-to-day life?
à Pause for student responses.

à Give teams three minutes to find a tutorial online on how to tie their shoes.
The catch is that students may NOT use their hands at all to look up the tutorial.
à Hands are defined as anything from the wrists to tips of fingers.
à Alternative Offline Idea: Ask students to write down the steps of design thinking without
using their hands.
à Once the three minutes have elapsed, initiate a group discussion by asking the following
questions (shown on Slide 4):
What challenges did you have trying to look What creative solutions could you ideate to
something up without using your hands? overcome these challenges?
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
SLIDE 5
Activity 2 | Defining UX and App Design 10 min
à Show the “A User’s Experience in the Park” on Slide 5 and ask the students, “What is happening
here and why does it matter?”
Students should reflect that the user is not using the design—which we have all done before—but it
matters because even though somebody put in the time, money, and resources to develop the sidewalk
design, it isn't being used as the designer intended.)
à Similarly, an app with complicated features will be unappealing to its user. They should think of
creating similar “shortcuts” in their app by determining the simplest way to solve the problem.
à Scripted observation: If they don’t think of a user’s experience, somebody else will create a
more efficient version of their design which people will use, making their design as unused
as the sidewalk in the slide.
à Explain that in the previous scenarios (Look Ma, No Hands and the man cutting through the
grass), there was a “user.” Based on their observations, have students write down in the Module
4 Student Graphic Organizer what they think the definition for UX is.
à Once students share their definitions out loud, compare student responses to the user
experience definition (on provided Slide 6):
USER EXPERIENCE (UX)

The way a user interacts with/feels about a product, how easy it is to use, and how it runs/functions.
Note: Double down on the following ideas:
à UX is all about empathizing with the person who is using your app. UX relies heavily on an
understanding of the user's needs and identifying goals and purposes.
à UX encompasses how humans interact with something—digital or physical—and bridges
the gap between how something appears and how it works or feels.
à UX Design is the process of designing so the experience and interaction with the digital or
physical products are useful, easy, and enjoyable.
SLIDE 6
Connecting UX with Wireframing and Design (UI)
à Explain: If User Experience is all about how a person feels when using a product, one must also
think about the importance of the look and feel of each screen. This is called the User interface.
USER INTERFACE (UI)

The look, presentation, and overall design of an app.
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
SLIDES 7 & 8
UI or UX Activity | Understanding the Best UI/UX Practices
à Using the Module 4 Student Graphic Organizer on page 1, give students three minutes to
categorize the design principles as either UI (what a user sees) or UX (what the user does).
à At the end of three minutes, ask students to share which principles they organized into which
categories and why.
à Show Slide 8 to unveil the answers to the class.
REFLECTION
UI and UX are closely linked, and you cannot have one without the other. It can be hard to tell the two
principles apart, but it comes down to UI = look and feel and UX = experience while using the product.
These are principles students should keep in mind while designing their own apps.
Note: Explanation Key is at the end of this lesson plan!
SLIDE 9
Reflection
à Now that students understand UI/UX, ask them what their favorite apps are that have good
UI/UX. What makes them good?
à Some examples that students may share are
Instagram Spotify
Uber
à Ask students:
What do you like about these apps? What is your User Experience like? Is it easy to use?
à Ask students what apps they know that have BAD UI/UX. What makes them bad? What
happens to their apps that have bad UI/UX? (Note: They were probably deleted off their
phones.)
à Some examples that students may share are:
School Apps (like blackboard or Google Classroom) Twitter
Facebook iTunes
à Ask students:
What parts of these apps create poor UI/UX? Are these apps easy to use or intuitive?
à Encourage students to think beyond the ads.

à Finally, ask students what they should do to make sure they are providing good UX in their apps.
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
SLIDES 10–14
Activity 3 | Wireframing 15 min
à Show Slide 10 and share the next steps in the design process, using the PowerPoint animations:
à To design our app, we will need to do the following:
à Learn about UI & UX, which we have just covered.
à Then we are going to apply what we learned to create wireframes.
à Finally, we'll put those wireframes together and create a storyboard.
WIREFRAME (in relation to apps)

A visual tool showing labeled screens of a mobile device that illustrates the functions, experience,
and interface of an app. A wireframe is a blueprint, showing basic sketches or designs that skip colors,
fonts, sizing, and graphics to focus on functionality, space, and content.
à Show Slide 11 and ask a student to read aloud the “What is Wireframing” excerpt on the Module 4
Student Graphic Organizer on page 2.
à Explain to students that they will now apply their new understanding of User Experience to the
concept of wireframing for the app they are designing.
à To do that, we start with an idea of how we want it to work and how we visually organize
the features we have already established in Module 3. This would be considered a
prototype. It's a sketch for the designers and programmers to work from in finding ways for
the app to work. To continue the discussion, let's develop a wireframe.
à After students read the except, watch the “Introduction to Wireframing” video on Slide 12.
à After video(s) have been watched, have an open discussion with students answering
the following:
What is wireframing? How is wireframing different than just making a

list of ideas?
Why is wireframing important?
How do wireframes help you keep your

ideas organized?
à On Slide 13, show students an example of a wireframe. Ask them the following questions:
Q What do you see in the example? Q
How would you describe a wireframe in your
own words?
A
A single screen with basic sketches that show
where things go, it’s in black and white, there A
Students should understand wireframes are
are notes, emphasis on layout. basic sketches that focus on layouts, void of
color. Definitions may vary.
Q What is NOT included?
A
You do not see pictures, details, color and logos.
à On Slide 14, show students a cluster of wireframes. Each wireframe shows an example of the
main features and functions of your app.
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
SLIDE 15
UI/UX Checklist
à Show Slide 15. This slide should look familiar!
à Explain to students that they will use the principles in Activity 2 as both a reminder and
checklist as they go through their wireframing and storyboarding journey.
SLIDE 16
Creating Your Wireframes
à Show Slide 16.
à Students are to begin drafting their wireframe to communicate a draft of their mobile app
solution (If done well and thoughtfully, this could take up to 30 minutes). This should all be
done using pencil and paper, using the blank phone screens given in their student packets
(the colored pencils and paper cell phone cut-outs are used for the storyboard).
à The following items should all be included in the wireframe:
1. The main screen that you land on when opening your phone. In other words, what is the
primary functionality of the app (Example: Instagram opens to a feed, not a login screen)?
2. Main screens for each core feature of your app, and the screens that proceed with each
core feature.
3. Notes about what the various “screens/features” will do.
à This is the rough draft version of their final product. It can have scribbles, placeholders for
pictures and text, and erase marks. They can iterate and draft their design on their wireframe.
à Students can reference page 3 of the Module 4 Student Graphic Organizer for the definition
and an example of a wireframe.
à Facilitator Options:
à Allow students to do a full rough draft of their wireframe on a large Post-It page/poster.
à Ask students to simply begin sketching their ideas for their app on the blank phone screens
in their packet and save Post-It/poster layout for the storyboard.
à Create virtual wireframes using the following:
S Google Slides
S Figma
S Adobe XD
à REMINDERS!
1. If it doesn’t exist on the wireframe, it doesn’t exist in the app. Make sure students insert
everything they need into the wireframe.
2. Don’t get too caught up in a login screen.
3. Start with the home screen, or the screen you see when you open the app regularly.
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
SLIDES 17–18
Activity 4 | Introduction of Storyboarding 10 min
à Show Slide 17 and introduce the concept of storyboarding by asking how many students have
ever read a comic book? Pause for student responses.
STORYBOARD (in relation to apps)

A storyboard is a visual representation of the user interface of an iOS and android application,
showing screens of content and the connections between those screens.
à Unlike a wireframe, a storyboard is much more detailed and considers things such as colors,
fonts, sizing, graphics, and interaction between screens.
à Comic books are a very detailed storyboard, you follow along, and it tells the story. While a
wireframe represents a single screen’s blueprint, a storyboard is a collection of how all the
wireframes interact together.
à Show picture of a wireframe versus a fully coherent storyboard on Slide 18.
à Ask students to communicate the difference between the two images.
What is the main difference between the two Which image is more detailed?
images? (Amount of detail, color, etc.)
Which image likely captures more of the concept
Which one would you use in planning or the designer had in mind?
blueprinting your app?
Which image feels more like a rough draft?
Which one would you use to present?
Which image would they like their storyboard to
look more like?
SLIDE 19
Arrows and Navigation
à On Slide 19, students are shown a photo of three screens—one main screen with two screens
branching off the main screen with arrows pointing from the buttons on the screen to new screens.
1. In their storyboards, students will use arrows to visually illustrate what happens when they
press a “button” on their apps.
2. Arrows, or “Navigation Arrows,” will show the screen that will appear when you press a button.
3. One screen can have multiple navigation arrows.
4. Navigation arrows help tell the story of how an app functions.
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
SLIDE 20
App Structure
à Unlike a comic book or story, apps are not linear. In other words, they do not start with a “sign
up” page and end with a feature. Instead, apps branch out like a tree, showing multiple
interactions between many screens.
à Look at the images on Slide 20:
à What is the difference between the two images?
S Which one do you think is more likely to function like an app you use?
S Why is the one on the right better than the one on the left?
à How can you create navigation screens to make your app easy to use and create “shortcuts”
for users?
S Hamburger menu bars—the three lines at the top of the screen.
S A “home” screen to build off.
S Bottom navigation like on Facebook or Instagram.
à How do you layout all your wireframes to make sure your app is clearly showing
connections between screens?
S The app should never be "linear" or in a line, with one single path between screens.
S They should look more like a tree showing multiple paths and connections to different
screens.
S Arrows do not move from one screen to the next; but, instead, move from buttons to
screens, meaning multiple arrows can branch off a single screen.
Note: Students responses should fall along the lines of the statements below.
A storyboard is a visual representation of the user interface of an application, showing screens of content and
the connections between those screens. The storyboard should be colorful and highly detailed to capture the
true vision of the designer.
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
SLIDE 21
Creating Your Storyboard
à Pass out a poster size Post-It or poster board, “Module 4 Paper Cell Phone Wireframes (precut),”
and have students complete their storyboard using their wireframes as their blueprint.
à Show Slide 21 to illustrate what students should do, along with an example of a well-
made wireframe.
Note: Double down on the following idea:
à The storyboard should be HIGHLY detailed and look like a true representation of what the app
will look like when designed online.
à A storyboard DOES not tell in words what the user will see or do on each screen but instead
shows what they will see or do through images and text.
à Students will have additional time to work on their storyboards throughout the program until
their presentations.
This is the final version of their app concept. It will be presented and scored in their final
presentation in front of judges!
SLIDE 22
Extension Activity 1 | Wireframe Mapping 10 min
à Using the provided directions in page 4 of the Module 4 Student Graphic Organizer (Found on
Slide 22) and a cellphone/computer, ask students to do one of the following (two if time permits):
à Create an alarm.
à Create an event in their calendar.
à Change the background image.
à As students are walking through the listed examples, they will capture EVERY step they took to
complete the task on the Student Graphic Organizer. Students will have three minutes to
complete this task independently or in their small groups (facilitator’s choice).
à In the remaining five minutes, ask a student to share the process they followed for their first
scenario and ask the rest of the students to validate and add steps that the student may have
missed, examples of these include:
à Searching for the clock/calendar icon.
à Clicking on the clock/calendar icon.
à Goal: Students should understand that it takes multiple (roughly 8–12) steps to complete a
seemingly simple task. Each step, in a given task, should be indicated with a new screen on the
wireframes they create. They need to think through each step of their features thoroughly.
Note: If it does not exist on paper, it does not exist in their app.
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
SLIDES 23–24
MAIN IDEA
User Experience (UX) and User Interface (UI) design play an integral role in the process of creating
apps, well before the first lines of code are written.
à In this lesson we have:

à Learned about UI and UX principals.
à Visualized our app by designing wireframes.
à Created a storyboard that tells the story of our mobile app.
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
VOCABULARY
(for context only)
User Experience (UX)

The way a user interacts with/feels about a product, how easy it is to use, and how it runs/functions.
User Interface (UI)

Wireframe (in relation to apps)

A visual tool showing labeled screens of a mobile device that illustrates the functions, experience, and interface of an
app. A wireframe is a blueprint, showing basic sketches or designs that skip colors, fonts, sizing, and graphics to focus
on functionality, space, and content.
Storyboard (in relation to apps)

A storyboard is a visual representation of the user interface of an iOS and Android application, showing screens of
content and the connections between those screens. Unlike a wireframe, a storyboard is much more detailed and
considers things such as colors, fonts, sizing, graphics, and interaction between screens.
Navigation Arrows
Arrows that visually represent the functionality of your app when you press a button on a given screen. Arrows will
show the interaction between wireframes.
Additional Resources for Wireframing
What is a Wireframe?
youtube.com/watch?v=T0vt3nLZKks (5:09)
Rapid Prototyping: Sketching

youtube.com/watch?v=JMjozqJS44M (7:31)
à How to Create a Storyboard of Wireframes?

visual-paradigm.com/support/documents/vpuserguide/2822/3406/85137_creatingawir.html
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
IDENTIFYING UI/UX PRINCIPALS EXPLANATION KEY
Activity 2
UI is all about what the user sees whereas UX is action-oriented and uses action verbs.
PRINCIPLE ANSWER EXPLANATION
Minimize Clutter
Keep screens decluttered is part of what a
Keep only the necessary and critical components on a screen. Too UI user sees.
much extra stuff can overwhelm a user.
Design Common Features

Users want to feel like they already know how to use an app. Like UI UI is responsible for the layout of an app.
the “X” at the top corner of a website screen.
Considers Look and Feel

UI, by definition, considers the look and
Includes icons and buttons, typography and color schemes, UI feel of an app.
spacing, imagery, and responsive design.
Second Part of Design

Once you understand the user’s journey,
Brings the product to life and will be what the user sees when they UI you can design the interface.
use the product.
Make It Pretty
Apps should be easy to read and is
Users are more likely to use the app and enjoy their experience if the UI appealing to the eye.
app uses items that are visually appealing, such as colors or photos.
Keep a User’s Attention in One Place

How users physically interact with an
Try to organize as much data on a single screen as possible. Create UX app is UX.
scrolls, swipes, and taps.
Considers a User’s Journey User research and how they want to move
How will a user interact with a product from start to finish? UX through the app is a large part of UX.
The First Part of Design

UX creates a basic framework for how an
Includes user research and understanding how they will interact UX app should function.
with the product you’ll create.
Avoid Too Many Features

UX considers ease of use, including
Research has shown that the best apps have only a few main UX simplicity of features.
features and do them well.
Apps are Not Linear in Structure

Because apps do not start with a login and end with a feature, use UX UX considers app architecture.
shortcuts and as few clicks as possible to create app “flow.”
UI/UX, Wireframing
and Storyboarding
1 2 3 4 5 6
MODULE 4
Defining User Experience (UX)

In the box below, write what you think UX is in your own words.
Identifying UI/UX Design Principles

Determine which items below fall under User Experience (UX) or User Interface (UI). Remember, UX is what a
user DOES and UI is what a user SEES. The first one has been done for you.
User Experience (UX)

User Interface (UI):
The way a user interacts with/feels about a product,
how easy it is to use, and how it runs/functions.
Minimize Clutter Keep a User’s Attention in One Place

Keep only the necessary and critical components on UI Try to organize as much data on a single screen
a screen. Too much extra stuff can overwhelm a user. as possible. Create scrolls, swipes, and taps.

Considers a User’s Journey
Users want to feel like they already know how
How will a user interact with a product from
to use an app. Like the “X” at the top corner of
start to finish?
a website screen.
Considers Look and Feel The First Part of Design

Includes icons and buttons, typography and color Includes user research and understanding how
schemes, spacing, imagery, and responsive design. they will interact with the product you’ll create.
Second Part of Design Avoid Too Many Features

Brings the product to life and will be what Research has shown that the best apps have
the user sees when they use the product. only a few main features and do them well.
Make It Pretty Apps are Not Linear in Structure

Users are more likely to use the app and enjoy Because apps do not start with a login and
their experience if the app uses items that are end with a feature, use shortcuts and as few
visually appealing, such as colors or photos. clicks as possible to create app “flow.”
MODULE 4
Wireframing Read Aloud

Do you ever doodle? If you do, you might be an expert at designing wireframes! Wireframes are simple
sketches that show an illustration of a user interface.
If you are designing a webpage, or in our case an app, the interface is what a user sees and how they will
interact with the app. In the initial stages of a project, when ideas aren't quite fully formed, it's good practice to
wireframe the layout of your mobile app by stripping away all design elements to help define and better
communicate the layout and plan for functionality (what it does) and user flow (how the user sees it).
Whether you create them using a whiteboard, pencil and paper, web-based tools, or using a graphic application,
effective wireframing and planning play a critical role in the success of your product.
Wireframes are basic sketches or designs that skip colors, fonts, sizing, and graphics to focus on functionality,
space, content, and the flow of one screen to another. To be sure the sketch is understandable, it should have
items that represent placeholders for logos, images, text, navigation and menu bars, buttons, and headers.
Below is an example of how a wireframe can influence the final user interface design. (See page 4 of this
document for a more detailed wireframe).
Wireframe of
User Experience
Completed
User Interface
MODULE 4
How to Create a Wireframe

A wireframe is a visual guide representing the basic elements of an app. Wireframes are used to describe the
conceptual structure or information architecture of a website or application. A well-designed wireframe
includes three key elements: interface design, navigation, and main content areas (Figure 1). The functional
relationships between these elements are highlighted, while detailed graphics, typographic style, and colors
are typically not emphasized.
Use the following guidelines to help you create a wireframe for your app.
Wireframing
Workflow to Get
You Started
This workflow outlines
the general steps for
developing a wireframe
from scratch.
FIGURE 1 Wireframe proposal
Create Pencil and Paper Draft

Using pencil and paper, first sketch a login screen. Include all major layout designs and buttons across such as
navigation, content areas, titles, username, and password buttons and logos. Then, based on the content within
your menu screen, create screens that would build off of that menu screen—Sign up screen, home screen, and
most importantly, the screens that solve the identified problem, or your core features.
Remember, though, a wireframe is a basic sketch, not a work of art. Use placeholders for logos and graphics by
writing the words on the page. Consider these questions:
1. Graphics: What graphics will you include? Where will you place the graphics on the page or screen?
2. Text: What text will you include? Where will you place text on the page or screen?
3. Navigation: How will you organize the graphics on your screen to provide the best UX for your
stakeholders? Things that help—individuals do not like to relearn how to use apps.
MODULE 4
Use the Principles of UI and UX to Help Guide Your Wireframe and Storyboard
Check the box under “Done” if you have applied the principle to your prototype.
PRINCIPLE UI/UX DONE
Minimize Clutter
Keep only the necessary and critical components on a screen. UI
Too much extra stuff can overwhelm a user.

Users want to feel like they already know how to use an app. UI
Like the “X” at the top corner of a website screen.
Considers Look and Feel

Includes icons and buttons, typography and color schemes, spacing, UI
imagery, and responsive design.
Second Part of Design

Brings the product to life and will be what the user sees when they use the product. UI
Make It Pretty
Users are more likely to use the app and enjoy their experience if the UI
app uses items that are visually appealing, such as colors or photos.
Keep a User’s Attention in One Place

Try to organize as much data on a single screen as possible. UX
Create scrolls, swipes, and taps.
Considers a User’s Journey

How will a user interact with a product from start to finish? UX
The First Part of Design

Includes user research and understanding how they will interact with the product you’ll create. UX
Avoid Too Many Features

Research has shown that the best apps have only a few main features and do them well. UX
Apps are Not Linear in Structure

Because apps do not start with a login and end with a feature, UX
use shortcuts and as few clicks as possible to create app “flow.”
MODULE 4
Mapping Logic in an App

Choose two of the following tasks: Create an alarm, create an event, and change the background image.
Use the space below to write down EVERY step necessary to accomplish two of the tasks listed above.
TASK 1 TASK 2
EVERY STEP NECESSARY TO EVERY STEP NECESSARY TO

ACCOMPLISH THE SIMPLE TASK ACCOMPLISH THE SIMPLE TASK
MODULE 4

Prototyping
LESSON PLAN
Block-based coding can be used as an introduction to logic statements and
MAIN IDEA programming. Simple app design programs such as MIT App Inventor can be
used to build prototypes of a wide range of concept designs.
Students will be introduced to programming logic and a simple block-based

OVERVIEW coding tool, which they will use to create a prototype of their mobile app
concept.
à SWBAT create crystal clear logic statements that start, execute, and stop a
OBJECTIVES programmed task.
à SWBAT communicate using basic programming logic statements.
à SWBAT design a basic app using a block-based coding tool.
2–4 hours
TIME (depending on time constraints within your program)
à Printed Module 5 Human Computer Worksheet (one per student)

MATERIALS
à Printed Module 5 Video Tutorial Worksheet (one per group)
à 2–3 packs of individually wrapped candy with a variety of colors (at least 3)
in the pack.
à 4 Clear Cups
à Laptops or Computers (1:1 is ideal; 1:3-4 at minimum)
à MIT App Inventor 2 website
ai2.appinventor.mit.edu
à Note: Students will need valid Gmail accounts to access
MIT App Inventor 2
à Timer
Prototyping
1 2 3 4 5 6
PACING GUIDE
Pre-Lesson Prep
à Print the Module 5 Human Computer Activity and Video Tutorial Worksheets.
à Prepare the bags of individually wrapped candy and four clear plastic cups for Activity 1.
à Prepare one laptop for each group and ensure that the MIT App Inventor, aiStarter software, is installed.
SLIDES 3–4 Activity 1 | The Human Computer 15 min

à Show Slide 3 on the projector and provide the following explanation:
à “I have become a human computer. And like a computer, I operate by the following steps.
My task as a ‘human computer’ is to sort a pack of candy, by color, into the four different
cups on the table.”
à Students will, individually, have three minutes to write a set of instructions that you (facilitator)
will follow (as they are written) to try and successfully sort flavors of candy into four separate cups.
à Select a few students to share (choose a set of instructions that you know will fail).
à Read the instructions one step at a time and do EXACTLY as the instructions say (i.e., if it says “put
candy in the cup” literally place all of the candy in the unopened package into one of the cups.
à Scenarios worth considering ahead of time:
à If the instructions do not say “Start”—do not start. The same is true for “stop.”
à Exaggerate the verbs: If a student says to “tear open the package” tear open the package
aggressively, spilling the candy all over the floor.
à If the instructions say: “Put the candy in the cup,” find funny, creative ways to toss, throw,
dunk, slam the candy into the cups creating a mess, and even missing the cup all together
at times.
à Repeat the above steps 2–3 times. The more literal you take the instructions, the more
entertaining and meaningful this activity will be.
à After a few iterations, show Slide 4 and ask students:
Why did our program fail the first few times? How is writing "code" for a "human computer"
similar to writing code for an actual computer?
What changes do we need to make? (accept answers similar to: Computers do exactly
what they are programmed to do, no more and no
What was important to keep in mind to finally less; humans must write clear instructions (code) if
get it right? we want a program to work correctly)
Prototyping
1 2 3 4 5 6
Activity 1 Extension | Space Race 10–15 min
If you would like to provide your students with more offline programming experience,
you may run this optional activity from Fractus Learning. This activity allows students to
practice block-based coding using pen and paper using a gamified approach.
à Coding with Paper

fractuslearning.com/coding-with-paper-printable-game
SLIDES 5–7
Activity 2 | Coding Demo 15–20 min
Teacher Tip: Need more practice with the MIT App Inventor?
Check out the teacher tutorial worksheet in your goIT Binder. These videos will provide
an in-depth review of the MIT App Inventor and how to transition from wireframe to an
app. For questions regarding compatibility and set up, please read the TCS goIT – MIT
App Inventor 2 FAQ Document.
à Explain that we will now begin the process of officially turning their wireframe into an actual
online product by prototyping their apps using MIT App Inventor.
à Show Slide #5 on the projector and distribute the laptops to each group.
à Students will use the following instructions to log onto the MIT App Inventor:
à Ask students to open a web browser—do not use Internet Explorer.
à Students will type the following address into their web browser:
ai2.appinventor.mit.edu
à Ask students to log in using their Gmail accounts or School emails (if your students use
Google Classroom).
à Show Slide 6 and allow students five minutes to explore the tool. Encourage them to click
around and try to accomplish a few simple tasks:
1. Change the background color.
2. Insert a picture.
3. Insert text on their screen.
à If students have completed these tasks before the five minutes, ask them to give you a signal to
move on. This can be a thumbs up or having their hand raised.
à Show Slide 7 and distribute Module 5 Video Tutorial Worksheet.
à Ask a student to read aloud the “Meet Dennis” excerpt on the Module 5 Video Tutorial
Worksheet (top of the page only).
à Students should watch the Creating a Project video tutorial found on Module 5 Video
Tutorial Worksheet.
à Allow 10 minutes for students to watch and recreate the apps in the tutorial videos.
Prototyping
1 2 3 4 5 6
SLIDE 8
Activity 3 | Practice Coding 20 min
à After students watch the above video demonstration, challenge them to complete the
remaining tasks on their own or as a team of three to four (depending on access to technology).
à Show Slide 8 and share the tasks that they can try:
Creating a project
drive.google.com/open?id=1uNrkLBTVcshATDS7f6K8IugcnCmZY6gN
Creating a button
drive.google.com/open?id=1l4PW8K3FZ-yqZsncOOwHM9VBSe71BRP_
Programming a text-to-speech button

drive.google.com/open?id=1ynvrkYQcQ6PTU_rbsGcMjV6M1DD4KRCI
Testing your app

drive.google.com/file/d/1Kuqt8i9HyUdx9it8ReUEurDUvhK2Poe_
Adding more screens

drive.google.com/open?id=1jBCm2Q3KnNdE0XjbmQmsFwO_D7z0Ix3q
Layouts?! How do they work?

drive.google.com/open?id=1fd4oy87gksIhv1riJVdLkV8gsjOFDy-l
Getters & Setters

drive.google.com/open?id=1ACVxvKAsASZ7Ew8jp3Z3yVMULeMtheuR
Note: Remind students to watch the above videos while replicating the activity on their own
or in groups. If working individually, remind students to consult with a peer if they are having
difficulty with a task. If you have students who are craving more tasks challenge them to:
à Build a button on a single screen that plays a sound when pressed.

à Add a “login” screen that only moves forward to a new screen when an email address and
password are entered.
à Build several screens with buttons that allow you to go between each of the screens.
à Create several layouts with buttons, pictures, and text.
à Use the storyboard to start building out each screen of the app (up to five screens).
Prototyping
1 2 3 4 5 6
Activity 3 | Practice Coding (cont.)
à Are students stuck on how to code something? Here are some steps you can take:
à Have the students watched the videos?
à Has everyone in their group had a chance to problem solve?
à Is there an expert from another group that can help?
à What resources can you point them to?
S MIT App Inventor Official Tutorials
appinventor.mit.edu/explore/ai2/tutorials
S MIT App Inventor Gallery
Located on the upper right corner in the MIT App Inventor project page.
S MIT App Inventor Blocks Guide
appinventor.mit.edu/explore/ai2/support/blocks
à When time is called, reflect on the activity by asking some of the following questions:
What was the most challenging task to complete? How much did you rely on your teammates to
What made it harder than the others? accomplish the tasks?
What would you have done differently to save time? How could you have done a better job of working
together to accomplish the task faster?
SLIDE 9
Activity 4 | Prototype your App 1–3 hrs
Teacher Tip: Before students get to work on their apps, it’s beneficial to have your own
wireframe, storyboard, and app prototype to share with students. As you explain your
approach to building your app through an exemplar, it will help to inform them of
their approach.
à Show Slide 9 and ask students to start developing the prototype of their apps.
à They may spend between 45 min or more depending on the length of your program.
à Students should focus on the following:
à Prototyping two to three of their most important screens. Which screens are their
“main content” or has the most functionality?
à Use their wireframes and storyboards as a resource. If it's not finished, students can divide
their tasks accordingly.
à Review the tutorial videos or tutorials on the MIT App Inventor website for extra help.
Extra tutorials can be found here:
appinventor.mit.edu/explore/ai2/tutorials.html
Prototyping
1 2 3 4 5 6
Activity 4 | Prototype your App (cont.)
à Validate every 15 min that they are taking one wireframe at a time and recreating it on
MIT App Inventor.
à Optional: Walk through your wireframe and app and share the steps you took to prototype
your app from your wireframe/storyboard.
What are the important screens that you would What number of screens are you expecting from
need to share with “investors?” the students?
What are the important functions and features of

your app?
SLIDES 10–11
Simple app design programs such as MIT App Inventor can be used to build prototypes of a wide
range of concept designs.

à Learned how to communicate using basic programming logic statements.
à Learned how to design a basic app using a block-based coding tool.
à Learned to create logic statements that start, execute, and stop a programmed task.
à Created a prototype of our app using the MIT App Inventor.
Prototyping
1 2 3 4 5 6
MODULE 5
Prototyping
The Human Computer

For the next activity, your teacher has become a computer and needs your help with performing a very simple
task. Sort the candy, by color, into the cups on the table. Simple, right? Write the steps your teacher should
follow from beginning to end. Note: Be sure to write clearly, because your instructions just might get selected to
run the “human computer!”
STEP INSTRUCTION
9
MODULE 5
Prototyping
STEP INSTRUCTION
10
11
12
13
14
15
16
17
18
19
20
MODULE 5
Prototyping
Student Video Tutorials

Meet Dennis. Dennis is part of the North American goIT team, and he knows his stuff! Dennis
loves coding. He loves coding so much that he studied Electrical Engineering at the University
of Ontario Institute of Technology in Canada! Dennis loves to rock climb, but he loves coding
even more! The only thing he loves more than coding is teaching students, LIKE YOU, to code!
To help us learn the ins and outs of MIT App Inventor, Dennis has prepared a series of videos for
us. Check out the links below to see what fun coding adventures Dennis can lead us to today!
VIDEO TUTORIALS
TOPIC AND WHAT WE COVER TIME LINK
Creating a Project
à What you’ll need to get started. 0:48 bit.ly/goITApp1
à Creating a project.
Creating a Button
à Adding a button to your app.
à Using component properties. 0:39 bit.ly/goITApp2
à Renaming and deleting components.
Program a Text-to-Speech Button

à Using the blocks or programming screen. 0:42 bit.ly/goITApp3
à Using a combination of components.
Testing Your App

à Running the emulator on your computer. 1:07 bit.ly/goITApp4
à Things you need to know about the emulator.
Adding More Screens

à Adding a new screen. 1:07 bit.ly/goITApp5
à How to program a button to move to another screen.
Layouts!
à Moving your components around the screen. 0:58 bit.ly/goITApp6
à Using tables to organize your screen.
Getters & Setters

à Using Getter blocks to get information from a text box. 1:54 bit.ly/goITApp7
à Using Setter blocks to show information on the screen.
MIT APP INVENTOR TEACHER INTRO VIDEOS
Hello, Teachers and Facilitators! We’ve recorded a few extra videos to help you get more comfortable with the
MIT App Inventor. Below you will find three videos that describe everything from “What is the MIT App Inventor?” to
“How might students approach to creating a prototype for their app idea?” The goal of these videos is not to help you
become the expert, but to help you point students in the right direction so that they may be equipped to be the
drivers themselves. We hope this helps and you will also have the goIT team as a resource if you have more questions.
APP DESIGN TEACHER SERIES #1
What is the MIT App Inventor? (5:55) 0:30 What is the MIT App Inventor?
A general overview of the MIT App Inventor tool, how it 0:43 What do students need before they start?
works, and gives you an idea of what students could create. 1:40 App Examples
drive.google.com/open?id=1_2QQsn5JxzpGZ6s4_73wwcDCw4wKP3dF
How to Get Started? (9:02) 0:15 Where to find the aiStarter software?
Explains how to get started by installing the software 2:15 Walkthrough of the MIT App Inventor.
and a walkthrough of the MIT App Inventor. 7:58 Will this work on iOS?
drive.google.com/open?id=1XiWrDoJWl8Wpm7-x1gLknKkalKKgzvso
0:35 What will you need to have completed?

A Prototyping Approach (15:53)
1:40 Sharing an example wireframe.
Shares an example of how to transition from a
3:00 Welcome and login screen.
wireframe or storyboard to the MIT App Inventor.
13:30 Extra feature examples.
drive.google.com/open?id=1bIxU5I5K2zImWWIq2jFXTyvi7Xaf4SDY
Music used: Dreams by Joakim Karud soundcloud.com/joakimkarud

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 creativecommons.org/licenses/by-sa/3.0
Music promoted by Audio Library: youtu.be/VF9_dCo6JT4
Prototyping
1 2 3 4 5 6
MODULE 6 | 2–3.5 HOURS

LESSON PLAN
Delivering an effective presentation is much more than simply presenting
MAIN IDEA your product or delivering a speech. It is about skillful communication of
ideas while relating to your audience.
Students will learn how to effectively pitch their product to a panel of judges
OVERVIEW by understanding presentation best practices.
à SWBAT identify strong and weak presentation skills.

OBJECTIVES
à SWBAT create a slide deck that supports their presentation.
à SWBAT identify and order the parts of a pitch.
à SWBAT pitch their product to a panel of judges.
2–3.5 hours
TIME (depending on time constraints of the program)
à Video of a “weak” pitch

MATERIALS Labeled as Pitch 1 (embedded into the PowerPoint presentation)
à Video of a “strong” pitch
Labeled as Pitch 2 (embedded into the PowerPoint presentation)
à Module 6 Student Graphic Organizer (one per student)
à Module 6 Judging Rubric (one per group)
à Laptops or Computers (1:1 is ideal; 1:3-4 at minimum)
For the creation of pitch slides
Pitching Your
Product
1 2 3 4 5 6
PACING GUIDE
Pre-Lesson Prep
à Have the following videos ready:
Pitch #1:
youtube.com/watch?v=bjYI6vCt2Zk
Pitch #2:
bit.ly/goITPitch2
à Ensure each student has the “Module 6 Student Graphic Organizer” printed.
à Print out one rubric/team/student for the following:
à Classroom Competitions
à Round 2 Competitions (buddy classrooms/quads/etc.)
à Culmination Round
à Have a preset method or bracket system for sending teams to the final culmination round.
à Classroom Competitions: Set judges for the classroom round. Judges can be the classroom teachers or they
can partner with “buddy” classrooms so their buddy teacher can judge their students’ presentations.
à Round 2 Competitions: The number of teams presenting in the final round should be narrowed down to six
to ten teams maximum. Work with your goIT specialist to create buddy classrooms, groups, etc., for a second-
round competition to narrow down teams from the current number of classrooms to six to ten teams.
Example: 36 classrooms with 1 team advancing in Round 1 Arrow-Right 4 classrooms = 1 “quad” for Round 2;
1 team advancing per quad x 9 quads total Arrow-Right 9 teams advance to the final culmination.
à Final Culmination: Before culmination, we will need to have the following set up and/or secured:
S Designate a space large enough to host the entire student population (gym or auditorium).
S Three to six judges/culmination space—ideally prominent members of the community.
S A screen/projector and microphones set up in the culmination space for presentations.
S All student presentations saved/shared onto one computer.
S A judging table set up with pens, rubrics, and a tablecloth.
S Branded material (tablecloths, popup banners, etc.) set up.
S Certificates printed.
S Medals on display.
All culmination details should be secured with goIT specialist before the program and discussed with teachers
during the Facilitator Training.
Pitching Your
Product
1 2 3 4 5 6
SLIDES 3–5
Activity 1 | Identifying Strong vs. Weak Pitch Examples 20 min
à Show Slide 3 and instruct students that they will now be watching two videos that they will
take notes on with an emphasis on the following:
What does the PowerPoint look like? Did they make a compelling argument for
their product?
What are the presenters doing with their bodies?
What are the presenters talking about?
Note: Refrain from directing students to “strong” and “weak” pitch. They will identify these
based on their observations.
à After each video, allow students two minutes to complete notes and share thoughts amongst
their own teams. Give each video a score of 1 (weak)–10 (strong). Students should be prepared
to justify their scores.
Link to Pitch 1 (found on Slide 4):
youtube.com/watch?v=bjYI6vCt2Zk
Link to Pitch 2 (found on Slide 5):

bit.ly/goITPitch2
à Once the time is called for the group discussion, open the floor for a whole-class discussion
about the video strengths, weaknesses, and scores.
SLIDE 6
Reflection
à Show Slide 6 and ask students to reflect on the following questions:
Which pitch would you support and why? How important would it be to have those parts?
What parts of that pitch helped you make

that decision?
à Students should have observed that the second video is much more engaging and will entice
the audience and judges to act.
Pitching Your
Product
1 2 3 4 5 6
SLIDE 7
Activity 2 | Identifying Presentation Skills 10 min
Facilitator’s Note: The videos and reflection in Activity 1 are based around observation.
Activity 2 will ask students to synthesize their observations and come up with
recommendations for best presentation practices.
à (Show Slide 7) With their observations from the previous activity, students will now have two
minutes to create a list of strong presenter skills. These will be captured in the provided
Module 6 Student Graphic Organizer.
à Once time has been called, ask students to share their idea of good presentation skills.
Capture these ideas on the board.
Strong examples should include: Presenters are speaking clearly and slowly, making eye contact with
the audience, not reading from their PowerPoint, standing still/not fidgeting, not turning their backs to the
audience, being prepared, confident, etc.
à With their observations from the previous activity, students will now have two minutes to
create a list of strong PowerPoint presentation characteristics. These will be captured in
the provided Module 6 Student Graphic Organizer.
à Once time has been called, ask students to share their idea of a good PPT or Google Slide
presentation. Capture these ideas on the board.
Strong examples should include: Presenters relied more on pictures than words, few words on slides,
not too busy, colors are contrasting—simpler colors are better, slides not overly reliant on transitions,
animations, or gifs.
SLIDES 8–9
Activity 3 | Identifying Parts of a Pitch 15 min
à (Show Slide 8) Now that students are comfortable with presentation skills, it's time to begin
thinking about the content for their own presentation.
à Using the “Craft the Perfect Pitch” portion of the Module 6 Student Graphic Organizer, give
students three minutes to do the following:
à Draw a line to match the word on the left side of the page to the correct definition on the
right side of the page.
à Once all the parts of a pitch are defined, identify the correct order by writing a number 1–8
in the blank box next to the word.
à The first example is done for the students in their Student Graphic Organizer.
Pitching Your
Product
1 2 3 4 5 6
Activity 3 | Identifying Parts of a Pitch (cont.)
à Share for five minutes. Ask students to read their definition matches and order and justify their
answers. Students should, as a class, arrive at the following order (ensure students are offering
justifications for their responses):
à Answer—In order:
INTRODUCTION
Name, name of the app, introductory sentence.
HOOK
Something to grab your audience’s attention.
IDENTIFIED PROBLEM
The problem you’re solving supported by statistics.
SOLUTION
Your app and a walkthrough of the storyboard.
TARGET MARKET
Your stakeholders; who cares and why?
COMPETITORS
The apps or companies that are similar to yours and why yours is different.
FUTURE VENTURES
What comes next for your app? What would you like to do next with your product?
ASK
What you need from the judges and those listening.
Note: The beginning of the presentation is flexible. A possible order could be Hook, Problem,
Intro, and Solution.
à Finally, show Slide 9 with the answer key and ask students to make corrections to their
worksheet.
Note: The pitch order, although strongly suggested, is not mandatory. The goal is to create a
narrative without repeating information and including relevant information. If a student creates
a presentation in an order other than the one provided, they are welcome to use that order as
long as it makes sense.
Pitching Your
Product
1 2 3 4 5 6
SLIDE 10
Activity 4 | Create Your Own Pitch! 30 min–1 hr
à Allow students to have dedicated time to work on their presentation narrative and PowerPoint/
Google Slides presentation. Students should:
à Write their pitch following the guidelines outlined using the “Craft Your Pitch” page in their
Module 6 Student Graphic Organizer (Shown on Slide 10).
à Create a slide deck that speaks to the parts of the pitch and properly showcases their
mobile app concept.
S Slide decks should be between 8–10 slides at the minimum; however, students can use
as many slides as they feel necessary to convey their messaging.
à During work time, find an opportunity for students to meet with a volunteer or classroom
facilitator to hear the group practice their pitch to get preliminary feedback before going live in
front of judges.
à Optional: Given that this is a large span of student work time, consider creating a checklist of
smaller tasks for students to update as they complete the tasks. This will instill urgency and
hold students accountable for their progress.
SLIDES 11–12
Reflection
à Before moving onto the final presentation, show Slide 12 to reflect on the learning of the
module. Students:
à Identified how to be a great presenter.
à Learned the parts of a pitch.
à Crafted their own pitch.
à Once you reflect on the presentation portion of the module, you can move onto
understanding the requirements for the presentation.
SLIDES 13–15
Preparing for the Final Pitch 5 min
Student Requirements
à On Slide 14, students will see that they need the following for their presentation:
à Their Team’s Storyboard
à A Presentation
à Google Slides/PPT Presentation (if applicable)
à At least two to three screens coded on MIT App Inventor (if applicable).
à On Slide 15, discuss the following logistics/necessary information with students.
Pitching Your
Product
1 2 3 4 5 6
Preparing for the Final Pitch (cont.)
à Direct students to the judge’s rubric and spend a few moments highlighting the
descriptions in each category that result in the highest score possible.
à Students may need help understanding the vocabulary/concepts in the rubric so make sure
to go through each line and item, and check for clarity and understanding.
à Review the details of their final pitches:
à Each team gets three to four minutes to present.
à Presentations will be followed by a two-minute Q&A. Judges will ask clarifying questions as
well as ask about items students did not cover.
à Students will draw numbers for random presentation order (goIT’s suggestion). This
is to make the presentations order fair for all participants. Teachers can choose alternate
methods of choosing the order if they choose.
à Discuss etiquette: As an audience member, we clap at the end of each presentation and
hold all conversations during presentations. Transitions between presentations should
remain calm and quiet.
Note: The amount of time given to students’ presentations and how the order is drawn is up to
each facilitator. However, it is encouraged that time allotted to students is consistent across
groups and kept under five minutes.
SLIDE 16
Activity 6 | The Final Pitch 45 min–1.5 hrs
à Once the time is called, students should be prepared with their storyboard, presentation, and
slide deck, sitting quietly in their seats.
à If students have time, they can also present their mobile app prototype created on MIT App
Inventor.
à Students may or may not get scored on their mobile app based on the partner’s
previously discussed preference.
à Judges are introduced and presentations begin in the pre-determined order.
à After scores are calculated, the top three teams are announced and certificates are awarded to
EACH goIT participant and medals to the top three teams (during program culminations).
Pitching Your
Product
1 2 3 4 5 6
MODULE 6
Analyze the Elevator Pitch

Identify the presentation content and style of each pitch.
Take notes for each pitch using the table below. Which one do you think is a strong pitch?
PITCH NOTES CONSTRUCTIVE FEEDBACK SCORE
Pitch
#1
Pitch
#2
MODULE 6
Pitch Like a Pro

Create a list of presentation skills and PowerPoint tips to present like a professional.
PART 1 PART2
What makes somebody an excellent presenter? What makes a great PowerPoint presentation?
MODULE 6
Craft the Perfect Pitch

Use a line to connect the term with the appropriate description. THEN order the steps from 1 to 8.
ORDER PARTS OF A PITCH BRIEF DESCRIPTION
Your stakeholders;
Competitors who cares and why?
The apps or companies that are similar

Hook to yours and why yours is different.
The problem you're solving,

Identified Problem supported by statistics.
What you need from the

Ask judges and those listening.
Your team members names,

Your Solution name of the app, one sentence
defining the goal of your app.
Something interesting to
Future Ventures grab the audience's attention.
Your app and a walkthrough

1 Introduction of the storyboard.
What comes next for your app?

Target Market What would you like to do
next with your product?
MODULE 6
Drafting the Perfect Pitch

Use the space provided below to capture your initial ideas for your team’s pitch.
STEP PART OF THE PITCH NOTES FOR YOUR TEAM PITCH
8
MODULE 6
Parts of a Pitch
Order and Definitions
1. Introduction
Name, name of your app, one sentence that defines the goal of the app.
2. Hook
Draw in your audience with a question, story, or skit.
3. Identified Problem
The problem you and your team are working on, supported by statistics, numbers,
or research with sources.
4. Solution
YOUR APP! Define your app’s goal, along with the features that help solve the problem.
Explain by using your storyboard!
5. Target Market/Stakeholders
Who cares about your app and why? Name three to four targeted stakeholder groups.
6. Competition/Market Research
What other businesses, apps, etc. are trying to solve the same problem you are,
what do they do, and why are you different?
7. Future Ventures
What are the next steps for your app? Do you want to scale (think small first), build your app,
add exciting new features?
8. Ask
What will you need to make your future ventures happen? Money? Marketing help?
People to download the app? Be specific as to WHY you need these things.
9. Thank You
Thank the judges for their time!
JUDGING RUBRIC Team Name: Total Score: /27
CATEGORY LISTEN AND LOOK FOR NOTES 3 2 1
The students' introduction of The students' introduction of

à Students introduced themselves. The students did not introduce
Introduction themselves and their app was clear, themselves and their app was clear,
à Identified their app name. themselves or their app.
and they introduce their app. but they did not introduce their app.
The students’ hook of the presentation

The students’ hook of the presentation The students’ hook of the presentation
à Students grabbed your attention. was clear, but only slightly engaging,
Hook was clear, engaging, and drew in my was not clear and did not engage or
à Used a story or question. and only slightly drew in my
attention as a listener. draw me in as a listener.
attention as a listener.
The definition of the problem was The definition of the problem was
à Defined community problem. The definition of the problem was
Define Problem clear and was supported by clear but was not supported by any
à Used data (numbers, statistics). vague and hard to understand.
real-world evidence (e.g., statistics). real-world evidence (e.g., statistics).
The app solution was somewhat The app solution and relationship
à Community-related app focus? The app solution was clear and
Concept clear and had some connection to to the stated problem were difficult
à Directly addressed the stated problem. directly related to the stated problem.
the stated problem. to understand.
SOLUTION
à Walkthrough of storyboard OR Prototype illustrated 2–3 intuitive Prototype illustrated vaguely
Prototype failed to illustrate features
Prototype digital prototype. features that directly address 2–3 features that somewhat address
that directly address the problem.
à Clearly explained 2-3 features. the problem. the problem.
The group clearly communicated The group vaguely communicated

The group did not communicate
à Who is the app for? who their app is for and why they whom their app is for, but does not
whom the app is for. The group did not
Target Market à Why would it benefit the target group? need it. The group understands the state why. The group showed some
show what impacts their app could
à Who are the target demographic groups? impact their app could have on their understanding of the impact their
have on its users and community.
users and community. app could have.
The group shows some understanding

The group understands their app’s
à What app or website is similar to theirs of their app’s competition but does The group shows no understanding
Market Research competition and gives a clear example
(if applicable)? not give an example of another app or of its app competition and what makes
& Competition of another app or site. Clearly stated
à How is their app different/ better? site. Are not clear on what makes their app solution better or unique.
how their app is better or unique.
their app better or unique.
The ask is hard to understand and it is

Future Ventures à What’s next for the business? The ask and next steps are clearly The ask and next steps are stated,
unclear what the next steps will be
& Ask à What do they want from the judges? stated and are justified but the group does not justify them.
for the group.
à Captured audience’s attention The group produces an effective, The group produces a sales pitch for The group attempts to produce a
Pitch Delivery à Shared responsibility engaging, and polished sales pitch for the app. Some elements were effective sales pitch for their app, but it is
& Presentation à Eye contact their app. Great attention to detail and engaging. More planning was mostly incomplete, lacking cohesion,
à Spoke clearly. and careful planning is Demonstrated. needed to improve the Presentation. conviction, and Planning.
MODULE SUPPLY NEEDS
Students will need a pen or pencil throughout the entire program.
MODULE SUPPLIES QUANTITY
Projector 1/class
Surface to Project onto 1/class
Computers (preferably laptops) 2–3/team
Technology Internet Access 1/computer
Mobile App Emulator 1/computer
goIT module PPT slides (provided) 1/class
Folder or Binder Clips (to contain handouts) 1/student
Pre-Event Computers (for pre-event survey) 1/student (or take survey in rotations)
Module 1 Roll of Tape (only a few pieces) 1/class
Roll of Tape (only a few pieces) 1/class

Module 2 Binder Clips or Sandwich Bags 1/team
(to contain design thinking sorting cards)
Module 3 Roll of Tape (only a few pieces) 1/class
Paper Wireframes (provided) 4/team (requires cutting)

Module 4 Roll of Tape 1/team
Box of Markers 1/team
Computers 2–3/team
Bag of Starbursts 1/class
Module 5 Clear Plastic Cups 4/class
Binder Clips or Sandwich Bags (to contain design 1/team
thinking sorting cards)
Roll of Tape 1/team

Module 6
Box of Markers 1/team
Post-Event Computers (for post-event survey) 1/student (or take survey in rotations)
1 2 3 4 5 6
MODULE PRINT MATERIALS BREAKDOWN
MODULE HANDOUT QUANTITY
Pre-Event Student Pre-Event Survey N/A (online)
Student Graphic Organizer 1/student

Module 1 Job Titles 1/student
Skills Gap Gallery Walk Posters 1/class
Design Thinking Cards 1/team (requires cutting)

Module 2 Student Graphic Organizer 1/student
Case Study Posters 1/class
Sustainable Development Goal Posters 1/class

Sustainable Development Goal Mapping 1/student
Module 3
Bug List 1/student
Student App Organizer 1/student

Module 4
Branded Wireframes (provided) 4/team (requires cutting)
Human Computer Worksheet 1/student

Module 5
Video Tutorial Worksheet 1/student

Module 6
Judges Rubric 1/team (& enough for judges)
Post-Event Student Post-Event Survey N/A (online)
1 2 3 4 5 6

App Design Curriculum: Prototyping a Mobile App

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

App Design Curriculum: Prototyping a Mobile App

Uploaded by

Copyright:

Available Formats

App Design Curriculum

SWBAT = Students will be able to...

SWBAT communicate the existence of the STEM skills gap.

Module 1 SWBAT communicate what Computer Science is.

SWBAT identify design thinkers in the global workforce.

SWBAT create a storyboard that demonstrates a strong understanding of UI/UX

SWBAT identify strong and weak presentation skills.

STEM Skills Gap & Computer Science

MODULE 3 | 1.5 HOURS

Identifying the Problem

MODULE 4 | 2–4 HOURS

UI/UX, Wireframing and Storyboarding

MODULE 5 | 2–4 HOURS

MODULE 6 | 2–3.5 HOURS

Pitching Your Product

STEM Skills Gap & Computer Science

à SWBAT communicate the existence of the STEM Skills Gap.

à Printed Module 1 Skills Gap Gallery Walk Posters

STEM Skills Gap &

RELEVANT SLIDES ACTIVITY TIMING

SLIDE 3 Activity 1 | True or False Gallery Walk 15 min

à Listen carefully to student responses, interject ONLY WHEN NECESSARY.

What stood out to you?

The 21st-century skills or essential skills in CS.

STEM Skills Gap &

How might we describe someone in

Step 2 Design the website.

STEM Skills Gap &

Step 4 Market and sell your website.

STEM Skills Gap &

à Show Slide 19 and summarize what the class has learned:

à In this lesson, we have:

STEM Skills Gap &

1. Out of 527,000 Canadian graduates, only 6 % graduated from an IT field.

5. 25–42% of Canadian jobs will be heavily disrupted by technology within 20 years.

8. 900,000 young Canadians are not in any education, employment or training.

9. Computer Science plays a role in every industry.

STEM Skills Gap &

3. Computer Science plays a role in every industry.

6. Computing is the fastest-growing, highest-paying, and largest sector of new jobs.

10. 10% of STEM graduates are in Computer Science.

11. 67% of computing jobs are outside the tech sector.

STEM Skills Gap &

STEM Skills Gap &

STEM Skills Gap & Computer Science

STEM Skills Gap Gallery Walk

# TRUE OR FALSE # TRUE OR FALSE

S What is the STEM Skills Gap? S What stood out to you?

What is Computer Science?

STEM Skills Gap & Computer Science

The Truth About Computer Science

STEM Skills Gap & Computer Science

Does This Job Involve Computer Science?

1. Computer Engineer 26. Software Developer 51. Human Resource Worker

à SWBAT identify design thinkers in the global workforce.

à Printed Module 2 Student Graphic Organizer (one per student)

RELEVANT SLIDES ACTIVITY TIMING

SLIDES 1–8 Warm-Up | Innovate It! 10 min

2. Rules of this game are the following:

How does design thinking help in some of

à In this lesson, we have:

Words and definitions should be cut

Steps of Design Thinking