In our current Design unit, User Interface Design, we are challenging students to develop a platform that will inform and motivate a user to take action. Today, we discussed the concept of "spheres of influence" and identified family members as an appropriate target audience that they may have influence over. Additionally, we taught students about "marketing for good" and shared successful campaigns that have bridged the gap between awareness and action. 

Our first step is to have their user identify 1 of the 17 UN Sustainable Development Goals that they would like to learn more about. If you are unfamiliar with the SDGs, we ask that you watch this video and let them know your selection.

Next week, they will follow up with a survey to help them better understand your preferences on user interface. Thank you for your participation and please let me know if you have any questions. 

Classroom Instructions:

In this project, your target audience is a UNIS community member within your "sphere of influence." Your goal is to create a mobile application to help them understand 1 of the 17 UN Sustainable Development Goals better, and ideally show them how to raise awareness and take action within their own "sphere of influence!" 

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.

Classroom Instructions:

Now that we know which SDG your target audience is interested in, 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 three 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. Content Research: Once we know what the client wants, we can research the content that will help us develop the information we will present. 

3. Skills Research: After discovering user preferences, we will need to further hone our 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. Make a copy of this SDG App survey and send it to your parents email address.

2. Conduct primary source research by interviewing your parents and recording their answers on the form. 

3. Go to the GlobalGoals.org/goals and click on the SDG your client selected. Scroll down to the Targets. Read the goals that are defined under each Target to understand what success would look like. 

4. Discuss the targets with your parents and confirm they are interested in learning more about how they can impact this SDG locally. 

5. Research information about the targets and gather statistics and compelling data from both local and global sources. Use MLA citation.

   • Local sources: vietnam.un.org/en/sdgs

   • Global sources: SDG-tracker.org & Good Life Goals

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 Assignments

2. Select Design a UI - A: Inquiring & Analysing  Summative Assessment and open up the workbook submission template. 

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

4. Log the information that you have researched in the template provided

Classroom Instructions:

Now that you have gathered all of your research from your target audience (user), it's good to summarize and reflect on what you have learned and consider next steps in your design process. 

Design Process Documentation:

1. Open up Toddle and go to your Design Assignments

2. Select Design a UI - A: Inquiring & Analysing Summative Assessment and open up the workbook submission template.

3. Click on Slide 5 and record a video of you answering all of the questions. You can also use screencastify to record your screen and share your research in support of your summary. 

4. When finished, review all slides in your Design a UI - A: Inquiring & Analysing and press Save.

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

You will create a copy of this Google Form Survey to share your initial Design ideas with them. They will then give you feedback on whether or not they think your ideas 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 Assignments

2. Select Design a UI - B: Design Ideas 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 parent / caretaker(s), a critical friend, and your 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 an activity / game that helps your client understand the SDG and Target better. There are some interesting apps on code.org that may serve as inspiration. 

   • In Design Specification #4, look at the client aesthetics (color scheme and Design style) they chose. 

   • In Design Specification #5, make a copy of this survey. You will be sending this to your parents after completeing B2. 

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 5 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