The Olimpíada Nacional em História do Brasil, know as ONHB, is an annually held online gymkhana in the subject of Brazilian history. Each edition is different, but for its 9th there were about 50 thousand students and teachers from elementary (8th and 9th years) and high school (1st to 3rd years), playing from all over Brazil’s 27 federative units.
The ONHB has five online stages, each eliminating a percentage of the participants until ~900 are selected to the final, which takes place in the University of Campinas. There is a lot of work involved in this last event, but here I want to write about our work in the online platform.
Each of the five stages is open during a whole week, and consists of a number of multiple choice questions and an extra ‘task’. Also, in each stage a collection of historical documents is provided — the idea being that in order to answer the questions the students will have to rely more on analysis of the material provided than on previous knowledge they have, which is what allows for the participation of contestants in such a large age range and is one of the key pedagogic principles of the program.
Each edition has a timeline where the participants’ could track the event’s progress. Above, sped-up versions for the (5th), (6th) and (7th) editions, respectively.
Of all the projects I’ve worked in, the ONHB is by far the one with the largest social and cultural impact. While it is happening it’s easy to find hundreds of teenagers posting their excitement (and angst) about their participation in all major social networks, and each edition is eagerly anticipated by many.
That said, the platform was showing its age. At Preface, we created a first version back in 2009, and it was over this foundation, warts and all, that every subsequent edition had been constructed up until the 9th ONHB, so a complete refactor of both technology and design was long overdue.
The old site served us well, but after 8 years some of its solutions seemed really old fashioned.
In redesign the user flows, we felt we had an interesting opportunity to show the new interface, but also to try and incite some changes in old habits.
In ONHB, participants are organized in teams of three students and one teacher. To increase the engagement of the whole team, we set out to make the experience more ‘personalized’, e.g. by highlighting the picture of all members and making a public page allowing them to share their accomplishments.
For this, we needed students to upload their pictures, something few of them did in the old platform. The onboarding process seemed a good chance to change this:
As before, in the new interface the student’s profile image was shown in every page, but we wanted to make it useful elsewhere...
At their first login, we encouraged each user to upload their picture and, in seeing his team, to ask their friends to also do so.
The team as a whole would also have a profile page on a general list of teams (sorted by state).
Another innovation in this new version of the platform was that I divided the interface in two styles:
The idea here was to allow the platform to be used in other settings, while at the same time having elements in the experience that are very ‘branded’ according to each edition’s graphic design guidelines.
Neutral style, example 1: A user’s home screen, from which they can go to the current edition of the ONHB or the course. The ‘badges’ below were from an attempt to have a gamification element, unfortunately cut for lack of time. (Mockup illustrations by Tyler Gross.)
Neutral style, example 2: although not as bold as the next two screens, I had some colourful elements throughout. What makes the transitions between styles coherent, however, is how the typography is consistent.
Heavier style, example 1: the bricks and graffiti were strong elements in the poster and other graphic design pieces in the 9th edition, and I sought to use them in the less neutral layouts.
Heavier style, example 2: a user’s page would be the same regardless of which edition they participated in. A team’s, however, is related only to a specific ONHB, so they should be visually associated with it.
There’s lots more that could be discussed: This is an intense project that takes months of work every year, and it’s never complete... that said, here are some more layouts.
Besides the questions per se, every stage has a unique task for the teams to complete. One in particular is very interesting and deserves mention: the 4th task.
In it, teams are asked to produce a document, each year in a different theme. The content is filled in a straightforward manner: simple text fields and image uploads with instructions for the teams. After saving, however, the content is automagically used to compose a document visually stylized in a manner fitting to that year’s theme.
For the 9th edition, we wanted something half lampoon, half Daily Prophet (yes, that one!). Below, some examples.