Learning from the UX Superstars at WikiWand

By Dylan Kissane03/09/2016582 Comments9 Mins Read

There are some websites I like to visit every day.

If I’m searching for information, I turn to Google or DuckDuckGo. If I’m taking some downtime, I’ll hit up reddit. I visit Inbound.org, I visit Swiped.com, and I read Copyblogger most days, too.

But if it’s information, confirmation, or just a fast fact I’m after then there’s one place I’ll head to the same place that tens of millions do every day: Wikipedia.

I don’t need to tell you about the world’s most extensive and consulted online encyclopedia. You’re probably aware of the many millions of articles (38 million, actually) in hundreds of languages (more than 250, in fact). You probably know it can be edited by anyone and that it isn’t supported by advertising. The money that flows into the Wikipedia coffers comes from donations, sometimes corporate but most likely from the hundreds of millions of visitors who stop by to read, add and edit a Wikipedia page each year.

Yet there’s a problem with Wikipedia and it is one that is not often discussed: Wikipedia is ugly.

U-G-L-Y You Ain’t Got No Alibi

There’s something to be said for ugly sites.

Craigslist is an ugly site but it works, and it works well. You can find what you’re looking for, you aren’t distracted by flashing graphics or put off by slow loading pages. It’s ugly, but it works.

The Drudge Report is another ugly site. It’s mostly text links, headlines as anchor text, and a nicely chosen image at the top. A couple of colors but basically balck and white – but why change when you bring in hundreds of millions of page views?

Wikipedia is another ugly site. Here’s an example to save you clicking off to remind yourself:

There’s a sidebar that is static and links to a whole lot of stuff that you probably won’t use often – do I really need to access tools if I am reading and not editing? There’s a table of contents on the page but as I scroll down this menu disappears and I have to return to the top of the page to find it again. The placement of the table of contents and the fact is it extensive means that a lot of the page is empty space – something between a quarter and a third of the page is just blank space.

On the bright side, all the information I need is going to be there on the page. The links are easily identified and it’s not difficult to distinguish between internal (Wikipedia) links and external (internet) links. The font is well chosen so it is easy to read on the screen, and the table of contents does give me an idea of what the article includes even if it isn’t all that user-friendly. In short, as I mentioned above, it is ugly but it works.

But what if it could be pretty and work just as well?

Here’s the same Wikipedia page rendered using WikiWand.

It’s clean, it’s not wasting space, and it is just as easy to read. That useful table of contents that scrolled away is now a static sidebar that is easy to navigate and is always in sight. Those tools and links that don’t get used all that often? Gone, or at least out of sight.

If I want to render the same page in a different language I need only click the toolbar at the top, and in this case I have a choice of 86 different languages. I can share the page with a click, I can personalize the page as I like without affecting the user experience of other Wikipedians, and I can search and navigate Wikipedia with a clikc on the magnifying glass or the arrow superimposed on the right of the screen.

And if I want a beautiful, information rich experience where even the sidebar is dispatched? Just click the hamburger at the top of the table of contents and – voila – it’s gone.

Now that’s a clean, easy to read, easy to navigate site. It’s Wikipedia but pretty: the same information but a nicer interface. How?

WikiWand.

WikiWand

WikiWand is the brainchild of Lior Grossman and Ilan Lewin. Both were fans of Wikipedia but both were also frustrated with the user experience on the site. Sure, they could find what they were looking for, but it just wasn’t as good as it could be. As the pair explains,

Wikipedia is the greatest curator of human knowledge, allowing people all around the world to freely access 35 million articles in 288 languages. The only problem? Wikipedia was built 14 years ago – and hasn’t changed much since then.

In the past decade, web and mobile applications have made huge leaps forward in terms of functionality and user experience – we want to bring those same benefits to your Wikipedia experience.

And that’s exactly what they did.

WikiWand is a browser extension that renders Wikipedia pages in the clean style above rather than in Wikipedia’s dated, ugly style. It installs in seconds and is simply set-and-forget. It impacts only Wikipedia pages and, if you are really missing the clunky, old-fashioned Wiki, a simple click can take you back to what you (thought you) were missing.

WikiWand improves the user experience for visitors to Wikipedia pages in a simple, elegant way, and we’re not the only ones to notice.

In 2015 the WikiWand team was recognized with a Weeby Award for having the Best User Experience. What’s notable in the case of WikiWand, though, is that they not only earned the award presented by the Webby judging panel but also the People’s Choice Award, too. Yes, this isn’t about a user experience that the experts love and the users don’t; everyone who uses WikiWand identifies that this is a superior UX compared to the standard Wikipedia interface.

Getting to Best Practice UX

How is it that WikiWand managed to design such a great UX for their users? It starts, of course, by considering how the user actually engages with Wikipedia, as Lior Grossamn explained to The Next Web:

We began by researching how people are using Wikipedia on mobile, as opposed to on the Web. We soon found that while people use Wikipedia on the Web for research, learning, work and studying, on mobile they use Wikipedia as a quick reference tool: to get immediate answers, settle disputes between friends, quickly learn about the world around them, and look up information about actors, musicians and movies.

The next step was envisioning the perfect knowledge-consumption experience for mobile users. Essentially, we were not adapting the WikiWand web interface to mobile, but we were actually creating a new mobile experience altogether. Shrinking the Wikipedia website and wrapping it in a mobile app doesn’t cut it anymore — people prefer a true mobile experience.

Design and UX became an important driver in how WikiWand was developed, and the team took inspiration from Apple, a company known for its intuitive UX and commitment to elegant design. They told Softpedia:

Steve Jobs once said: design is not just what it looks and feels like, design is how it works.

Besides the obvious eye-candy, I think design is extremely important when it comes to the consumption of knowledge. A good design is important so you can quickly find what you’re looking for, a good design allows you to easily read, understand and use the information.

Yes, learning should be pleasant, but WikiWand’s design is not all about the eye candy. It’s about making it easier to consume knowledge. It’s about providing better readability, comprehension and navigation.

This philosophy of design, user experience, and access to information is thus central to the crafting of the WikiWand product. Indeed, as WikiWand puts it themselves, “Good design is something that requires a good understanding of users’ needs, a lot of innovation, the willingness to keep improving a design that is seemingly great, and eventually, it requires a lot of effort and many iterations.”

And so far those iterations are paying off.

Learning UX from WikiWand

WikiWand is a great example for anyone seeking to improve their user experience for three key reasons.

First, the WikiWand team are proof that even the most popular products can be improved if attention is paid to the user experience. They took a product that hundreds of millions of people use daily and which has essentially no significant competition in its encyclopedia space online and found a way to compete. It wasn’t on the basis on product – the information remains the same – but rather experience as that same information was presented more effectively.

Second, the WikiWand team prove that developing a product with the customer experience as the fundamental stepping off point leads to success. By starting out thinking about the way the customer would like to use Wikipedia instead of thinking about what they can do or would like to do themselves, WikiWand is able to deliver the sort of product that people want to use rather than the product they want to sell.

Third, WikiWand demonstrates that even where people think they have a nice user experience they might not know what they’re missing. Wikipedia is, after all, free to use, relatively easy to navigate, and simple to search. The beauty of the WikiWand product is that it takes something that works well and is only a little bit frustrating and makes it into something fluid, clean, and smooth. Users didn’t know how bad their experience on the site was until someone came along and showed them how good it could be.

If you are seeking to move your company or product further, you could do a lot worse than focusing on the experience of your users. And when you turn to focus on UX, you could barely find a better example of great contemporary UX than WikiWand.

Got another example of a company with great UX? Let us know your favorites on Twitter!