Education for Global Peace Website Prototype & Test

Team 3

Daniel Lowell Gardner, Farshad Momtaz, Oliver Haimson,Harsh Bahua, Krish Rajesh Furia, Max Wei, Neeraj Kumar,

LouAnne Boyd, Ronit Kadam, Van Erick Custodio

Vision

Paula Garb Gal Kleinman

Our Story

• Designing a new website prototype for EGP platform (Education for Global Peace website)

• Testing the website prototype for usability: can users easily access the information they want and navigate across the three environments?

Presentation Outline

- Imagining the Users- Designing from the Data- Heuristic Evaluation- User Study- Quantifying the User Experience- Analysis (Results & Competitive)- Next Steps

Principles Anti Principles

• Peace Can Be Learned

• Inclusive

• Embrace Change

• Collaboration

• “For profit”

• Exclusive

• Indoctrinate

Scenarios

1. Student wants to learn about peace outside of class.

2. Student seeks opportunities to volunteer.

3. Teacher wants to share her knowledge for promoting peace.

4. Teacher is looking for training in peace.

5. Non-profit wants to promote a project of theirs

6. Teacher is looking for others to collaborate with to promote peace.

7. Researchers & Teachers looking for best practices research and curricula.

Personas

Teacher

Student

NGO Admin

Researcher

Design

Architecture

Glo

bal P

eace

Edu

catio

n R

esea

rch

Cen

ter

EG

P M

ovem

ent

Sea

rch

Users

News Feed

Private Message

Peace Movement Website

Peace Gateway

Classes

Projects

Forums

Detailed Architecture

Website Flow Diagram

Backend Database Structure

Heuristic Evaluations: MethodsHeuristic Owner Score (Name) Evaluator Score (Name Notes:

Visibility of system status 0-10 0-10

Match between system and the real world 0-10 0-10

User control and freedom 0-10 0-10

Consistency and standards 0-10 0-10

Error prevention 0-10 0-10

Recognition rather than recall 0-10 0-10

Flexibility and efficiency of use 0-10 0-10

Aesthetic and minimalist design 0-10 0-10

Help users recognize, diagnose, and recover from errors

0-10 0-10

Help and documentation 0-10 0-10

Heuristic Evaluations10 heuristics that products should adhere to for a good user experience (Nielsen, 1994)

1. Visibility of system status: Keep the user

informed about the status of your system and give

them feedback in a reasonable time.

2. Match between system and the real world: Use

terminology and concepts the user is familiar with

and avoid technical jargon. Present information in a

logical order and follow real-world conventions.

3. User control and freedom: Allow users to control

what happens in the system and be able to return

to previous states (e.g., undo, redo).

Heuristic Evaluations4. Consistency and standards: Be consistent

throughout your product (e.g., terminology, layout, actions). Follow known standards and conventions

5. Error prevention: To the greatest extent possible, help users avoid making errors, make it easy for users to see when an error has been made (i.e., error checking), and give users a chance to fix them before committing to an action (e.g., confirmation dialog).

6. Recognition rather than recall: Do not force users to rely on their memory to use your system. Make options or information (e.g., instructions) visible or easily accessible across your product when needed.

Heuristic Evaluations7. Flexibility and efficiency of use: Make accelerators

available for expert users but hidden for novice ones. Allow users to customize the system based on their frequent actions.

8. Aesthetic and minimalist design: Avoid irrelevant information, and hide infrequently needed information. Keep the design to a minimum to avoid overloading the user’s attention.

9. Help users recognize, diagnose, and recover from errors: Although your system should prevent errors in the first place, when they do happen, provide error messages in clear terms (no error codes) that indicate the problem and how to recover from it.

10. Help and documentation: Ideally, your system should be used without documentation; however, that is not always realistic. When help or documentation is needed, make it brief, easy to find, focused on the task at hand, and clear.

User Study - (Ronit)

Cafe study Procedures:

Advertised and offered incentive

5-10 minute test of 16 tasks

Asked open-ended questions

13 participants (college students)

Quantifying the User Experience

User Study - 1: Results at a Glance

User Study - 2: Results at a Glance

Comparative Analysis

Implication 1: Submit Button!

Registration Form filled, where to ?

Implication 2: Standardize few icons One student commented that these icons looks similar which makes it difficult to identify its purpose.

- Use standard image for showing new message instead of green icon:

- Insert Pop-over on each icons:

Implication 3: Consistency through out website Use same terminology everywhere:

On Gateway Page: On Project Page:

On Research Page:

Implication 4: Make them scan, not read!On the Classroom overview page:

1. Have tabs for “My Instructor Classes” and “My Student Classes” instead of having a dropdown in addition to branding on the top left.

2. Have icons for simple actions like “Add” and “Edit”

Interview...Comments…- Too much content, Amazing UI, Replace Movement with something meaningful, Menu Titles should be changed, Important features should be clearer

Difference from similar tools ?- Ability to contact Professors, Authors, Students !

User Study with Admin Procedures3 members of board explored the wireframes

Global Online interviews for 45-75 mins

“Think aloud” which consisted of:

-Unique Administrator tasks

-Open ended questions and comments

Quick screen capture of interaction in Admin pages

Results of Admin User TasksTASK 17: Add a new grant to the grant management

TASK 18:

Add a Forum to the system

TASK 19:

Find Statistic information about the classes

TASK 20:

Approve the KLM project

TASK 21:

Sign out of the admin account

TASK 22:

Sort the grants by the grants awarded last week

TASK 23:

Find out total number of classes

User Study with Admin Positive Results

Praise“Nothing too painful, only been lots of clicking to look for something, but I realized I feel my way around enough, I wouldn’t feel uncomfortable, it was pretty user friendly for me.”--Admin P

“Everything seems to have a goal, there are various ways of participating, looks exciting, I can see how a student can hop on, a researcher can hop on, it’s very dynamic, it’s something that can be used globally.” -Admin P

What worked well: Use of and Placement of familiar object

Expected Placement:

sign out

Familiar interactions:

buttons and checkboxes

Findings of Admin study

Check all links work (i.e. forum links not working)

Carefully consider:

-familiarity with objects

-placement of objects,

-multiple ways to access info,

-language used to describe tasks

-missing interactions

Implication #1: Be careful with specific language

Implication #2: clarify images from and icons/buttonsone admin clicked wireframe object that represents a logo, thinking it was icon for mail

One did not realize that email and the

SNS icons were serving the same

function. “either/or” function.

Implication #3: Add missing interactions“Where is the submit button”-P2“Where is the save button”-Admin P

“Where is forum?”-Admin P, M-Added a forum management panel

Lessons Learned from User testing StudiesBig project is a lot to take in for a walk-up users

15 tasks for cafe study is too many

Links not working

Public setting vs lab/office

Complicated tasks

Low fidelity (consider testing higher fidelity mockups with full interactivity)

Evaluating ChamiloChamilo is an LMS (Learning Management System) which can be used for the Classroom component for Peace Ed Gateway.

The task:

● What? - Evaluate Camillo for appropriateness● Why? - Specific requirement by our client ● How? -

○ Create our own concept of Classroom and what are the client’s requirements for this○ Install Chamilo and use it as multiple personas○ Group features/requirements by a common theme○ Create a rubric for these features and give a boolean score

Evaluating Chamilo: Nonfunctional Goals

Peace Ed Gateway Chamilo

Free

Non-profit

Evaluating Chamilo: General Features Peace Ed Gateway Chamilo

Discussion/Forum integration

Setting Learning Goals

Class Template creation

Toolbox

In-built Email/Messaging

Notifications

Multi-role support

Evaluating Chamilo: Classroom Content Peace Ed Gateway Chamilo

Weekly schedule

Division by Section

Various Test Types

Auto-scoring

Video Upload

Audio Upload

Frames

Rich Text

Media Files (PDF, HTML, Flash)

Evaluating Chamilo: Instructor Specific Peace Ed Gateway Chamilo

Reporting/Graphs

Announcements

Issue completion certificates

Attendance

Export and Backup

Evaluating Chamilo: SummaryRecommendation: Can be used initially, but eventually PeaceEd should build its own Classroom system because Chamilo does not have:

a. Branded look and feelb. Multi-role usersc. Organized class/training schedulesd. Setting learning goalse. Template creation and sharing

Next Steps● Implement The feedback

from user testing● Implement features from

Chamilo● Interview/ Survey more

participants with implemented improvements

Fellowship OpportunityContact Paula

Thank you!

- Met with client, design information architecture- Division into subgroups- Overview of information architecture and iteration with client

- Rough wireframes of major components- Fleshing out global Search functionalities- Functionality/Integration of message board- Understand control-flow between pages of various components- Understand common functionalities/screens for different components

- Cognitive walkthroughs of each component- Iterative wireframing- Heuristic evaluation- Design of user/cafe study

- Low fidelity prototype ready (DB integration in place)

- Pilot study with a few members outside the group- Incorporate feedback in final user study- Full fledged cafe/user study- Incorporate feedback in wireframes/prototype

______________________________________________________________- Investigate Chamilo and discuss if it matches our requirements for ‘toolbox’- Final presentation in class

- Integrate findings, wireframes and feedback into a final report