Wikipedia
Wikipedia is a website with heavy text and content, so it presented an opportunity to be a challenging exercise to redesign its UI.
Wikipedia
Wikipedia is a website with heavy text and content, so it presented an opportunity to be a challenging exercise to redesign its UI.
Problem analysis
• Confusing navigation
The heading section is confusing because there are two levels of navigation.
• Search bar is too small
The search bar located in the right corner is very small. It should be bigger and visible all the time so that users can find it quickly.
• Sidebar wastes space
Users can find some other links in the sidebar, and they can change the language. However, the existence of a sidebar wastes much space since those links are not essential to the users and there should be an easier way to change the language.
• Unclear hierarchy of information
Wikipedia has heavy content on each page but the hierarchy of information is unclear.
• Layout should be cleaner
The current design of Wikipedia is not clean because it does not use a grid to arrange the content. For example, the basic information section is floating on the page, there are different amounts of text in a row, and the images are placed randomly.
Current website versus my redesign
I condensed the header section and rearranged the tabs and links. I also used icons to replace the text to save more space. I removed the sidebar and put the links into the header and footer section.
I enlarged the search bar and put it in the centre of the heading section. The redesigned navigation bar will be sticky and always visible when the user scrolls down, and they can find the language setting in the navigation.
I left more white space between sections and used a larger font scale to enhance the hierarchy. I used a 12 columns grid to rearrange the content, keeping the content page clean and easy to read.
The constraint with this page is that I cannot delete any of the information and find a way to reduce scrolling. To solve the problem, I made the reference section collapsible so I gave the choices to users. They can click to see or ignore the content.
Tools used
Back to top