WikiWash is a free public tool that allows journalists, citizens and activists to uncover spin and bias on Wikipedia by tracking page edits in real time. The platform aims to increase the visibility of Wikipedia activity, in order to promote accountability and transparency through crowdsourcing.

Product Management & UX Design

Project Team

Design: Liam Thurston
Dev: Jacob Moeller
F/E Dev: Alejandro 

Proudly made at TWG

Discovery

Wikiwash was born at TechRaking Toronto, the conference for data in the newsroom hosted by the Centre for Investigative Reporting, Google Canada and The Canadian Press.

The winning team from Metro News received two weeks of TWG's time to help them bring their idea to life. Two weeks is an insanely short period of time to translate an idea into a functioninal public app. I helped the team hit the ground running by first distilling the core of their idea through workshopping and leading a Lean Canvas exercise. 

lean_canvas_1000pxlean_canvas_1000px

We then determined the core value proposition for each of our target segments, that would help guide us in making future product decisions: 

propsprops

Armed with a clear direction, we dug in for a busy first week of research and design. It quickly became clear that there were already many similar tools on the market, which I studied in detail.

research_longresearch_long

From this competitive analysis, I extracted a series of lessons:

Most products suffer from information & feature overload, with a steep learning curve. 
Simplify

Most products suffer from terrible UI & challenging UX. There's a lack of documentation, and the products are not goal oriented. 
Clarify

There is a lack of information hierarchy, and it is difficult to quickly pull out important data.
Expose patterns in the data 

Most product only offer historic data only (no active reporting). 
Active reporting & trend analysis

"It’s imperative reporters have tools to find the stories hidden in the data."

Luke Simcoe, Metro News

For our MVP, we initially decided to build a tool that would be a record of page edits, and parse it into a simple database that stores: 

page | original text | edited text | time stamp | user 

Once we have that data, we can show it off in any number of ways. We proposed demonstrating the power of the system in this MVP through a few limited examples, without overwhelming users with details or inputs. 

flowflow

As we dug into the MediaWiki API, we discovered that it limits the maximum number of records per call to 500. Additionally, the desired API call for our proposed MVP app (a list of edits by contributor) was not directly available. So, pivot time.. 

WikiWash-Whiteboard_compWikiWash-Whiteboard_comp

Taking it back to the drawing board we discovered that by taking the difference between two page states at two different points in time, we can expose the edits on a page in real time. This speaks to one of the early stated value propositions of the ideal app, to track edits and surface trends in real time. 

We also discovered a way to show the edits on the actual Wikipedia page content (instead of just listing the edited snippet in a list), so we can show the edit in context. Big win. This launched us into our week of final design production and parallel development.

 

Project Style Guide
(created by Liam Thurston)

One fun result of the way we were going to be rendering the diff'd results is that we could essentially reformat the Wikipedia page layouts. Everyone and their cousin has taken a shot at redesigning Wikipedia page layouts, and our design lead Liam got excited to try his hand at it too. We couldn't deviate too greatly from the source layout, but Liam did an amazing job refining some of the base themeing. Jacob pulled apart the MediaWiki API and got deep into Node.js to make sure that everything worked smoothly, while Alejandro made sure that the edit tracking was showing up beautifully.

 

paperandlaunchpaperandlaunch

The Launch

In the end we pulled it off, and had a fully functional proof-of-concept at the end of two weeks. TWG even open-sourced the project, so that the larger community can pick it up and iterate on what we started. WikiWash is a complex tool built to solve a very simple problem – viewing changes in Wikipedia, one of the world’s largest and most popular websites. 

NEXT PROJECT

Homewood Health

A responsive custom CMS and mobile-first design & content strategy

[unex_ce_button id="column_content_be8j4ojgr" button_text_color="#efefef" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="left" button_text_spacing="0px" button_bg_color="transparent" button_padding="10px 30px 10px 30px" button_border_width="1px" button_border_color="#bcbcbc" button_border_radius="5px" button_text_hover_color="#f9f9f9" button_text_spacing_hover="0px" button_bg_hover_color="#3a3838" button_border_hover_color="#cccccc" button_link="homewood-health" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]View Case Study[/ce_button]