Wikipedia
A redesign challenge
How might we transform Wikipedia into a user-friendly platform for general audiences?
Deliverables | Competitive Analysis, Sketches, Style Guide, High fidelity Prototype
Tools | Miro, Figma, Google Powerpoint, Adobe Photoshop
Timeline | 1.5 Week
Challenge + Objective
For a robust website packed with information, my challenge is to find an efficient way for readers (and editors) to navigate Wikipedia in a layout that’s “delightful” in its design.
What does it mean to achieve a “delightful design”? First and foremost, we must understand that this redesign will not be created entirely from scratch, but rather interchanging certain components in a way that is easily digestible to the human eye.
The "Optimization" Process
In “How to redesign UI/UX like a pro”, Dineshsamala emphasizes the importance of application optimization. The best practice is consistent experimentation. Understanding the scope of the original design will bring out the best of the redesign process and ultimately bring out your design from the rest.
In this case, Wikipedia is a website packed with information. This poses an opportunity for a reconstruction of its information architecture and hierarchy.
"Design Thinking is a mindset, not a toolkit or a series of steps."
-Arne Van Oosterom
Understanding Wikipedia
Before conducting a competitive analysis, I took some time to explore Wikipedia. I took screenshots of some problematic areas and noted them in a form of a Heuristic evaluation.
“Does the user have freedom and control? Is the page’s purpose consistent and relevant?”
Each concern is rated individually from a 1–5 (5 being the best rating) with additional notes.
Page-to-Page Analysis
Then, I used a grouping method to box and condense large chunks of information. This came in super handy when beginning my redesign process.
Competitive Analysis
How do other websites compare?
I followed up with a competitive analysis through similar search engines and rated their designs through a comparison chart.
Visibility (Is the call-to-action button easy to spot? Are buttons color-coded and spaced evenly?)
Hierarchy (Is the page organized? Does each page follow its purpose?)
Versatility (Is the website more than just a search engine?)
Balance (Is there a balance of words and images? Is it easy on the eyes?)
Information (Does the website provide an abundance of resources?)
This allowed me to contextualize a “spaced out” design theme; where information is evenly distributed with white space (with a balance of relevant images) This way, Wikipedia can be useable for broader audiences (even visual learners, like myself!)
Frankenstein Mood Boarding
Getting in the mood
I took a part of each competing website and brought them together into a “Frankenstein Mood board”. Doing so allowed me to pick and choose which features positively impact the usability of each website. This way these features can be incorporated into the Wikipedia re-design.
Sketching and Challenges
I found that consolidating some information was quite challenging due to Wikipedia's robust layout.
The grouping method seemed to have come in quite handy during this sketching process. I've utilized the card sorting method to group some sections of the website, with the addition of the floating table of contents on the side bar for easy navigation.
Design System and Wireframes
The redesign consists of a sleek, minimalist aesthetic. The purpose of this was to have the user focus solely on the content rather than the design of the website. This meant keeping a monochromatic design, with an abundance of white space to separate certain subjects.
Reflections and Moving Forward
I look forward to fleshing out this redesign, as it poses a great example of a website where communities work together to grow stronger through exchanging information. A fresh makeover can encourage old and new users to continue using Wikipedia for more than just their school assignments. ;)