Wiki Education Dashboard
A tool for onboarding people for editing articles on Wikipedia and helping professors run assignments where their students edit Wikipedia.
Timeline: Dec 2016 - Mar 2017
Project Type: Internship
My Role: UX Engineer
Tools: HTML/CSS, Stylus, Vega, Ruby on Rails, React, Flux, Atom editor, Git
Skills: Remote usability testing, Wireframing, front end development
Overview
DESIGNING
-
Studied Use Cases - Personas
-
Privacy by Design
-
Designed Wireframes with Annotations
DEVELOPMENT
-
Front end using HTML/CSS, Stylus and React.
-
Back end using Ruby on Rails and Flux
-
Visualizations using Vega Js
USABILITY TESTING
-
Designing protocol for usability testing
-
Organizing user interview
Background
During the winter of 2016, I was selected to intern for Wikimedia Foundation via GNOME Outreachy Program. I worked on Wiki Education Dashboard under the mentorship of Sage Ross, Product Manager at Wiki Education Foundation and Jonathan Morgan, Design researcher at Wikimedia Foundation. I worked remotely and made code contributions through Github and collaborated with project members using Slack, Google Hangouts along with Phabricator, a collaboration platform open to all Wikimedia contributors.
Impact
This project was successfully deployed and is used by Wikipedia Dashboard users to showcase their contributions and demonstrate the impact they make with Wikipedia.
Link to the Dashboard: https://dashboard.wikiedu.org/
Problem Space
One of the big needs for users who facilitate many programs (eg, instructors who teach many courses with Wikipedia assignments) is to be able to report about the cumulative impact they've had. The dashboard only showed statistics for each individual program. There was no way for a user to see the totals from all their programs combined.
Solution
Adding User profile pages, which would have a list of all the programs user has participated in, and graphical representations of some of the statistics over time. This project aims at visualizing users cumulative impact on Wikipedia, thus allowing them to showcase their contributions.
Personas
Wireframes
Adding links to user profile pages from the Course Details section in the course page and Main Navigation menu
The More Info Section can contain a paragraph in which user can add some additional information about how and why he uses Wikipedia.
User details are placed at the top as the emphasis is on the user and getting to know a member better.
While collecting personal Information of the user, disclaimer will be displayed as mentioned in WMFLabs terms of use
Courses Taught Graph - Plotting all the courses taught by the instructor on the time scale.
Students Taught Graph - Plotting the number of students taught by an instructor on the time scale.
Adding tooltips- Providing tooltips for each of these metrics, so people can click/hover and get a definition for the metric.
Course Details Section - Displays all the courses a user has participated in.
Information Privacy
Wikimedia Foundation has adopted principles of Privacy by Design which dictates that private information should only be collected and/or made public if it is necessary to do so. Along with that, collection of private information needs to comply with the WMFLabs terms of use. One of the user stories called for adding an email address, profile picture, full name, and other personal details. Since, all profile pages are public, users were informed that their information is going to be publicly available on the Internet by displaying a disclaimer.
Usability Testing
I designed the protocols for usability testing with my mentor Sage Ross. We organized a user interview and conducted the session using Google Hangouts screen share feature, a session where we asked the user to do some tasks on the profile pages, so as to test if they were able to create their profile or find anything confusing about it.
Things we tested:
- If users were easily able to navigate to the profile section.
- If they were reading the disclaimer.
- If the features were functioning.
