About
This case study is the result of my work on a briefing from Aela's UX bootcamp. The goal was to improve the user experience on Wikipedia website.
This case study is the result of my work on a briefing from Aela's UX bootcamp. The goal was to improve the user experience on Wikipedia website.
Deliverables
• Journey map
• Wireflow and sitemap
• High fidelity digital prototype
• Journey map
• Wireflow and sitemap
• High fidelity digital prototype
My role
I lead the UX process working independently, using the Double Diamond method as a guide, with the Discovery, Definition, Development and Delivery phases.
I lead the UX process working independently, using the Double Diamond method as a guide, with the Discovery, Definition, Development and Delivery phases.
Date
April - May 2020
April - May 2020
Background
Getting at least one Wikipedia link on Google as a search result is almost a certainty.
Go directly to Wikipedia homepage and do a quick search on a topic is also common.
But, what not everyone is aware of is that each article available on the site is made collaboratively by volunteer users.
Anyone who wants can be an editor, or a wikipedian, as they are called within the community. Wikipedians are a fundamental part of what the site is: without editors, Wikipedia has no content or management of it.
Go directly to Wikipedia homepage and do a quick search on a topic is also common.
But, what not everyone is aware of is that each article available on the site is made collaboratively by volunteer users.
Anyone who wants can be an editor, or a wikipedian, as they are called within the community. Wikipedians are a fundamental part of what the site is: without editors, Wikipedia has no content or management of it.
This face of Wikipedia showed as a nice opportunity to work with and I decided to do the exercise of understanding better the experience of editing and creating articles on the website to answer the question: how can we increase the satisfaction of existing editors and attract new ones? Here's how I did it.
Process
Diving and discovering real problems
To understand how the Wikipedia editing universe works, I started a research process that would allow me to understand both the business and the user.
The full documentation for the research can be accessed here →
The full documentation for the research can be accessed here →
1. Desk research
As a first step in the research, I went to understand in depth what Wikipedia is, what its value proposition is and how the site operates. I grouped together the collected data organized in Why (what is the purpose of Wikipedia), What (how is the product it delivers) and How (what are the content guidelines and how is the operation of the project itself).
First research wall
2. First findings
After this first overview of Wikipedia, I started to delve deeper into questions that arose about its content, functioning, and experience as a portal, as listed aside:
The challenges on content reliability
How to reinforce the concept defended by Wikipedia itself that it works as primary research tool?
Gender gap
Only 13% of publishers are women
The business relies on donations
Wikipedia is an open source and non-profit organization
Decrease on number of new editors
An article from MIT Review shows that bureaucracy and difficulties with the tool can be reasons
What drives someone to become an editor?
Research published on the Scientific American website shows that it is the feeling of belonging
Controversies regarding Wikipedia's neutral point of view (NPOV)
A fact that allows the spread of vandalism on its content
Wikipedia's interface is under discussion among the community
Several attempts of change since 2004, but without consensus due to the huge scope of the project
How to reinforce the concept defended by Wikipedia itself that it works as primary research tool?
Gender gap
Only 13% of publishers are women
The business relies on donations
Wikipedia is an open source and non-profit organization
Decrease on number of new editors
An article from MIT Review shows that bureaucracy and difficulties with the tool can be reasons
What drives someone to become an editor?
Research published on the Scientific American website shows that it is the feeling of belonging
Controversies regarding Wikipedia's neutral point of view (NPOV)
A fact that allows the spread of vandalism on its content
Wikipedia's interface is under discussion among the community
Several attempts of change since 2004, but without consensus due to the huge scope of the project
3. Talking to real editors
Among all the patterns found, the collaborative face of Wikipedia emerged as something really important. The project needs volunteers to keep it alive, to create and manage its content. So, in order to understand better the editing world of Wikipedia, I looked for volunteers among the Portuguese Wikipedia editors on Facebook who I could interview and make more discoveries. I got 3 contacts, two men and one woman - which was essential to have representation on the gender issue discovered during the desk research. They were also from different ages and places.
4. Connecting the dots
The first data from desk research and the deepening of the subject by the interviews converged on several groups of insights, with emphasis on the four aside:
Wikipedia as double sided coin: same portal, two experiences
While reading articles was hardly cited as a nuisance, for users, the world of editing brings several problems, from the tool itself to learning how to make an article.
Learning what it means to be an editor and learning to edit are challenges
It takes time to find information on how to become an editor on the website and, even after finding it, understanding what are the policies involved in creating an article is more of a saga.
Wikipedia needs to attract new editors
Wikipedia will always need to update itself with new articles, revision of old ones and the management of all this content is endless. Therefore, more collaborators are needed to work within the project.
Editing articles is done mostly by the desktop version of the site
Wikipedia uses a wiki tool to edit articles, which allows collaboration between different users. However, the tool has several commands that are difficult to use on cell phones or tablets, so most edits are made on the desktop version of the site.
While reading articles was hardly cited as a nuisance, for users, the world of editing brings several problems, from the tool itself to learning how to make an article.
Learning what it means to be an editor and learning to edit are challenges
It takes time to find information on how to become an editor on the website and, even after finding it, understanding what are the policies involved in creating an article is more of a saga.
Wikipedia needs to attract new editors
Wikipedia will always need to update itself with new articles, revision of old ones and the management of all this content is endless. Therefore, more collaborators are needed to work within the project.
Editing articles is done mostly by the desktop version of the site
Wikipedia uses a wiki tool to edit articles, which allows collaboration between different users. However, the tool has several commands that are difficult to use on cell phones or tablets, so most edits are made on the desktop version of the site.
Transforming research findings into Design Principles
This step is import in order to convert the research into something actionable that meets the first question how can we increase the satisfaction of existing editors and attract new ones? And the Design Principles created were:
1. Improve onboard of new editors
2. Decrease the learning curve in editing and creating articles
3. Attract new editors
A human-centered process
Here started another stage of the challenge. Since Wikipedia is such a broad project and its mission is to democratize knowledge for all, the profiles of editors follow these dimensions. Wikipedia wants to make an encyclopedia that belongs to everyone, and therefore it should provide an experience that reaches as many people as possible.
With that in mind, I initially created 8 personas that contemplated pains and goals found during the desk research and interviews. To delve deeper into this concern, I researched several profiles of real users on Wikipedia's forums and extracted quotes from wikipedians to create the personas based on them.
To be more specific during the work, I selected from these 8 profiles, two personas that brought characteristics that contemplated higher limitations as users, either in the motivations to be part of the volunteers or technical understanding of the tool. In this way, I would focus on the development of solutions on users who would present the greatest challenges for Design. And if it worked for them, the chance of serving other users would also be great.
Nice to meet you Mari and Rui
Mari is a Biologist and is very interested in spreading scientific knowledge in a more democratic way. She discovered that this is possible on Wikipedia, but she thinks the site is very confusing and uninviting. She needs to feel encouraged to take up the challenge of writing on Wikipedia. The choice of Mari as one of the personas was made because it shows the limitations of the platform to be less receptive to those who are arriving, both to understand that Wikipedia is built collaboratively, as well as how to write an article.
Rui is retired public service worker who discovered on Wikipedia an opportunity to occupy his time. His persona was selected among the others for the limitations he faces in using Wikipedia, in terms of affinity with technology: Rui is unfamiliar with internet tools and needs the site to be intuitive enough so that he can learn to use it.
Evolving from information to action
It's time to start converging and specify which approach I would take to solving the problem.
The first step was to create a journey map for Mari and Rui.
Each map brought a journey with the same goal: to create a new article within Wikipedia. However, each user would have a different starting point and would also bring different emotions during the process steps:
How to meet user demands when performing an activity? A table of hypothesis features can help
With a possible journey for each of the users, I generated some ideas - features hypotheses - that would allow them to reach their goal, as well as having connection with the mission of Wikipedia business. Time to put user needs in line with business expectations.
To work in this scenario I used the hypothesis table suggested in the Lean UX process. This tool is able to show very objectively ideas on how to meet users' needs and business expectations in the format of features or design solutions that can be tested. From this table, I created a matrix that could evaluate and prioritize which hypotheses would be tested during the project, considering those that would have the greatest impact on results.
Developing
With the prioritization done, it was time to create design solutions and test them out.
I then designed a wireflow for Rui and Mari in order to visualize which path they would follow to accomplish the task of creating an article from the homepage and to identify which pages needed to be created.
The goal was to offer a service that could assist users in learning what are the criteria for creating an article on Wikipedia and facilitate the work of editing and writing articles, following the Design Principles numbers 1 (improve onboard of new editors) and 2 (decrease the learning curve in editing and creating articles).
And this wireflow generated a new sitemap for the Wikipedia homepage, thinking in a more fluid way to accomplish the tasks.
Ideation: creating the first sketches
Before going to the sketches, I first thought about what the structure of the Wikipedia homepage would be, keeping in mind that despite the fact that content always comes first, the project also has some other unique characteristics:
• It is an online encyclopedia
• It is collaborative
• It relies on donations
• It relies on volunteer editors
• It is part of a larger group of Wikimedia Foundation projects
• It is collaborative
• It relies on donations
• It relies on volunteer editors
• It is part of a larger group of Wikimedia Foundation projects
I used the Crazy Eights technique for the pages that had more information, such as the homepage and onboard page of new editors to generate a large number of possibilities.
The initial tests showed some refinements that still had to be made, mainly in the experience of the article creation wizard page.
For example, when the user is going to search if the subject of the article he wants to write about already exists or not on Wikipedia, it would be better to have immediate feedback than to click on search each time he tried an option. This could become an auto-complete list, as an option.
And the name of the article could also be improved on the confirmation page. During the test, the user found it strange to have to repeat the name of the article he had already typed in the previous step.
Wireframes
With the refinements coming from the first tests with the sketches, I was able to move on to high-fidelity wireframes to do another round of usability tests before going on to the final development of the interface.
Mood board and Styleguide
Before I started to define which visual attributes would translate the concepts defined until now, I researched some visual references to create a mood board, to indicate what would be the look and feel of my design.
I looked for pages that had a visual mass that was as complex as Wikipedia, a path that took me mainly to news portals and online newspapers. As a way of enriching the research, I also looked for websites of governments and public entities that also include these criteria.
The result was a selection of images that show modernity, but at the same time confidence, with sober colors and simple shapes.
With the references and inspiration from the mood board I was able to define the main elements of the UI. My goal was, in addition to creating a pleasant look and feel, to be very careful about the concepts of accessibility of the pages, considering that "being for everyone" is directly linked to the purpose of Wikipedia.
For that, all the colors that I defined for the UI provide a minimum AA contrast into the portal, as indicated by the WCAG guidelines.
Joining the UX & UI
From the definition of the problem and user journeys, I developed a desktop interface that could deliver the desired solution and generate a high-fidelity prototype for a better evaluation of the result.
Homepage
The homepage was a fundamental part of the process of attracting and onboarding new editors. The design solution considered this aspect, without leaving Wikipedia's content-first rule.
Design principles check:
1. Improve onboard of new editors
3. Attract new editors
How it works
This page comes as a specific solution to the onboarding of new editors. Through content, onlookers and enthusiasts can discover information that tells details of how Wikipedia works, as well as ways to be part of the community, all on a single page. This happens in contrast to what is done in the current version, which has these instructions spread across several pages.
Design principles check:
1. Improve onboard of new editors
2. Decrease the learning curve in editing and creating articles
Article creation wizard
This section of the website was built from the journeys developed for the personas. It comes from the idea that the new editor does not know the necessary rules and steps to create an article. The wizard was designed to follow this journey, with clear feedback at each stage of the process and creating a smoother experience for editors.
Design principles check:
1. Improve onboard of new editors
2. Decrease the learning curve in editing and creating articles
Visual article editor
The solution for the article editing tool intended to bring a more organized and friendly interface for a new editor, while still offering the option of editing the text via the wiki tool (source code) - which is the way used by more experienced editors, as seen during the research.
Another important point was the creation of a feedback page after the publication, which not only explains what happens with the content but also gives other options for improvement, sharing, or creating a new article.
Design principles check:
1. Improve onboard of new editors
2. Decrease the learning curve in editing and creating articles
Registered and unregistered user control panel
The control panel for users comes as a new solution for the editor to know how many articles they have collaborated with, the status of each one of them as well as options on how to contribute more. An overview of engagement as a way to encourage and retain active editors.
Just as it works on Wikipedia today, the difference for a registered user to an unregistered one would be to access the list of articles that need editing, which is fed by the community.
Design principles check:
1. Improve onboard of new editors
2. Decrease the learning curve in editing and creating articles
3. Attract new editors
High-fidelity prototype
In the final prototype below, it is possible to test the interactions from the homepage and complete the journey designed for the personas: create a new article as a registered user from the home page.
Learnings and Takeaways
Wow - what a journey!
What would be the next step of this project
What would be the next step of this project
The first step would be testing the prototype with users to run new iterations and improvements.
After that, in addition to working on tests of hypotheses that were not prioritized in this sprint, I would also seek new possibilities for improving the experience from the Wikipedia articles page: once it is a very important gateway to the portal, it could also bring new approaches on how to attract new editors and bring long life to this amazing project!
What I'm proud of
It was very interesting to explore an aspect of the experience of those who use Wikipedia in a way that not everyone knows - the world of editing - but that delivers a lot of value.
Talking to real editors brought very interesting insights into the project. And exercise my research skills in this context was very rewarding. The richness of research is this: you learn from each interview, and improve it for the next. I am sure that this is a process of continuous improvement and never ends.
What I would improve
I would like to have talked with more editors to try to discover more aspects of the experience.
I would also like to have designed more journeys within the portal, to explore other possible paths that could affect the editing experience.
Special thanks to Chloe for the Design Review sessions :)