UX Designer
Wikipedia-Thumb.jpg

UX/UI | Wikipedia

Role UX/UI | Category Coursework

Briefing

Briefing

Redesign Wikipedia using Persona, User Journey, Mind Map and Wireframe.

If you want to see a more detailed presentation of this project, with links to the prototypes, you can see it here.

First Step: First Impression & Wikipedia's KPI

First Step: First Impression & Wikipedia's KPI

Wikipedia is a collaborative non-profit project that doesn’t need introduction. Therefore my first step was to navigate through it and write down everything that could be improved. I also did some quick sketches to warm up for the project.

After this warm up, I did some research to understand Wikipedia’s needs. Since it is a collaborative non-profit project, I establish donation and community as it’s KPI.

Second Step: Understanding the User

Second Step: Understanding the User

There is no one better than the user to ask about the good, the bad and the ugly about their experience. So I’ve made an online survey to find out what are the users needs and what are their pain points.

If you want to view an analysis on the survey, you can access it here.

Wikipedia_UserNeeds.jpg
Third Step: Creating Personas and User Journeys

Third Step: Creating Personas and User Journeys

To find a solution to these pain points, I’ve created 4 personas based on the user’s answers. And from these 4 personas, 4 User Journeys.

 With the User Journeys in mind, I’ve come to a solution for the two main pain points: A Wikipedia’s Seal of Approval and Gamification.  The users are already familiar with banners that alert when an article needs more attention, but there is nothing to assure them that an article meets Wikipedia’s standards. A simple seal can help them feel more comfortable with the contend they are reading.  Gamification can help ease the intimidating experience some users feel when getting involved in such a huge project. Giving users simple action and rewarding them, makes an on boarding experience more comfortable. We can also encourage older users to help newer ones by rewarding them.

With the User Journeys in mind, I’ve come to a solution for the two main pain points: A Wikipedia’s Seal of Approval and Gamification.

The users are already familiar with banners that alert when an article needs more attention, but there is nothing to assure them that an article meets Wikipedia’s standards. A simple seal can help them feel more comfortable with the contend they are reading.

Gamification can help ease the intimidating experience some users feel when getting involved in such a huge project. Giving users simple action and rewarding them, makes an on boarding experience more comfortable. We can also encourage older users to help newer ones by rewarding them.

Wikipedia_Solutions.jpg
Fourth Step: New Mind Map and Sketch Sketch Sketch

Fourth Step: New Mind Map and Sketch Sketch Sketch

Now that I had the users input and the Wikipedia purpose in mind, I drawn the current Wikipedia’s Mind Map and reorganised it. After that I sketched until satisfied and moved it to the computer, where I created a mid-fidelity wireframe.

Fifth Step: InVision, Feedbacks and Final UI

Fifth Step: InVision, Feedbacks and Final UI

With my wireframes in hands, it was time to test it. I made a prototype with InVision and shared it with my classmates and teacher. I wrote down their feedbacks and finally started working on the UI.

Wireframes_01.jpg
Wireframes_02.jpg
Wireframes_03.jpg
Wireframes_04.jpg
Wireframes_05.jpg
Main Page

Main Page

For the Main Page, I focused on the exploration side of the Wikipedia.

There is no doubt that the search is the most important feature, so it deserves a special place. But I also wanted to invite the user to explore Wikipedia in different ways. Each section is a new way the user can explore Wikipedia and each card is like a micro-world, where the user can dive deeper, if he/she feels like it.

In the “Did You Know…” section, I proposed a voting system. The most voted article, would become the “Fun Fact of the Week”. It is a way to make the user start feeling a part of the community.

I also gave a highlight on the “Become an Editor” section. Without editors, there is no Wikipedia.

Home_01.jpg
Home_02.jpg
Home_03.jpg
Home_04.jpg
Home_05.jpg
Home_06.jpg
Home_07.jpg
Home_08.jpg
Home_09.jpg
Detail matters

Detail matters

It is very important to keep the Search Bar always visible. So I proposed that the Search Bar collapses to the fixed top bar, when the page is scrolled down.

Article Page

Article Page

The most important feature on the article page is it’s readability. To help with that I’ve made a collapsing lateral menu, where the user can navigate through it’s content. If the user do not wish to use the menu, they can simply shut it and focus on the reading.

 Since I’m dealing with a much loved project, I’ve kept some design elements that worked from the original layout such as the page title with a line beneath and the quick fact box on the right. Nostalgia helps the user to embrace the new design.  I also gave a highlight to the summary for those who doesn’t want to dive deeper on the topic.

Since I’m dealing with a much loved project, I’ve kept some design elements that worked from the original layout such as the page title with a line beneath and the quick fact box on the right. Nostalgia helps the user to embrace the new design.

I also gave a highlight to the summary for those who doesn’t want to dive deeper on the topic.

 Images and videos never fitted well in the articles. I fixed that and, if the editors want to upload more than one video or image per section, they can choose between carousel and gallery.

Images and videos never fitted well in the articles. I fixed that and, if the editors want to upload more than one video or image per section, they can choose between carousel and gallery.

Profile Page

Profile Page

To help with the on boarding experience, I’ve created a profile page that acts as a safe space. There the editors can view different ways to engage positively with the community and with Wikipedia through the achievements.

They can also keep up with their saved pages and access a sandbox, where they can test out new articles before publishing them.

The user summary on the left helps to humanize other editors.

Final Thoughts

Final Thoughts

This project was an opportunity to put everything I’ve learned so far to test. It was great to see how far I’ve come and to find out how much more I can grow.