INF 231 Project 1 (Customer: Dr. Geoff Ward) Fernando S., Hosub L., Roeland S., Ya-Wen L., Sunakshi G., Michael W. B., Sowmya J.
INF 231 Project 1 (Customer: Dr. Geoff Ward)
Fernando S., Hosub L., Roeland S., Ya-Wen L., Sunakshi G., Michael W. B., Sowmya J.
Agenda Goal and Scope Past Projects Usability Problems Methodology Time Schedule Task Assignment Final Report References
Goal and Scope Design, prototype and test a web-based system
collecting data on incidents of violence in the South during the Civil Rights Movement from public
visualizing collected data spatiotemporally on the interactive map
managing collected data in an efficient and user-friendly way
Past Projects Title Main Functionalities
Data Contribution Interface – Mockup 1
• Add an incident by informing fields like time, location, people, description, user name, source information (e.g., url), comments
• Search an incident by keywords and display results in a tabular view
Data Contribution Interface – Mockup 2
• Add an incident (same above with additional fields)
• Search an incident by keywords and additional filters, and display results in a tabular view
Visualization Interface – Mockup
• Display incidents in a geographical view • Filter incidents by selecting a category • Add supplemental information to the incident
Map of Larger Sample of Event Data Locations • Display incidents in a geographical view
Data Contribution Interface – Mockup 1
Data Contribution Interface – Mockup 2
Visualization Interface – Mockup
Map of Larger Sample of Event Data Locations
Usability Problems (1/2) Derived from past projects
NO integrated user interfaces for both data contribution and data visualization
NO ways to correct or update an existing incident so that user(s) can help building a more accurate and complete database
NO personalization on user interfaces which make users more productive (e.g., large font size for elderly users)
NO ways to register multiple incidents at once for users' convenience
NO ways to systemically filter out incidents with spatiotemporal parameters (e.g., specific year and location)
Usability Problems (2/2) Derived from our customer
NO ways to make users propose updates to existing incidents so that they can help building a more accurate and complete database
NO ways to define keywords per a single incident for building an dynamic keyword cloud
NO ways to export/import incidents with data for widely-used spreadsheet applications (e.g., MS Excel)
NO integrated user interfaces to view, edit and manipulate data in a more efficient way
NO ways to check/prevent duplicate entries for a single incident
NO interfaces that allows system administrators to review incidents before they become public
Methodology – Focus Group (1/2) The reason why we forming focus groups rather than
conducting interview or survey is its efficiency
We will form two focus groups and discuss with them to finalize/refine usability problems FG1: 5-8 students in past projects FG2: 5-8 classmates
By operating two focus groups, we expect to collect
more various opinions from multiple point of view
Methodology – Focus Group (2/2) Meeting Structure (total estimated time: 70 min)
Agenda Introduction (10 min) Hand out survey (5 min) Introduce data submission (15 min) - Reconvene and discuss Introduce data visualization (15 min) - Reconvene and discuss Discuss semi-structured likes/dislikes of mockups (20 min) Wrap-up (5 min)
Methodology – Design (1/2) We will design and create a mockup with following
steps Define usability goals Survey related works Do tasks analysis Create user scenarios Define basic styles/standards Create wireframes Validate wireframe with stakeholders Refine basic styles/standards if needed Create mockups
Methodology – Design (2/2) Regarding a mockup creation, we are going to work
in the Twitter Bootstrap framework well documented easy most importantly free
Due to time constraints we are going to use a
mockup tool called Divshot compatible with Twitter Bootstrap easy online collaboration
Methodology – Usability Test We will test our system using a cognitive
walkthrough and/or heuristic evaluation approach
We will recruit several participants and assign them into two target user groups UG1: 3-6 students in their 20-30s (young) UG2: 3-6 retired professors in their 60s (not young)
All of participants are required to accomplish pre-
defined set of tasks individually, and do exit survey
Time Schedule 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)
Focus Group
Design
Pre-final Presentation
Usability Test (& Adjustment)
Write Final
Report
Task Assignment Name Role & Responsibility Fernando S. Design – create tasks analysis, Project Mgmt. Hosub L. Design – create user scenario, Documentation Roeland S. Design – survey mockup tools, create mockup Ya-Wen L. Design – survey related works, create mockup Sunakshi G. Design – define basic styles, create mockup Michael W. B. Focus Group, Design – survey related works Sowmya J. Usability Test
Final Report Will be structured like this, but not limited to…
Goal and Scope Past Projects Usability Problems
Analysis of Past Projects Customer Interview
Methodology Focus Group Design (including Mockup) Usability Test
Time Schedule Task Assignment
Mockup Sketch - Draft Version
References Understanding Your Users : A Practical Guide to User Requirements
Twitter Bootstrap
http://getbootstrap.com/2.3.2/
A Comprehensive Guide to Mockups in Web Design http://psd.fanextra.com/articles/a-comprehensive-guide-to-mockups-
in-web-design/
Style Guides: A Design Mock-up for the Responsive Web http://medialoot.com/blog/why-we-should-reconsider-design-mock-
ups/
Beyond Wireframing: The Real-Life UX Design Process http://www.smashingmagazine.com/2012/08/29/beyond-wireframing-
real-life-ux-design-process/
Any Questions??