Code.org Innovation Design Process: Web App Back

Explorers will be introduced to the design process through the creation of a website.

BEFORE YOU BEGIN

1. Leaders should have completed the Leader First Day Survey online at the start of the program year.

2. Explorers should have completed the Youth First Day survey online at the start of the program year.

3. This outline includes 11 activities, each of which will take 50 min – 160 min to complete.

4. These activities should be taught in order.

5. At the completion of these 11 activities:

  • Leaders should complete the Leader Last Day Survey online here.
  • Explorers should complete the Youth Last Day Survey online here.

AGE APPROPRIATENESS

Exploring Posts (14-20 years old)

Exploring Clubs (10-14 years old)

OBJECTIVES

By the end of this session, participants will be able to:

  • Identify websites for social good and their impact on a local, national, and global level
  • Gather market research to better understand the needs of a user group
  • Construct a prototype that solves a problem in the community (local, national, or global)
  • Lead prototype testing and asses feedback received to project check assumptions
  • Explain the importance of prototyping
  • Explain the process for user testing and its importance to the design process

SUPPLIES

LEADER NOTE:

Text in italics should be read aloud to participants. As you engage your post in activities each week, please include comments, discussions, and feedback to the group relating to Character, Leadership, and Ethics. These are important attributes that make a difference in the success of youth in the workplace and in life.

Activity 1: Designing for Good (75 minutes)

Share Activity Guide - App Resource List. This is a list of websites and apps for social good. Explorers should review this list and pick out one or two that resonate with them. Encourage Explorers to search for their own website examples online or in their community (~10 mins).

 

Say: What is the social issue that this example addresses? How was it designed to do so? Are there other examples that address a social issue?

 

Say: What is a website? What are some things you noticed the students did to build their project? Which example was the most creative? Most useful? Which websites would be difficult to create?

 

Review the Activity Guide - The Problem Solving Process. They will use this to create/refine their project. Explorers will work as a team to implement a solution. Distribute the Activity Guide - App Design Kickoff. Review each section with the class. There are some bullet points that are missing. Explorers will fill in the remaining bullet points then complete and sign it. You will need adjust the guide slightly for a website project.

 

Distribute sticky notes. Explorers will use the Activity Guide - App Design Kickoff to brainstorm and reference the UN Sustainable Development Goals to choose a social impact problem. They will generate ideas for users, sort sticky notes and name groups. Explorers will have 2 minutes to brainstorm and 2 minutes to group the users. Once teams have a group of users, narrow the potential target user group to one or two categories. Explorers will have time in the next two lessons to research and refine.

 

Say: Ask each team to briefly share their name, topic and user groups. How can you learn more about your users and their needs? Spend 5 – 10 minutes discussing.

Activity 2: Market Research (50 minutes)

Say: What examples do you expect to find while researching?

Distribute the Activity Guide - Market Research to each group. Explorers will search for examples in their chosen topic and analyze at least one. You will need adjust the guide slightly for a website project.

They should save the examples that they like and record the name/location for reference later. Explorers should continue brainstorming ideas for their website on the Activity Guide. They will have time in upcoming lessons to finalize their choice and start designing. Suggested places to look: Code.org Public Gallery, Apps for Good, Technovation, Verizon App Challenge.

Explorers should stay focused on research. Encourage them to take notes on what they find inspiring in other examples, but to wait on designing their project. After reviewing examples, Explorers have 10 minutes to finish the Brainstorming section. This activity can be done with sticky notes. Explorers should write down their ideas, select the top 3-6 ideas and record them on their activity guide

Say: Share at least one example you found inspiring for your website.

Activity 3: Paper Prototyping ( 90 minutes)

Say: What do you know so far about your website? Who will use it? What will it look like? How will the user interact with it?

Explorers will visit Code.org, explore websites and discuss how they apply to their idea. They should create a list of what they like/dislike about each project and make a list of design elements that they find interesting or useful.  They don't need to use all elements but should consider how each could be used in the context of their site. After reviewing examples, discuss new ideas or changes they think should be made to their project

Review the term ‘prototype' in the Code.org Glossary. Explorers will create and test a paper prototype. This will allow for quick exploration and iteration with minimal investment.

Say: Why is this process is preferable to programming your project immediately?

Explorers will create a Navigation Diagram to describe the flow between the screens if their website. This will be helpful for user testing. Display the What's For Lunch? Wireframes. Remind Explorers that their prototype will be slightly different, as they are building websites.  Discuss the below:

  • What do you notice about this prototype? What do you like/dislike?
  • How does this prototype achieve (or fail to achieve) its goals?
  • Are they neat? Or neat enough that your test user could read what they need to?
  • If you were a user testing this, what feedback would you give to the developers?
  • If you were the developers, what might you want to know from the test users? 

Say: Use the last activity and element research as guides to develop the prototype of your website.

At the end of the meeting, collect all prototypes. Consider a dedicated spot in the room to store them.

Activity 4: Prototype Testing (60 minutes)

Distribute prototypes and ask Explorers to make any small changes before testing.

Explorers should ask the same questions each time they test their site. They will create a list of questions to ask when users are done testing. Explorers can compare the different users’ reactions and their answers to the questions.

Watch the Video  - What's for Lunch? and discuss the roles. Distribute the Activity Guide - Paper Prototype User Testing. Ask groups to assign roles for testing, as listed on the guide. The roles can be switched between tests. Groups should be paired with another group to test out their website.

Using the Activity Guide - Paper Prototype User Testing, Explorers will test their site with a user. Testing will run for 5-7 minutes each. Encourage observers to write as much as they can. Groups will discuss observations, record their findings and discuss prototype updates. Testing should take ~30 minutes.

Say: Reflect as a group or individually on these questions:

  • Was there a difference between testing with a user that was involved in the creation of your prototype vs testing with a user who had never seen it before?
  • What were some of the similarities and differences between the two types of users?

Activity 5: Digital Design (100 minutes)

Say: Discuss the feedback received. How can you adjust your project to incorporate these changes?

After feedback, Explorers will use their prototypes to create the next version of their site on Code.org. To get started, they should complete Day 1 in Unit 2: Lesson 14. Stop at “Finalize Personal Website.” To learn more, watch demo videos or work through tutorials at code.org/educate.

Say: Discuss the experience of converting paper designs to digital. Update your team on any changes.

Activity 6: Project Implementation (120 minutes)

Review the previous lesson. Explorers will develop the digital design of their prototype. Allocate 5 minutes to regroup from the last lesson and create a plan for the work time.

Explorers will break from their group and work individually on their assigned part of the project and create their digital design. They should reference the Project Guide - Final Personal Website and Rubric - Final Personal Website for help. Explorers will have additional time to receive feedback, iterate and finalize their website.

Say: Prepare for the next meeting and create a “to do” list. Determine the items left to complete.

Activity 7: Project Implementation Continued (120 minutes)

Say: Regroup from the last lesson and create a plan for the work time today.

Explorers will continue to work on their site. Remind Explorers about user testing in the next meeting and that they need to have a first version done by the end of the meeting.

Activity 8: Testing the Project (75 minutes)

Say: Recall the process used in the testing of the paper prototype:

  • What were the steps used in testing the paper prototype?
  • What were some of your tasks that revealed valuable information in testing?
  • What were some of the good questions you asked at the end of testing?
  • What do you think will be different about testing the project vs paper prototype?

Note: If possible, incorporate user testing with a site visit. Utilize corporate partners or mentors as users and ask them to provide feedback.

Use the Peer Review - Final Personal Website to complete the activity. Allocate 10 minutes to prepare for testing. Tests should run for 10+ minutes each. Encourage observers to write as much as possible and ask questions. If Explorers finish early, ask them to do a second round with the same person to see if that person missed anything or is willing to provide more thoughts.

Say: Review the findings from testing and discuss key observations.

Activity 9: Improving & Iterating (150 minutes)

Say: Based on user testing, what are some of bugs discovered in your project? You likely found plenty of bugs, but what other feedback did users provide? What feedback implies the need for new features?

Distribute poster paper, sticky notes and the Activity Guide - App User Testing Analysis. You will need to adjust the guide slightly for a website project. They will complete a chart that connects specific user observations to potential bugs or missing features. This will create a list of bugs/features to add to their next version.

Say: There are many roles and skillsets on development teams. Not all bugs or features are solved by programmers (Ex. inconsistent color, confusing text, complex layouts).

Once teams organize their feedback into the chart, they can move to brainstorming. Fill out a sticky note for each bug or feature identified:

  • Top of note: Write BUG or FEATURE.
  • Middle of note: Describe bug/feature and steps to reproduce issue if necessary
  • Bottom of note: Quick estimate of how long (in mins) it will take to fix bug or implement the feature. Explorers will have a chance to refine this estimate later.

On poster paper, draw the two charts on page two of the guide. For each sticky note, discuss if it is urgent and if it seems easy or difficult to implement. Based on that discussion, place the sticky in the appropriate quadrant.

Say: Which of the four categories should be the first that you tackle? The last?

Explorers will use feedback from the last round to implement changes that address the needs of their users. Each team will track and prioritize the features/bugs. They will use the “To Do”, “Doing”, “Done” chart to track the state of bugs/features. They will only have time to implement some of these fixes.

Each time an Explorer finishes a task, they should move the sticky from “To Do” to “Doing” and to “Done” when they finish implementation. Use this chart for a view of how each team is progressing. They should iterate until it works and focus on the one feature or bug that they selected. Ensure that each Explorer implements at least one fix or feature.

Explorers will reflect on their project experience. Refer to the Innovation Finale activity at https://www.exploring.org/activity-library-category/itech to review the options available. Choose the option that works best for your Exploring Post.

Activity 10: Innovation Finale (Time – varied)

Refer to the Innovation Finale activity in the Exploring Activity Library at www.exploring.org/activity-library-category/itech.

Activity 11: How to Debrief (60 minutes)

Refer to the How to Debrief activity in the Exploring Activity Library at www.exploring.org/activity-library-category/itech. In this activity, leaders and Explorers will complete their Last Day Surveys.

LEADER NOTE

Some sample questions are below. They are designed to help the participants apply what they have learned to their own interests. You are welcome to use these questions or develop your own questions that relate to your post or specific focus area.

REFLECTION

  • Reflect on your development of the CS Discoveries Student Practices – Page 9 (one per class) (Problem Solving, Persistence, Creativity, Collaboration, Communication). Choose one of the five practices in which you believe you demonstrated growth in this lesson. How did you exemplify this practice?
  • How did prototyping play a role in your project design? What changed from your first to second prototype? Could you apply this process to other projects in your life? Give some examples.
  • What was most difficult for you when developing your project? The easiest? Why?
  • How did you incorporate user feedback into your prototypes? How did this impact your project?

LEADER AND OFFICER REVIEW

After the meeting, address the following:

  • Identify what was successful about the
  • Identify what needed
  • Schedule an officer and leader planning meeting to prepare for the next post meeting or

Content for this session provided by Kiwi Compute (kiwicompute.com).

Links to other websites are provided for your convenience and information only. When you click on a link to another website, you will be leaving this website. The fact that we provide links to other websites does not mean that we endorse, authorize, or sponsor the linked website, or that we are affiliated with that website’s owners or sponsors. Unless otherwise indicated, the linked sites are not under our control and we are not responsible for and assume no liability for the content or presentation of any linked site or any link contained in a linked site, or any changes or updates to such sites. Your use of a linked site and its content is at your sole risk and may be subject to restrictions and/or limitations. Always take care to abide by the linked site’s terms of use, including any permission requirements/guidelines.

RESOURCES

Activity 3 Glossary

Bug: Part of a program that does not work correctly.

Critique: To critically evaluate in a detailed and constructive manner.

Empathy: In design, paying attention to a user's feelings and needs when designing a product.

Feature: Individual functional element of a software item, such as the ability to do something new, work across multiple platforms, or perform more efficiently

Input: A device or component that allows information to be given to a computer

Prototype: A first or early model of a product that allows you to test assumptions before developing a final version

Usability: How easy, efficient or satisfying it is to use a human-made object, device or software

User: Someone who uses an object, issncluding software and hardware.

DOWNLOAD THIS GUIDE
Links to other websites are provided for your convenience and information only. When you click on a link to another website you will be leaving this [document/website/etc]. The fact that we provide links to other websites does not mean that we endorse, authorize or sponsor the linked website, or that we are affiliated with that website’s owners or sponsors. Unless otherwise indicated, the linked sites are not under our control and we are not responsible for and assume no liability for the content or presentation of any linked site or any link contained in a linked site, or any changes or updates to such sites. Your use of a linked site and its content is at your sole risk and may be subject to restrictions and/or limitations. Always take care to abide by the linked site’s terms of use, including any permission requirements/guidelines.