Design Project 4: Design Iteration

What do we do?

You have created and tested a digital prototype for your design ideas using a prototyping tool. We have noticed some variations in quality, breadth, and depth of implemented prototypes across different teams in DP3. The goal of DP4 is (1) to iterate the current digital prototype, and (2) to prepare for in-class heuristic evaluation. You will keep your prototype within the prototyping tool and thus, we expect that you use hard-code features, realistic data, Wizard-of-Oz, and fake results. Keep focusing on the essentials: the user's task, scenario, and UI components to support them. In addition, your prototype design should reflect the good practices covered in class, in terms of output, input, visual design, layout, color, and typography. Optionally, accessibility and internationalization can be considered if applicable to your target users.

NOTE: You can keep improving your prototype after the studio and report deadline. Your score for this milestone will be based on the report and the UI available at the time of grading. We will notify a time period when grading will happen. In the next DP, you will show your interface to target users and get feedback. You can reflect their feedback into your interface and keep iterating until the final presentation.

You need to continue iterating your digital prototype that supports end-to-end scenarios and please focus on the following four aspects:

• Refine major tasks: Make sure that you finalize the major tasks to be implemented using digital prototypes. In DP3, we asked you to support at least three distinct tasks. Now it’s time to consider all key tasks that are essential to address user needs or POVs. These tasks should have a clear value proposition (or benefits to users). You only need to focus on a minimum viable product (MVP)---what are the minimal set of tasks that must be supported to make a successful product. Of course, there are some features that need to be supported to mimic realistic user experiences in real implementation scenarios (e.g., login). However, we want you to focus on the major tasks that are essential to address user needs. For each major task, we suggest you think about what value it brings to the users. The rest of minor features can be simplified without detailed interactions.
• Include user stories and backgrounds: Before you present your digital prototypes, it’s important to clearly depict the user stories or background information of your digital prototype. Since we’re focusing on evaluating digital prototypes, it is difficult to understand the goal of your digital prototype if the backgrounds are not clearly described. Communicate any relevant background information based on your POV and major tasks. Visual aids certainly help. As one way, you may want to expand the storyboards that you developed in DP2. Visualizing background information is essential for experts to conduct a heuristic evaluation using digital prototypes.
• Illustrate technologies: Your digital prototype may assume some technologies like AI, AR/VR, or IoT sensors. While you can go for wild ideas, you may want to provide some level of detail about the technologies used to realize your ideas. What are the required software and hardware tools? (If there are existing tools, you can refer to their names and show product images). Where should they be installed? How are they interconnected? How do we collect and process data and actuate different components? You may want to draw an architectural diagram just like a building map or computer organization diagram.
• Improve your digital prototype: In DP3, we asked you to focus on supporting three tasks (e.g., one prototype supporting three tasks). Since you re-examined your major tasks, user stories/background, and technology feasibility, we expect that you come up with an expanded or revised set of tasks. We want you to support these tasks by improving your existing digital prototypes. If your digital prototypes have poor quality, breadth, and depth, now it’s time to improve them. Look and feel must be similar to real applications. Although key features are hard-coded and operated via Wizard-of-Oz, your digital prototype should look like a real-world application with realistic data and support key (rough) user interaction steps to provide realistic (but scenario-driven) user experiences (only for major tasks).

Your Report #1

Your report should include:

• Prototype Iteration:
  • Link to your prototype
  • Representative screenshots: Include a few most important screenshots that showcase the uniqueness of your application.
  • Clearly describe how you improved your digital prototype from DP3.
  • Clearly illustrate how you revised the tasks or scenarios from DP3.
• Heuristic Evaluation Request Form: Now you need to prepare for the in-class heuristic evaluation by filling out the Heuristic Evaluation (HE) request form. We will provide a template for each team to use (sample report). You need to customize it with your own content. Your HE request Google Doc should be complete before the class. The description in the sample is just one way of describing tasks. One alternative is to capture the screenshots of each page and visualize how you would navigate them. You should think from the perspective of those who will evaluate your prototype based on the provided HE request form without any background knowledge. We will evaluate the quality of your HE form. The major components of the report are:
  • POV: Re-state the POV of your project.
  • Target users: In one sentence, say who your target users are.
  • Tasks: List three core tasks your prototype supports.
  • Backgrounds: Communicate relevant background information based on your POV and major tasks, which help heuristic evaluators without any prior knowledge of your prototype to better understand your digital prototype.
  • Technology illustration: Any technologies assumed in your digital prototypes must be clearly articulated (e.g., drawing an architectural diagram).

Your Report #2

During class, as you perform heuristic evaluation on another team's prototype, you need to fill out a heuristic evaluation worksheet. Please create a copy of this document to fill in your own content as an evaluator. This worksheet is individual work. Discussion with classmates is okay but your HE results should be unique. We will explicitly check for plagiarism.

Grading

• Prototype Iteration (30%)
  • Has the prototype improved from DP3?
  • Good usability? (e.g., learnable? efficient? safe?)
  • Screenshots are added?
  • Screenshots capture representative moments of the prototype?
  • The prototype captures the three tasks?
  • The prototype is complete in that it supports an end-to-end scenario?
  • The prototype is accessible and executable?
  • Instructions for running the prototype are clear?
  • The prototype follows good practices in visual design, layout, color, etc.?
• HE Request Form (40%)
  • Digital prototype URL provided?
  • Clear description of each URL provided?
  • Concrete goals?
  • Persona includes user scenarios, goals, and tasks?
  • POV & Tasks concisely described?
  • Visual illustration of major tasks provided?
  • Clearly communicate the relevant backgrounds based on your POV and major tasks?
  • Current description will help heuristic evaluators to better understand digital prototypes?
  • Any technologies used in your digital prototypes were clearly described?
  • Major tasks clearly described?
  • For each task, a sequence of steps specified along with screenshots?
• HE Evaluation Worksheeet (30%) -- graded individually
  • Evaluation target and goals: Clarity of scopes and goals?
  • List of usability violations: relevant with the heuristic evaluation guidelines?
  • Good coverage and quality of identified violations and suggested fixes?
  • Severity statistics of usability violations well summarized?
  • Overall recommendations: summary and recommendation clearly described? Actionable insights delivered?

Deliverables

Team Report: One report per team. Your report should be submitted as a zip file. The main report should be written in Markdown (please use the .md extension). Name the file with your team name, and submit it by the submission link provided. You can submit multiple times until the deadline, and we'll use the most recent version for grading.

Individual Report: You should email course staff at cs374@kixlab.org the Google Docs link to your own HE worksheet completed individually. → submit two HE worksheets to the Dropbox link above after converting them to PDF files. (Don't just copy&paste the link to your Google Docs). Name the PDF files as the following format: YourID_EvalTeamName1.pdf / YourID_EvalTeamName2.pdf