Wikipedia Programs & Events Dashboard
A tool for onboarding people for editing articles on Wikipedia and helping professors run assignments where their students edit Wikipedia.
Timeline: May 2017 - August 2017
Project Type: Internship
My Role: UX Engineer
Tools: HTML/CSS, Stylus, Vega, Ruby on Rails, React, Flux, Atom editor, Git.
Skills: User Research
Overview
RESEARCH
-
Usability Testing
-
Documentation
-
Designing protocol for usability testing
-
Organizing user interview
DESIGN
-
Branding
-
Responsive design
DEVELOPMENT
-
Front end using HTML/CSS, Stylus and React.
-
Back end using Ruby on Rails and Flux
-
Code Refactoring
Background
During the summer of 2017, I was selected to intern for Wikimedia Foundation via Google Summer of Code global program. I worked on Wikipedia Programs & Events 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
More than 7000 editors have logged in to and used P&E Dashboard. Over the course of my Internship I got many experiences which includes getting in touch with Dashboard users from all across the world (Israel, Canada, USA, Egypt, Serbia, Czech Republic), interacting with them, organizing user testing sessions on my own and helping them with their frustrations and understanding their needs.
This project is successfully deployed and helps Wikipedia Dashboard users access the dashboard on multiple devices.
Link to the Dashboard: https://dashboard.wikiedu.org/
Problem Space
Wikipedia Programs and Events Dashboard gets substantial suggestions from the Wikipedia community. More than 7000 editors have logged in to and used P&E Dashboard. Considering the scale of use happening and the high volume of actionable feedback, Dashboard has more things which are to be improved that we already know the community needs that can be handled.
Solution
Conduct User Research to understand the common user needs and prioritize the development tasks accordingly. Improve the overall accessibility by making the dashboard responsive.
Branding Guidelines
Established by WikiEduDashboard Style guides
.png)
.png)
.png)
.png)
Final Result
Responsive Dashboard Layout with hamburger menu
Dasboard view when user has not joined any course
Vertical Navigation when the hamburger menu is clicked
User Profile Page.
Removing edit controls for small screen devices
Contribution Statistics displayed in the user profile pages
Course Details Section in the User Profile Page
Wikimedia Blog Post
What ten students made for Wikimedia while participating in Google Summer of Code and Outreachy round 14
Sejal Khatri, who participated in Google Summer of Code, detailed her experiences in weekly Medium posts. She also attended Wikimania, where she met one of her project mentors and participated in the hackathon....
By Srishti Sethi
September 6th, 2017