Now that you have chosen a design, it is time to iteratively refine that design. This group assignment, spanning multiple weeks of the course, tackles the problem of getting the design right through paper prototyping, inspection, and usability testing. Design refinement culminates in a digital mockup.
This is a group assignment, consisting of five milestones.
The goal of this milestone is to develop an initial paper prototype that will begin to allow testing of your design.
Develop a paper prototype for your design. It should convey all critical aspects of your design, including support for testing your two primary tasks.
This prototype has been informed by your prior sketching and storyboarding. But it also contains more details than your prior exploratory designs. If necessary or appropriate, revise your tasks or scenarios based on what you learn in prototyping.
Note these samples are intended to illustrate a variety of approaches, none of which is intended to be ideal or exemplary. Also note that details of assignments may have changed since prior offerings, so these samples may not completely correspond to the current project. Be sure to understand and carefully consider project requirements and feedback from the course staff in the context of your own work. Samples from prior offerings include:Samples from Prior Offerings
No more than one page of text in PDF format.
Capture and submit detailed images of your paper prototype. Include:
Images do not count against your page limit, and are therefore effectively free. You should embed images throughout your PDF, keeping them near the text that references them. The limit applies to the approximate amount of text you would have if all images were removed.
Submit via Canvas here:
In-Class Exercise: In addition to your submission, bring your prototype to class. You will need it to conduct a heuristic evaluation during class.
Submit a
This milestone will be graded on a scale of 12 points:
The goal of this milestone is to conduct heuristic evaluations as part of rapidly iterating on your paper prototype.
You will receive an evaluation in class, and you will supplement this with another evaluation.
In class, pair with another team to conduct heuristic evaluations. One team will conduct a heuristic evaluation of the other’s paper prototype, then the two teams will reverse roles. Each team will therefore conduct and receive one heuristic evaluation.
We will provide a worksheet with Nielsen's heuristics:
For each issue identified in evaluation, record:
Revise your paper prototype based on what you learn in heuristic evaluation. Your tasks and scenarios are likely stable, but revise them if your evaluation reveals a need.
Outside of class, arrange to receive a second heuristic evaluation with another team. You therefore received two heuristic evaluations of your paper prototype. If desired, you may also conduct a heuristic evaluation or cognitive walkthrough of your own paper prototype.
Records of your inspection-based methods will be submitted as part of later assignments.
Be sure to keep detailed records, including images of relevant portions of the prototype before and after revisions.
The goal of this milestone is to document changes resulting from your inspection-based analyses and to begin usability testing of your revised prototype with participants.
Complete one usability test with your paper prototype, examining your two primary tasks.
Target an appropriate participant based on your design research and resulting design.
Be sure to divide your team into roles when conducting a usability test. There is simply too much required for a single person to effectively conduct a test. As discussed in class, roles include the facilitator, the computer, and one or more observers.
As part of your introduction, have your facilitator show the participant how to interact with your design. Do not show participants how to perform your tasks that you will later test. Instead show them how paper prototyping works, how your system generally works, and give an example of something specific that is sufficiently different from your tasks.
During the test, record a log of critical incidents, including both positive and negative events. For example, a person might comment on something they like or might make a mistake in a task. Record the incident along with a description of the context of the incident.
Consider recording your tests to allow you to see and show exactly what happened. If you do this, obtain permission from the participant and ensure your recording preserves the anonymity of the participant. Frame your shot such that you capture interaction with the prototype without unnecessarily capturing the participant.
Each participant should perform both of your primary tasks. Keep the data separate for each participant and each task. Remember participation must be voluntary, participants should be free to stop at any time, and you should emphasize that your focus is on identifying usability issues in the design.
Revise your paper prototype based on what you learn in usability testing. This can and should include fixing major issues as soon as they are detected, before additional tests. Your tasks and scenarios are likely stable, but revise them if your evaluation reveals a need.
Present your iterative revisions and your plan going forward:
Present a table or list of results from your inspection-based methods. For each identified issue, include:
Discuss your first usability test. Provide a description of the test, including the participant, the environment where you conducted the test, why you chose this participant and environment, the test protocol, and the roles of each team member who participated in the test. Discuss anything you learned about the testing process itself, or any revisions you decided you need to make to your testing process.
Present a table or list of results from your first usability test. For each critical incident, include:
Submit detailed images of your current paper prototype, as revised in this process. Include both:
Present your plan for the remainder of your usability tests. Describe what goals you have for the additional tests and any new approaches you will employ. You will conduct one usability test in section, describe your plans for recruiting an additional participant.
As you assemble this documentation of the iterative improvement of your design, you may find that some changes feel minor relative to the overhead of documenting those changes. Your goals in this documentation are to:
You may choose to not fully document minor changes, but be sure to document enough for these two goals.
Note these samples are intended to illustrate a variety of approaches, none of which is intended to be ideal or exemplary. Also note that details of assignments may have changed since prior offerings, so these samples may not completely correspond to the current project. Be sure to understand and carefully consider project requirements and feedback from the course staff in the context of your own work. Samples from prior offerings include:Samples from Prior Offerings
No more than three pages of text in PDF format.
Images do not count against your page limit, and are therefore effectively free. You should embed images throughout your PDF, keeping them near the text that references them. The limit applies to the approximate amount of text you would have if all images were removed.
Submit via Canvas here:
Be prepared to discuss your iterative revision of your paper prototype.
In-Section Exercise: In addition to your submission, bring your prototype to section. You will need it to conduct a usability test during section.
Submit a
This milestone will be graded on a scale of 14 points:
The goal of this milestone is to complete usability testing of your prototype with participants.
Complete a total of at least three usability tests and finalize your paper prototype according to what you learn.
Present the results of your usability testing and your final paper prototype:
Discuss your three usability tests. Provide a description of each test, including the participant, the environment where you conducted the test, why you chose this participant and environment, the test protocol, and the roles of each team member who participated in the test. Briefly discuss revisions you made in your process and prototype over the course of your testing.
Present a table or list of results from your three usability tests. For each critical incident, include:
Submit detailed images of your final paper prototype, as revised in this process. Include both:
Discuss two to four revisions that you consider to be your most salient and important modifications based on issues identified in inspection, usability testing, or critique. These may already be included in the above list, but discuss them in more detail and argue why detecting and fixing them is important to your design.
As you assemble this documentation of the iterative improvement of your design, you may find that some changes feel minor relative to the overhead of documenting those changes. Your goals in this documentation are to:
You may choose to not fully document minor changes, but be sure to document enough for these two goals.
Note these samples are intended to illustrate a variety of approaches, none of which is intended to be ideal or exemplary. Also note that details of assignments may have changed since prior offerings, so these samples may not completely correspond to the current project. Be sure to understand and carefully consider project requirements and feedback from the course staff in the context of your own work. Samples from prior offerings include:Samples from Prior Offerings
No more than three pages of text in PDF format.
Images do not count against your page limit, and are therefore effectively free. You should embed images throughout your PDF, keeping them near the text that references them. The limit applies to the approximate amount of text you would have if all images were removed.
Submit via Canvas here:
Be prepared to discuss your iterative revision of your paper prototype.
Submit a
This milestone will be graded on a scale of 14 points:
The goal of this milestone is to transition your prototype into a digital mockup of your design.
Create your digital mockup based on your final paper prototype. Do not begin working in digital prototyping until you finish revising your paper prototype. It is much easier to iterate on your design in the paper prototyping phase.
As you transition into digital prototyping, you will need to consider other aspects of the design. This can include detail you may not have previously considered (e.g., visual design, layout, color, typography), but can also include constraints or mismatches introduced by the technology itself. Note decisions or changes you need to make as you transition from paper to a digital representation.
The mockup should effectively communicate your design in a manner appropriate for your web content, presentation, and poster. Implement your digital mockup to include key frames that illustrate your design. It should convey all critical aspects of your design, including walkthroughs for your two primary tasks.
We have no strong preference regarding what digital tools you use to create your mockup. But it must be digital (e.g., you may not use pictures of a hand-drawn sketch). Some tools support creation of interactive mockups (e.g., allow clicking active regions to move between screens). You are welcome to use such a tool, and such interactivity may be helpful in your video. But interactive mockups are neither expected nor required.
Commonly-used tools include:
Present your digital mockup together with discussion of the decisions and changes you made:
Submit detailed images of your digital mockup. Include both:
Discuss decisions and changes you made in implementing the digital mockup.
As you assemble this documentation of the iterative improvement of your design, you may find that some changes feel minor relative to the overhead of documenting those changes. Your goals in this documentation are to:
You may choose to not fully document minor changes, but be sure to document enough for these two goals.
Note these samples are intended to illustrate a variety of approaches, none of which is intended to be ideal or exemplary. Also note that details of assignments may have changed since prior offerings, so these samples may not completely correspond to the current project. Be sure to understand and carefully consider project requirements and feedback from the course staff in the context of your own work. Samples from prior offerings include:Samples from Prior Offerings
No more than one page of text in PDF format.
Images do not count against your page limit, and are therefore effectively free. You should embed images throughout your PDF, keeping them near the text that references them. The limit applies to the approximate amount of text you would have if all images were removed.
Submit via Canvas here:
Be prepared to discuss your digital mockup and revisions that occurred in its creation.
In-Class Exercise: In addition to your submission, bring a printed copy of your digital mockup (i.e., a color print of this submission). You will need this for in-class critique.
Submit a
This milestone will be graded on a scale of 14 points:
The goal of this milestone is to effectively communicate your design prototyping in a presentation.
Prepare a presentation of your process in getting the design right. It should encompass all of your work in Assignment 3.
A suggested organization of this presentation is:
Title Slide:
A short, creative, and marketable title capturing the key idea.
Include team member names. Be clear which team members are presenting.
Overall Problem:
Convey that your problem is both important and appropriate for a design investigation.
Motivate your audience to be interested in your problem and your proposed solution. Remember that you are teaching us what you learned in your process, you are not "selling" your solution. Be sure to avoid simply reading slide bullets, as you need to develop a connection to your audience.
Initial Paper Prototype:
Present your initial paper prototype. Convey the critical aspects of your design, including the two primary tasks being refined in your paper prototype.
Testing Process:
Present your process for iteratively improving your design, including:
Testing Results and Prototype Refinement:
Present usability and design issues that you identified and iterative improvements you made to address those issues. This will include changes from your heuristic evaluation, usability testing, and design critique.
Discuss identified issues as an appropriate level of detail, including:
Final Paper Prototype:
Present your final paper prototype. Convey the critical aspects of your design, including the two primary tasks. This might be shorter than your presentation of the initial paper prototype, because you already presented changes and are about to present the digital mockup. This might also have been part of your testing process and results, if changes were illustrated there.
Digital Mockup:
Present your digital mockup. Convey the critical aspects of your design, including the two primary tasks. Discuss any significant changes that were required when transitioning from a paper prototype.
We strongly recommend rehearsing your presentation beforehand. For example, arrange to practice together with another group or two, giving each other feedback on your presentations.
Note that we have not set a required number of slides in each section of this presentation. You can deliver your presentation using as many or as few slides as you want, as long as your presentation successfully addresses the above points in the allowed time.
Note these samples are intended to illustrate a variety of approaches, none of which is intended to be ideal or exemplary. Also note that details of assignments may have changed since prior offerings, so these samples may not completely correspond to the current project. Be sure to understand and carefully consider project requirements and feedback from the course staff in the context of your own work. Samples from prior offerings include:Samples from Prior Offerings
Your presentation may be in PPT, PPTX, or PDF format.
To minimize switching time, we will have all presentations on a single laptop running Microsoft Windows. You should optimize your presentation for portability (e.g., ensure any necessary fonts are embedded). If we detect any obvious formatting issues on the presentation machine, we may fix them or contact you to fix them. But you are ultimately responsible for your presentation.
Submit via Canvas here:
Names of participants should be replaced with pseudonyms in all documents. It is important to protect participant anonymity, even in the case that reporting seems harmless.
Submit a
The course staff will have a grading form they keep during your presentation:
The content of this presentation will be graded on a scale of 16 points:
The delivery of this presentation will be graded on a scale of 4 points:
The goal of this milestone is to effectively communicate your design prototyping in a post appropriate for a web portfolio.
Prepare a post documenting your process of getting the design right. Your post will be integrated into the course website via a Projects page, used to both advertise the course poster session and to provide an archive of course projects. Your post should follow the outline below, and will be posted together with the content from your prior post.
Your prior milestones provide significant content you can draw upon in this post, but this post is intended for an audience of future readers reviewing your design work. Not all of the content from prior milestones is included (e.g., you will convey both specific usability issues and higher-level findings, but do not need to provide an exhaustive enumeration of changes made in your processes), you should update your prior work based on feedback received throughout your design process, and you may choose to omit elements of your work that were ultimately less relevant to your design process.
Title
A short, creative, and marketable title capturing the key idea.
Problem and Solution Overview:
A concise statement of the problem you are addressing and a brief introduction of your proposed solution.
It is appropriate to assume that a reader of this post will have already read your previous post. Therefore briefly set context for your iterative design in Assignment 3 without repeating the full context from Assignment 2.
This could be organized as an introduction of key themes from your design research and how that motivated your initial design.
Initial Paper Prototype:
Present your initial paper prototype. Convey the critical aspects of your design, including the two primary tasks being refined in your paper prototype. This provides a baseline upon which to report iterative prototyping and refinement of your design.
Testing Process:
Present your testing process, including your method and your participants. This process probably evolved in the course of your testing (e.g., as your design or focus evolved through testing). Include a retrospective on how you refined your process, distinct from how you refined your design.
Testing Results and Prototype Refinement:
Present usability and design issues that you identified and iterative improvements you made to address those issues. This will include changes from your heuristic evaluation, usability testing, and design critique.
Discuss identified issues as an appropriate level of detail, including:
Consider different potential organizations of your results and design progression, including:
Final Paper Prototype:
Present your final version of your paper prototype, as you did for your initial paper prototype above. Convey the critical aspects of your design, including the two primary tasks being refined in your paper prototype.
Digital Mockup:
Present your digital mockup. Convey the critical aspects of your design, including the two primary tasks being refined in your paper prototype.
Include descriptions of how your design supports each of your primary tasks (e.g., as scenarios demonstrating the task in your final design). Briefly reflect on any changes you needed to make as you switched to digital tools from your paper prototype.
Ensure your post is appropriately clear and easy to read. This includes:
Note these samples are intended to illustrate a variety of approaches, none of which is intended to be ideal or exemplary. Also note that details of assignments may have changed since prior offerings, so these samples may not completely correspond to the current project. Be sure to understand and carefully consider project requirements and feedback from the course staff in the context of your own work. Samples from Prior Offerings
Evidence suggests that effective posts can be read in approximately 7 minutes:
Author your post such that it conveys the necessary content while remaining easy to skim and read within approximately 7 minutes. We estimate posts will be between 1500 and 2000 words in length.
You post must be a plain text file, formatted in Markdown syntax:
Name the file designprototyping.md. In addition to your Markdown file, you will also need to provide:
img tags directly in your Markdown,
thus allowing you to specify the rendering size of the image.Your Markdown file and all images should be submitted as a single Zip archive file, as Canvas will otherwise mangle the names of your image files. Note that these files will be placed in the same directory as files from your prior post, so ensure there are no naming conflicts in your image files.
For guidance on formatting your Markdown and its included images, see the source files from prior posts:
Submit via Canvas here:
Names of participants should be replaced with pseudonyms in all documents. It is important to protect participant anonymity, even in the case that reporting seems harmless.
Submit a
Your post should be complete and will be evaluated as such. But you will also be able to make later modifications as we integrate your post into the course website (e.g., to correct any formatting issues) or as your project evolves (e.g., if your project title later changes).
This report will be graded on a scale of 24 points: