UX / UI Design
The Wikipedia Education Platform serves as the bridge between academia and Wikipedia. It is a virtual learning environment for professors and students to collaborate on meaningful coursework while publishing quality content to Wikipedia. By shifting the focus from a feature-driven to people-centered approach, I helped the team create a platform that humanized the Wiki brand, through flexibility and ease of use, which increased adoption rates from 15% to 70% in its first year.
1 Make it quick and easy for professors to create assignments and students to join courses
2 Gather user stories, interviews, and tests to shift focus from feature-driven to people-driven
3 Give professors flexibility and structure to edit and evolve course content
4 Make a compelling visual experience that excites instructors and students to teach and learn
• Leading and partnering with designers to map the experience–content structure, IA, wireframes
• Synthesizing behavioral user data into user stories and user flows
• Leading the creation of the UI system
• Helping the team write usability testing scripts and facilitate user testing sessions
• Articulating design explorations and principles to stakeholders
• Working with engineers to ensure quality implementation of visual design and interactions
Designed at WINTR
Interviews with subject matter experts, instructors, students, and stakeholders from the Wiki Edu team helped us define key user scenarios and pain points. This process of discovery revealed how important it was for instructors to connect with students through Wikipedia articles and assignments. It also revealed how important it was to provide a space for students to quickly understand and engage in the course. Prioritizing the user stories provided clear direction and focus when building the user flows and IA.
With the team of designers, engineers, and product managers, I set out to define a course lifecycle–creating paper prototypes and wireframes. It was important to allow instructors and students to see the overall activity of their courses, but also dive into a particular course, all in a way that was organized and clear.
Details like quick and conversational language, screenshot visuals, and completion tracking created an easy, quick, and engaging onboarding experience. It provided just enough information to get professors and students started without being overwhelming.
Highlights of overall course data are shown at the top of the page, giving instructors and students an overview of the current happenings of their participated courses. For instructors, extra features are added, such as course detail forms to guide them through the process of adding a new course.
As part of the iterative process after launch, a key piece of feedback we received was that professors wanted to edit the content and arrange the timeline blocks as their course evolves. In collaboration with another designer on the team, we worked together to create a system for the instructor to edit and arrange content on their course timeline. We designed an editable card style layout, giving the instructor freedom to arrange and edit the cards as they see fit. Instead of directing instructors to a separate page, they can see their edits within the context of the overall week-to-week timeline.
Usability testing has been an integral part of the process and provides invaluable insights to find ways to better serve instructors and students as they use the product. In order to collect valuable insights, we first observed how they used the tool in their environment. After observation, then we asked insightful and direct questions to better understand details and behaviors. Below are some questions we've asked during screenshare interviews in order to gather this data. Then, we use this data to evolve and iterate the product moving forward.