Michelle Hessel
p1.jpg

Wikiday: UX | UI

Wikiday

Wikiday is a front-end to Wikipedia that makes the site inviting, explorable and delightful for someone who does not know what they are looking for.

 

Categories: UX, UI
Tools: Sketch, InVision, Photoshop
Role: Designer
2016

It is based on Wikipedia's section “On this day…”, which lists all the important happenings of every day in the Gregorian calendar:

OnThisDay_Wikipedia.png

The problem

Wikipedia is one of the most visited websites in the world and very few people know about the "On this day..." section of the platform. The reasons are:

1 - The design of Wikipedia is clunky and it isn't clear for the user that the "On this day..." section of the website exists.

2 - The only way to get to the content is through the homepage and users don't go to the homepage of Wikipedia. They instead google what they are looking for and directly go to the page.

Inspiration

I was inspired by Google's Experiments in visualization of large datasets of Art in the Browser. They make the experience of discovering content fun and delightful. In this example called "Curator Table" By Cyril Diagne & Simon Doury, you can seach through a database of thousands of pieces, discover connections between artworks and organize these by color or time:

The "not knowing where you are going to end at" of Wikipedia. One of the interesting things about Wikipedia is that the content is so dense and connected that you might go to the platform wanting to know more about Philosophy, but after a few clicks, might end up reading fishball:

Screen Shot 2018-03-17 at 5.22.20 PM.png

For my reinterpretation of Wikipedia's "On this day..." I created a platform called "Wikiday". It would be hosted independently from Wikipedia's main website, though it would use the same database. Similar to the "Curator Table" project, users might not know what they are looking for, so the experience must put on delightfulness before eficiency.

A 3D Planet Earth holds all the events that happen on a specific day. It is subdivided in lots of puzzle pieces and each piece correspond to one event. The inspiration comes Wikipedia's logo:

User flow

A 3D planet is spinning slowly. On the top, users can input a month (autocomplete) and day. Similar to the original Wikipedia's "On this day" the year is not an option:

zoomDate.jpg

User inputs the month and day and the puzzle pieces change color. There are 4 different colors for the puzzle pieces and each represents a type of event:

detailsDateandType.jpg

Users can spin the globe in any direction by clicking and dragging it: 

p4.jpg

When hovering over a puzzle piece, it changes color and size:

select.jpg

Animation sequence:

animation_bowie.gif
p3.jpg