Introduction and Background

For this project you will prepare a proposal for a new concept that uses computing to solve a problem — much like an entrepreneur pitching a start-up idea or an employee (intrapreneur) presenting a new product idea inside their company.

While this project will focus on the research and conceptualization of an idea, the video below provides a broader overview of user experience design, including the research and evaluation components of the domain. This will provide a good context to think about the skills needed for this project.

The video below provides an introduction to the internet of things (IoT). This will help you think broadly about the possible applications of computing that goes well beyond desktop computers and phones, helping you get the creative juices going.

A Framework for Innovation and Problem Solving

It is important to determine the current context of a problem. Who are the stakeholders and what are the current outcomes? What is the narrative that explains how are they are attempting to solve the problem?

Proposing a solution requires you to 1) analyze the current state of the problem, 2) create several ideas for improvement, and 3) deliver the most appropriate solution as a proposal.

Student Objectives:

• Investigate a problem and its context

• Define the key stakeholders regarding the problem

• Identify opportunities for improvement using computing technologies

• Generate a proposal that thoughtfully presents the case for a particular solution to the problem.

Subject Areas: Computer Science, Business, Design, and Language Arts

Instructions

1. Investigate a problem and its context

Start with a problem topic (likely provided by your teacher) and investigate the details of the problem. You can do this through online research, interviews, surveys, and focus groups. Gather the following information.

• Who are the key stakeholders regarding the problem? A stakeholder is anybody that is affected by the problem. If we consider the problem of heart disease, for example, the patient is a clear stakeholder — but we should also consider health professionals, family members, friends, etc.

• What are the current methods of solving the problem and the outcomes? This is the competition, in essence, for any solution you develop. What are the detailed steps in the current methods? How well do the current methods work (outcomes)? Be specific on any shortcomings in the current methods.

• What is a succinct definition of the problem in a sentence or two?

This would be a great time to create a persona, like the one shown below.

2. Identify opportunities for improvement using computing technologies

Consider how computing technologies can be leveraged to solve the problem in a more efficient and effective way. Remember, computers are used in much more than phones and laptops. Smart devices of all types are fair game as you brainstorm ideas. Your concept doesn't have to be a physical product necessarily. It could be an idea for a computer algorithm that process data in a useful way, or it could be a media campaign to raise awareness on a topic on a big scale. Follow these steps as you develop ideas.

• Make a long list of ideas. You want a diverse set (wide range) of ideas. Don't judge ideas just yet, especially if you are working in a team. Give all your ideas time for consideration without shooting them down critically.

• Synthesize (mix) ideas. Reflect on all the ideas, make connections between ideas, and consider new variations by synthesizing ideas.

• Evaluate the ideas. Now consider each idea using a risk/benefit analysis — or simply, what provides the most "Bang for your buck". Estimate how much value ("bang" or "benefit") it can bring and how much effort ("buck" or "risk") it might take to implement. You could create a two-axis chart to visualize each idea on benefit and risk. Also, consider how it helps all the stakeholders. Below is an example of a mapping ideas on two axis for contemplation. You can choose what each axis represents.

• Determine the best idea and develop a value proposition. What is the elevator pitch for your solution? Develop a succinct value proposition that explains the problem, a key stakeholder, and the benefit the solution brings. Here is a template to get you started: For [describe target users] who [describe problem or need], [name of product] is a [describe type of product] that [describe benefit or value].

Example Value Proposition: For teachers who struggle with taking attendance all day or find it disruptive to the beginning of class, Attendance Checker is a device that will help make attendance easier for every class period of the day where students initiate the check-in as they enter the classroom.

3. Generate a proposal that thoughtfully presents the case for a particular solution to the problem.

Prepare a presentation to propose your concept and the background work you completed. Include the following elements (at a minimum) in your proposal.

• Solution Title and Contributors

• Background on the Problem Provide a clear description of the problem context — include stakeholders, current methods used to solve the problem, and importance of the problem. Be sure to site your sources of information and any data you incorporate. ★ If you made a persona, it would be a great visual to share here.

• Breadth of Ideas Considered Provide a quick summary of the ideas considered in an easy-to-view visual.

• The Value Proposition Provide a succinct and convincing value proposition and be prepared to explain the proposed idea in more depth. Also, prepare a prompt (or two) to get feedback from your audience on your proposal. Image that you are going to then invest time in developing it further.

Whether you teach math, language arts, history, or computer science – prepare for a short project that intersects computer science with other disciplines.

Introduction and Background

For this project you will prepare content for a flash card application and style the application, creating an engaging experience for other students to review study material — much like a product designer would do to create a fun experience with a product.

The video below provides a great introduction to cascading stylesheets (CSS) that will be needed to customize the style of the flash card application..

Student objectives:

• Prepare a spreadsheet table organizing study content for a course

• Connect the content to a flash card web application (template) to share publicly

• Style the application for a fun and engaging experience using Cascading Style Sheets

Subject Areas: Computer Science and Any Subject

Instructions

1. Prepare a spreadsheet table organizing study content for a course

• Determine the topic(s) of study to include in your flash card application.

• Make a copy of this template spreadsheet. You can begin to replace the terms and definitions to reflect your topic of study, but you can always come back to this for editing since it will be a live database for the flash card application.

2. Connect the content to a flash card web application (template) to share publicly

• Create a free Replit account. We will use Replit, a browser-based coding platform, to create our flash card application.

• Go to this Replit code for the flash card template and fork it (i.e. make a copy). You can rename the code workspace how you like. Try it out by clicking "run" to make sure the template works as expected.

• "Publish to Web" your Google Spreadsheet and copy the link using the CSV option.

• Then replace the link in the Replit script.js file with your link. You are changing the link in the spreadsheetLinkvariable. See the image below for reference.

• "Run" your Replit application once you have made this change and make sure the flash card application works as expected. If so, you are all set up with your flash card application!

3. Style the application for a fun and engaging experience using Cascading Style Sheets

As you update your spreadsheet with terms and definitions, you can begin to style your flash card application in the style.css file on Replit. Make some simple changes to color, for example, to start. Then you can dive into more advanced changes. Ultimately, you want to provide a fun and engaging experience that is appropriate for the content.

This is a good reference for the top CSS properties used 👉 https://lucidar.me/en/web-dev-class/lesson-2-09-most-used-css-properties/

W3Schools provides a great reference to the full breadth of CSS properties 👉 https://www.w3schools.com/cssref/default.asp

Advanced Option: Flash Cards with Images

Follow the same directions as above but use the following code and spreadsheet templates linked below.

• Replit.com code template with images folder and updated code In the images folder upload the images you will use on the flashcards. Be sure they are of a common image type, like .png or .jpg.

• Spreadsheet template with image column Under the image column add the filename of the image that belongs with that term and definition. Be sure to just use the filename along with the extension (for example myPic.jpg or myPic.png)

Introduction and Background

For this project you will sketch interfaces of a mobile or desktop application and generate a functional prototype to share with others for feedback — much like a product designer would do to test ideas.

While this project will focus on user experience prototyping, the video below provides a broader overview of user experience design, including the research and evaluation components of the domain. This will provide a good context to think about the skills needed for this project.

The video below provides a great overview of prototyping, including the tools and techniques used.

The video below provides pointers on how to sketch particular components, like buttons and form fields, that are efficient and easy to understand.

Student objectives:

• Envision a new mobile application interface

• Sketch an interface concept with multiple screens

• Generate a dynamic (functional) prototype (without coding)

• Evaluate the concept through feedback from others

Subject Areas: Computer Science, Engineering Design, Drawing and Art

Instructions

1. Envision a new mobile application interface

While you could create a fully new mobile app concept, we recommend that you choose an existing mobile app and re-imagine the interface and interactions for a particular task. For example, you could redesign the interaction sequence for adding emojis to a messaging app, or redesign the interaction sequence for accessing favorite destinations on a phone map application.

• Determine which mobile app you will prototype with a slight modification.

• Describe the modification you intend to make and why it may be an improvement. Try to come up with an interaction sequence that will require you to sketch three unique screen views. For example -- 1) a sketch of a messaging app screen with an empty message field, 2) on the user tap of an emoji icon, a sketch of the screen having an overlay of emojis to choose from, and 3) on the user tap of a particular emoji, a sketch of the inserted emoji in the message field.

2. Sketch an interface concept with multiple screens

Interface prototypes can be created with hand sketches, digital pen drawings, online wire-framing tools, or advanced graphics software. For this exercises we recommend hand sketching for it rapid and easy-to-use benefits.

• Sketch the screen views that represent the sequence of the interaction with the level of detail, style, and color required by your teacher. You can draw them on paper or a white board. Consider using a template like the ones found to help get the aspect ratio right and to keep features aligned.

• Edit and re-do sketches, several times if needed, to fine tune the concept. That is the power of hand sketches, you can create multiple versions rather quickly. Below is an example of rough sketches.

3. Generate a dynamic (functional) prototype (without coding)

There are many software tools available to help with prototyping interactions, but we recommend and the partner mobile app as an easy-to-use tool for creating a dynamic prototype.

• Create a new project in Marvel App for your prototype.

• Take some nice photos of your sketches to be imported into Marvel App. You can take regular snapshots and import them into the browser-based version of Marvel App or use the mobile app to get photos in directly.

• For each sketch, create the hotspots (or other options) that will link the screens together to simulate the app interaction. You can decide which options to use to fine tune the interactions -- like slides or fades.

• Test the interaction simulation and refine the sketches as needed.

4. Evaluate the concept through feedback from others

Now you want to share your prototype with others to have them use it (tap through the screens) and get feedback on the concept.

• Find at least five people to use your prototype to get feedback. Consider finding a diverse set of people to give you feedback. For example, consider using classmates, friends, and family members of all ages.

• Using the shareable link to your project in Marvel App or your own phone, have your participants try out your prototype. Give each person an introduction to your project and explain that you are testing the interface concept, not their abilities. This will help set them at ease and not feel like your are testing them.

• Summarize your key findings and be prepared to share the results and potential improvements you could make to the concept.

• Conduct a demonstration of your prototype with your class and present your summary of the evaluation results.

Introduction and Background

For this project you will evaluate an existing phone or computer application and develop a set of recommendations for improvement — much like a user experience researcher would do to incrementally improve a product or service.

While this project will focus on user experience evaluation, the video below provides a broader overview of user experience design, including the research and evaluation components of the domain. This will provide a good context to think about the skills needed for this project.

Recommended Reading

Examples for Documenting a Task Analysis

Below are two common ways to consider documenting a task analysis. One is tabular and the other is a diagram. No matter which method you choose it is important to capture the details of each step a person takes in completing the task. It is a good idea to go through each step and generate notes on any important features or potential problems along the way.

Usability Principles

Below is a great checklist to use when evaluating the usability of a product or service.

• Functionally Correct - Does the product simply do what it should?

• Efficient - Can tasks be completed in a timely manner that is appropriate for the context?

• Easy to Learn - Can a new user understand how to use it?

• Easy to Remember - Can a returning user quickly recall how everything works?

• Error Tolerant - Does the design keep people from making errors or at least allow them to fix errors?

• Subjectively Pleasing - Is the interaction engaging and provide a positive experience?

Student Objectives:

• Conduct a task analysis of an existing computer/phone product

• Complete a systematic review of the product's usability

• Develop a set of recommended improvements for the product

• Synthesize a report or presentation to share their findings and recommendations.

Subject Areas: Computer Science, Business, Design, Language Arts

Instructions

1. Conduct a task analysis of an existing computer/phone product

• Choose a computer application (mobile or desktop) that you will evaluate for a couple tasks. Find an application that has two tasks, each requiring at least three steps.

• Document a detailed step-by-step description of the tasks in a table or diagram format.

• Capture screenshot images for each step.

2. Complete a systematic review of the product's usability

• Review each step in your analysis and record notes on any important features or potential problems along the way.

• Go through each item in the usability checklist and note any room for improvement with the tasks.

3. Develop a set of recommended improvements for the product

• Based on your evaluation generate a list of improvements to consider, no matter how small or large.

• Review your improvement list and identify the top two changes that would provide the most benefit. Consider the effort needed to make the change as well.

4. Synthesize a report or presentation to share their findings and recommendations.

Generate a presentation that summarizes your evaluation and the recommended improvements. Include the following elements in your report.

• Title of Project and Contributors

• Description of the application evaluated

• Screenshots of the application

• The table or diagram of the task analysis

• A description (text, annotated images, or sketches) of the proposed improvements to be made.

• A prompt for the audience to provide feedback on your report.

Introduction and Background

For this project you will use machine learning tools to evaluate the sentiment of reviews on an article, story, or movie. You will also use machine learning tools to evaluate a question and answer application. These evaluation will give you an experience much like a natural language processing (NLP) researcher might do to evaluate the validity of an artificial intelligence product.

An Introduction to Natural Language Processing (NLP)

This video gives a quick introduction to NLP and the breadth of applications.

Recommended Reading

The article below goes into a lot of depth, but reading up to, and including, the section "What are Word Embeddings?" provides a good introduction.

Student Objectives:

• Prepare text to be processed with natural language processing

• Analyze the text using sentiment analysis and/or sentence encoding techniques

• Evaluate the results for the potential value and risk it brings

Subject Areas: Computer Science, Language Arts and Social Sciences

Instructions

1. Prepare text to be processed with natural language processing

We want to prepare two pieces of text for this project.

• A Collection of Reviews on a Work - This can be simple movie reviews, book reviews, or article reviews. You can collect reviews yourself using a Google form, for example. Your collection doesn't have to be huge. Twenty, or so, reviews collected in a simple document will work great for this project. We will use this to experiment with sentiment analysis, to determine if each comment is positive or negative.

• A Short Body of Text for Automating Questions and Answers - This can be a short story, company descriptions, or brief article. We will use this text to create an automated question and answer application, where the computer will attempt to answer a user's question based on the source text.

2. Analyze the text using sentiment analysis and/or sentence encoding techniques

• Sentiment Analysis Use this online tool to complete a sentiment analysis on your collection of reviews. Once your process the reviews, copy the results of the analysis into a text document for your own records.

• Automated Question and Answer Use this online tool to conducted an experiment of automating answers to questions about your chosen body of text. Prepare at least 7 questions about the body of text and record the provided answer for each question.

3. Evaluate the results for the potential value and risk it brings

• Evaluate the Sentiment Analysis

  • Performance: How accurate was the analysis? Did the algorithm do a good job? What seems to give it problems? Write a short summary of your findings.

  • Applications: What would be some appropriate applications of this technology? What might be some less appropriate uses for it?

• Evaluate the Question and Answer Tool

  • Performance: How accurate was the answers? Did the algorithm do a good job? What seems to give it problems? Write a short summary of your findings.

  • Applications: What would be some appropriate applications of this technology? What might be some less appropriate uses for it?

• Prepare a Presentation of Your Project In addition to the evaluation summaries, include a summary of the source texts you used and samples of the results from the NLP tools.

Introduction and Background

For this project you will collect or generate some data and create a set of charts to include in a web-based report on the data — much like a data scientist may do to communicate data findings.

A Quick Intro to Data Science

Student Objectives:

• Generate or collect data on a topic or from an experiment

• Process and prepare the data for visualization

• Design a custom report with charts

• Program the dashboard for public access through the web

Subject Areas: Computer Science, Math, Science, and Engineering

Instructions

1. Collect data on a topic or experiment and prepare the data

• Your first step is to collect your data. This can be data you download from the internet, data you collected in a science lab, or data you generated in a spreadsheet based on mathematical formulas. You want to have enough data to generate two or three charts for your report.

• Review and clean the data as needed in a spreadsheet. Create a simple table(s) of your data in a spreadsheet and make sure the formatting is consistent and there are no missing data points etc.

• Export each data table to a CSV (Comma Separated Values) file. This is a common export feature in spreadsheets. Ensure that the column labels are the first row and that the remaining rows are data from your table.

2. Design a custom report with charts

• Review the data you have and determine the appropriate chart types to use. Will your tables require bar charts, scatter plots, line charts, histograms, or pie charts?

• Generate a quick sketch outlining your report layout. This does not have to be fancy. It can be a quick sketch that communicates the overall design idea and useful for conversation, like the one below.

3. Program the dashboard for public access through the web

• Create a free Replit account for programming your report.

• Create a fork (copy) of this report template. Once you click "Run" you should see the screen shown below.

• Upload your CSV files to your Replit workspace. ⚠️ Pie charts and donut charts will not work with any zero values. It is a current bug in the RoughViz library. The work around is to replace any zero values with 0.000001 or similar. Other chart types should work fine with zero values.

• Modify the template code for one of the charts to use your data and the appropriate chart type. This will take some time and trial-and-error! Once you are successful, repeat the process for the rest of your data.

• Fine-tune the formatting of your charts.

• Modify the text in the HTML with your chart descriptions and headings.

• Share your report with five people for a quick review and feedback. Make improvements as needed.

• Great job!