• Interaction | Interface | Web

  • Graphic | Information | Motion

  • Service

  • Experimental

LifeStream

Client:Mozilla Corp

LifeStream is a conceptual browser which has been exhibited on Firefox Globle Summit and 2008 Economics Forum


About this project


This is an individual project, from sketches to prototyping. I did this project for Firefox user experience team, Mozilla Corp. This next-generation browser concept has been exhibited on Mozilla Lab concept series, together with Adaptive path's Aurora Concept and Aza Raskin's Mobile concept. This concept has also been exhibited on Firefox Global Summit and International Economic 2008 forum. Thanks for the valuable advises from Alex Faaborg, Aza Raskin, Jennifer Boriss, Mike Beltzner, Jesse James Garrett, Jesse Ruderman and the whole passionate Firefox open source community. Right now I am also tutoring the Mozilla Labs conceptual browser challenge.


Design Research


Please refer to my blog post to see detail Design Research reports, design process and design thoughts about this project, you can also make your own comments.



Project Details


Project Duration: 2 months

Project Time:Summer 2008

Client: Mozilla Corporation

My role: Interaction designer(design from sketches to prototyping)


Design Process


Two weeks user research, comparative analysis


Skills involved


Prototyping in Flash and Flex

Video editing in Finalcut Pro

Sound editing in Soundtrack Pro



Browsing history

This history view is designed to combine lots of contextual informations, such as weather and location. In this way users can quickly search contextual cues, such as "cloudy,starbucks" to find a lost website you visited back to a specific time. Notice the timeline is non-linear, meaning websites thumbnails are displayed according to the user's browsing density. If you are interested in "context awareness", please check out MIT fluid interfaces Group's project Sixth Sense and mobile contextual sensing principles.



Bookmark view. The browser is smart enough to auto-organize your bookmarks, based on your habits, your friends' habits and the community's behaviors. This image shows the browser highlights one item when you perform a search. If you are interested in topics of "human computation", please check out Luis Won's talk.


Bookmarks can be expanded into small thumbnails. This is extremely helpful for human's visual memory.



Context Awareness



Bookmark a webpage: Dragging a website up to the bookmarks bar, the browser will automatically recognize your desire of bookmarking this specific site, so it recommends a group by sliding that group under your cursor(not the other way around). Interaction design is all about transitions and details.



View all related websites: Typing anywhere on the website, you can perform a search. The browser will show related websites according to your personal preferences.



Sketch example



Research example