Wikipedia's Redesign
Introduction
Since its launch in 2001, Wikipedia is being used by people from around the world to search topics online. Therefore it became one of the largest digital free encyclopedia in the world, available in 303 languages, and based on a model of openly editable content.
My goal with this study is to first understand what need to be redesigned in Wikipedia, focused in user's needs, and then deliver an improved experience while using the website.
My Role
This was a single project for study purposes and made by myself.
Analysis
I began with an analysis of Wikipedia’s content and its behavior in the focus pages: Wikipedia.org, Main Page and an Article Page.
In the pictures I selected with the same color the contents that are the same or have a similar theme. I started with this analysis in order to understand how this content repeats across the pages.
In the pictures I selected with the same color the contents that are the same or have a similar theme. I started with this analysis in order to understand how this content repeats across the pages.
Research
Due to the deadline of this project, I choose to not perform an user research by myself, and instead I looked for user data that was already available.
So, I have searched some studies made by EYEVIDO and Eigenes Werk, where a heatmap was made using eye tracking techniques in order to study user's behavior when using Wikipedia.
This heatmap images helped me to understand what parts of the website and what kind of content the user is more attracted in the Wikipedia's interface.
Heatmaps from: https://de.wikipedia.org/wiki/Datei:Eyetracking_heat_map_Wikipedia.jpg https://commons.wikimedia.org/wiki/File:Heatmaps_und_AOIs.png - Accessed in November 9th 2018
In addiction, I also searched for the top viewed pages in Wikipedia English. That way, I could understand better what kind of content the users accessed the most, and what could be kept and what could be taken away.
Data from: https://stats.wikimedia.org/v2/#/en.wikipedia.org/reading/top-viewed-articles/normal|table|1-Month|~total - Accessed in November 9th 2018
Personas
Based on the analysis and research on the Wikipedia's website, I built three personas based on the different users that access Wikipedia's content for different purposes.
The personas are: The Research Enthusiast, The Sporadical User and The Contributor.
The personas are: The Research Enthusiast, The Sporadical User and The Contributor.
Customer Journey Mapping
After building the personas, I made a customer journey map in order to identify the user's behavior, feelings and touch points when using Wikipedia.
Benchmarking
In order to understand how other sites display their content I made a quick research in Medium and a plugin for Wikipedia, Wikiwand.
Redesign Opportunities
After this first step of analysis and researched, I observed some features that can be redesigned:
- There is a lot of content displayed in the side menu that is not much important when the user is reading the article;
- There is hard to see the authors of an author;
- The Portals are quite hidden in the main page;
- There is too much content and links displayed in the main page;
Redesign Goals
With the redesign opportunities traced, I define what would be my redesign goals:
- Improve the navigation bar;
- Refine the information displayed in the menus and the pages overall;
- Improve the searchability when navigating in Wikipedia;
- Make it easier and simple to make users donate.
Information Architecture
Based on the redesign goals, I rearranged the information in Wikipedia. First, I started my simply mapping how the current Wikipedia's map looks like.
After tracing the current map, I rearranged some of the links, bringing the ones that are relevant for the users navigation them to the navigation bar, also some links found in the side menu I opt to display them in the footer, and rearranged the content. And this is how the map proposed by me looks like.
Sketching Solutions
After the research, analysis and information architecture done, I started sketching paper first wireframes to understand how the elements could be arranged in the page.
Paper Prototyping
After some sketches, I pick one that seemed to fit better my redesign goals and quickly made a paper prototypes in order to test some of the interactions before building the final wireframes and the digital prototype.
Wireframes
After testing and organising the elements in the paper prototype, it was time to pass them to a digital software and start the wireframes. I choose to work with Adobe XD.
Search Bar Behavior in the Home Page
It will not be displayed the two search bars in the home page.
The search bar in the navigation bar will only be displayed when scrolling down the page, like presented in the video bellow.
Prototype
The interactive prototype was built in Invision, bellow there is a video of the prototype being accessed and its interactions, and it can also be accessed in the link below:
Mood Board
To define the Visual Design, I gathered together images from websites used in the benchmarking and others that were:
minimalistic + have text content + be elegant
User interface
Style Guide
Mobile Adaptive Version
Takeaways
Wikipedia is all about offering free knowledge for people, being openly editable and viewable content. In that way, by improving their content's reading experience makes the website more pleasant so users can spend more time reading and navigating throughout the different contents. Highlighting who contribute for each article also make people want to write and contribute more, and gives the article some credibility by clearly showing the authors.
For the future, I would like to do more deep user research by interviewing users, and collect more feedback about how they use Wikipedia, and what they think about this redesign proposal.
