Client: Wikipedia/The Wikimedia Foundation
Employer: OmniTI Inc.
Skills & Tech: UI/UX Design, A/B Testing, HTML/CSS, Javascript, PHP
Employer: OmniTI Inc.
Skills & Tech: UI/UX Design, A/B Testing, HTML/CSS, Javascript, PHP
Article Feedback Tool v5 Video Overview from MediaWiki.org
Update 2017:
This project was discontinued in 2014 to make way for Wikipedia's new collaboration tool, Flow. AFT5 archive and documentation available on MediaWiki.org: https://www.mediawiki.org/wiki/Article_feedback/Version_5
Project Background:
Wikipedia is the sixth-most-visited website in the world, with tens of millions of visitors per day, and one of the most engaged communities of contributors and editors on the web. The Wikimedia Foundation, who owns and manages the site, has a staunch philosophy of openness and inclusiveness, allowing nearly all of the articles on the site to be edited by guests and and registered users alike. The Wikimedia Foundation came to OmniTI to do a complete overhaul of the current feedback engine, Article Feedback Tool v4 (AFT4), and to bring it up to the new Article Feedback Tool v5 (AF5).
Screenshots:
Wikipedia is the sixth-most-visited website in the world, with tens of millions of visitors per day, and one of the most engaged communities of contributors and editors on the web. The Wikimedia Foundation, who owns and manages the site, has a staunch philosophy of openness and inclusiveness, allowing nearly all of the articles on the site to be edited by guests and and registered users alike. The Wikimedia Foundation came to OmniTI to do a complete overhaul of the current feedback engine, Article Feedback Tool v4 (AFT4), and to bring it up to the new Article Feedback Tool v5 (AF5).
Screenshots:
The Article Feedback Tool Loads at the bottom of the page. There is an explanatory tooltip to answer quick questions.
Feedback is first gathered as boolean value to create a low entry threshold for feedback submitters.
Users may then leave additional, optional comments.
Confirmation of feedback receipt with an additional call to action and links to view other feedback.
Feedback aggregation page.
Additional Notes:
Article Feedback Form:
The AF5 form was designed to integrate seamlessly with Wikipedia’s aesthetics, using a simple box structure and color palette consisting of light grays and blues. During the prototypal phase, five initial form options were created and put into testing: a 5 star rating; comments that could be tagged as “Suggestion,” “Question,” “Problem,” or “Praise;” a “Did you find what you were looking for?” yes/no query to the user; and a Call to Action to edit the article.
After multiple rounds of testing, it was determined that the option that received the most user engagement was the “Did you find what you were looking for?” query followed by an optional comment field.
Feedback Aggregation Page:
The AF5 feedback aggregation page is designed to convey large volumes of data without overwhelming the user. Standard filters (relevant/all comments) and sorting options allow users to quickly find the feedback they’re looking for. Users may vote on the relevance of given feedback or flag it as abusive/non-constructive. Moderators have the ability to hide comments that have been successively flagged.
Both projects were front-end developed by means of XHTML, CSS2 with some CSS3 progressive enhancements (shadows, rounded corners, etc.), and some PHP. All programming was done in accordance with Wikimedia guidelines; versioning was initially handled with Apache Subversion and later moved over to Git. Bug tracking was handled via Bugzilla.
Article Feedback Form:
The AF5 form was designed to integrate seamlessly with Wikipedia’s aesthetics, using a simple box structure and color palette consisting of light grays and blues. During the prototypal phase, five initial form options were created and put into testing: a 5 star rating; comments that could be tagged as “Suggestion,” “Question,” “Problem,” or “Praise;” a “Did you find what you were looking for?” yes/no query to the user; and a Call to Action to edit the article.
After multiple rounds of testing, it was determined that the option that received the most user engagement was the “Did you find what you were looking for?” query followed by an optional comment field.
Feedback Aggregation Page:
The AF5 feedback aggregation page is designed to convey large volumes of data without overwhelming the user. Standard filters (relevant/all comments) and sorting options allow users to quickly find the feedback they’re looking for. Users may vote on the relevance of given feedback or flag it as abusive/non-constructive. Moderators have the ability to hide comments that have been successively flagged.
Both projects were front-end developed by means of XHTML, CSS2 with some CSS3 progressive enhancements (shadows, rounded corners, etc.), and some PHP. All programming was done in accordance with Wikimedia guidelines; versioning was initially handled with Apache Subversion and later moved over to Git. Bug tracking was handled via Bugzilla.
