In this project, your target audience is a grade 3 student within your "sphere of influence." Your goal is to create a mobile application to help students understand 1 of the 17 UN Sustainable Development Goals better and ideally show them how to take action! 

In the first step of the Design Cycle, it helps to explain and justify why we are even developing a product in the first place! To do this, we sometimes ask people who are a part of our target audience to help us understand the need for a solution to a problem.

Since this is your first project, your Design teachers have provided you with the Problem Statement for this unit. In future units, you will be asked to come up with your own.

Classroom Instructions:

Now that we know the problem to solve, let's consider the research we will need to conduct to learn how to address the problem. To do this, we can break our research plan into two areas that identify and prioritize our inquiry: 

1. Client Research: First, it makes sense to ask our target audience / market what type of product might solve the Problem Statement.

2. Skills Research: Once we know what the client wants, we can research the skills we need to learn in order to make that product. 

It also helps to classify our research as either Primary or Secondary. To learn more about this, check out this video! > > > > >

1. Your grade 3 client has taken the following SDG App survey to help you understand them better. Find your client in the list and check the SDG they have chosen.

2. Go to the GlobalGoals.org/goals and click on the SDG your client selected.

3. Scroll down to the Targets. Read the goals that are defined under each Target to understand what success would look like. 

4. Discuss and research with your partner to see which goal would fulfill the following criteria: 

   • Age appropriate for a Grade 3 student

   • Statistical data on your specific target available on SDG-tracker.org

5. Once you have decided on an age-appropriate SDG Target with good data, save the links and screenshot some data for use within your app. 

6. Use the below instructions to dive deeper into your client and skills research!

Design Process Documentation:
Now it's time to document your Client and Skills Research!

1. Open up Toddle and go to your Design Class Stream

2. Select Criteria A: Teacher Feedback Summative Assessment and open up the workbook submission template. 

3. Screenshot the 6 screens you designed and coded in Lesson 7 of the Code.org Intro to App Design into the first slide and Save. 

4. Click on Slide 2 and read the Research Questions section carefully. Note the difference between Primary and Secondary research.

5. Discuss the questions with your partner and fill in the blue highlighted fields based on the following information: 

   • Client information

   • UN SDG Goal & Target

   • SDG-tracker.org statistics link

You will use these links when creating your app later 

6. Consider the Educational App your client said they enjoyed. Research both and reflect on what types of activities (quizzing, matching, etc) might make your app more engaging. 

7. Research the Game that your client said they like playing and find some characters or icons you might be able to use in your app. 

8. Record which color and font your client selected as their favorite in the survey. Then check out the Canva Color Wheel to experiment with a range of colors that will contribute to your app's color scheme. Hint: Click on Triadic and copy and paste the Hex #'s that go with your original color

9. Consider the Skills Research question (#5) that is provided. Try to think about what coding skills you may need to research further before beginning to work on your app! Looking for inspiration? Check out the AppLab JavaScript resources to see what can be done in AppLab

10. Brainstorm with your partner different ways you can design the app, but don't give away too much! You are now in competition to create the best app for your Grade 3 client. Surprise!

Classroom Instructions:

Now that you have gathered research from your potential clients and considered the skills you need to learn, it's time to get some inspiration! Designers usually don't start from scratch...so let's being looking for some existing products that might be similar to what you have been brainstorming. 

Research and analyze 3 existing products and use the following technique:

SWOT Analysis

1. Strengths

   • List positive aspects about the product.

2. Weaknesses

   • List negative aspects of a product.

3. Opportunities

   • List ways to improve the product to make it more relevant to your target audience.

4. Threats

   • List things you don't control that could limit the success of your product.

Design Process Documentation:

1. Open up Toddle and go to your Design Class Stream

2. Select Criteria A: Teacher Feedback Summative Assessment and open up the workbook submission template.

3. Click on Slide 3 and begin researching the existing apps that won last year's Blue Dragon competition. Conduct a SWOT analysis on each of the apps below. 

   1. Poverty Information & Quiz 

   2. The Hero of SDG#1: No Poverty 

   3. Roblox School

4. With your partner, discuss which elements make sense to include in your app based on your client's needs. 

5. When finished, review all slides in your Criteria A: Teacher Feedback Summative Assessment and press Save.

6. Complete the Student Evaluation and Mark as done

Classroom Instructions:

Design specifications are very important to consider when you create a product. These are the MUST DO's of your design. 

Specifications - What your product MUST DO in order to solve a problem successfully? 

Testing Methods - How you will test the design specifications to ensure they are successful. 

Success Criteria - What quantifiable measurement (number or percentage) would you consider needing to meet in order for your product to be successful? (i.e. 3 / 4 or 75%)

Note that when you test a product, you typically use one of the following methods: 

• Survey of people’s opinion’s - what questions would be asked, set up the form or template  (subjective)

• Timing how long an operation takes - what data would be collected and how to record it (objective)

• Checklist for Visually or aurally inspecting final product - Spreadsheet with list of what is to be observed etc (subjective)

• Observation of users to see how quickly they learn to use the new system, how often they need help or make errors (subjective)

• Stress-testing: Use the product or solution in ways that would be expected in real-life operation (objective or subjective)

• Inspection: Weigh it or measure it - Specification table with tolerances (objective)

• Comparison: Comparing the product with existing products in the marketplace noting strengths and weaknesses (objective or subjective)

Since we are struggling to find the time to meet our Grade 3 clients, you will create a copy of this Google Form Survey to share your initial concept sketches with them. They will then give us feedback on whether or not they think your concept sketches meet their approval. 

Design Process Documentation:

In this unit, your Design Specifications, Testing Methods and Success Criteria are scaffolded based on the minimum requirements of the app. 

1. Open up Toddle and go to your Design Class Stream

2. Select Criteria B: Self Evaluation Summative Assessment and open up the workbook submission template.

3. Click on Slide 1 and read the minimum Design Specifications (must haves of your app). 

   • In Design Specification #1, think to the future when your app is complete and all of the information you researched in Criteria A has been placed in an information page for your client to read and review. Consider if you sent a survey to your client(s), parents, coding partner, and teacher...what percentage out of those 4 people would you consider to be successful in relation to your design specification goal? 

   • In Design Specification #2, think about what items might appear on a checklist when you debug your app? 

   • In Design Specification #3, you don't have to fill anything in as this is an expectation of you to include activities that mimic your client's favorite educational apps or games. If you haven't researched those apps, now is a good time. Additionally, there are some interesting apps on code.org to sift through as inspiration. 

   • In Design Specification #4, look at the client aesthetics (color & font selection) they chose. You will likely get some valuable feedback on this survey question!

   • In Design Specification #5, make a copy of this survey. You will be sending this to your Grade 3 client shortly. 

4. Click Save

Classroom Instructions:

Now that you have a pretty good idea of what your client would like you to create, it's time to think about how your design will actually look in reality. In Mobile App Design, this involves creating a wireframe. This ad for a wireframe company actually explains it pretty well so let's take a listen. 

Remember you already have a ton of research to work from at this point:

1. Client Survey Results (A2)

2. SDG & Target information along with the SDG-Tracker statistics (A2)

3. Existing Apps that included similar Design Specifications (A3 & B1)

So now it's time to put this information into action! As you can see from the examples below, your concept sketches don't have to be absolutely perfect, they just need to convey the basics of what your app will look like. Be sure to annotate your wireframe with the following elements! 

• Colors you identified in A2

• Fonts your client indicated they liked (Serif, Sans Serif, or Comic)

• Aesthetics you plan on using from their Educational App or Game (characters, icons, etc)

• All Pages you MUST include according to your Design Specifications (B1)

  • Splash page: intro page with buttons to other screens

  • Information page: describes the SDG and Target you are informing your client about

  • Quiz pages: 3 or more screens that quiz students on the information they have just learned about

  • Call to Action page: page with external links to learn more about the SDG and provide options for action

• Navigation Arrows that show where your buttons bring the user!

If you do this well, not only will your initial wireframe be correctly interpreted by your client, but you'll have most of the design finished! 

Design Process Documentation:

1. Check out the wireframe examples below and consider what elements they have in common. 

2. Log into Code.org and click Create on the top right. Select App Lab. Name your App YOUR NAME SDG# _

3. Begin to build out the screens you plan on presenting to your client in a new App. Label these screens to make sure you include all of the required screens from your Design Specifications (B1).

4. Drag and drop elements you would like to include. Remember, the text for these elements can just be placeholder text for now. Here's a "Greeking" generator to help fill in the text. If you already have the research you will use available, please feel free to use the actual content. Make sure you cite your sources.

5. Once you are finished adding all screens and content, screenshot each screen. Copy this Google Drawing Wireframe Template and drag and drop your screenshots into the correct place. You can change the labels to suit your content. If you need more pages, simply copy the template again and continue. 

6. Draw the navigation elements by using the connectors and arrows in the toolbar > > > > >

7. When finished, open up Toddle and go to your Design Class Stream

8. Select Criteria B: Self Evaluation Summative Assessment and open up the workbook submission template.

9. Click on Slide 2 and add a screenshot of your Google Drawing Wireframe Template into the B2 slide

10. Click Save

Classroom Instructions: 

Finalizing a concept is a major step in the design process. Equally important, is being able to justify, or give reasons, for choosing or refining that particular concept. Getting survey feedback from your client is an excellent way to ensure that your final product will be successful. 

1. Check out the Screencastify introduction video to see what it does. Make sure your screencastify is installed as a Chrome Extension.

2. Get your final Wireframe from B2 ready on your screen and record yourself walking through the different screens and elements you have included for your client. When you are happy with the result, copy the shareable Google Drive link. 

3. Open up your Google Form that you copied in B1 / D1. Remember? If not, search your Drive for "Copy of Wireframe SDG App Survey" and you should find it pop up. While you're there...you may want to label it and organize it in your Design folder. 

4. Insert your Wireframe at the top.

5. Insert your Video Walkthrough link by clicking Copy Share Link in Screencastify > > > > >

6. Click on the Eyeball on the top right to get the final URL link. Fill in this form with the URL so your teacher can easily share this with the Grade 3 client. 

Design Process Documentation: 

1. When finished with the above, open up Toddle and go to your Design Class Stream

2. Select Criteria B: Self Evaluation Summative Assessment and open up the workbook submission template.

3. Click on Slide 3 and add a screenshot of your Google Drawing Wireframe Template into the B2 slide

4. Click Save

5. When finished, review all slides and press Save.

6. Complete the Student Evaluation and Mark as done

Classroom Instructions:

Congratulations! You have finished the Design Mode of your App and received feedback from your client on what improvements you could make. Incorporate their feedback into your designs and begin to code your app!

If you are a bit rusty on your coding, remember to check out the tutorials in the Resources section and look through the AppLab JavaScript Knowledgeshare Padlet for inspiration.

Once you have finished coding your app, look over your B1 / D1 Specifications to double-check that you have included everything that is expected, especially when it comes to debugging! When you are ready, move on to documenting your Design Process below...

Classroom Instructions:

Congratulations on finishing your app! Now it's time to test the product against the design specifications using the testing methods and success criteria you outlined in B1 / D1. 

It's time to gather some information from your target audience to see if the mobile application meets the success criteria you set while developing your design specifications (B1 / D1)  

1. 1. Make a copy of this survey and replace the image with the screenshot you made of your app presentation.

   2. In question 2, paste the link to your published app above the image

   3. Replace the image 

   4. Click on the preview (eyeball) to get the live google form link. 

   5. Send the form to your teacher, parents, and 2 peers.

   6. Once you have at least 3 responses, screenshot your results and paste them into your Toddle worksheet.
      
      

Design Process Documentation: 

1. When finished with the above, open up Toddle and go to your Design Class Stream

2. Select Criteria D: Family Presentation Summative Assessment and open up the workbook submission template.

3. Click on Slide 1 and fill in the screenshot of your Google Form results. 

4. Based on the responses and your own thoughts, add 3 improvements you could consider making to your app. 

5. When finished, press Save.

6. Complete the Student Evaluation and Mark as done