Go back to top

Toggle Light / Dark / Auto color theme

Toggle accessibility options

Toggle page contents sidebar

Milestone 3: Design Alternatives

Due Date

FRI 2023-04-14 @ 11:55 PM EDT via Piazza @23.

Introduction

In this milestone, your team will follow a design process that involves several activities that will help you explore a large number of alternative designs for your proposed solution in way that keeps the work manageable when the process is followed in good faith. You will define a set of UX requirements for your proposed solution, conduct team ideation sessions to discover design alternatives for those requirements, and render a subset of those designs in varying levels of fidelity using mockups and wireframes.

NOTE: You will NOT and should NOT produce a usable prototype of your proposed solution for this milestone; instead, the activities for this milestone will help you narrow down the alternative design space so that you can devote the time required to confidently produce an informed and usable prototype in Milestone 4.

Objective

Use the knowledge and insights that you gained from Milestone 2, DDQs, and the required readings to explore the alternative design space for a potential solution to your problem of study.

Dissemination

This milestones will include a deliverable report. These report should be in PDF or HTML format and be publicly-accessible via your team’s public home page. The specific format of these deliverable report is up to your team, but it should appear professionally-prepared.

Instructions

1. Prepare the following deliverables for this milestone, all of which should be included in the deliverable report you create and link to via “Milestone 3” under “Milestone Links” on your group’s public home page.

   Warning

   Even if you are not explicitly asked, you must provide supporting evidence for any claims you make in your deliverable report. This information should come from a variety of different venues, such as academic conferences, news reports, interviews, questionnaires, etc. Make sure you use proper, consistent citations in your reports and justify any unusual sources.

   A. User Experience Requirements

   1. Decompose your proposed solution from Milestone 2 into related user stories. It is highly recommended that you organize your user stories into a hierarchy based on related activities and tasks.

   2. Which user stories are most relevant to your proposed solution and why? It could be all of them or perhaps only a few. Whatever you pick, please provide a strong justification with supporting evidence.

   B. Ideation and Preliminary Designs

   1. For each of the relevant user stories you identified and justified in (A), generate numerous ideas for alternative design solutions that could be used to tell that story, then pick and describe your top two or three ideas for that story.

      • Clarification: This step is instructing you to pick two or three top ideas from among the numerous ideas you generated for each relevant user story. That’s two or three ideas per story.

      • Note: Although this step only asks for your top two or three ideas, you should include something in your deliverables to illustrate that you did generate numerous ideas, as instructed.

      • Suggestion: Take a screenshot of your group’s idea notes (e.g., your sticky notes, Figma FigJam, Mural canvas, Google Jam board, etc.) after each group ideation session and include that screenshot in your deliverable report before identifying your top picks.

   2. For each relevant user story, produce a low-fidelity wireframe for each top idea with enough artboards (i.e., frames, pages, screens, etc.) that a potential user might be able to provide useful feedback. Each wireframe should be presented in way that viewers can see all artboards at once (e.g., an image with all the artboards or an embedded canvas) and individually (e.g., links to images of the individual artboards). Each wireframe should also include some justification for why some design decisions were made.

      • Clarification: You should have two or three top ideas for each user story. This means that you need to produce a set of two or three wireframes for each user story and that each wireframe should correspond to a top idea for some user story.

      • Suggestion: You may find it easier to think of this step as creating low-fidelity comic-like strips for each of your top ideas where each “panel” in the comic strip is an artboard that illustrates what the experience looks like for a particular part of the story. Consider the user story “as a user, I want to filter the list so that I can focus on a particular kind of item.” Here is a small example that illustrates one idea for how the user might live out that story:

      • Note: If you use pencil and paper, then you must provide nice, cropped scans of your designs with consistent cropping dimensions. If you use software (e.g., Figma), then you must provide a download link for the source file (e.g., the .fig file) in addition to one or more image files.

   Warning

   Part (B) is about the design process, and it’s important that you work together. That is, do NOT do the following: split up the work such that everyone creates their own set of designs, then collect these designs and present them as your alternatives. That is not how a good, creative design process should work. It should be more like a brainstorming session with all team members present. You should seek to create some fundamentally different design ideas for your solution.

   C. Detailed Designs

   1. For each of the relevant user stories you identified and justified in (A), pick what you think is the best design alternative you wireframed in (B), then produce a higher fidelity mockup of the wireframe. Each mockup should:

      • be presented in a manner consistent with your wireframes in (B);

      • include a justification for why you think its the best design; and

      • include a justification for why design decisions were made.

      You are expected to use use a software tool (e.g., Figma) to create your mockups. For each mockup, you must provide a download link for the source file in addition to one or more exported PNG files.

   Warning

   When creating a mockup in (C), you will inevitably make more design decisions than you did for the wireframe. Your justification for why design decision were made, therefore, should not simply be a repeat of what you wrote for the wireframe.

   D. Summary Video

   1. Create a 5-10 minute video that summarizes the information in parts (A), (B), and (C). The creation of this video should involve all team members, and the video itself should contain credits at the end describing who did what.

   You should provide the link to the video in your milestone deliverable report; if your report is an HTML page, then you may embed the video into the page in addition to providing the link.

2. Prior to the milestone deadline, one team member needs to post the following information in a followup discussion to Piazza @23.

   1. Team Name

   2. Team Member Names

   3. Brief Synopsis – shorter than what’s on your home page

   4. Link to your group home page

   5. A few sentences describing what you thought was easy/hard about this particular milestone

Grading

Item	Points	Assessment
Updated Public Home Page	20%	Pass / Fail
User Experience Requirements	20%	Rubric
Ideation and Preliminary Designs	20%	Rubric
Detailed Designs	20%	Rubric
Summary Video	20%	Rubric

For this assignment, any portion that is designated as using a rubric will be graded on a 20-point scale that coincides with a rubric designed to mirror the related prompts. Be sure to address every aspect of a prompt.