A new Wikipedia..

How to redesign Wikipedia for different touch-devices and contexts, and at the same time deliver a good user experience?

In my Master Thesis on Bergen Academy of Arts and Design I studied the difference between the different touch-screens we are using daily. The outcome of this project is a reinvention of how Wikipedia may appear on smartphones and tablets.The content remains the same, but the design is tailored for each device.

The tablet version enhances Wikipedia’s visual content and promotes a mode which allows you to move from one article to the next, learning new things. The smartphone version is made for speed and rapid retrieval of information without spending too much time downloading.

A major part of my project has been dedicated to simplifying both versions as much as possible, making content the key focus. Reading, for instance, is not disturbed by links or references, but can be retrieved if necessary.

Tablet

The tablet version of Wikipedia focus on simplicity, content and exploration. It presents daily new, beautiful and interesting images and articles from Wikipedias great archive. The articles are divided between text and images, so that the user can choose if they want to read the information or browse through it's images. On the end of each article there is "call to actions", leading the user to new and relevant articles. You can see a walkthrough of the whole user interface for tablet here.


To focus on the content and text, no references or links are shown by default. You have to manually turn these on in the menu.

The tablet version displays articles in two different versions:
  1. A text-mode
  2. An image-mode

On the tablet version the table of contents is combined with the scrollbar. This way you can visually scroll through the article and quickly navigate to the information that you are looking for.

Smartphone

The version for smartphones had focus on speed and simplicity. As soon as the program is opened the keyboard is expanded and ready to search. To avoid unnecessary loading-time nothing is downloaded before you start to search. When you have found what you are looking for the article downloads fast because images and fact-boxes are stripped from the first download and has to be requested. You can look at the complete user interface for smartphones in this video.


When you start the program on your smartphone the keyboard is already expanded and ready to type on. Nothing is downloaded before you search, or choose to click on one of the menu-elements.

The search field is placed on the bottom of the screen to naturally connect with the keyboard when it’s expanded. This also makes it easier to reach. This location of the searchbar is more natural on these touch-screens, where the keyboard expands from the bottom.

To focus on the content and text, no references or links are shown by default. You have to manually turn these on in the menu.

What have I learned from this project?

  • Adapt a design to exicting content
  • Applying good typography for screens
  • Work independently
  • Learned what the differences and similarities between the different screens means for the user and designer
  • Work towards a deadline far ahead
  • Write a larger report
  • Prototyping
  • User testing
  • To concretise a research question
  • Update a process-blog regularly

My whole Master Thesis on the web if you are interested. (Norwegian)