02 . Wikipedia Redesign

iPad UI

01 . About this Project

This project was an exercise created for Aela's Master Interface Design course. For it, I was asked to create a redesign of the Wikipedia website taking into consideration the user needs, business needs, implementation viability, and all the design processes necessary to achieve the completion of such a project from a full product design approach. I was expected to document the entire journey, create an interactive prototype, and in the end, present it live to my mentors at Aela.

Toolkit: Adobe XD, Axure, Adobe InDesign, Whiteboard, Markers, Notepad, Post-its

02 . Approach

My approach was to start the project through research focused on the user and business needs, I wanted to find the connection between these two needs that could justify such a bold challenge of redesigning one of the most visited websites in the world.

I wanted to discover, first, if there was such a necessity of a redesign, what would be that necessity, and what were the aspects I needed to focus in order to start working on my project. The entire process of this research and its conclusion can be seen below.

03 . Primary Research

I started my research by looking for as much information on the internet I could get about Wikipedia, its users, editors, and appreciators. Sources such as Quora, Google, Reddit and Wikipedia itself were used to achieve this objective. Wikipedia, by being one of the most visited websites in the world, made me curious about what could be a real necessity of a redesign.

Needs Research

Below, some interesting comments I was able to gather by some of its users:


"The whole point of Wikipedia is that it is supposed to be easily accessible information for the entire world.”

"Most people in developing nations who would benefit the most from Wikipedia don’t have high-speed internet connections, and can’t tolerate loading a super high-resolution 400kb image.”

“Like everyone else, I hit Wikipedia between one and ten times a day and yet I’ve probably seen the homepage a handful of times in my life.”

03 . 01 . Users Needs

In this initial research, I also decided to interview Wikipedia users and compare the results of the interviews with what I was reading on the online comments. Through this analytical process, I was able to identify some behavioral and perceptual patterns about the users in general:


Most of Wikipedia’s users end up arriving on the website through a link for an article found on an external source.

Lots of users consider the website as a resource for professional or academic works.

Users tend to access the website for specific information and leave it as soon as they get the needed information.

Wikipedia editors tend to engage in editing and contributing to the website as a means to identify with the Wikipedia community and to feel like being part of something.

03 . 02 . Business Needs

After identifying some of the user needs, I still wanted to find information about the business needs and its goals. Here are some relevant information I was able to gather regarding it. I was able to find a thread about Wikipedia redesign that featured valuable comments by Jonathan Cardy (Wikimedia Foundation UK) and also Brandon Harris (Wikimedia’s Foundation Senior Designer).

According to Jonathan Cardy (GLAM Organizer Wikimedia Foundation UK)


“The interface will seem clunky and dated to those who think of user experience from the perspective of a Wikipedia reader with a modern kit and fast broadband speed.”

“Wikipedia is a crowd-source encyclopedia on the Internet, unless it can retain and renew its crowd of volunteers it ceases to exist, and for a decade now its main problem has not been acquiring readers or financial donors, it has been acquiring new editors, and almost all its new editors have been recruited by tempting readers to click on the edit button.”

“Wikipedia’s existential problem is in making its user experience more inviting to new editors.”

According to Brandon Harris (Wikimedia Foundation Senior Designer)


“There are many issues with the current design that work against our goals (mostly engaging and retaining a healthy population of editors).

04 . Problem Statement

Throughout my research, I figured out that the most urgent problem Wikipedia faces today is not related to the usability of its website, but actually the acquisition of new editors, since they are vital for the sustainability of the project.


01. The main objective of my redesign is to bring new editors to Wikipedia. According to my research, this is the most important factor that would justify a redesign.

02. Since most of its editors become so by being readers first, it is also important to make the Website easily accessible and with clear and more engaging navigation to its users in order to stimulate and attract a higher number of readers, and consequently, editors and contributors.

05 . Site Analisys

During this stage of the process, I decided to build a site map with the objective to see all the sections of the entire site and through this visualization, I started to consider some decisions to be made.

Site Analisys

06 . Personas

To build the personas, I interviewed a group of different Wikipedia users and asked these 6 questions to them:

- What is the biggest reason that you use Wikipedia for?
- What do you miss while using Wikipedia to achieve your goals?
- When was the last time that Wikipedia was valuable to you?
- What is your favorite session on the Wikipedia homepage?
- Which values being a Wikipedia editor brings to your life?
- If you're not an editor, what would be your biggest motivation to become one?

Site Analisys Site Analisys Site Analisys Site Analisys

07 . Customer Journey

Customer Journey Site Analisys

08 . Initial Studies

Initial studies in the form of sketches were done before I achieved my final design decisions.

Site Analisys Site Analisys

09 . Wireframe

Site Analisys

10 . Style Guide

Site Analisys

11 . Prototype

The results of my research provided me with valuable pieces of information that allowed me to make important design decisions that oriented the construction of my final prototype.

Site Analisys

12 . UI Components

Through this categorization, I want to emphasize some logical decisions that were oriented by my research findings and how they translate into an overall UX and UI project.

Site Analisys

01 . Home Link
Since most users access Wikipedia from third-party websites (like Google, for example), a link where the user can go to the home page at any time is an essential feature.

04 . Search by Image Icon (Reverse Image Search)
During the interviews that were done for the creation of the Personas, some users expressed their desire to be able to do an image-based search.

05 . Current Date
Since some sections on the website are based on the current day (Article of the day, In the news, On this day and Today’s list), it is important that the current date is visible on the website.

07 . Start Editing Button
According to the business needs, the most important factor for a redesign is to acquire new editors and content contributors, because of this, I decided to give the editing button a highlight position (according to the F-Pattern layout theory) and a solid color fill to bring the attention of the user.

09 . Main Navigation Menu
Because of the reasons expressed on “01 . Home Link”, it is also important to have a persistent navigation menu including the most important sections of the Home Page.

11 . Main Image Article
Instead of using a big (and difficult to load on some machines and internet connections ) hero image, I decided to keep the images smaller in order to optimize the overall accessibility of the website.

12 . Date Navigation
This feature is used to increase the navigation possibilities and by doing so, potentialize the engagement of users.

13 . Portals Buttons
For the reason mentioned above, these buttons can also potentialize the engagement of users.

14 . Information of Editors and History of Edits
To stimulate the social proof effect and stimulate users to edit, these two features show that the website is being constantly updated by its users and also shows the collaborative effort the comprises each article.

15 . Read More Button
Since most of the edits start inside the articles pages, I decided to make the “Read More Button” as a solid color filled button in order to attract the attention and stimulate users to read and edit the articles.

13 . Conclusion

During the whole process of this project, I was able to learn significant things about the entire Wikipedia project, how it brings value to its users and how it is sustained as a business.

My initial impression was that the old-fashioned and unpolished visual design of the website would be an issue for its users, but that wasn't really the biggest problem, accessibility was actually far more important, and that was the main reason I decided to work with a very clean, objective, and quick to load layout. Also, I expected that the democratic aspect of the project would raise credibility questions about the information contained on the website, but its users demonstrated to be quite trustful that the information was credible and truthful.

I was also able to identify that the biggest priority of a redesign would be the acquisition of new editors, as shown in my research. For this reason, I decided to keep the editing button as a persistent element throughout the navigation and on a highlighted position on the site pages. The biggest reason someone ends up becoming an editor is by actually being a Wikipedia regular user in the first place, with this in mind, I decided to make the sections on the home page organized in a manner of a news website in order to be able to attract not only people who are looking for a practical on-demand source for a specific information, but also to be a platform for people willing to spend some time reading interesting articles and useful information.

Site Analisys