Technovation Girls: Climate Curriculum
SDG 14: Life Below Water
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Climate Curriculum—SDG 13
Technovation Girls: Climate Curriculum
SDG 13: Climate Action
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Week 1 – French
Technovation Girls: Semaine 1
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Week 1 – English
Technovation Girls: Week 1
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Ideation 13: Positive Impact of your Project
Positive Impact of your project
Ideation 13
This lesson can help you earn points in the positive impact line of the Pitch video section of the rubric.
In this lesson, you will…
- Consider the ethics of technology and AI
- Make sure your project will have a positive impact on its stakeholders
Key Terms
- Ethics - a set of moral principles that affect how people decide what’s right or wrong
- Bias - preconceived ideas somebody has that are often unfair to some people or groups
- Stakeholders - people or entities that will affect or be affected by decision or actions take by an organization or business
Ethics and Actions
Ethics is a part of philosophy that has to do with what is right or wrong. This is an important topic in the world of technology and especially AI today for many reasons! You’ll want to make sure your project is making decisions that help people and society instead of causing harm, even if the harm is by accident.
Algorithmic bias is where the coder or AI creator causes their program or model to treat some users better than others, or to create unfair outcomes for users. It may not be intentional but can still affect users negatively.
Pledge to make sure your project has only a positive impact!
We all use technology every day and are often unaware of what that technology is actually doing - how we are reacting to it, what it is doing to our psyche. In October, 2021, it was revealed that Facebook (now Meta), through its own research, was aware of the harm it was causing to some of its users, yet did nothing to fix the situation. The Wall Street Journal published a detailed account of the serious issue. One example from NBC News:
“Thirty-two percent of teen girls said that when they felt bad about their bodies, Instagram (owned by Facebook) made them feel worse,” the researchers reportedly wrote. Facebook also reportedly found that 14% of boys in the U.S. said Instagram made them feel worse about themselves.
Facebook whistleblowers have come forward following the Wall Street Journal articles with further information that Facebook promoted disinformation and ignored hate speech and illegal activity from certain users. Software companies such as Facebook are so influential around the world and have a responsibility to make sure their software does no harm.
While your app or AI project is just starting out and does not have the reach of Facebook or Instagram, you still need to think carefully about who will use your product and how they might be affected by it.
This video, although labelled AI, is a good commentary on technology in general and how important it is to consider how what you create will impact others.
As you develop your project, you need to consider your stakeholders. Stakeholders are people or entities that are affected by decisions or actions taken by your project. Certainly your users are affected by your project. They are considered direct stakeholders in your project. But there might be other stakeholders, who are called indirect stakeholders, as they may be affected by your technology, but not necessarily directly. For example, if your project involves educating people about fake news, various news organizations would be indirect stakeholders. When creating your project, you need to consider all of your stakeholders to make sure you are doing no harm to them.
This video explains stakeholders in more detail as well as other key points for making ethical technology.
If your project is a mobile app, here are some things to think about as you develop it.
- Does your app collect user data?
- Do your users know it?
- Do you have permission to collect the data?
- What steps are you taking to keep their data private?
- Is the advice or information you provide in your app accurate?
- How do you know?
Infographic by YTH and Vodafone Americas Foundation
If your project includes AI, think about what makes “healthy” data. Removing bias in your data helps make your model healthier, so that it can make better decisions. Here’s a video that goes into more detail around bias in training data:
We can also think about the ethics of the action taken by a technology. Imagine an AI technology called the Weed Puller that predicts what plants are weeds and pulls them out. Using the Weed Puller as a base, consider the following:
How can you remove bias from your datasets?
What decisions does your AI invention make?
What are all the actions your AI project could take?
What if your AI invention makes a mistake?
Does your AI invention use or share sensitive data?
How does your AI model interact with or make predictions connected to people?
How can you remove bias from your datasets?
- Data should reflect the characteristics of the population on which the invention is being used. If your data has bias, the AI model might make mistakes.
- Imagine if the Weed Puller has a dataset of images of weeds found only in the desert. What if we want to use Weed Puller near water? It might not work, because it was not trained with data to help it recognize weeds found in near water. The Weedpuller has a bias for desert plants!
| A weed found in the desert
|
A weed found near the water
|
See how different they look! The characteristics of weeds in the desert are drastically different from those near the water.
What decisions does your AI invention make?
What are all the actions your AI project could take?
What if your AI invention makes a mistake?
Does your AI invention use or share sensitive data?
How does your AI model interact with or make predictions connected to people?
As creators, we bear responsibility on how our technology interacts with people and we should always be mindful of the potential impact our creations can have.
Activity: Ethical Journey
First, identify who your stakeholders are, both direct and indirect.
Then, follow the flowchart of questions, and check that you are doing everything you can to make your project have only positive impact.
Reflection
Now that you have learned more about ethics and your part in making sure your project has only positive impact, consider these questions:
- What have you learned about technology and ethics that has surprised you?
- Do you look at any of the technologies you use every day differently now?
- What part can you play in making technology more ethical?
Additional Resources
For more about ethics, check out the MIT AI Ethics Curriculum.
Ideation 10: AI or Mobile App or Both?
AI or Mobile App or Both?
Ideation 10
This lesson can help you decide which type of project you want to create for Technovation.
In this lesson, you will…
- Review mobile app and artificial intelligence technologies
- Identify into which category your project falls
Key Terms
- Mobile App - a program that runs on a mobile device
- Artificial Intelligence - technology that performs a task normally performed by humans
AI or Mobile App?
By now you’ve learned about how mobile apps and artificial intelligence can be used to solve different problems. You’ve also brainstormed solutions to the problem you are solving. For your Technovation project, you need to decide which of these two technologies you will use for your project. Even if you are making a mobile app that uses AI, you will need to declare which one you want to be judged on, so that the judges will know which aspect of your project to focus on.
Note that in the judging rubric, there are slightly different criteria depending on whether it’s a Mobile App or AI Project. In the pitch video, you must talk about why your particular solution, whether it’s an app or an AI invention, is the best technology to solve the problem.
For the demo video, you will describe your solution and how it works. You will also need to show how you built your project. If your project is a mobile app, you will need to show some of your code and describe what it does. If your project is an AI project, you will focus on your dataset - how you gathered it, what it includes and how you trained it and incorporated it into your invention.
Each technology has its own benefits and reasons to use:
- Features of mobile devices - camera, GPS, sensors, phone calls, SMS, push notifications)
- More people are able to access mobile phones around the world
- Situations that can change depending on location, time, etc (e.g. Google Maps)
- Situations than predict something when given new information (e.g. Google photos recognizing faces)
- Connected to actions (e.g. auto car parking)
As you continue through this curriculum and with your project, you should focus on the lessons needed for your particular solution. If your solution is a mobile app, there is no need to complete the lessons on AI, and vice versa. However, if your solution includes both technologies, you should continue to complete both types of lessons. It might make sense to have some members of your team focus on coding the mobile app, and other members of your team focus on gathering data and training your AI model.
Activity: Choose your Technology
Complete this worksheet to decide which technology you are going to use to solve your problem and to defend why you choose this technology.
Reflection
Now that you have chosen which type of technology you will use for your problem solution, you’ve committed to learning more in order to achieve your goals!. Make sure to focus on the color-coded lessons that match your project.
Coding lessons are blue like below:
AI lessons are purple like below:
Additional Resources: Technovation Examples
Technovation Families* AI Invention Pitch Examples
A10
Recyclator
*The Technovation Families competition is no longer running at this time.
Ideation 6: Brainstorming Solutions
Brainstorming Solutions
Ideation 6
This lesson will help you earn points in several lines of the rubric focusing on the problem and solution in the Pitch Video part of the rubric.
In this lesson, you will…
- Check the scale of your problem
- Decide on a problem to solve with your team
Key Terms
- Solution- an app or AI project you create to solve your problem
Types of Solutions
In this lesson, you will start to brainstorm solutions for the top one or two problems you have decided to focus on. By the end of this lesson you will be able to select some possible solutions that can help solve your chosen problem.
Understanding types of solutions
Let’s consider again what makes something an innovation, or creating a new product or way of doing things that adds value to the world. They can:
- Improve something that already exists
- Reduce the cost of something that already exists
- Educate by raising awareness and helping to cause changes in people’s behavior
- Apply an existing approach to a new situation, or even
- Invent a completely new solution, technology, or way of doing things
Solutions can belong to multiple categories. For example, self-driving cars could be an improvement on something that already exists (normal cars) but is also a completely new technology that has never been able to exist before. Keep these categories in mind as you start to think of problems and solutions.
As you brainstorm solutions, think about the types of innovations that are possible: Improve, Reduce the cost, Educate, Apply, Invent. What type of innovation do you think is needed for your problems from these categories?
Once again, remember these tips for good group brainstorming:
- Be sure to capture all ideas, even wild ones!
- Defer all judgement, on other people’s ideas, and on your own!
- Build off each other’s ideas.
- Be visual – you can draw instead of writing words.
- One conversation at a time – don’t cut each other off.
- Go for as many ideas as you can.
- Stay focused.
Then check the scale of your solution ideas by asking these questions about each:
Daring
- Does the solution try to solve part of a really big problem?
Room for Innovation
Once you have a lot of ideas of how to solve your problem, you should start thinking about which solution would be the best created with a mobile app and/or Artificial intelligence (AI) and which ones are innovative. Some of your ideas might already include a mobile app, AI, both, or neither. Think about all of your ideas and try to come up with ways to take advantage of the capabilities of a mobile app or possibly artificial intelligence.
Here are some examples:
| Potential Solution | How to make it better with a mobile app or AI |
| Help the city figure out which trash cans should be emptied more often | Ask people who live in your community to take a picture and tag the location of overflowing trash cans. This information will be sent directly to the city for them to come empty the trash can |
| Add bigger trash cans | |
| Give out tickets for leaving large items on the street | |
| Start a community club that cleans up the streets on Sundays to help people feel more involved | Create an app that lets people connect who want to start their own clean up groups |
| Make it easier for people to get rid of these items by starting a service that will come pick them up at people’s homes | Use a mobile app for your service for people to call you directly and send you a picture of what they need you to pick up |
| Put up posters asking people not to throw trash on the ground | |
| Get the city to put in more trash cans | Set up an app that lets people donate money to the city to get more trash cans in their neighborhood |
| Create an AI model that learns when trash cans are filled (e.g time of week, after big events) | Use trash pickup data to learn when certain areas will need trash removal |
As you can see, not all of the solutions you think of will be made better by creating a mobile app or AI. For instance, creating an app for people to donate money to the city might not be the best use of your time. There are already a lot of websites you can use that will already do that. Additionally, designing a bigger trash can that can hold more trash does not necessarily need to make a mobile app.
Are you ready to select your problems and solutions? Move on to the activity section.
Activity: Brainstorming Solutions
Part 1:
- Write these categories on a board (real or virtual):
- Improve (Improve something that already exists
- Reduce the cost (Reduce the cost of something that already exists)
- Educate (Raise awareness and drive changes in people’s behavior)
- Apply (Apply an existing approach to a new situation or combine already existing elements)
- Invent (Invent a completely new solution, technology, or way of doing things)
- For each of your top problems, take a few minutes to brainstorm types of innovations that could help solve your problems from these categories. Write down your solution ideas under the proper category.
Part 2:
Selecting solutions
- Select a few of your team’s favorite solutions. To check the scale of each solution, ask these questions:
- Does the solution try to solve part of a really big problem?
- Can you find 3 existing companies or solutions that are doing the same type of thing as your solution?
- If yes, how will your solution be different and innovative?
- Are you keeping the user, aka the person or people whom the problem affects, in mind?
- Is it a mobile app and/or use AI?
- Can the solution leverage the features of mobile phones, such as GPS, accelerometer, camera, etc? If it does not, try thinking of how you could make it using a mobile app.
- Can your solution use the immense capabilities of Artificial Intelligence such as image recognition, speech recognition, or text-to-speech?
- Once you have at least three ideas that your team thinks solve the problem, meet your user’s needs, is innovative in some way, and makes good use of AI such as image and speech recognition, or mobile phone features such as GPS, accelerometer, camera, etc., then move on to the next ideation lesson.
Hear from advice from Technovation Girls alumnae on how to join or form your own team!
Reflection
Congratulations! Now that you have identified a solution to your problem, you can move onto Ideation lesson 7 and Ideation lesson 8, to complete market research about your idea and to write a problem statement. Your idea will probably change as you do this program, you might end up with an app that looks completely different than what you are envisioning now. Don’t worry, this is all a part of the ideation process!
- What problem and solution will you focus on?
- What are some problems that your team has identified that can NOT be addressed by an app or AI solution?
- How will your solution be innovative?
Your idea will probably change as you go through this program, you might end up with an app or AI project that looks completely different from what you are envisioning now. Don’t worry, this is all a part of the ideation process!
Additional Resources
Example Technovation Girls Apps
Here are some examples of Apps that solve problems relating to trash and trash disposal.
Eedo by The Cantavits
81% of people dispose of e-waste improperly, which results in toxic fumes and polluted water. Eedo is an Android app solution that provides an end-to-end connection between e-waste producers and authorized recyclers.
ZeroWaste (0 Waste) by 3BigTomatoes
ZeroWaste provides a simple way to help people recognize different types of waste in their home and how to recycle, reuse, and reduce them properly. It provides pictures, videos and games to help people, especially children and new comers with language limits, to understand local waste collecting rules, and also promote the awareness of "0 waste" to protect our environment. It can be used in different cities and by everyone. It's fun and educational, and most importantly, it's free!
Discardious by Team Charis
Discardious is an app that helps to solve the problem of improper waste disposal in Nigeria. When using the app, users can elect a location using Google Map to get started. The app allows them to either report a hazard in their environment or request a mobile cart to pick up their waste.
Ideation 4: Solving Problems with Artificial Intelligence
Solving Problems with Artificial Intelligence
Ideation 4
This lesson will help you earn points in the selected technology section of the Pitch Video part of the rubric.
In this lesson, you will…
- Learn how people solve problems by taking advantage of the capabilities of Artificial Intelligence
- Be able to recognize some examples of AI around you
- Analyze what actions AI is able to power
Key Terms and Concepts
- Artificial intelligence (AI) - machines/programming that can do tasks normally thought to be done only by humans
- Machine Learning - the subset of AI where a technology is trained with data and “learns” to recognize patterns in order to make predictions.
Artificial Intelligence
The world is changing rapidly! Artificial intelligence or AI is becoming a bigger and bigger part of the world we live in. Did you know AI made these things possible?
Space exploration via the Mars rover
Self driving cars that are developing quickly
Super computers beating humans at complex games
Many medical advancements
Solving all sorts of problems
Space exploration via the Mars rover
Self driving cars that are developing quickly
Super computers beating humans at complex games
Many medical advancements
Solving all sorts of problems
What is AI?
Source: "How to Train Your Robot”, created by the I2 Learning and Personal Robots Group at the MIT Media Lab
Artificial
- Not real
- Made by people
- A copy of something real
Intelligence
So, you might say that AI is something made by people to emulate the human brain by solving problems.
AI can do 4 main things: (1) understand or sense, (2) learn, (3) use models to make decisions, (4) interact with humans.
Do these 4 criteria sound like things that humans are capable of? So, AI is really something that tries to work or think like a human.
Here are some AI examples of the 4 criteria:
Here are some examples of artificial intelligence:
| Image recognition | The ability to recognize object in pictures or in videos and identify them |
| Speech recognition | The ability to understand spoken words and translate them into text |
| Sound recognition | The ability to recognize and identify what a sound is |
| Translator | The ability to translate text from one language to another |
| Text to speech | The ability to take text and speak it out loud |
Activity: Quiz Yourself!
For each example below, choose which one you think uses AI. As you consider, ask yourself these questions:
- Does it understand or sense things?
- Can it learn over time?
- Can it make decisions?
- Can it interact with humans?
- Can it do it on its own or is it following commands?
OR
OR
OR
OR
Reflection
Did any of these inspire you? AI is capable of many things and has huge potential. It’s already making a very big impact in our day-to-day relationship with technology. We’ve only just scratched the surface but you will learn more as you progress through the curriculum!
As you brainstorm problems and solutions for the problem you decide to solve, think whether AI might help your solution. Could it be part of your solution? Part of a mobile app solution?
In fact, you can decide to make an invention that uses Artificial Intelligence (AI) for your Technovation Girls project! You have a choice on whether to make a mobile app or AI project for your Technovation Girls submission.
Additional Resources: AI Tools for You
AI is a complicated subject! Learn more with this video:
And here are some examples of scientists using AI to solve global problems from our Technovation friends at the International Joint Conference on Artificial Intelligence!
Flood Monitoring using Google Earth Engine (with slides!)
Tracking Illegal Deforestation with Global Forest Watch
Ideation 12: Project Canvas
Project Canvas
Ideation 12
This lesson can help you stay on track to submit on time.
In this lesson, you will…
- Create a project canvas
- Identify any partners who could help you complete your project
- Set a timeline and a plan for your project
Key Terms
- Project Canvas - a tool that will help you and your team organize your work
- Partners - people or companies who can help you create your project
- Timeline - a schedule that will help you finish your project
- Milestone - a big piece of your project that you want to get done
Project Canvas
In this lesson, you will create a project canvas. A project canvas is a tool that will help you and your team organize your work and get ready to submit to Technovation Girls. You will use your project canvas as a guide to help your team plan and stay on the same page as you create your project. Below are the parts of your project canvas that you will complete. There are a couple of things that you haven’t learned yet: partners and planning. Don’t worry! You will learn them now.
- Problem Statement
You wrote your problem statement in Ideation Lesson 8. Look back at your work. Has your problem statement changed at all?
- Users and People Affected
In as much detail as you can, answer these two questions. Use the work did you describing your community in Ideation Lesson 1 and your market research from Ideation Lesson 7.
- Who does your problem affect?
- Who will the users of your project be?
- Product Features
In as much detail as you can, answer these two questions. Use your work from Ideation Lesson 9.
- What features will your app or AI invention have?
- What will some future features be?
- Project
- How will your app or AI invention meet your user’s needs? (Ideation Lesson 7)
- How does your project solve your problem? (Ideation Lesson 5)
- What will your project look like when you submit to Technovation?
- What will your project look like in 1 year?
- Partners (Optional)
You will learn how to answer these questions in this lesson.
- Who will you ask for help?
- Who could help us complete the project?
- How can we help our partner’s members?
- Can the partner help us get people to use our product?
- Planning
You will also learn how to answer these questions in this lesson.
- What are your next steps in completing your project?
- What do you need to do to get the project done?
- What technologies will you use to create your project?
- Who will be responsible for doing what? (this can change each week)
There are a couple of things that you haven’t learned yet: partners and planning. Don’t worry! You will learn them now.
Partners
Sometimes technology can serve as a connection between different services. For example, Uber connects drivers to people who need a ride. Uber isn’t an expert in buying cars and hiring drivers, so instead, they partner with drivers who get paid for each ride they give. The partnership is a good idea for both the drivers and for Uber, because, without drivers, Uber wouldn’t be able to exist, and the drivers get to make some money for their work.
Sometimes, you can work with a partner, instead of building everything yourself. Partners are people or companies who you work together with. A partner is more than someone who is helping you with your project, such as a teacher or parent. A partner can help you meet your goals and will also get something in exchange. Sometimes they get money in exchange for helping you, but they might also get other things, like the ability to use your app or invention for free or publicity. In addition to them helping you, you and your team might be able to help them. You might want to look at organizations that are already working on the problem you are solving for your project. You might be able to work together to solve the problem! Here are some examples of how Technovation teams have partnered with members of their communities to help meet their goals.
Partners who can help get your product to people who you want to use it
You may be able to find partners who are well connected to people you want to serve. For example, if you want your app or invention to be used by students, you might be able to partner with a school district that can tell students about your project. In exchange, you’ll be helping the school district better serve its students.
Partners who can provide a service to use with your project
You may find that your business needs a service that is beyond what you can build as an app or invention. For example, imagine you want to create an app that lets people call a garbage truck to pick up large items left on the street. Instead of buying the garbage truck and driving it yourself, you could partner with a local company that has garbage trucks and drivers. In exchange, you could pay them a certain amount for each pickup they do.
Can you think of any people or organizations that you might want to partner with? Try googling to see if there might be partners who could help with your project, or organizations that could use your help! There could be several organizations that are focused on the problem you are working to solve. You might be able to collaborate with them to get the job done! If you find a partner you might want to work with, ask a parent or teacher to contact them for you. Otherwise, you can send an email or make a phone call. If you found your partner on the internet, look for a contact page.
Here are some tips on what to say.
- Explain who you are and why you are contacting them.
- Explain that you are working on a project for social good.
- Explain how you could benefit from a partnership
- Explain how your project will benefit them
If you contacted potential but didn’t hear back, that’s okay! It still shows that you are an entrepreneur who is determined to make your project possible.
Planning Tips
Here are some tips that will help you plan out your project and stick to your deadline!
- Set a schedule
- Assign tasks to team members, and set deadlines and goal reminders on your calendars!
- If you are using the 12-week curriculum, your team should leave at least 5 weeks to program your app
- Make sure that your digital prototype is done and ready to be shared a week before the Technovation Girls submission deadline. This will save you a lot of stress in case there are connectivity issues. Remember that you can start submitting any part of your project in January!
- Break the tasks down and divide them up
-
- Have everyone on the team work together in pairs and tackle different tasks simultaneously. This can help move the project along faster.
- Prioritize
-
- Make sure your app or invention is functional first, and then it can be made to look better afterward. Remember, you are submitting a prototype and the judges will be interested in knowing that it works, gets the job done, and is easy to use. You can use your demo video and your business plan to let the judges know what your future plans are for the project in terms of new features you would add. Remember to focus on your MVP from Ideation Lesson 9.
- Ask your mentor to help you if you are having a hard time prioritizing your tasks
- Focus
-
- Turn off all devices you are not actively using during your team meeting or your programming or building time. You can also mute notifications and anything that will distract you.
- Make sure you finish one task before moving on to the next. Multitasking doesn’t usually save time.
It is a good idea to document your process and save everything (back up). You will be able to access things like different versions of your app, your flow chart, or your prototype in case anything gets lost, so you don’t lose time. You can also use these when discussing any hurdles you come across to more clearly state the issue with your mentor.
See what techniques some past Technovation participants used to plan their project.
Activity: Making your own Project Canvas
Your project canvas will be your guide for the rest of the Technovation Girls season. It will help you remember what the most important parts of your project are and what you want to accomplish. Remember, although it is important to have a clear idea of what your project will be, parts of your project can always change. However, you have worked hard to get to this point, so try to avoid starting over or picking a completely new problem. Keep your project canvas as a guide for your team to remember the most important parts of your project.
What you will need:
- Pens or markers
- Paper to write on or this worksheet
What you will do:
- With your team, fill out the project canvas
- Look back at the work you’ve done so far
- Brainstorm to fill in any sections that are blank
This activity was inspired by open Austin
Reflection
Now that you have your project canvas, do your best to stick to it. Remember that you can always change parts of your app idea or the problem you are solving, but don’t completely start over. There will be rough patches to work through with your team, but you have worked hard, gathered research and spent lots of time getting to where you are right now. Use your project canvas to help you keep faith in your idea and the problem you are solving.
Additional Resources
Pair Programming
Pair programming is when two programmers share a single workstation (one screen, keyboard, and mouse among the pair), and either work together or take turns “driving” and “navigating”. In this scenario, the person sitting at the keyboard or touchscreen is the driver, and the other person is the navigator. The navigator is also actively involved in the programming task but is focused more on the bigger picture, answers questions that the driver has, and keeps her eye on the code to check for bugs. The driver and the navigator swap roles every so often.
There are advantages to pair programming, such as:
- Better quality of code since the navigator can check the work of the driver.
- Better communication between team members because the driver is providing a running commentary on what she is doing (or programming out loud), and the navigator is able to respond or ask what is happening if the driver is quiet.
- Knowledge can be shared and transferred to your team, especially if one person is more of a beginner and others are more advanced.
- It can help make your teamwork more efficient because the driver can attend to fixing a bug while the navigator can keep focused on the task and help regain focus afterward.
Don’t be afraid to say, “Let’s try out your idea first!” Sometimes when you’re driving, you need to know when to listen to your navigator. The goal is to use the best ideas and to arrive at them through collaboration and to avoid errors.
“None of us is as smart as all of us.”
–Ken Blanchard, author and management expert
Ideation 11: Paper and Cardboard Prototyping
Paper and Cardboard Prototyping
Ideation 11
This lesson can help you earn points in the technical portion of the Demo video in the rubric. It will also help with your Technovation Learning Journey.
In this lesson, you will...
- Learn about common User Interface (UI) conventions
- Create a paper prototype of your app, or
- Create a cardboard prototype of your AI invention
Key Terms
- Prototype - an early model of a product
- Paper Prototype - a hand-drawn representation of what your app will look like
- Cardboard prototype - a mockup of a physical invention or system using paper, cardboard, and other materials
- Conventions - is something that is common or is used a lot
Prototyping
Now that you have an idea for your minimum viable product, it’s time to sketch out some ideas and think about what your project will look like. If you are making a mobile app, you want to plan what your user interface might look like. If you are making an AI project, you want to plan what the invention will look like physically, and how users will interact with it.
A prototype is an early model of something. There are different kinds of prototypes, but we will be focusing on paper prototypes in this lesson. A paper prototype is a hand-drawn representation of what your app will look like. It typically looks like screenshots.
Hear how other Technovation Girls teams created paper and digital prototypes!
What are the benefits of prototyping?
- You can quickly communicate your ideas in a visual way. For example, you can show what happens when you click on buttons in your app.
- It’s collaborative! When you work on paper or with cardboard, it’s more casual and conversations spring out of experimentation.
- It’s inexpensive! You don’t have to spend a lot of money and time to create a paper or cardboard prototype. You can use materials like cardboard, paper, magazine cut outs, post-its, markers, stickers, tape, popsicle sticks, pipe cleaners, and glue.
- You don’t need access to a computer or the Internet.
- You don’t have to be a technical expert for this part of the process.
- You can see how your users react to your prototype to quickly learn what may or may not work in your design.
- Prototypes can help to confirm design decisions before you spend more time building a device or developing and coding your app.
Paper Prototype for Mobile App
A paper prototype is a hand-drawn representation of what your mobile app will look like, if that is what your Technovation project is. It typically looks like screenshots. If you are making an AI project, skip down to the Prototype for AI Project section below.
Conventions
Before you start, here are some basic UI conventions that you can use in your app. A convention is something that is common or is used a lot. Here are a couple of common user interface conventions. You don’t need to use all of these conventions, they are just suggestions for certain things you might want to include in your app.
Buttons
Buttons are used everywhere in mobile user interfaces. They are used to prompt the user to take an important action such as “sign up” or “submit”. Be careful not to over use buttons, too many buttons can look cluttered and confusing, and the user won’t know which one to use.
Buttons
Buttons are used everywhere in mobile user interfaces. They are used to prompt the user to take an important action such as “sign up” or “submit”. Be careful not to over use buttons, too many buttons can look cluttered and confusing, and the user won’t know which one to use.
Splash Screen
Many apps will use the full screen to display their logo when you first open it. This is called a splash screen. Sometimes they will put a navigation menu or buttons on this screen.
Logo and Header
Most apps have a place at the top for a logo on the main navigation menu.
Navigation Bar
A navigation bar helps users find what they are looking for in an app. Many apps put a navigation bar at the bottom of the screen containing icons. You should limit your navigation bar to five items or less so it doesn’t get cluttered.
Full Screen Menus
You can show your user a full screen menu to help them navigate your app. This can look like a list, or you can get creative and use blocks of color or images.
Hamburger menu
A hamburger menu looks like this:
It is used when a full navigation bar or menu can’t fit on the screen. When you click on it, it will bring a hidden menu out.
More options menu
A more options menu looks like this:
Similar to a hamburger menu, this menu will also bring out information that can’t fit on the screen.
Search Bar
Having a search bar is an extremely common way to help users navigate your app.
Adding a magnifying glass next to the search bar helps your users know it is a search bar.
Scrolling Feed
Most users are used to scrolling down to see more information. A feed can be used to show more information than will fit on one screen.
Look through some of the apps that you have on your phone. What parts of the user interface do you see being used over and over again? What parts do you think look nice or make the app easy to use?
Although you might want your app to look really different to stand out from your competitors, using conventions can actually help your users understand how to use your app more quickly. For instance, most users are familiar with a hamburger menu, so including one in your app could help a user quickly understand what to do when they open your app. You could also design a new type of menu, but it might be confusing to users and they might not be able to figure out how to use your app. Of course, you should get creative with your app if you want to! In the additional resources section there are tips for how to test out different parts of your UI with your users. Later on in Entrepreneurship 5: Create a Logo, you will design a logo and choose a color scheme for your app.
- Download a new app from the app store right now. Does it have any of the conventions mentioned above? Try using the app for around 5 minutes. How long did it take you to figure out how to use it?
- Need some suggestions?
- Try All Trails (iOS and Android) or Spotify (iOS and Android).
Before you start, you can learn more about paper prototyping, user flow, and color theory in this short video with Melissa Powell who is on the Google Developer Relations team, and Mariam Shaikh who is a Senior User Experience Designer at Google.
Ready to start? It’s time to create your own paper prototype. Sketching is a fundamental part of the design process and can help you make key decisions about what to design. Your paper prototype can be as simple as drawing on a piece of paper and is helpful when you are working with your initial ideas. You can show your basic app structure and experiment with how people will interact with your app. You can also test colors and where buttons will go. Spending time now to test your ideas on paper will help save you time later when you transfer your ideas to your digital prototype.
Prototype for AI Project
If your project uses AI and will be a physical three-dimensional invention, you want to use three-dimensional materials for your prototype. As a first step, it makes sense to sketch out what your invention will look like on paper. The next step will be to take your sketches and turn it into a physical model, so that you can get a sense of size, shape, how safe it will be, and how it will work. As with paper prototyping, you don’t really have to worry about making it “look good” at this stage. This is just a first step in your project!
This video from MIT shows the basics of why and how to build a physical prototype:
By starting simple, with basic materials like cardboard and paper, you will gain more information about what your final prototype will look like.
If you also have construction kits available to you like Legos, they can be helpful in building your prototype. Use whatever is easily available to you at this stage of your project.
You will want to show your prototype to your target users to get their reaction to it. Do they like the size, shape? Is it easy for them to use? Do they feel it will be safe for them to use?
Activity: Paper Prototyping for Mobile Apps
What you will need:
- Plain paper
- Markers
Optional:
- Printouts of the worksheet
- Stickers
- Glue
- Scissors
- Tape
- Magazines
What you will do:
- As a team, sketch each screen of your app. Put your ideas down as they come and try not to judge them yet. You can question them later! Remember to focus on creating features that are a part of your MVP from the last ideation lesson. Start designing the features that are included in your MVP first. As you do this, you may want to consider:
- Will it have a logo?
- What is the color scheme going to be?
- What would the first screen look like?
- You will spend more time working on your color scheme in Entrepreneurship 3 and creating your logo in Entrepreneurship 5.
- Does your app need a menu for navigation? What will that menu look like? What will be on that menu?
- Will a user log in to your app? What could the login screen look like? What about a profile page?
- What happens if you click on a button to get to the next screen?
- What will each screen look like?
- Will it have a logo?
2. Check out the example of a paper prototype above. Notice the way the stickers are used to show where users can click on buttons. Also, in some cases there are sketches underneath, which would possibly be the next screen a user gets taken to once a button is clicked.
3. Once you have a working prototype, create a run through of how the user would navigate the app. You can take pictures as shown in the video above and create a .gif or video.
4. Another great option is to present the prototype to your target users. Since they will end up using your app, test it out with them first! Write down any feedback they have, or video them using the paper prototype. You can gain lots of useful information by having users test it out at this stage!
Activity: Physical Prototyping for AI Projects
What you will need:
- Plain paper
- Cardboard
- Scissors
- Tape
- Markers
- Glue (hot glue is best)
Optional:
- Other materials you have around (wood sticks, pipe cleaners, wire)
- Lego blocks or other construction kits
What you will do:
- As a team, build a basic model of your invention.
- What shape will it be?
- Are there different parts or pieces?
- How big will it be? You can start with a smaller scale model for this first prototype.
- Test out how a user might use it. Check for ease of use, safety, durability.
- Another great option is to present the prototype to your target users. Since they will end up using your project, test it out with them first! Write down any feedback they have, or video them using the model. You can gain lots of useful information by having users test it out at this stage!
Reflection
You just created your prototype! We recommend that you save your paper or cardboard prototype because you will need to refer back to it as you work through building your project. Make sure to leave it in a safe space so you don’t lose it, or ask one of your team members to be responsible for it. You should also take pictures of your prototype, especially if it’s a physical model.
- If your project's design should be the “minimal viable product”, what features must be included and what features are you removing from your design?
- Did you choose to follow any conventions, if so, which ones?
Additional Resources
Using digital tools to paper prototype
If you are on a remote team, you might also wish to create a digital prototype of your app. You could try a tool like InvisionApp or even something simpler like Google Slides. Here’s an example of a digital paper prototype using Google Slides:
Physical Model Prototyping
Here is a great website with tips and tools for using various materials to build 3-D prototypes.
