INF 231 Project 1 (Customer: Dr. Geoff Ward) Fernando S., Hosub L., Roeland S., Ya-Wen L., Sunakshi G., Michael W. B., Sowmya J.
Today s Objectives What have we achieved so far? How we did that? Why did we follow this approach? What s left?
A Little Reminder Design, prototype and test a web-based system collecting data on violence incidents during the Civil Rights Movement from the public visualizing collected data spatiotemporally on an interactive map managing collected data in an efficient and userfriendly way
Project Overview User Stories Gathering Prioritization Estimation Acceptance Criteria Focus Groups Recruitment Exercises Moderate Design Wireframes Mockups Usability Testing Cognitive Walkthrough End-user testing
User Stories Definition Who, what and why of a requirement Who is the user interested in the requirement? What she/he wants to do? Why so? Example: as a user I want to report violence inciden ts to contribute in expanding a public database
User Stories Overview How? Initial brainstorm sessions User roles definition Analysis of past projects Good and bad not reinventing the wheel! Meetings with Geoff for validation and prioritization Product backlog creation Effort estimation for each story Stories assignment Acceptance criteria definition
User Stories Overview Btw Many ideas were taken from agile, but we are NOT doing agile! Project s core principle:
User Stories Product Backlog Show, don t tell
User Stories Effort Estimation How? (Improvised) planning poker Simple 1-10 scale Identify threshold stories (most complex/simple) Everything else is estimated by comparison
User Stories Assignment How? Sub-teams of 2 (when possible) Balancing based on efforts Only high-priority stories
User Stories Acceptance Criteria How? A user story will be considered finished when these happen: Feedback from the focus group is analyzed: High-priority improvements are incorporated directly in the story Other improvements are either registered in the backlog or discarded Wireframes are approved by our customer Mockups employ the defined design standards Mockups are approved by our customer Mockups are tested Feedback from testing is analyzed: Bugs are fixed Minor improvements that do not affect schedule are implemented Other improvements are registered in the backlog
Project Overview User Stories Gathering Prioritization Estimation Acceptance Criteria Focus Groups Recruitment Exercises Moderate Design Wireframes Mockups Usability Testing Cognitive Walkthrough End-user testing
Focus Group The reason why we formed a focus group rather than conducting interview or survey is its efficiency By operating a focus group, we expected to refine usability problems of previous mockups retrieve new user requirements We recruited 9 participants from both the class and our customer Time: 12:00-13:00, Nov. 7 Location: SSL 436
Focus Group Introduction (10 minutes) Overview of project Agenda Ground rules Hand out survey (5 minutes) Contact Affiliation Instructions
Focus Group Introduce Data Submission (15 minutes) Task assignment Likes/dislikes & desired goals Reconvene and discuss Introduce Data Visualization (15 minutes) Task assignment Likes/dislikes & desired goals Reconvene and discuss
Focus Group Semi-structured Questions (20 minutes) Have participants explain examples of problems Rate the ease of usage Both systems Wrap-up (5 minutes) Final thoughts Distribute incentives
Focus Group We summarized ideas from a focus group, and applied it to the user requirements Submission form Add keywords/tags/pictures to form Previews event Confirmation page Too much text Data visualization Bad search filters Good representation of concentrated events
Project Overview User Stories Gathering Prioritization Estimation Acceptance Criteria Focus Groups Recruitment Exercises Moderate Design Wireframes Mockups Usability Testing Cognitive Walkthrough End-user testing
Design Information Architecture OBS: Based on high-priority stories Main Map Submit Search Admin View Incident Create Incident View Incident Log in Preview Incident Call Approve Incident Confirm Incident Call Reject Incident
Design Wireframe: Main [Main Page]
Design Wireframe: Map [Search incidents]
Design Wireframe: Submit [Create a new incident]
Design Wireframe: Submit [Preview a new incident]
Design Wireframe: Submit [Confirm a new incident]
Design Wireframe: Search [Search incidents]
Design Wireframe: Admin [Login as an administrator]
Design Wireframe: Admin [Check newly created or updated incidents]
Design Wireframe: Admin [Reject an incident]
Design Wireframe: Admin [Check newly created or updated incidents]
Design Wireframe: Admin [Approve an incident]
Design Wireframe: Admin [Check newly created or updated incidents]
Design Wireframe We validated wireframes with our customer, and refined it accordingly User Requirement Map Submit Search Admin Customer s comments (Excerpts) Add state dropdown (with quickfind) Labels for dates Map full screen All races should be included Location is missing Checkbox to inform the date is a estimation Add state dropdown (with quickfind) Add create event button Include approve / reproved Undo reprove / approve Common Case Id: state + incident number
Design Mockup We built a mockup using Jetstrap Jetstrap is web-based interface building tool for Twitter Bootstrap framework Mockup is based on the wireframes which we created
Design Mockup Show, don t tell
Project Overview Focus Groups Design Wireframes Mockups Usability Testing Cognitive Walkthrough End-user testing User Stories Gathering Prioritization Estimation Acceptance Criteria
Cognitive Walkthrough Two sets of cognitive walkthrough Wireframes Mockups Detailed analysis of wireframes with our customer Minimizes the efforts in mockups Considerably reduced problems during the cognitive walkthrough of mockups
Next Steps Doing usability test (Deadline: Dec. 5) Refining mockup if needed Submitting final project report w/ all relevant materials (Deadline: Dec. 17)
Usability Test We will recruit several participants and assign them into two target user groups UG1: 3-6 students in their 20-30s UG2: 3-6 retired professors in their 60s All of participants are required to accomplish predefined set of tasks individually, and do exit survey
Usability Experiments Outline Introducing the system to the users Ask the Users to perform some tasks Search an Event on the map Create a new Event Testing the Admin functionalities Conducting a survey with some semi-structured questions Wrap-up
Future Have a more beautiful design Enhance code quality Enable responsiveness Tackle low/medium priority stories Create a back-end
Time Schedule (modified) 10/27-31 (W4) 11/3-7 (W5) 11/10-14 (W6) 11/17-21 (W7) 11/24-28 (W8) 12/1-5 (W9) 12/8-12 (W10) 12/15-17 (W11) Focus Group Design (wireframe & mockup) Test Pre-final Presentation Write Final Report
References Understanding Your Users : A Practical Guide to User Requirements A Comprehensive Guide to Mockups in Web Design http://psd.fanextra.com/articles/a-comprehensive-guide-tomockups-in-web-design/ Style Guides: A Design Mock-up for the Responsive Web http://medialoot.com/blog/why-we-should-reconsider-designmock-ups/ Beyond Wireframing: The Real-Life UX Design Process http://www.smashingmagazine.com/2012/08/29/beyondwireframing-real-life-ux-design-process/
Any Questions??