roeland ya-wen michael w. b., sowmya j.kobsa/courses/inf231/14f/group1-prefinal.pdf · mockups...

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??