Overview

Wikipedia has a lot of potential but their design does not live up to its content. A popular informational platform that both students and adults use but people need a simple way to obtain information fast.

My Role

UI/UX Design

Team

Copywriter: Victoria Jeon
Strategist: Anbar Azam
UI/UX Design: Emily Xia

Tools

Adobe XD | Illustrator | After Effects

Duration

April - May 2020
8 weeks

01 / The Problem

The community that built the largest encyclopedia in history is shrinking.

With over 30 million users, but no one goes to their website directly or sees their homepage. Most people are directed to their search results from Google instead of actually using Wikipedia to search.

02 / The Solution

Reorganizing, simplifying, and unifying.

With massive information jumbled up, we created a redesign that embodies the rich content in which Wikipedia provides. By reorganizing, simplifying, and unifying the content, users are able to navigate through the content more efficiently and effortlessly.

03 / Brand Identity

Brand strategy development.

In order to get a get a good brand direction, we established the brand IdeaL, brand archetype, brand positioning statement, brand mantra, and brand personality.

Big IdeaL

Wikipedia believes the world could be a better place if people could go to a website without worrying about how the site works.

Brand Archetype

The Sage: Sharing wisdom with you. The sage’s central wisdom is an individual way of finding paradise.

Brand Positioning Statement

For World Wide Web users who want easy access to information, Wikipedia offers open collective knowledge online that is updated within minutes rather than months or years in the printed encyclopedias.

Brand Personality

Open
‍All humans sharing knowledge and building it.
Collective
Knowledge is constantly being collected.
Educational
‍Increasing knowledge for everyday use.

04 / Logo Redesign

Connecting lines and dots that symbolize human connection.

We redesigned the Wikipedia logo to give it a modern and clean look. Inspired by molecular structure, the connecting lines and dots symbolize all humans being connected while sharing and building knowledge.

Old Logo

Their current logo symbolize the multilingualism of Wikipedia but we wanted to redesign it in a way where it fits the brand's personality more.

Redesigned Logo

Since Wikipedia allows all of us to edit and read we were Inspired by the molecular structure. The connecting lines and dots symbolize all humans being connected while sharing and building knowledge.

05 / Visual Design

Connecting lines and dots that symbolize human connection.

Home Page

The aim of this project was to make it more user-friendly and modernized. The interface has been reduced without effecting the identity or functions. The entries and data can be read more efficiently.

Create Account

We redesigned the Create Account page by making it a simple and easy way to start your journey with Wikipedia. The old interface of of this page was outdated so we decided to make it more interactive and modern.

Article Page

In the article page, since this is the page that most of us are viewing, we wanted to make it more organized and easy on the eyes. Since these pages are copy heavy, we decided to reduce the work of scrolling. A fixed position for the content bar allows users to easily navigate through each section on the page. A back to top button also help reduce work for the users.

05 / Design System

A modernized design system.

Since this is a very informational site, we had to keep the design system simple and easy on the eyes. By using a muted color palette, legible typefaces, and a new icon set we can highlight the rich content that Wikipedia offers.

Color

We tried to keep the original color system of Wikipedia so we decided to keep the B&W as the primary colors and a muted blue and purple as the secondary colors. These secondary colors allows us to give the site a pop of color.

Typography

The Ubuntu typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens. Georgia is a serif typeface that would appear elegant but legible when printed small or on low-resolution screens.

Icons and Buttons

Since we redesigned the logo, we wanted to create a new icon set that reflects the new logo. In result, we used an icon set that emphasized the molecular structure of the logo.

Logo Design

Redesigning such a classic logo was challenging. We first had to figure out what the brand stands for and its goal. After researching its competitors and its history, we came up with the brand mantra; open collective knowledge. With this we looked into symbols, icon, or any visuals that would connect with our brand mantra. That is when we were inspired by atoms and its molecular structures. Molecular structures have connecting lines and dots which symbolize Wikipedia connecting while sharing and building knowledge.

07 / Reflection

My key takeaways from Wikipedia

Redesigning a brand is a challenge and I would not know where to start if it weren't for the research and process. By establishing a brand IdeaL, brand archetype, brand positioning statement, brand mantra, and brand personality we were able to recreate the web's largest encyclopedia site.

Wikipedia