How do you save pages for later? That’s of the questions that user researchers at Mozilla have been investigating recently (see findings by Brian, Ilana, and Diane).

As a user experience design and engineering intern, I spent a good portion of this summer beginning to re-envision the latter part of that process: how do you access what you’ve saved? After all, what’s the use of saving something if it’s just going to collect dust in a list of hundreds of other things you’ve saved?

My research and design process began with a peek at Firefox’s existing Tab Groups feature and eventually moved into Bookmarks territory. I assessed Firefox’s current Bookmarks and History manager, whose interface hasn’t seen significant updates in a while. I looked at services like Pinterest, Tumblr, and Readability, which provide their own takes on the bookmarking paradigm. I made a hypothesis that the popularity of these services is a result of not just appealing social media features but also interfaces that take advantage of modern advances in usability.

Eventually, I found interface inspiration from a surprising source: the album grid and album list views in iTunes! The hardest obstacle in designing an interface for bookmarks is the sheer amount of information to represent in a clear and concise way. I listen to music pretty constantly while working, and one day, it occurred to me that music managers have to tackle a very similar problem and have some decent solutions that could inform this project.

While doing all this research, I generated plenty of ideas about bookmarks as well as paper wireframe designs. Then I took all this research and design to the code stage. The result is an experimental prototype called Mozaic that, while in no way complete or perfect, I hope will help inspire the future of browser bookmarks.





A few features of Mozaic:

a visual thumbnail view of pages

a more traditional list view with site icons

single page layout instead of a folder hierarchy sidebar

contained within the browser window instead of a separate window

“sticky scroll” group headers that remain visible as you scroll

…and it shows bookmarks, tab groups, and history

If you’d like to find out more about the process of designing Mozaic, you can watch my presentation (at 24:30) or view the slides.

Or if you’d like to dive in and give it a try, you can! Although Mozaic is intended as a design prototype, it ended up as a decently functional add-on, so if you’re running certain cutting-edge versions of Firefox (compatibility is unfortunately a little unpredictable), you can try it out today! If you do, please comment below and let me know what you think.