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
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
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.
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.
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
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.
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.
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.
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.
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.
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.
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.