atmos_banner.png

Atmos

Is there a better way to save, retrieve and manage bookmarks?

atmos_banner_small.png
Requirements

Requirements

"I name them different things so I don't know exactly where I put them."

"Maybe it sounds a little greedy but I would like some way for it to organise itself - either by date or something like that."

Brand and Logo

Brand and Logo

The brand attempts to capture a user's journey across the internet as an act of exploration. Starting from the circular form, which looked like atoms and molecules floating in space, the logo represents the internet as a set of linked web pages.

The final logo is an abstract representation of the letter 'A'. The space inside the shape creates the impression of a storage container. The line leading out of the space also signifies relationships between the contents of the store and the outside world.

Navigation and Wireframes

Navigation and Wireframes

The wireframes were refined and improved iteratively over 3 rounds of user testing. Clear navigation paths to return a user back to the home screen.

A bookmark collection is personal and users were less interested in getting recommendations.

wireframes.png
Mockups and Prototype

Mockups and Prototype

A total of 10 screens were built. These mockups were further refined through input from users, literature research and drawing from design patterns and theory. For example, the category toggle was dropped and the bottom toolbar was re-designed to offer primary navigation controls.

An interactive prototype implemented using HTML, CSS and Javascript. The Meteor framework was used for rapid development. 8 screens were built to test navigation, retrieval and search flows.

Clusters

Clusters

The metaphor of nodes and clusters offers opportunities for user interaction. Users can explore relationships in the content they have saved, or find content in clusters of other users

The clusters themselves can also be objects a user can act on - sharing an entire cluster for example.