Code.org Innovation Design Process: Web App

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.

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.

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.

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?

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.

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.

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.

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.

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.

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

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.