Atmos

Redesigning bookmarks

atmos-banner.png

The brief was to reimagine bookmarking. Atmos rethinks bookmarks and bookmarking for how we browser the internet today.

Requirements

I started the project with background research and user interviews. A critical insight from this phase was how similar bookmarks are information scraps (Bernstein et al., 2008). Like bookmarks, these scraps constantly elude the tools we use to manage them. Their purpose also varies from temporary storage to reminding and archival.

Lightweight Capture

Lower time and effort to capture

Flexible use

Cater to personal organisation systems.

Flexible representation

Bookmarks vary in content and type.

Visibility & Reminding

Prime information for later

Mobility and availability

Allow use in mobile contexts

User Interviews

I spoke to 4 users in order to understand how they stored information for later retrieval, and specifically, their practices around browsing and bookmarking on the web.

atmos-requirements.png
“This can be more tedious and frustrating for older bookmarks - especially if I have forgotten where it was saved etc.... This has improved a little with folders etc, but can still be a challenge.”
— User interview #4

Clusters & Relationships

The metaphor of nodes and clusters offers rich 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.

Brand & Logo

atmos-brand.png

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

The planning started with a sitemap and understanding the user flow through the application.

atmos-navigation.png

Wireframes

Wireframes were used for evaluation with users before moving on to high fidelity mockups. These were changed and improved several times based on user feedback.

atmos-wireframes.png

High Fidelity Mockups

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.

atmos-highfidelity.png

Interactive Prototype

atmos-prototype.png

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.