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 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. Open up Toddle and go to your Design Assignments

8. Select Design a UI - B: Design Ideas 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. 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 3 and add a video of your walkthrough and the screenshot  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 on finishing your app! Now, 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 

   2. Past in the link to your UI 

   3. Replace the image with the screenshot you made of your UI presentation in Criteria C.

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

   5. Send the form to your parents and 2 peers

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

   7. Write 3+ improvements based on feedback.
      
      

Design Process Documentation: 

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

2. Select Design a UI - D: Evaluating 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