A6: Ready for testing – DUE Friday, Nov. 16 @ 12:30am

It's crunch time! Your interactive webpage prototype needs to be ready for user testing by this deadline.

Step 1: Complete App's Functionality

By this deadline, your app should be completely finished and functional in terms of interactions (don't worry about finalizing detailed visual styles). If you're not on track to finishing, it's time to step up the pace.

Your app should also have a working login system if it requires user accounts. However, it can be simple, so don't go overboard with complexity here since it's not the most interesting part of your app; just put fake usernames/passwords in your JavaScript files. Make sure they are easy for your TA to type in when they are grading and include them in your submitted PDF so your TA knows how to log in.

Your app should have several webpages where users can submit and view their own data, which can be stored in their browser's localStorage (or on a real database in a server backend if you prefer). Use the feedback you received in studio to help determine what changes or improvements to implement.

Remember, we are not at the "making it look good" phase yet, so don't spend time on aesthetics unless all other components are already complete. Your user testing results next week will be much less insightful if your interface is still half-finished and buggy. So focus on finishing the interactions.

If you are creating a mobile web app, now is also the time to make sure your app fits into a mobile form factor, use Google device mode to help with this, or test on your own mobile devices.

Note that for this project, you will need to only implement web frontend functionality with HTML/CSS/JavaScript. You can simulate backend database functionality with localStorage. If you want to implement a real backend, then go for it, but it's not required.

Step 2: Develop a Protocol

For A7, you will be testing your app with real users. In preparation for next week, you will develop a protocol for testing your app. You will be using this protocol to do user testing throughout next week.

Protocols, or "usability scripts," help keep tests consistent across testers and facilitators. It gives exact, step-by-step instructions on how to test a user, often down to the exact words that the facilitator will say. Write a user testing protocol that covers:

  • Preparation and setting up
  • Gaining informed consent using this form
  • Executing the test, identify who does what
  • Written instructions that you will read to the testers, and any other materials (e.g. questionnaires, interview questions) that will be used during the user testing session. (Include username/password information for logging in here if necessary.)
  • How your observations will be recorded
  • Debriefing the tester and a team debrief

Your protocol should be ~1-2 pages.

Step 3: Update Development Plan

Follow the development plan you created last week, and update it as you go. Mark tasks that have been completed and add new ones if you need to. Make sure that your next week is planned out with goals and who is responsible for each task. Be sure to add tasks for future weeks as well.

Student Examples

Here are some examples of development plans. If you want, use File -> Make a copy... to copy over the formatting for each spreadsheet to form the basis for your own plan.

  • (1) is very stylized, dynamic, and mostly thorough,
  • (2) is fairly thorough, colorful, but is missing time estimates and has only one stretch goal listed,
  • (3) is a mediocre plan that's mostly thorough, where most tasks are broken down into less than 1 hour chunks,
  • (4) is very thorough, with time estimates and time costs, but some tasks could be more actionable,
  • (5) is a great video of the dynamic nature of implementation plans throughout the project.

GradeSource++: This example project abstracts away GradeSource for you and works with the data to show you where you are in a class.

Balancr: This app helps people balance their time between work and play. This team has done a wonderful job making the app functional-- you can create a sign-up, add activities, and see it reflected on the pie chart.

Assignment Submission

Submit a single well-formatted PDF file for your entire team with the following items concatenated within it:

  • Names and PIDs of all of your team members, along with your team name. (If you forget someone's name, they will not get credit for this assignment.)
  • The URL of the app prototype that you want us to see and grade. Note: the URL must work at least until your assignment is graded. If it doesn't work, you'll receive no credit. Very important: the contents of this URL should not change in the upcoming week while your TA is grading this assignment, or else that is a violation of the academic honesty policy; test your new changes at a different URL. Also, if you are doing a mobile app, let us know which mobile platform you have tested it for: Android, iOS or mobile emulator on Chrome or some other browser (Complete App's Functionality)
  • The public GitHub URL for your project's source code.
  • The protocol to test users for A7 and the blank consent form you will be presenting to users. (Develop A Protocol)
  • The PDF of your development plan that you submitted last week for A5. (Look up how to join multiple PDFs into one single PDF submission.) (A5 Development Plan)
  • The PDF of your updated development plan. (Look up how to join multiple PDFs into one single PDF submission.) (Updated Development Plan)

Note: since we may grade your assignment up to a few days after submission, per the honor code, we expect that the prototype URL show the state of your prototype at the time of submission. You will very likely be updating your prototype after submission, but please do so on a separate URL.

Submit your single formatted PDF in Gradescope to the bin for your studio section. Only one team member needs to submit on behalf of the entire team.

Evaluation criteria & Grading rubric

The rubric below contains criteria that are worth one point each and will be graded independently and in a binary fashion.

  1. Prototype is at least somewhat functional in a non-trivial way.
  2. Prototype is fully functional.
  3. Prototype is free of major bugs and ready for user testing. (2 points)
  4. While not fully polished, the overall look and feel is reflective of the final prototype.
  5. Prototype's interaction flow is easy to understand. First-time users can go from screen to screen and know what functions they can perform.
  6. All of your code is publicly viewable on GitHub.
  7. Protocol gives step-by-step instructions on how to perform the user testing; it could be used by another person to reproduce the same user test.
  8. Protocol includes verbal scripts, which include the exact words that a facilitator would say to the participant, to ensure consistency across all tests.
  9. Protocol is well-designed. It is clear why specific steps are taken & the instructions and verbal scripts do not bias/lead the user in one particular direction.
  10. Protocol plans to test a completed feature of the app that contributes meaningfully to the app's overall goal.
  11. Development plan is included as a PDF, is easy for your TA to read and understand, and has been updated to show progress and additional tasks in the new version compared to the previous week.
  12. Extra credit (up to 2 points) - In addition, your TA can give your team up to 2 extra credit points if your app is extraordinarily polished by this deadline, which provides an incentive to get work done early and to go above and beyond the basic requirements.

Due In Studio: Teammate Assessment

During studio, click here to assess how each of your teammates contributed to this assignment.

Frequently Asked Questions

Q: What web frameworks or open-source tools can we use?

A: Anything you want, as long as you can meet the requirements of each assignment's rubric. Note that the teaching staff may not be able to help you beyond what is covered in the labs, so choose wisely (i.e., make sure the entire group is comfortable with the stack and none of you is burdened to handle things alone). We will only officially support the web stack that we teach in labs, so if you go above and beyond this basic stack, then make sure your team is fully comfortable using your chosen tools.

Q: Where can I find more web development tutorials and resources?

A: As a starting point, check out our web dev resources section.