50 people. 9 hours. 1 design challenge.

The first Design Jam, supported by Mozilla Labs, took place in London on Saturday, 20th of November, at City University London.

Design Jams are one or two day design sessions, during which people team up to solve engaging UX challenges. While conferences and talks are very popular in the UX community, we don’t have many events for actual collaboration, like the ‘hackdays’ enjoyed by the development community. Only a few UX designers participate in hackdays or open-source design initiatives –  how can we change this and get UX designers more involved? How can we introduce them to open collaboration formats? The idea of an event to get designers together to learn from each other while working on actual problems was born. Design Jams champion open-source thinking & sharing and are non-profit, run by local volunteers. The London team are Desigan Chinniah, Johanna Kolllmann, Joe Lanman and Franco Papeschi.

While the primary audience for Design Jams are UX designers, everybody who wants to learn with and from others about UX is welcome. The 50 people at Design Jam London were UX professionals, developers, visual designers and students, all with different levels of experience and skills.

Participants writing their cards and sticking it on the grid

The team grid

After forming groups facilitated by a ‘team grid’, 9 teams started tackling the design challenge. A Design Jam isn’t a competition, so all teams were given the same challenge, and encouraged to help each other, eg by grabbing a person from a different team for interviews or guerilla usability testing. Picking a suitable design problem was the hardest task for the organisers. Here it is:

What is the ideal interface to track and trace relevant online content?

Every day people consume megabytes of web content – on a myriad of internet-enabled devices from varying locations. This content is typically re-located through:

• history
• bookmarks

Some things to consider:

• What are the typical cues for people to remember and retrieve online content (e.g. colour, keywords, prices, pictures, surrounding context etc.)?
• What are the current pitfalls? Where do users have most problems?
• How can people annotate visited content with additional information (e.g. mind-maps, tags, date/time visited, urls, search engine terms used, group around themes like going on holiday etc.)?
• Can activity be clustered automatically (e.g. time, location, people etc.)?
• Do 3rd party services (de.licio.us, Twitter & Flickr favourites, Facebook likes etc.) have a role in your idea? How do these interact with the rest of the service? Can previous saved content be connected or suggested?
• How can this work on single or multiple devices?
• How does location influence the interface?
• How do you want to expose the service (built-in browser UI, add-on/extension, web-based tool, widget or app, etc.)

Teams started tackling the challenge with a Research & Explore phase. It was great to see the various different approaches, including several brainstorming techniques, guerilla interviews or twitter surveys.

Mindmapping ideas

Desk research

Personas

At hackdays, the only time when outcomes are being shared is during the (often very short) presentations at the end of the day. At a Design Jam, the process is just as important as the outcome. How did you get this idea? How did you approach the problem? To allow teams to compare their processes and bounce ideas off each other, the groups shared what they had done so far before lunch. Articulating their ideas and getting questions from the audience helped teams to focus, and seeing how other teams had taken completely different steps got everybody reflecting on the many different ways to explore a problem.

“Seeing what the other teams had been doing made us see our idea differently and helped us focus” – Jeff van Campen

Show & tell

One of the interim presentations

After collecting tons of insights and coming up with some great concepts, the rest of the day was dedicated to the Design phase. The biggest challenge for the teams was to decide which aspect of their idea they wanted to focus on. Personas, guerilla research, sketching and storyboarding helped to prioritise and refine the design concepts. Design Jam mentors Leisa Reichelt and Ivanka Majic helped teams to make decisions and start visualising by looking at the concepts from a different perspective, asking the right challenging questions, and offering Jelly beans.

Leisa chats with a team

Ivanka helps a team

Sketching out a flow

Wireframes

In their final presentations, each team shared what they had done during the design phase, and presented the concepts. Outcomes included personas and scenarios, sketches and paper prototypes, diagrams explaining what the service does, and flow charts explaining what users do. The teams also talked about their design process. It was interesting to hear about the different approaches to sketching, with teams using techniques like the ’6 up’ template to have many ideas, or personas, storyboards and tools such as Stephen Anderson’s mental notes cards to have different ideas. It was also fascinating to see how people ‘winged’ the final presentations, using elevator pitches, iPad sketches and great stories to communicate the value proposition of their idea.

mindSTORM - final presentation

Bucket 9 - final presentation

Stachs - final presentation

You can find more information and see details about each team’s design process and outcome on the Design Jam wiki, check out the photos on Flickr, and videos of the day will be up on Vimeo.

What’s next?

The London Design Jam was a first attempt to try out this new format and understand the key aspects that will allow teams to collaborate, learn from each other, and walk away with a tangible design concept. Participant feedback and general interest confirmed that there’s definitely an appetite for this kind of event – an opportunity to share knowledge through creating and doing rather than talking. The aim is to have regular Design Jams in London, the UK, around the world, really. The London organisers are busy turning their learnings into a Design Jam organisers handbook, to make it easy to put on future sessions. If you’re interested in organising a Design Jam, add your name to the Design Jam wiki.

Thanks to Mozilla Labs, City University London, and Johnny Holland for supporting Design Jam.

Questions, suggestions, doubts? Thoughts on getting UXers to collaborate? Done something similar, and have advice? Share your thoughts.

—–

Header image under Creative Commons by E1

All photos by Design Jam London. The outcomes of Design Jam are shared under a Creative Commons license.

How can users quickly create a timed transcript of any video on the web? That’s Mozilla’s latest design challenge, in collaboration with the Participatory Culture Foundation, challenges teams to design an intuitive interface for creating and improving subtitles for any video on the web. In this article I’ll share some ideas on how to interpret usability testing results like those presented by the Mozilla Labs team.

Mozilla Labs Design Challenge?

The Mozilla Labs Design Challenges are events for interaction designers around the world to stimulate innovation in user interface design. In three months (March 9th to June 18th) this 7th design challenge will guide participants through a full design cycle:  ideate, select, prototype, evaluate.

The Design Loop

Mozilla Labs kicked off with an evaluation of the Participatory Culture Foundation’s current subtitling tool. Design teams can test-drive the subtitling tool and an interesting part of the briefing is a usability study of four first time users.

Meet John, Jane, Cynthia, and George

Mozilla Labs conducted a usability test with four typical users who had never seen the subtitling tool before. These users performed basic tasks in the subtitling tool: transcribe, sync, and review subtitles. The tests were conducted with an external testing service. On the website of the design challenge you’ll find screen recordings and some general observations for each of the four individual sessions.
John (20), Jane (64), Cynthia (52), and George (28) were asked to use PCF’s current subtitling tool and think aloud to share their experiences. After the test they gave short written response. Based on these responses and user behavior, four pages of summarized observations were generated. But, how can we translate these observations into ideas?

Categorize usability challenges

Creating a subtitle with the current tool is done in three steps: transcribe, sync, and review. Participants worked their way through these steps and encountered challenges on their way. We labeled these challenges with one (or more) of the three steps or as a general problem. While categorizing the usability issues into different tasks,  we assigned a severity rating for each issue. Our goal was to keep the ratings simple, for example: critical [3], serious [2], minor [1], and no issue [0].
Once everything was categorized, numbered, and rated, we created an overview of all the issues. Duplicates were combined into a single issue in order to clean things up (example C1).

Visualizing

Sketching over wireframes

We’re not writing a book – we’re designing a graphical user interface. The four participants were asked to verbalize their experiences. Our participants processed their observations and we captured them in spoken and written form. The Mozilla Labs team did the same and summarized their observations in about 10 bullets for each session. Somewhere in the design cycle we need to switch modality: from text only to a combination of image and text. The earlier, the better.
Visualizing interaction challenges in your interface helps to kickstart your ideation process.

User feedback with Usabilla

Tips for visualising test results

• Create your own toolbox to collect information about your users and the problems they encounter. Using different tools to measure user behavior and collect feedback helps you to get a better picture of your users and can be extremely useful in the ideation process.
• Visual deliverables bring your test results to life. Use visual feedback in your deliverables to pinpoint the most important problems and to share your observations with your team.
• Categorize usability issues (transcribe, sync, review, general) when you visualize your test data. You can use the categorized overview of issues as legenda and label your sketches with the numbers of each issue.
• Fast is good. Try to keep your evaluation cycle as agile as possible. Lean and mean tests don’t necessarily slow down the design process. Take small steps and verify your choices with quick tests.

Entries are open for the Mozilla Collaborative Subtitling Challenge from now until the 26th of April. For more information, see the Mozilla Challenge site.

Johnny Holland is proud to be teaming up again with Mozilla Labs for their concept series. This time, Mozilla is working with the Participatory Culture Foundation to present “Collaborative subtitling — How can users quickly create a timed transcript of any video on the web?”.  We’ll be presenting a series of posts to inspire your concepts, and kick it off by talking to Dean Jansen from PCF  about the competition and some hints.

JH: Can you give us a bit of background about PCF?

DJ: The Participatory Culture Foundation (PCF) began about 5 years ago when television and other mass media really began to move online en masse. Video is the most powerful medium in our culture and we saw an opportunity to push it in a positive and more democratic direction. Our initial strategy was influencing video publishing and viewing practices through popular technology; our goal was to encourage openness and empower the individual. For instance, our first project was an open source video aggregator (video watching application) called Miro that supports open publishing standards such as RSS. It currently has about 1.3 million users each month. PCF has started many additional projects since then, including Universal Subtitles.

You’re part of the Open Video Alliance. Could you give us some more information about the alliance?

The OVA is a coalition of non-profit organizations, companies, and other institutions advocating for open standards for online video. The OVA seeks to encourage better technological practices, as well as spark a social movement, since the basic qualities of online video have the power to influence the development of our politics and culture. Current members include PCF, Mozilla, Kaltura, and the Yale ISP, but we’re about to dramatically expand the scope and membership of the organization. Last summer we co-organized the inaugural Open Video Conference in NYC which brought together a diverse mix of filmmakers, academics, artists, technologist, entrepreneurs, activists, and many others to discuss the implications and importance of open video. We followed up with a series of panels at SXSW and are currently planning the second Open Video Conference.

What are some of the special challenges of working with video?

There’s currently a huge gap in the market for simple and user friendly solutions for doing video subtitles. A number of issues contribute to this gap, such as the lack of standardization in online video players. Flash has proven to be a good basic technology to deliver video, but it’s proprietary, so developing open solutions on top of it—things that would work across the entire video spectrum—have proven difficult. Another issue contributing factor is that subtitling interfaces seem to be geared towards professional subtitlers. We’re aiming for something incredibly user friendly, so that people who would never have thought themselves capable of subtitling are encouraged to pitch in and subtitle/translate their favorite videos.

We’re aiming for something incredibly user friendly, so that people who would never have thought themselves capable of subtitling are encouraged to pitch in and subtitle/translate their favorite videos.

Prototype Collaborative Tool Demo

Is there a difference with getting people to contribute knowledge as opposed to more usual UIs?

Subtitling is something that the vast majority of internet users haven’t done yet, so in that respect maybe this will be a more difficult challenge.  However, that gives us reason to believe that it will be a more unique, interesting, and ultimately, challenging UI challenge. We also think that the probable unfamiliarity with the practice will allow designers to approach the situation with virgin eyes, which is a big advantage in many respects.

Subtitling is something that the vast majority of internet users haven’t done yet, so in that respect maybe this will be a more difficult challenge.  However, that gives us reason to believe that it will be a more unique, interesting, and ultimately, challenging UI challenge.

What are your thoughts on Youtube Video Captions?

We think the initiative is great—it draws a lot of positive attention to the need for subtitles—these will not only make videos more accessible, but also leads to a much higher potential for cross cultural exchange via video. That said, it also has lots of room for improvement, since it relies heavily on machine transcription and translation (which is fairly inaccurate these days). The biggest issue is that these subtitles are only available on YouTube videos. Our approach is more manual and community driven, but we can certainly see using technology to augment the subtitling and translation processes. Our ultimate goal is to end up with an open and standard subtitling technology that YouTube can support on its platform.

What are you hoping to get from the concepts for the Mozilla Challenge?

We’ve thought a lot about a fresh approach to creating subtitles. We’re breaking the process into discreet parts, so instead of transcribing the audio and putting down in and out points in a single step, the user does it in two.

We’re drawing inspiration from video editing software, as well as video games, and we’re shooting for something very inviting and dynamic. Even with all the time we’ve put into this interface, we know there’s a ton of room for improvement —so we’re really excited to be part of the Mozilla challenge.

Do you have any tips for people taking the competition on?

To anyone considering the challenge who hasn’t tried subtitling a video, I’d suggest trying out some of the current solutions. Use YouTube’s subtitling tools (for example Caption Tube or You Tube Subtitler ) or a service like dotsub to add subtitles to a short video that you like. This will give a good idea of the current paradigm and makes a great starting point for imagining a better approach.

Entries are open for the Mozilla Collaborative Subtitling Challenge from now until the 26th of April. For more information, see the Mozilla Challenge site.

Mozilla Labs Concept Series, together with IxDA and your very own Johnny Holland, have launched the second in their series of Design Challenges. The Summer ’09 challenge – Reinventing Tabs in the Browser – closes on June 21st.

About the Design Challenge

The Design Challenge is a series of events to encourage innovation, and experimentation in user interface design for the Web. The aim is to provoke thought, facilitate discussion, and inspire future design directions for Firefox, the Mozilla project, and the Open Web as a whole.

Design Challenge: Summer 09

For this Design Challenge Mozilla Labs decided to team up with IxDA, a network dedicated to the professional practice of Interaction Design, and Johnny Holland (of which we’re really proud). Each one of us will provide two panelists and we’ll also be available for help (via @ixda or @johnnyholland). During the challenge Johnny will provide the teams/designers with inspiring articles related to the subject. In this Summer 09 challenge we are focusing on finding creative solutions to the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”

Tabs worked well on slow machines on a thin Internet, where ten browser sessions were “many browser sessions”. Today, 20+ parallel sessions are quite common; the browser is more of an operating system than a data display application; we use it to manage the web as a shared hard drive.

However, if you have more than seven or eight tabs open they become pretty much useless. And tabs don’t work well if you use them with heterogeneous information. They’re a good solution to keep the screen tidy for the moment. And that’s just what they should continue doing.

So why are you still here? As Dan Saffer urged us: don’t wait for permission and face the challenge.