Assignments
Application Concept Recommendations
In this course you will be designing a series of prototypes for hypothetical web applications. The below list of application concepts are simply ideas to get you thinking about the type of application you would like to prototype. Be sure to discuss your application concept with your instructor before beginning an assignment.
- Online email client
- Online music sharing tool
- iPhone application
- Photo management and sharing application
- Social networking identity aggregator and management tool
- Mailing list management system
- Facebook application
- Online game
- Online file management and sharing system
Paper Prototype
Create a prototype using any number of analog tools, including: paper, pen/pencil, tape, scissors, cardboard, transparency sheets, dental floss or other.
| Criteria | Performance Quality | Score | |||
|---|---|---|---|---|---|
| 0 points | 1 point | 2 points | 3 points | ||
| Effective Use of Paper Prototyping Methods | Prototype was not completed on time, does not show multiple states or pages, contains no interactivity. | Prototype was completed on time, shows multiple states or pages, but has little if any interactivity. | Prototype was completed on time, shows multiple states and/or pages, uses handlebars for GUI widgets, incorporates basic interactivity like show/hide, or pop-up/overlay windows. | Prototype was completed on time, shows multiple states and/or pages, uses handlebars for GUI widgets, incorporates basic interactivity like show/hide, or pop-up/overlay windows, incorporates advanced interactivity like sliders and multiple interactive elements (e.g. sliders with overlays and show/hide interactivity). | |
Interactive Prototype
Building upon the paper prototype you just created, make a revised version using Fireworks, Axure, PowerPoint, or another tool that lets you rapidly iterate through your ideas. Your prototype should show interaction state, feedback messages, and simulate dynamic data display. Be sure to improve upon your previous prototype by addressing instructor and peer feedback in this iteration. Present your prototype to the class to receive feedback and share your experiences using the tools you selected.
| Criteria | Performance Quality | Score | |||
|---|---|---|---|---|---|
| 0 points | 1 point | 2 points | 3 points | ||
| Effective Use of Prototyping Methods | Prototype was not completed on time, does not show multiple states or pages, contains no interactivity. | Prototype was completed on time, shows multiple states or pages, but has basic interactivity that only moves between screens. | Prototype was completed on time, shows multiple states and/or pages, incorporates interactivity using Pages and States to show moderate interactions like rollovers and pop-ups. | Prototype was completed on time, shows multiple states and/or pages, incorporates interactivity using Pages and States to show interactions like rollovers and pop-ups, and creatively uses advanced features to deliver a high fidelity outcome. | |
HTML Prototype
Create an HTML prototype of an application interface of your choice (see application interface suggestions). Discuss your project concept with your instructor prior to beginning the assignment. Using HTML, CSS, and a JavaScript framework of your choice, create a prototype that simulates data storage, data retrieval, and other interaction patterns necessary for your application concept.
Do not focus on design aesthetics or branding, but ensure your prototype has a clear information hierarchy, is professional, and usable.
| Criteria | Performance Quality | Score | |||
|---|---|---|---|---|---|
| 0 points | 1 point | 2 points | 3 points | ||
| Effective Use of HTML Prototyping Methods | Prototype was not completed on time, does not show multiple states or pages, contains no interactivity. | Prototype was completed on time, shows multiple states and/or pages, but interactivity is limited to "slap and map" model. | Prototype uses HTML and CSS. Prototype was completed on time, shows multiple states and/or pages, moderate interactivity allows users to move through the experience, Ajax style transitions are faked with multiple pages. | Prototype uses HTML, CSS, and JavaScript. Prototype was completed on time, shows multiple states and/or pages, moderate interactivity allows users to move through the experience, uses a JavaScript framework like jQuery, Prototype, or YUI! for Ajax style interactions. | |
Review of Peer’s Prototype
Critique your peer’s prototypes based on the design studio method outlined in the course. Critiques should provide 2–3 things you think are strong about the proposed design solution, 1–2 criticisms or things you think should either be improved, aren’t clear in the prototype, or clearly missed the stated audience and intent of the prototype. Critiques should focus on the form and function of the prototype more than the actual visual aesthetics of the prototype.
| Criteria | Performance Quality | Score | |||
|---|---|---|---|---|---|
| 0 points | 1 point | 2 points | 3 points | ||
| Quality of Critique | Critique was not conducted on time, does not include 2–3 positives and 1–2 criticisms. | Critique was conducted on time, but includes less than the required 2–3 positives and 1–2 criticisms. | Critique was conducted on time, includes 2–3 positives and 1–2 criticisms, but critiques and suggestions are focused on non-solution elements (e.g. visual aesthetics, aspects that should be addressed through visual design instead of form and function) instead of the actual design solution. | Critique was conducted on time, includes at least 2–3 positives and 1–2 criticisms, critique is focused exclusively on the design solution, critique provides real recommendations for improvement. | |
Prototype Usability Test
Create and conduct a usability test of your prototype. Using the templates at http://usability.gov/templates/ as a starting point, create a test screener, and a test plan. Identify five users for your test. Carry out the test, then prepare a usability report outlining the results and identifying recommendations for improving the prototype. Adjust your prototype accordingly and submit it along with the testing instruments and report.
| Criteria | Performance Quality | Score | |||
|---|---|---|---|---|---|
| 0 points | 1 point | 2 points | 3 points | ||
| Test Screener | Test screener is poorly presented, has many spelling and/or grammar errors, contains a poorly written series of questions to identify test subjects, and was completed by fewer than 5 subjects. | Test screener is poorly presented, has some spelling and/or grammar errors, contains some poorly written questions to identify test subjects, and was completed by 5–7 subjects. | Test screener is professionally presented, has no spelling or grammar errors, contains a relatively well written series of questions to properly identify appropriate test subjects, and was completed by at least 7 subjects. | Test screener is professionally presented, has no spelling or grammar errors, contains a well written series of questions to properly identify appropriate test subjects, and was completed by at least 10 subjects. | |
| Test Plan | Test plan is very poorly presented, has many spelling and/or grammar errors, and contains poorly written tasks that do not properly test all key areas of the prototype. | Test plan is poorly presented, has some spelling and/or grammar errors, and contains some poorly written tasks that do not properly test all key areas of the prototype. | Test plan is relatively well presented, has no spelling or grammar errors, and contains well written series of tasks that test all key areas of the prototype. | Test plan is professionally presented, has no spelling or grammar errors, and contains an exceptionally well written series of tasks that test all key areas of the prototype. | |
| Usability Report | Report is very poorly presented, has many spelling or grammar errors, does a very poor job of assessing the usability strengths and shortcomings of the prototype, and makes very few good recommendations for improving the prototype. | Report is poorly presented, has some spelling or grammar errors, does a poor job of assessing the usability strengths and shortcomings of the prototype, and makes few good recommendations for improving the prototype. | Report is professionally presented, has no spelling or grammar errors, does a good job of assessing the usability strengths and shortcomings of the prototype, and makes relatively good recommendations for improving the prototype. | Report is professionally presented, has no spelling or grammar errors, does an exceptionally good job of assessing the usability strengths and shortcomings of the prototype, and makes intelligent recommendations for improving the prototype. | |
| Revised Prototype | The revised prototype does not effectively incorporate the feedback and data gathered in the usability test, or is not a significant improvement over the prior iterations because the test was poorly executed resulting in flawed data. | The revised prototype incorporates some of the feedback and data gathered in the usability test, but the prototype does not exhibit significant improvements in the design solution. | The revised prototype incorporates the feedback and data collected in the usability test resulting in a somewhat improved interface design solution. | The revised prototype incorporates the feedback and data collected in the usability test resulting in a more appropriate and usable interface design solution. | |