Milestone 3
Milestone 3
A. User Experience Requirements
Part 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.
Activities/Task:
- Posting a follow up response based on the prompt
- Navigating discussion prompts
- Navigate students’ responses
- Find followup discussion text box
- Constructing response
- Posting response
- Filter through posts
- Add tags to filter
User Stories:
- 1. As a CS student in the classroom, I want to post a follow up response based on a prompt so that I can contribute to the class discussion.
- 2. As a CS student in the classroom, I want to easily navigate the list of discussion prompts so that I can find the prompt that I intend to respond to.
- 3. As a CS student in the classroom, I want to quickly navigate the list of follow up responses so that I can see what has already been previously discussed.
- 4. As a CS student in the classroom, I want to quickly locate the followup input box so that I can begin drafting my response.
- 5. As a CS student in the classroom, I want to have an area to input a response so that I can review and revise what I wrote.
- 6. As a CS student, I want to be able to post my response so that I can contribute to the discussion.
- 7. As a CS student, I want to be able to filter discussion posts so that I can view only specific topics of discussion that I find relevant.
- 8. As a CS student, I want to be able to filter discussion responses so that I can view only those that are about topics that I find relevant.
- 9. As a CS student, I want to be able to add tags to my response so that they are easier to locate and categorize.
Part 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.
The user stories we chose to be most relevant to our proposed solution were user stories 2, 5, 6, and 7. This is evidenced by the fact that in our proposed solution we
mentioned updating certain properties of the interface that would improve navigation. As well, we proposed changing the structure of the filtering affordance which relates to
the user stories addressing filtering posts and adding tags to reponses. We chose to omit the remaining user stories because the ones we selected sufficiently covered any design
alternatives that would be necessary to tell the user stories omitted. We were aiming to reduce any redundancies for the preliminary designs.
B. Ideation and Preliminary Designs
Part 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.
User Story 2 Ideation
Check out the actual idea board here.
User Story 2 Top Ideas:
- Idea 1: Display the list of discussion prompts posted by the instructor in a grid format. Each square on the grid displays the post title and a large icon indicating what type of post it is (Discussion Prompt, Student Question, Private Message). If there are more squares than what fit on the screen, a scroll bar appears and allows the user to scroll through the list. The currently selected post will have a blue border line and any unread posts will be highlighted in red.
- Idea 2: For this idea we will keep the linear post thumbnails as per the current Piazza design but we will limit the information on them to only the Post Title and a large icon depicting the post type. (Discussion prompts, Student Questions, and Private Messages). We created a tabbed menu for different post types and users can click between them to see only posts of that type. Posts that haven’t been viewed yet are highlighted in red and the currently selected post has a blue border surrounding it.
User Story 5 Ideation
User Story 5 Top Ideas:
- Idea 1: Keep the functionality of piazza discussion board the same but replace the bottom response box with a high contrast button that when clicked opens a large input box that looks the same as piazza’s current one.
- Idea 2: Within the discussion board, include a floating response box for creating a follow up discussion.By default the box will contain a label titled “create a followup discussion”. Each follow up discussion will contain a reply button that changes the floating response box to say “Reply to [example user]” but the actual input box will remain the same.
User Story 6 Ideation
User Story 6 Top Ideas:
- Idea 1: Integrate a high contrast post button into the input box for follow up responses.
- Idea 2: Integrate radio buttons in order to allow the user to choose an option of how to post: as themselves, as an anonymous student, or as a draft. Include prominent submit and cancel buttons.
User Story 7 Ideation
User Story 7 Top Ideas:
- Idea 1: Have a high contrasted rectangle that when clicked on expands into a list of filtering options. These include a list of folder tags that when clicked on only displays posts that were tagged with that folder. These folders will be low contrast buttons that when clicked turn into high contrast buttons.
- Idea 2: Have a search bar above the post thumbnails where the user can enter a keyword and only posts containing that keyword will be shown in the post thumbnails. This currently exists within Piazza but we will make it larger and more distinct with a label.
Part 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 a 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.
User Story 2
User Story 5
User Story 6
User Story 7
C. Detailed Designs
Part 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.
Download our source file here.
Download PNGs of our Figma files here.
User Story 2
User Story 5
User Story 6
User Story 7
D. Summary Video