Molecule is the proposal for a new way to navigate information online, to be used by a new Resource Centre on the Hoffman Centre for Sustainable Resource Economy website. The Hoffman Centre intend to publish rich and diverse content which addresses topics that frequently overlap and are deeply inter-connected, and require a system that engages people with this.

Wayfinding Research
Information Architecture
Data Visualisation
Visual Design
Interactive Prototyping
Lea Sarris
Yan Wang
July Zhang
Applied Works

1. Background

Molecule is the result of a collaborative project I was involved in during my masters in User Experience Design at UAL. The Hoffman Centre for Sustainable Resource Economy is an independent think-tank that uses its website to publish reports and updates of its key themes. They wanted to build on the website Applied Works, our project partners, had designed for them and create a Resource Centre that would house diverse content in a variety of forms. The content would address topics that frequently overlap and are deeply interconnected, thus, the task was to design a way to navigate this information that represents its full range, shows connections between topics, and that facilitates organic exploration.

To achieve this, we created Molecule, a digital platform for navigating information based on a number of wayfinding theories and data visualisation methods. Molecule treats topics as comprised of smaller atoms contributing to the understanding of the whole. It allows the person exploring a certain field to see all of the component and related pieces of information mapped in front of them, a departure from the wiki-like organisation that is so often found. Ultimately, the system aims to give people a more complete and personalised understanding of something than conventional methods, through a more enjoyable process.

We started this project exploring navigation in its most fundamental forms, building up to the final product. This is something I strive for in my work – starting from as far back as is necessary, synthesising the research, and letting that dictate the direction of my design.

2. Research

We focused on building a solid base of research before allowing the project to take form. I looked at physical wayfinding methods through to information wayfinding – a translation of physical wayfinding theory into digital spaces.

We each played to our strengths and my teammates – architecture, graphic design, and biology graduates – researched architecture, game design, and cellular navigation respectively. Our seemingly disparate fields began to reveal interesting linkages between them, and in the process of combining our findings gave us useful insight into how interconnected information might be explored.

Something I found helpful in understanding navigation was Kevin Lynch’s five elements of a city – five universal features people use to orient themselves within, and navigate, large urban areas (Lynch, 1960). To better understand it, I sketched out my interpretation of the city structure that Lynch describes in the context of an information landscape.

3. Process

A framework began to emerge that used Lynch's physical wayfinding properites in a digital setting. Words like landmarks, routes, and nodes began to relate to information and the ways it which it could be organised. We fed the framework various topics to see how the definitions held up against a variety of contexts.
1. Information Landscape: an area containing nodes connected by routes; 2. Node: a piece of information; 3. Routes: the links between nodes; 4. Superlink: a personalised route between nodes; 5. Landmark: a universally recognisable reference point that orients the user within the information landscape; 6. Radius: a defined range of information around a node; 7. Layers: secondary categories that extend the information landscape.
At this stage we were starting to get bogged down with the theory of the whole thing and felt that physical models would help to make the conceptual framework more accessible, both for us and our partners.
Another way we began to move away from theory and into practice was mockups. Up until this point we had resisted marrying the system to a particular medium, but all signs pointed to it being an application.




With our partners happy with the framework, we moved on add interactivity to the design, and create a prototype populated with information from the Hoffman Centre.
One of the more enduring interactions we developed was a riff on Vannevar Bush's 'memex' device, where people would have the ability to save nodes of information as they explored a topic. Then, you could explore the topic chronologically – as you previously explored it – or, the nodes would organise themselves into a landscape view, and you could explore the topic according to the relationship of its constituent parts.

This organisation relies on the same function we devised to display information on Molecule's search results – force-directed graph drawing. Here, the system measures the similarity nodes based on the percentage match of keywords (tags) associated with each one, and plots them in 2D space accordingly.

A final touch we added was some branding to give the design a consistent, product-like feel; I came up with a name – Molecule – and logo design. This tied in with a narrative we had been following – each node or point of information is a standalone atom, and through exploring and arranging atoms in a particular configuration you create a molecule, each one unique to the person creating it.

4. Reflection

I attribute a lot of this project's success to an ability of everyone on the team to play to our strengths. We were also able to use collaborative technologies to our advantage; Figma acted as a mediator for everyone in the group to communicate, bridging language and personality divides, and enabling us to collaborate effectively and quickly.