LIKED WHAT YOU SAW?

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:    Full stack developer

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

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