Software Development

Wikipedia’s 2022 redesign is the first in a decade. Here’s why

Wikipedia is unlike any other website, and that applies to its design process too.
article cover

Francis Scialabba

· 5 min read

Earlier this year, Wikipedia got a makeover.

Since January, the online encyclopedia—which, according to its Wikipedia, is available in 333 language editions, boasts over 300,000 active editors, and is the seventh-most popular website in the world—has presented itself to the world through the Vector 2022 skin, the first major update since the original Vector rolled out in 2010. The changes, including more white space, a relocated search bar, and a new table of contents, are immediately visible to anyone who’s spent a good amount of time browsing the site.

The main point of Vector 2022 wasn’t to dramatically alter the Wikipedia experience, but to address some longstanding issues with the site’s user interface. Any changes made by the nonprofit that runs Wikipedia, the Wikimedia Foundation, had to be vetted by the site’s international user base of editors, readers, and other volunteers who write the articles.

The foundation’s paid design team was composed of about half a dozen engineers, an engineering manager, a data analyst, a designer, and a community relations specialist, Wikimedia Foundation Lead Product Manager Olga Vasileva told IT Brew. Additionally, they have volunteer community ambassadors who handle outreach to groups like contributors to Farsi or Vietnamese-language Wiki.

Vasileva said that since the rollout of Vector 2010, the Wikimedia Foundation had focused primarily on the experience of its rapidly growing mobile readership, which included large numbers of young people and those living in regions where cell phones remain the primary method of internet access. The desktop experience lagged behind as a result, both in terms of technical improvements and usability for an increasingly diverse user base.

Based on consultation with members of Wikipedia projects across the globe, the design team found key areas for improvement generally fell within readability and usability, as well as ways to onboard new users into greater engagement (like writing articles). In many cases, volunteers had already developed CSS customizations and gadgets to improve Wikipedia, though those plugins remained largely obscure to general readers.

Primary changes included adjusting the width of text—data showed users were reading Wikipedia slower than other websites—and fixing messy site navigation by clustering buttons across pages. Vasileva’s team also rebuilt the table of contents so that it no longer appears within the article text, but on a sidebar that remains visible as users scroll the page. Vasileva said that was one of her favorite changes.

Top insights for IT pros

From cybersecurity and big data to software development and gaming, IT Brew delivers the latest news and analysis of trends shaping the IT industry, like only The Brew can.

“The new table of contents is used 54% more than the previous one for logged-in users, and 47% more for logged-out users,” Vasileva told IT Brew. “That’s just a huge impact.”

“They’re getting to the stuff that they need a lot quicker, and the information that they need a lot quicker,” she added. “That’s really important to us.”

The modernization of the Wikipedia layout had other benefits as well, such as providing opportunities to reorder the document object model and reduce the amount of unnecessary code.

“Our performance team uses a suite of metrics and tools to analyze the new skin,” Jan Drewniak, senior UX engineer, told IT Brew via email. “The latest results using Web Page Replay are promising as they show performance improvements over the old skin. Among other things, it’s increased our speed index score from 1600 to 1510, despite the fact that the JS and CSS payloads have increased and overall full page load times have stayed the same.”

Drewniak told IT Brew one major consideration was the possible impact Vector 2022 might have on Wikipedia’s caching infrastructure, which the site relies on heavily to support high volumes of traffic. Wikipedia runs a “pretty traditional” LAMP stack (Linux, Apache, MySQL, PHP) backed by Varnish as its front-end cache, according to Drewniak.

“About 90% of our anonymous traffic (ie, page-views by users who do not log in to Wikipedia) is served directly from our Varnish caching layer, so any large-scale disruptions to that layer would put severe strain on our application servers,” Drewniak wrote. “In order to minimize this impact, we had to deploy the new skin incrementally.”

The changes haven’t been without controversy: A community debate over whether to switch Wikipedia’s default to Vector 2022 last year peaked at over 90,000 words, while debate raged on other pages as to whether to restore Vector 2010.

“But of course as soon as we deployed, we’'ve had so many conversations about like, ‘Hey, can you help me fix this gadget,’ or, ‘Hey, I want to write a script that does this,’ or ‘I want to change this in this way,’” Vasileva told IT Brew. “But it’'s been really fun… to, just because we’'ve seen people do stuff with the new skin that we would have never really thought to do that fits their workflows in different ways.”

Top insights for IT pros

From cybersecurity and big data to software development and gaming, IT Brew delivers the latest news and analysis of trends shaping the IT industry, like only The Brew can.