21
Instructor’s Dashboard of Peer Reviewing System INF231: User Interface Design and Evaluation Discussion Group 3
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
