MODULE 1

STEM Skills Gap & Computer Science

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

STEM Skills Gap & Computer Science

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

STEM Skills Gap & Computer Science

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

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

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
across the world.
2. Fight and end harmful diseases that spread by
air and water.
3. End discrimination against women and
girls everywhere.
4. Provide access to safe and affordable drinking
water for all.
5. Promote the inclusion of everyone, no matter
their age, sex, disability, ethnicity, religion, or
another status.
6. Equal access to affordable quality education
and training for all.
7. Increase the use and access to renewable
energy across the world.
8. Making sure everyone has access to safe and
nutritious food all year round.
9. Access to affordable transit services in our local
cities (buses, trains).
10. Increase services to prepare for natural
disasters for all countries.
11. Create job opportunities for all with equal pay
for work of equal value.
12. Stop and prevent poaching and trafficking
endangered wildlife.
MODULE 3
Identifying the Problem
13. Create affordable housing and basic services
for those in vulnerable situations.
14. Reduce waste generation through prevention,
reduction, recycling, and reuse.
15. Reduce the amount of youth who are not in
education, employment, or in training.
16. Create and promote affordable Internet
services for all.
17. Protect and maintain underwater and
coastal ecosystems.
18. Increase the prevention of drug and harmful
alcohol abuse.
19. Making sure that all women have equal
opportunities in the workplace.
20. Stop all violence and abuse for everyone
everywhere.
21. Create sustainable ways to produce food that
help to maintain our local ecosystems.
22. Make sure that students have access to safe,
educational facilities and inclusive learning
environments.
23. Access to financial services for small companies
that focus on research for technologies in cities.
24. Promote the rule of law and the equal access to
justice for all.
 MODULE 3

Identifying the Problem

SUSTAINABLE DEVELOPMENT GOALS TABLE

 MODULE 3

Identifying the Problem

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

Identifying the Problem

Empathize with your neighbor. (2 min each)

Interview your partner about their bug.

WRITE YOUR NOTES AND SKETCHES HERE

Created by
Arizona State University
 MODULE 3

Identifying the Problem

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
Arizona State University
 MODULE 3

Identifying the Problem

Ideate solutions. (3 min)

What app ideas could solve your partner’s issue? Sketch or make notes below.

Created by
Arizona State University
 MODULE 3

Identifying the Problem

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
Arizona State University
 MODULE 3

Identifying the Problem

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

Identifying the Problem

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

Identifying the Problem

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
 MODULE 4

UI/UX, Wireframing and Storyboarding

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,
The look, presentation, and overall design of an app.
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.

Design Common Features

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

UI/UX, Wireframing and Storyboarding

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

UI/UX, Wireframing and Storyboarding

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

UI/UX, Wireframing and Storyboarding

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.

Design Common Features

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

UI/UX, Wireframing and Storyboarding

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

UI/UX, Wireframing and Storyboarding

 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.
 MODULE 6

Pitching Your Product

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

Pitching Your Product

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

Pitching Your Product

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

Pitching Your Product

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

Pitching Your Product

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

à Community-related app focus?
Concept
à Directly addressed the stated problem.
The app solution was somewhat
The app solution was clear and
clear and had some connection to
directly related to the stated problem.
the stated problem.
The app solution and relationship
to the stated problem were difficult
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

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