Firefox Foresight: a Mozilla Design Challenge entry

Over the past month or so, Kiran Jagadeesh and I have been working on a design for this fall’s Mozilla University Design Challenge.  The object of the challenge was to address browsing history:

“Browsing History — How can we make sense of this rich source of data and how do we best present this data to the user?”

We came up with Firefox Foresight, a tool that recommends websites to users based on their past browsing patterns.

Brief description

We will use past user browsing behavior and patterns in order to predict which websites a user is likely to visit at a given time, and in a given place.  Our system will make suggestions to users via a sidebar notification and recommendation system.  Stills for Mozilla Design Lunch.

Video

We created a narrated storyboard (using stills we created in Pixton) to illustrate our concept.

For the full experience check out a larger version on YouTube and click the ‘HQ’ button for highest quality.

Long Description

Our design makes use of three main concepts:

1) Making use of contextual information to suggest the most relevant sites

Our system will collect data about the user and suggest only those websites which would suit the current set of contexts.  For example, a user may access certain websites when at work and other types of websites when at home or on a mobile device. Similarly a user accesses certain types of websites based on the time of the day (e.g., news sites right after lunch, stock quotes at the time of the opening bell of the stock market every day, hobby sites in the evening). Finally, the user’s revisitation pattern might be different for different types of websites; she may visit some sites on an hourly basis through the day, some every Thursday evening, and some every two months, for example.

By making use of this contextual browsing history information, we can better suggest to the user what websites she is likely to want right now.  We will do this by offering suggestions when a user opens a new browser window, and we will also embed an ambient alert system into the browser window so that users will know when it’s ‘time’ (based on their browsing history) to visit a certain website.

Our system does not need to know which context is which – it doesn’t care which IP address is work and which is home – it will just make recommendations based on past behavior at that location.

2) Ambient alert system

We can go much further than the ‘top sites’ function, which currently only displays in browsers when a user opens a new tab.  Our system will use an ambient notification system to alert the user that there are new site suggestions; the user can then open a listing of suggestions and proceed to the sites from there.  This functions as a colored line on the edge of the browser that appears when the browser has site suggestions for the user; the user can then open the suggestions in a sidebar.

3) Grouping of websites

A person’s browsing history can be grouped based on what websites they had open at the same time or which they opened in the same time period.  If someone is looking for shoes on the internet, then the chances are that their browsing windows open at that instant are all related to shoes or more generally related to shopping. If this context information is stored correctly, then intelligent patterns can be generated by this information such that when the user is looking for something specific on the Internet, then based on this history information, the browser can either automatically open relevant websites or at least suggest them to the user.  This will reduce the overall latent time in getting to a piece of information online.

This work is licensed under a Creative Commons Attribution 3.0 United States License.

About us

We are HCI graduate students at the University of Michigan School of Information.  Kiran will be looking for internships during Summer 2010, and Katie will be looking for jobs when she graduates in May.

5 reasons I loved Mozilla’s design challenge

I was able to participate in Mozilla’s ‘Spring Design Challenge‘ along with my regular schoolwork this past semester, and it was definitely worth the effort.  The challenge consisted of addressing the following question: “What would a browser look like if the Web was all there was? No windows, no unnecessary trappings. Just the Web.”

Participants submitted mock-ups of their ideas, attended 11 tutoring sessions over a 3-week period, and then submitted interactive prototypes to be judged.  My prototype didn’t make it through the final judging round, but I finished the experience with a working prototype/portfolio piece, direct and detailed feedback from the fellas at Mozilla, a summer internship, and a warm and fuzzy feeling.  

Here are five reasons you should take part in the next design challenge Mozilla offers.

1. Visual communication and prototyping practice.  While taking classes it’s difficult to find the time to create visual artifacts and work on prototyping skills; but this challenge provided both a compelling  purpose (create the browser of the future!) and strict deadlines (always a plus).  The process of creating the mock-up and prototype helped me think about how to visually communicate my idea (who wants to read a bunch of text?). It also gave my portfolio a visual component that was previously lacking.  I love practicing solving problems visually, so this project was also really satisfying and fun.
   

   A piece of the mock-up

   

   The prototype

2. Tutoring sessions. As part of the design challenge, participants were able to virtually attend 11 tutoring sessions on prototyping, design, creating extensions, and more.  I was able to make about five sessions live, and I watched most of the others on video (you can find links to the vimeo vids at the bottom of the spring design challenge page.) These sessions were all excellent!  I encourage anyone to check them out.  My favorites were Open Source Design by John Slater, Mozilla’s Creative Director, and Designing for Mobile byMadhava Enros.  By the way, I like to remind myself that these are all free.  Free!  Free advice from awesome experts.  
3. Feedback y sombreros.  There were two main opportunities to receive feedback on our ideas during this contest; first we were able to call in to Mozilla Labs Night and discuss our idea with a few of the Labs people.  I called in with my friend Maureen Hanratty from school, and we went over our ideas with the Labs guys – one of which was apparently wearing a sombrero.  Then, just today I received detailed and helpful feedback on my prototype from four panelists who judged the final prototypes.  I really appreciated this; they had a lot of questions about things I didn’t really have the time to work through in my prototype (such as “what happens to tabs and the URL bar under this interface?” or “the “exploding” gesture is cool, but how would you do this if you’re not on a touch screen?”).  I’d love to work through these questions…maybe if someone gives me a deadline I’ll get around to it.
4. Pascal.  Pascal Finette is the superhuman who helped coordinate the challenge, coach and encourage participants, patiently answer questions, and generally curate the entire process.  He seemed to be always online, responding to participant queries almost immediately even though he’s across the pond in London and 5 time zones away (from me, anyway).  Pascal helped create a supportive and open environment and should take a lot of credit for this challenge’s success!
5. Helped me land my summer internship.  No lie!  While I was interviewing for summer internships in Interaction Design, interviewers repeatedly asked me to talk about and show them design work that I’d produced – me, not with a team of people.  Since nearly all my school projects have been group-produced, I showed my Design Challenge mock-up; at least two interviewers said they were happy I had chosen to show them this example, and one  said the mock-up addressed the types of design and context problems that he deals with frequently.  Being able to show off the mock-up gave me some street-cred, and it helped initiate some interesting design discussions during my interviews.  Ultimately I got an Interaction Design internship at VMware in San Fran, so I’ll probably crash one of the Mozilla Labs nights while I’m out there (clad in a sombrero and/or cavewoman outfit, undoubtedly).

A final shout out to all of the other participants in the challenge.  They ranged in age from high school to probably 30s and 40s, and they represented countries from all over the world.  I was impressed with their high level of engagement in and excitement about the challenge; the community really solidified during the challenge.  

Overall, it was a great experience and I’m glad I had the time and effort to participate!  Merci, Mozilla!

 

And a great logo!

Open Source Design at Mozilla

Today I attended a web-based lecture by John Slater (MozCreative on twitter), creative director at Mozilla, on the open source visual design process. This was part of Mozilla’s spring design challenge lecture series.  Mozilla has used a participatory design process in their recent logo and web redesigns; they’ll often solicit designs from the community, post them publicly, and then refine them by getting feedback on their blog/website. It’s a really interesting method – check out this example of the Mozilla Mexico logo that came out of this process.

John also showed some iterations of the beautiful mozilla.com website as they were in the middle of refining the designs; and right now, Mozilla is working with an outside company on the redesign of mozilla.org (which is aimed at the mozilla developer community). The company who is managing the redesign, happy cog, has created a website about this redesign project – redesignmozilla.org. Here you can see current design ideas and make comments on them.  This community feedback is at the heart of Mozilla’s initiative; they want their design processs to be both transparent and collective.

Mozilla has a few design initiatives that are still in the works but that promise to be exciting for the design community.  They hope to form the “Mozilla Creative Collective,” which will be a central hub for designers; the Creative Collective would give designers more exposure, help them make contacts and improve their skills, and give them access to design challenges.  Basically, said John, it’s an open source approach to visual design that can leverage the power of the design community.

Check out John’s awesome blog: www.intothefuzz.com

Speaking of visual design, another Mozilla designer, Sean Martell, designed the below logo for all of us who are participating in the design challenge:

Neat!