Universidade de São Paulo is one of Brazil’s most prestigious universities. Founded in 1934 as the union of a group of independent faculties, it has nowadays campuses in eight cities, beside four in the capital. It has a rich and nuanced history, about which each of its different colleges and schools deal (and present to the public) in different manners.
In an attempt to present a more systematic and all encompassing narrative, the university created two programs: Memória USP (Memória = Memory) and Acervo USP (Acervo = Collection). I was called to help with Memória USP.
This being a new project, on of the goals was to establish a visual language and logo
After some initial brainstorming between me and the client’s team, the project was loosely defined as a web site where it would be possible to explore how the university evolved through interactive maps and timelines. Somehow, it had to balance a quicker interactive navigation with deeper articles about different topics related to the university.
Also, although the site wasn’t required to be fully responsive — smartphones hadn’t fully caught on as a meaningful platform in Brazil when we were debating the project —, the client planned on having it displayed on large touch screens at key places in São Paulo’s main campus, so it would have to adapt well to small and very big screens.
Having established that a map of the campuses combined with a timeline of events would be the main navigation pattern for the site, the main challenge was then defining exactly what ‘entities’ would be displayed on the map. Here, things showed themselves as a bit more complex than what I initially imagined: there wasn't an exact correspondence between each physical building and a corresponding institution — one school X could be placed in building A in one decade, but in the next there would also be a bit of school Y there, and school X would also have some activities in building B. This created a prickly conundrum: there wasn't a direct overlay between the geographic map we had and how the schools and faculties where situated.
Another issue was that the interactive map/timeline combo couldn’t handle well in-depth articles. The site was supposed to be an institutional encyclopedia, so there would also have to be a content structure that allowed for more in-depth articles, with alternative ways of reaching each one besides the map & timeline combo.
The information architecture suggested that the list of events and the timeline would be laid out in the same component. When trying to draw this component using (closer to) real content; however, it became clear that this wouldn’t work well: the lists worked better vertically, and the timeline, horizontally.
The map/timeline combo was an interesting challenge in that it required ways of condensing a great deal of information in simple schemes: sometimes, because of the zoom level, various places, schools and events would be overlaid in a single point. We solved this with a multi-level menu that ended in a small text and image with a link to a in-depth article, when available.
Sometimes one point on the map would bring together multiple itens, accessible through a multi-level menu with identifying icons.