Wikipedia
Inis Leahy
UI/UX Designer
Made with

Wikipedia

Making knowledge even easier to access

My role

This project is an unsolicited redesign for personal study, and I tackled alone all the steps necessary to finish the task:

User research (Survey and Interviews)  Wireframing • Prototyping • Visual design • Animation for interaction

Tools used

Typeform •  Adobe XD •  Axure • Protopie • Illustrator • Photoshop

Step 1 - Analysis

Wikipedia

I first analysed the current website taking into account best practices and accessibility guidelines for web:  


Homepage:

1 - Scattered menus with no clear hierarchy.
2 - Images poorly positioned or too small.
3 - Font size and space between lines make the text look dense and hard to read.
Wikipedia
Article Page:
1 - Scattered menus with no clear hierarchy.
2 - Index is only visible on the top of the page.
3 - Cluttered information making it hard to quickly scan the text.

Step 2 - Research

Interviews

At the discovery phase of my project, I conducted interviews with 5 Brazilian Wikipedia users in order to get a better understanding of the problem.

Guiding Questions:

  • In which cases do you use Wikipedia?
  • How do you do your research on Wikipedia?
  • Is there something on the website that frustrates you?
  • What do you like most about Wikipedia?

Key Findings:

  • All 5 users used to land on Wikipedia article pages via Google search and not by using Wikipedia homepage.
  • 4 users used to go to Wikipedia to satisfy personal curiosities and only one used it to academic research.
  • All users found Wikipedia to be very useful and 3 of them thought the website was "confusing" and "ugly".

Survey

After the interviews, I thought it was necessary to gather more quantitative data in order to validate my first findings. The survey was created on TypeForm and shared online in Brazilian forums, gathering 107 responses. 

Key Findings:

  • 66% used Wikipedia to satisfy personal curiosity on specific matters instead of reading entire articles.
  • 90% of users spent up to 15 minutes on the website in each search.
  • 45% totally agreed that Wikipedia is a trustworthy website.
  • 42% totally agreed that Wikipedia is easy to navigate.

You can see the survey here (in Portuguese)
You can see the full survey report here (in Portuguese)

31%
used Wikipedia more than once a week
68%
reported never to use Wikipedia's navbars
62%
couldn't remember seeing Wikipedia's Home
43%
never used Wikipedia's search field

Step 3 - Personas &
User Journeys

Based on my research results, I designed personas and user journeys that would help me guide my further decisions regarding any changes on the website's UX.

The conclusion of my research was:

1 - Home page and search field need to be more attractive in order to keep user on the website for longer.
2 - Menus need to be organized hierarchically.
3 - Improve reading of articles = font + white space.
4 - Make the Index more useful when reading the article.
5 - Make images more attractive.

Step 4 - Sketches & Wireframes

Wikipedia

Information Architecture

One important part of this project consisted of reorganizing the website's navigation, hiding content that was not useful to the majority of users and could potentially confuse them.

Wikipedia

Sketches

I usually start the design process with low fidelity sketches on paper, as this make it easier to iterate through many design options quickly.

Wikipedia

Wireframes

After experimenting a lot on paper, I moved to the computer to create better polished wireframes.

Changes I proposed in the wireframe were:

1 - Better positioned search field.
2 - Homepage layout that can be scanned quickly.
3 - Menus organized hierarchically.
4 - Improved reading by changing the layout of the information.
5 - Floating index that is accessible at any page height.
6 - Featured images.

Step 5 - Prototype

In order to really see the idea coming to life, the next step was to create a low fidelity prototype in Adobe XD.

You can see a video showcasing the prototype and interactions below.

Step 6 - UI Design

Final proposal for Wikipedia homepage for mobile.
Place your cursor on top of the image and scroll down to see the rest of the page!
Final proposal for Wikipedia homepage for mobile.
Place your cursor on top of the image and scroll down to see the rest of the page!

UI Design

The final step was to design the screens in Adobe XD, also using Protopie to animate interactions.

Guiding points:

  • Simple and clean visuals, as the main focus of Wikipedia is text content!
  • Fully responsive design.
  • Make use of Wikipedia's photo archive by better positioning images without losing focus on the content.
  • Fonts optimized for web and mobile interfaces with excellent legibility.

Wikipedia
Wikipedia
Navbar interaction
Navbar interaction

Interactions

All the interactions and animations were designed to be simple and clean, but at the same time help users perform tasks faster and with some joy, improving the user experience as a whole.

Autocomplete search field
Autocomplete search field
Wikipedia

The info you need, when you need it

As the main purpose of Wikipedia is to share knowledge in a simple and quick way, I designed a carousel for the "In the news" section, so people would have full control over how much content they want to see.

There's also a fixed navbar so people can find their way back to the main page and search field no matter where they are on the page.  The hover effect for hyperlinks shows the user a little more about the topic, inviting them to go to another page and read more.

Wikipedia

Be social

Wikipedia is a collaborative web-encyclopedia, and therefore, depends on people writing, sharing and reading their content. So why not make it more social? 

Here I proposed two simple buttons on the article page, allowing the user to bookmark the article to their account and share the page on social media and email.

Wikipedia

Thanks for taking this time to see my work!

If you have any questions or simply want to talk about design stuff, don't be shy and contact me!