Instructor’s Dashboard ofPeer Reviewing System

INF231: User Interface Design and EvaluationDiscussion Group 3

PeopleClients

Pavan KadandaleLecturer, School of Biological Sciences, UCI

Brian SatoLecturer, School of Biological Sciences, UCI

Team MembersCharu ChaudhariDahlia HegabMira KimYuwei LiangIrena Yuxiao MaoKartik SaxenaAnirudh SethiBixia SiRuoyun XuAkrapon Alex Yuktanon

Project OverviewPurpose: Mock-up a system for peer reviewing “Design a dashboard for a peer reviewing systems that allows instructors to assign submitted

homework to peer graders, and to receive various types of information and statistics on the assessments that these peer reviewers deliver.”

Steps:

User Study Low-fidelity Mockups

Usability tests &

Evaluation

Iteration

PrototypeHigh-fidelity Mockups

Methods to solve HCI problems

Methods to solve HCI problemsInterviews/Surveys

For deeper inquiry, we hope to interview more students and instructors to address their respective usability problems using the peer review system and iterate future UX designs.

We may also interview/survey a broader range of users.

PrototypingAccording to the ideas we gathered from the previous steps, we use myBalsamiq to

build mockups with the features which meet the requirements.

Usability testing

Usability problemsCurrent Peer Review System

- Each student can look over 2-3 other lab reports but it doesn’t include grading (only section for making comments)

- Current system doesn’t indicate quality of each reviewer’s comments

- Instructor still has to grade hundreds of students’ reports

Usability problemsNew System (Instructor Side):

Accessibility Issues:- Background and Text Contrast - Different colors for different

deadlines- Icons easily understood - Font size/Spacing easy to read

*based on metrics from Jacob Nielsen’s Homepage Usability and feedback from Prof. Pavan’s Wants & Needs Analysis session on 10/22/14

Usability problemsNew System (Instructor Side):

Navigation Issues:- Navigation is easily understandable - Homepage/Submission page is

digestible in 5-10 seconds- Buttons/Links are consistent and easy

to identify- Help/Site Search is accessible- *Scalability*

*based on metrics from Jacob Nielsen’s Homepage Usability and feedback from Prof. Pavan’s Wants & Needs Analysis session on 10/22/14

Usability problemsNew System (Instructor Side):

Content Issues:- Emphasize the highest priority

tasks so users have a clear starting point on the homepage (most recent exam first, expanded)

- make sure exam description information complete accurate and in text box (not a link)

*based on metrics from Jacob Nielsen’s Homepage Usability and feedback from Prof. Pavan’s Wants & Needs Analysis session on 10/22/14

Usability feedback/problemsNew System (Instructor Side):

Design Considerations:

- including text boxes for 3 specific date/times: - exams releases- submissions (i.e. upload by)- peer review grade received by

- calendar is pull down with times & dates- self assessment box included

*based on metrics from Jacob Nielsen’s Homepage Usability and feedback from Prof. Pavan’s Wants & Needs Analysis session on 10/22/14

Usability Feedback/ProblemsNew System (Instructor Side):

Design Considerations (continued):- deadline cutoff (grayed out option) for

assignment submissions/grading submissions and number of reviewers

- predictive dates based on previous calendar selection

- CSV export in proper formatting - reset button for each exam parameter

*based on metrics from Jacob Nielsen’s Homepage Usability and feedback from Prof. Pavan’s Wants & Needs Analysis session on 10/22/14

Next Steps for Usability Feedback/Problems

New System (Student Side):

● obtain set of student users to give feedback on mockups

● obtain set of student users to conduct usability testing after initial designs

User Action Flowchart● Flow chart based on client’s wants and needs

Instructor Side

User Action Flowchart● Flow chart based on client’s wants and needs

Student Side

Low Fidelity Mockup● Brainstorming based on the User Action Flowchart

● Wireframing on the whiteboard

● Each member designed their own low fidelity mockup using Balsamiq

Low Fidelity Mockup

Low Fidelity Mockup

High Fidelity Prototype● Discussed and voted on good features of low fidelity

mockups

● Designed a web-based prototype with some functionality

● Using Jetstrap (Demo)○ Drag & drop web UI builder

Updated Gantt

Upcoming Tasks

Instructor’s Dashboard of Peer Reviewing System