Wikipedia website redesign

Introduction

On my Interface course, I have to work on a Wikipedia redesign project.

Wikipedia is a huge UX challenge, it have a lot of nice features but the website is outdated and have some usability problems. On this project, I worked only with the few pages, because I would need a team and more time to work on all sections of this amazing tool and would need much more time.

Project Goals

Gain experience and practice in UX process, User journeys, Personas  and Information Architecture

Work on improve layout and on information hierarchy

Improve usability, make it easier

to read and work on a more

attractive layout

Improve the use of Axure in my wireframe works

Process

Wikipedia is a huge UX challenge, so with little time and team, I choose some few screens to focus and here is the process that I use to do it:

Research and user analyze

Analysis of the website

Pain points

Personas

User journey

Ideation

Website map

Wireframes

Sketches

UI design

Visual layout

Final prototypes

Analyzing

Analysis of the website and search for the current usability problems To design a better usability, I want to understand more who is using the website and how, so I created user journeys and personas hypothesis.

Architecture

Here I mapped the structure of the new website with a website map, I could see here, what features could be better and studied how this will work on the future. In this phase, I also done the first sketches and wireframes, to see more visually how this idea will work and how.

Wireframe Prototype

Visual Design

In this Phase I used all the information we got until here and done the visual layout followed by the prototype of it.

Visual Prototype

Website analysis

I analyzed wikipedia website pages and here are the problems that I found:

3

2

5

4

1

1

Menu too large and confusing

4

General typography with a width and sizes that makes difficult to reading

2

This information have a good weight  of importance, because is the categories of science and is poorly diagrammed on the current layout

5

Unnecessary information

3

Too many tabs

Who is using this?

In this phase I made a persona study to find out some hypothesis of who is using the website

How they are using?

Here on User Journey, I was able to find some pain points of my users and then I can design something that makes more sense and make a more pleasant experience for them, with a effective visual and intuitive layout.

Solution idea:

The use of gamification with a score, ranking and the feeling of "earning something" so we can give a greater stimulus to who is writing or want to start writing articles and a greater sense of security for those who are using the article in their own projects

Problem:

Certifications and articles trust

Problem:

Solution idea:

Long articles with no specific  navigation for people who would like to go directly on the subject

The use of some feature that generate question alerts for the user when he is typing a subject and the creation of specific menus that helps people to get right into the subject they want

Solution idea:

The use of geolocation to change the language automatically

Problem:

People have to change the language manually

Information Architecture

Here I made a site map, to start seeing the structure of the redesign better and more "visually"

Some freehand sketches I was able to work on with all information I had until here

Sketches

Homepage

User's area

User's article edit area

Wireframes

I used the Axure software to blend all information  and work on the wireframes, so I can have a physic and visual layout to discuss the new ideas and features.

1

2

3

4

Wireframe points

Homepage

When the person enters the topic in the search bar, it appears, the tips, complementing on the topic written and solving the problem of people who need to find something more accurate and fast by the site.

More visible and organized categories to Improve navigation flow

Featured articles gallery in a cleaner and

more organized way

Other sessions with their proper hierarchy of importance, organized by tables

1

2

3

4

1

2

3

4

User's page

User page, already organized with the gamification concept . So for anyone who reads this person's articles, will see their scoring and have a little more security when using the information contained there. And it encourages those who write, to write more and better quality to increase the world ranking.

On the user's home page, will appear the latest articles created and edited to improve visualization

Organized menu with icons to facilitate usability

Automatic mute language using geolocation to

improve the experience

1

2

2

3

4

1

2

3

User's edit page

Inside the user page, the user can edit articles, in edit mode. The menu of this screen, will have links of the titles and sub titles of each article, as a way to help the user to go straight to the theme that he wants to work in a faster way

Breadcumbs to help navigators know where they are

In this part, I followed the same old wikipedia concept as I thought it worked well. It would be a "mini summary" of the article itself, with some concept image and little information about this article. This summary helps the experience because the person can analyze it first, see if it is really what it seeks, and then continue in the entire article.

1

2

3

Wireframe prototype

Here we can see the wireframe layout really working on, so now we can see visually what will work and what will not

Invision prototype link:

https://invis.io/KEFOKGZ34ZG#/277425883_Home

Visual Layout

How you can see, a UX/UI process can be a  extensive work and it have a lot of ways to do it. Will always depends on the project, the timing, the people involved, stakeholders of the project and a lot of other things that designer have to analyze before choosing a path, we have to analyze every little parts and do it always thinking in user first. Is a beautiful and great road and now we get on the visual layout, the last one of this project

Coming Soon

LINKEDIN

DRIBBBLE

TWITTER

1

1

2

This information have a good weight  of importance, because is the categories of science and is poorly diagrammed on the current layout

3

Too many tabs

4

Unnecessary information

5

General typography with a width and sizes that makes difficult to reading

Who is using this?

In this phase I made a persona study to find out some hypothesis of who is using the website

How they are using?

Here on User Journey, I was able to find some pain points of my users and then I can design something that makes more sense and make a more pleasant experience for them, with a effective visual and intuitive layout.

Problem:

Solution idea:

Certifications and articles trust

The use of gamification with a score, ranking and the feeling of "earning something" so we can give a greater stimulus to who is writing or want to start writing articles and a greater sense of security for those who are using the article in their own projects

Problem:

Solution idea:

Long articles with no specific  navigation for people who would like to go directly on the subject

The use of some feature that generate question alerts for the user when he is typing a subject and the creation of specific menus that helps people to get right into the subject they want

Problem:

Solution idea:

People have to change the language manually

The use of geolocation to change the language automatically

Information Architecture

Here I made a site map, to start seeing the structure of the redesign better and more "visually"

Sketches

Some freehand sketches I was able to work on with all information I had until here

Homepage

User's edit area

User's area

Wireframes

I used the Axure software to blend all information  and work on the wireframes, so I can have a physic and visual layout to discuss the new ideas and features.

Wireframe points

Homepage

1

When the person enters the topic in the search bar, it appears, the tips, complementing on the topic written and solving the problem of people who need to find something more accurate and fast by the site.

2

More visible and organized categories to Improve navigation flow

3

Featured articles gallery in a cleaner and

more organized way

4

Other sessions with their proper hierarchy of importance, organized by tables

4

2

1

User's page

1

User page, already organized with the gamification concept . So for anyone who reads this person's articles, will see their scoring and have a little more security when using the information contained there. And it encourages those who write, to write more and better quality to increase the world ranking.

2

On the user's home page, will appear the latest articles created and edited to improve visualization

3

Organized menu with icons to facilitate usability

4

Automatic mute language using geolocation to

improve the experience

1

2

3

4

User's article edit page

1

Inside the user page, the user can edit articles, in edit mode. The menu of this screen, will have links of the titles and sub titles of each article, as a way to help the user to go straight to the theme that he wants to work in a faster way

2

Breadcumbs to help navigators know where they are

3

In this part, I followed the same old wikipedia concept as I thought it worked well. It would be a "mini summary" of the article itself, with some concept image and little information about this article. This summary helps the experience because the person can analyze it first, see if it is really what it seeks, and then continue in the entire article.

1

2

3

Wireframe prototype

Here we can see the wireframe layout really working on, so now we can see visually what will work and what will not

Invision prototype link:

https://invis.io/KEFOKGZ34ZG#/277425883_Home

Visual Layout

How you can see, a UX/UI process can be a  extensive work and it have a lot of ways to do it. Will always depends on the project, the timing, the people involved, stakeholders of the project and a lot of other things that designer have to analyze before choosing a path, we have to analyze every little parts and do it always thinking in user first. Is a beautiful and great road and now we get on the visual layout, the last one of this project

Coming Soon

Wikipedia website redesign

Introduction

On my Interface course, I have to work on a Wikipedia redesign project.  Wikipedia is a huge UX challenge, it have a lot of nice features but the website is outdated and have some usability problems. On this project, I worked only with the few pages, because I would need a team and more time to work on all sections of this amazing tool and would need much more time.

Project Goals

Gain experience and practice in UX process, User journeys, Personas  and Information Architecture

Work on improve layout and on information hierarchy

Improve usability, make it easier to read and work on a more attractive layout

Improve the use of Axure in my wireframe works

Process

Wikipedia is a huge UX challenge, so with little time and team, I choose some few screens to focus and here is the process that I use to do it:

1

Research and user analysis

Analysis of the website

Personas

User Journey

Pain points

Analyzing

Website analysis and search for the current usability problems To design a better usability, I want to understand more who is using the website and how, so I created user journeys and personas hypothesis.

2

Ideation

Website map

Wireframes

Sketchs

Archictecture

Here I mapped the structure of the new website with a website map, I could see here, what features could be better and studied how this will work on the future. In this phase, I also done the first sketches and wireframes, to see more visually how this idea will work and how.

Wireframe Prototype

3

UI design

Visual Layout

Final prototype

Visual Layout

In this Phase I used all the information we got until here and done the visual layout followed by the prototype of it.

Visual Prototype

Website analysis

I analyzed wikipedia website pages and I here are the problems that I found:

Menu too large and confusing

This information have a good weight

of importance, because is the categories of science and is poorly diagrammed

Too many tabs

Unnecessary information

General typography with a width and layout that makes difficult to read.

Who is using this?

In this phase I made a persona study to find out some hypothesis of who is using the website

how they are using?

Here on User Journey, I was able to find some pain points of my users and then I can design something that makes more sense and make a more pleasant experience for them, with a effective visual and intuitive layout.

Problem:

Solution idea:

Certifications and articles trust

The use of gamification with a score, ranking and the feeling of "earning something" so we can give a greater stimulus to who is writing or want to start writing articles and a greater sense of security for those who are using the article in their own projects

Problem:

Solution idea:

Long articles with no specific  navigation for people who would like to go directly on the subject

The use of some feature that generate question alerts for the user when he is typing a subject and the creation of specific menus that helps people to get right into the subject they want

Problem:

Solution idea:

People have to change the language manually

The use of geolocation to change the language automatically

Information Architecture

Here I made a site map, to start seeing the structure of the redesign better and more "visually"

Sketches

Some freehand sketches I was able to work on with all information I had until here

Homepage

User's edit area

User's area

Wireframes

I used the Axure software to blend all information  and work on the wireframes, so I can have a physic and visual layout to discuss the new ideas and features.

Home page

User's area

User's article edit area

Wireframe prototype

Here we can see the wireframe layout really working on, so now we can see visually what will work and what will not

Invision prototype link:

https://invis.io/KEFOKGZ34ZG#/277425883_Home

Visual Layout

How you can see, a UX/UI process can be a  extensive work and it have a lot of ways to do it. Will always depends on the project, the timing, the people involved, stakeholders of the project and a lot of other things that designer have to analyze before choosing a path, we have to analyze every little parts and do it always thinking in user first. Is a beautiful and great road and now we get on the visual layout, the last one of this project

Coming Soon

3

1

1

2

3

4

5

4

2

5