An online platform for learning historians


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.

The awards’ ceremony at the end is always moving. Pictures by Luana Rabelo and Luciano Claudino.

The (old) 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.

ONHB, a fresh start

Design-wise, me and Lucas Reis, with whom I work in UX back at Preface, defined some important goals for this new, revamped platform:

  • Be mobile friendly — even though the old platform was painfully unfriendly for small screens, on the 2016 edition we had almost 1/4 of users accessing the site via smartphones;
  • Streamline the navigation, easing the learning curve for new users — this is a site where there is a lot of content to cover, and users go backwards and forwards a lot. For instance, it was expected that the students would have to make many comparisons between each document and its associated questions, so if possible this process should be facilitated;
  • Allow for a more clear relationship between different editions of the ONHB and its other associated programs — there already is an online course for teachers, which previously ‘lived’ in an independent web-site;
  • ...and, of course, apply the dozens of little insights we gathered in running the site for the last eight editions.

Onboarding as a learning opportunity & other new ideas

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 images of the three students would then be used to make a custom timeline (see above), unique for each team. (When they are still in the competition, they bounce. When eliminated, not so much.)

  • 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:

  1. A neutral, lighter approach, i.e. fewer colours, plenty of white space, etc. This approach was used in layouts related to the activities per se, e.g. the questions, documents, tasks, etc, but also interfaces related to the user (but not his team).
  2. A colourful, heavier approach, i.e. layouts with colours and images derived from the poster and other paraphernalia that accompany each edition of the ONHB. This approach was used in layouts connected more the specific edition in question: team ‘headquarters’, performance in each stage, timeline, etc.

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.

The new layout

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.

The special tasks

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.

I can be reached at