roeland ya-wen michael w. b., sowmya j.kobsa/courses/inf231/14f/group1-prefinal.pdf · mockups...
TRANSCRIPT
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 user-friendly 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 incidents 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
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
User Stories – Acceptance Criteria
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
Create Incident
Preview Incident
Confirm Incident
Approve Incident
Reject Incident
Log in View Incident View Incident
Call
Call
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 Customer’s comments (Excerpts)
Map • Add state dropdown (with quickfind) • Labels for dates • Map full screen
Submit • All races should be included • Location is missing • Checkbox to inform the date is a estimation
Search • Add state dropdown (with quickfind) • Add create event button
Admin • 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
User Stories • Gathering • Prioritization • Estimation • Acceptance
Criteria
Focus Groups
Design • Wireframes • Mockups
Usability Testing • Cognitive
Walkthrough • End-user testing
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 pre-
defined 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)
Pre-final Presentation
Test
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-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??