VOZMOB DESIGN NOTESfor design action collective

2.24.2010

This document synthesizes as much information as possible from our participatory design process and presents it for Design Action Collective in as clear a form as possible. It’s the output of a series of dedicated graphic design workshops with VozMob’s popular communication team of day laborers, household workers, community organizers, and students, as well as of our ongoing (iterative) web development process.

This design notes document is broken down into the following sections:

I. Vozmob overview

II. Design questions

III. Sitemap

IV. Layout notes- Front page layout- Overlay layout- Node view layout

V. Graphic elements notes

We look forward to working with you!

I. VOZMOB OVERVIEW

Mobile Voices (vozmob) is a platform for immigrant workers in Los Angeles to create stories about their lives and communities directly from cell phones. Vozmob helps people with limited computer access gain greater participation in the digital public sphere.

The project is a collaboration between the Annenberg School for Communication at the University of Southern California (ASC) and the Institute of Popular Education of Southern California (IDEPSCA), a nonprofit organization whose mission is to to create a more humane and democratic society by responding to the needs and problems of disenfranchised people through leadership development and educational programs based on Popular Education methodology.

We have a weekly workshop at IDEPSCA where the popular communication team meets to analyze stories, develop shared knowledge, design the system, and create training materials. The popular communication team is composed of day laborers and a household worker who have been volunteering for IDEPSCA for many years and who take their role of writing their own history very seriously. We also meet each week at USC to develop research and writing about the project. Our content management system is a customized version of Drupal, the popular free and open source software.

Vozmob has received support from the Social Science Research Council (SSRC), the Annenberg Program on Online Communities (APOC), the Nokia Research Center, and the MacArthur Foundation, among others.

II. DESIGN QUESTIONS

We have conducted several workshops to get everyone's input on our site theme redesign, and to try and answer Design Action Collective’s questions. Links to the full notes from these workshops are here:

Talleres/workshops: Diseño Gráfico del Sitio / Graphic Design of the Site (Notes: Minutas de PCT - Martes Diciembre 1 2009), Diseño Gráfico del Sitio II / Graphic Design of the Site II (Notes: Minutas de PCT - Martes Diciembre 8 2009), Borradores de Papel / Paper Mock-Ups

A summary of our answers to DAC questions follows.

OVERALL IMPRESSIONS AND PURPOSE:

1. What is the MOST IMPORTANT SINGLE message you want a new user to take away from a visit to your site? What one thing do you want them to remember after they read your main page? This is often a succinct refinement of your mission statement; the answer to this question drives the layout of your main page, because you want your message very clearly stated.

Sorry, we haven't reached a consensus yet on the single most important message, the following is what everyone said during our workshop:

• Vozmob is a network of popular communication by and for the people.• Change the image of our communities from negative to positive.• Convey the history of vozmob.• Show the benefits that the latino community brings to the USA.• Demand Justice.• Think, look, see and know - the 'others' and ourselves.• Equality for day laborers.• Equality and opportunity - communities can have the chance to document their

experiences.• Reality - the communication of reality - of our reality.

2. What are your organizational goals in having a web site? Please state these in as much detail as you can, and in order of priority.

• General objective: change the image that the mass media has created about who and what day laborers are, by projecting the contribution that we make to the socioeconomic life of the United States.

• Specific objectives: By using cell phones, create digital stories and upload them to the Internet, demonstrating the services that we do day by day to build this society, and showing our efforts to improve the quality of labor. Inform people about our struggle to become part of the north american community.

ABOUT YOUR USERS:

3. Who are the audiences and constituency for your new website? (Be specific if possible

[members, staff, funders, researchers, allied organizations, opposition, etc.])

We had everyone name top 3 audiences. Then we reduced them to categories and voted twice. The final outcome was:

• Day laboreres and their supporters (+7: Natalie, Crispin, Johnatan, Troy, Sasha, Amanda, Brenda)

• Politicians (+2: Alma, Madelou)• Anti-immigrant people (+2: Adolfo, Manuel)

Who uses your current website (if you have one)?

A group of day laborers, household workers, and students that meets weekly in a workshop at IDEPSCA. Some members from los angeles community action network's base who post stories from downtown LA. Some students.

If not mentioned above, who do you wish would use your website?

More day laborers and household workers. More people who have been excluded from the media and from online conversations. Also, people whose image of who our communities are has been distorted by the media and the anti immigrant hate sites.

4. Please list 1-3 top priorities for each audience. What do you want them to do with the site? What are some of the questions that might drive them to your site?

Day laborers and household workers: 1. tell their stories; 2. hear each others’ stories; 3. take action

People who have been excluded from the media: 1. tell their stories; 2. hear each others’ stories; 3. get connected and organized

People who have distorted images about our communities: 1. listen to our stories; 2. change their minds about who we are; 3. educate others in their own communities to not believe the lies about us

5. Take a minute to describe one or two ‘typical’ users of your site (they can be real or imaginary). Describe them demographically (race, class, gender, etc.), politically, in terms of interests, etc. What are they looking for?

The full list of audiences people came up with is below (in spanish).

Alma1. People from the Latino/a community / Gente de la comunidad latina 2. Event organizers / Organizadores de Eventos, Gente Latina3. The catholic churches that help day laborers / Las Iglesias Catolicas que participan con los jornaleros

Madelou1. Senators and Congresspeople / Senadores y Congresistas

2. Progressive youth of all colors / Todos los jovenes, progresistas, de todos los colores3. Any older person / Cualquier viejito

Adolfo1. Researchers and students / Investigadores y estudiantes 2. Internet surfers / Exporadores del internet. Los que estan comprando3. Contractors looking for workers - efficiency and quickness / Patrones en busca de trabajador@s – eficacia y rapidez

Manuel1. Anti immigrant groups / Grupos anti-imigrantes2. Day laborers / Jornaleros y Jornaleras 3. People of different races (to unite and be stronger) / Diferentes Etnias (Para unirnos y que sea mas fuerte)

Crispin1. People of different ethnicities / Diferentes Etnias2. All of the academics and university groups / Todos los grupos academicos – y universidades3. Students of social sciences and politics / Estudiantes de ciencias sociales y politicas.

Johnatan1. Day laborers from the day labor centers / Los jornaleros de los centros de trabajo2. Members of the church who have helped out at the work centers / Los miembros de la Iglesias que han colaborado en los centros de trabajo3. People from stores who have helped the centers / Gente de las tiendas que han colaborado con el centro.

Troy1. Employers who violate workers’ rights / Empleadores que violan los derechos de los trabajadores2. Day laborers who are not affiliated with an organization like IDEPSCA / Jornaler@s que no estan afiliados con ninguna org como IDEPSCA3. Home makers who are also not affiliated here / Amas de casa que tamoco estan afiliadas aquí.

Natalia1. A Salvadorean woman who immigrated to the USA and when she became a citizen she forgot about her roots / Una mujer del Salvador que inmigro a Ustedes Unidos y cuando se volvio ciudadano se americanizo y se olvido de sus raices. 2. The internet community, or people who have access to the net / La comunidad del internet (La gente que tiene acceso al internet)3. Anti immigrants of all ethnicities / Los Anti-inmigrantes (de todas las etnias)

Amanda1. Anti immigrants of all ethnicities / Anti-inmigrantes (De todas las etnias)2. Other communities wihout a voice / Otras comunidades sin voz3. Ourselves - the circles of immigrant organizations / Nosotros – Los circulos de

organizaciones inmigrantes

6. The users of our site also use the following sites (list up to 5 sites):

Please see our process below where we reviewed other sites and talked about what we liked.

FUNCTIONALITY

We conducted a workshop to discuss functionality that people wanted, reviewed other sites on a projector, and had people put sticky hearts up on print-outs of the example sites, writing on the stickies what they liked about the examples.

The following pages are images of these sites and what people liked (translated).

EngageMedia: http://engagemedia.org

MMP: http://mediamobilizing.org

Voices of Africa: http://voicesofafrica.africanews.com/

La Jornada: http://www.jornada.unam.mx

IDEPSCA: http://idepsca.org

Center for Digital Storytelling: http://storycenter.org/stories

Rising Voices: http://rising.globalvoicesonline.org

CBS Eye Mobile: http://cbseyemobile.com

Indymedia Belgium: http://indymedia.be

There were additional sites that we discussed but don’t have images of. We also took notes while discussing sites. In the ‘Layout’ section of this document, we have tried to narrow down and focus on the most crucial featureset, but please review the full list of what people said::

Features and design elements people liked, notes from conversation:

+4 How to participate+4 Take action+4 Sign up / inscribirse+3 Subscribe to receive SMS+3 How to send stories / como mandar historias+3 Promote worker centers and other allies / pomocion de centros de trabajo y otros aliados+3 A large image, carousel view, that rotates featured stories by each member / carousel - rotando historias, de cada miembro+3 Events and Calendar / Eventos y calendario+2 Donations+2 Allies and Supporters / aliados y +2 apoyantes+2 Comments, debate, and conversation (recent comments box) / comentarios, debate y conversación (recent comments box)+1 Tools / heramientas +1 Receive current news+1 PDF of the jornada newspaper+1 Grand vision, beyond day laborers - include other partner organizations, other states, students, children. Like the africa mobile site and also like the media mobilizing project site. / vision grande, mas alla de jornaleros - mas parejas, otros estados, estudiantes y niños. like africa movile site and MMP+1 Content that focuses on the positive, like (http://engagemedia.org)+1 Mailing list / lista de correo+1 Most recent / mas recientes+1 Many ways to sort stories: alphabetical, latest, archives, recommended, most read / alfabetical, ultimos, archivos, recomendados, mas leidas+1 Icons to link to FaceBook, MySpace, Twitter+1 Users can change color scheme+1 Submit your stories / subir tus historias+1 Photos of bloggers, bios, like indymedia.be+1 The title VOCES moviles, kind of like the style of rising voices title+1 Blue like the community coalition site / Azul like CoCo site+1 Red like CNN en español / Rojo como CNN-1 Don't want a really dark background

Features, list of all comments from sticky hearts exercise:

• FEATURED STORIES (+11): Front page: headline and a large image with more than one story (carousel); A large image of the top story, smaller images of the most recent stories; Important stories in large boxes; Important stories rotating (carousel); Most important stories in a larger font; Lots of visibility for top stories; Carousel; Carousel; Carousel that shows many stories; Top story is the main focus

• The top area should use a lot of photos.

• Categories: Categories at the top of the page; Categories located on the left column; Category box with more description; Categories searchable by alphabetical order, last 7 days, themes, archives.

• Tags (+2): A box with tags, the most used in larger letters; Tags• A section with supporters / funders• Subscribe to a mailing list• Comments by readers• A section to listen to the radio (audio?)• Bios (+2): Images of the reporters, with bios; Photos and biography of each participant• DISLIKE: lots of movement, lots of ads like the Jornada• NY Times: More text in each story. Many articles and ads on the front page.• Below: a search box• Photos on the right side column, with many images and key stories• Category to find an employee, with various options so that workers and employers

could include many details.• Showcase: different movements / campaigns; Instead of corporate ads we could use

space to announce campaigns, events, etc.• Language option• Links to other groups• Section to donate• Action: Get Involved (Facebook, Twitter, Donation, etc.)• Option to publish• Information on how the public can participate• Main story, with a selection of transcripts.• Fotos/Videos/Links/Archives• Below the line: Contacts, etc• Categories: Programs, support us, map• A map of NDLON members• Map: stories of voters documenting the process throughout the land.• Front page: mission, campaigns, sign up to receive info; Front page: mission,

campaigns, actions.• Community organizations: campaigns and actions.• Event calendar• Exhibitions• Large announcement on the front page• Most viewed videos, selected by editors, and most popular

FUTURE SITE EXPANSION:

12. When planning and building a site, it is important to allow room for site growth and change, as the organization grows and changes. For this reason we ask, how do you envision your site changing/and or expanding in the future, and over what kind of rough timeline? Would these changes constitute changes in functionality, for example added features, animation, downloadable information options, online donating/products? Please list these in as much detail as you can foresee.

We will continue to expand our site's functionality through an iterative participatory design process. In the next year, some of the major changes will include:

• Add many more community journalists, from different groups and communities

• Cover many more events

• Make it possible to map our stories

• Make a more user friendly interface to edit multimedia stories

Our ongoing list of feature requests is here: http://dev.vozmob.net

13. When focusing on your organization’s mission statement and the info gained above, what visual and aesthetic images come to mind. For example, what do you see in terms of colors, shapes, fonts, feel, literal representation or more abstract? (One factor to keep in mind when considering this aspect of the site, is that the larger and more complex the graphic and visual content for the site, generally, the slower the download time, and access for users to the site.)

Please browse vozmob.net to get a sense of the rich visual content that is there. Also see our comments on other sites (below), and our existing design elements at the end of this document.

14. Please list some sites that you are attracted to, and mention why, including elements like colors, fonts, composition, images, style, feel, navigation look etc.

See the 'corazones.'

15. Is there any visual imagery that you must or must not include as part of the site, and/or any other visual criteria that is important for us to know. For instance, do you currently have a logo, and what kind of guidelines must be adhered to in it’s usage; are there other logos that must appear on the site (sponsors/governing bodies etc). (If you need a logo also, please advise us, and we will suggest a process for development for both the logo and it’s application to the website).

Yes, the current logo is a remix of rini templeton art. We are flexible but we have not planned a logo redesign, so for now keep it close to that.

We have also played with the idea of remixing more of rini's art throughout the site.

• For example look here for an idea to use some more rini icons for 'share this story' or 'print this story' icons: http://dev.vozmob.net/issues/188

• Proposed icon for 'links:' http://dev.vozmob.net/issues/185

16. Are there any visual elements and materials that you foresee being designed for this site, that you might like to apply to other materials, especially including print and or display/signage materials. This information is important for us to know before commencing

the design for these elements, as the level of quality required for print and other forms of production is much higher that that needed for the web. Therefore, we wish to produce designs high enough in quality to meet any future applications they you foresee they may be used for.

Yes, we need print quality versions of all visual elements because we also have a newspaper that is created from stories posted to the site.

ADDITIONAL NOTES AND INFORMATION THAT IS IMPORTANT FOR US TO KNOW:

Drupal theme: Our site is built in Drupal 6, so we are creating a drupal theme. Our developer can work with the design files to make them into a drupal theme.

III. SITEMAP (note: Draft. Our site has many dynamic elements, and this map is flexible).

IV. LAYOUT NOTES

FRONT PAGE LAYOUT

The front page, or http://vozmob.net, is the first thing most site visitors will see, and the main interface for finding and viewing stories produced by vozmob bloggers. Here is a summary of key elements for the front page layout:

* NOTE on language: we would like to see if it is possible to make the site fully bilingual. Most sites do this with a language selector that changes menus and, where translated, body text. However, we would like to try putting spanish and english side by side throughout. For all menu items, we can just include both languages. For Titles and and stories, we imagine an innovative layout with two columns for each story, one in spanish and the other in english.

Logo & Header

Title: VozMob | Voces Móviles / Mobile Voices

Primary Links Menu: (Stories/Historias | Reporters/Corresponsales | About/Sobre Vozmob | Herramientas/Tools | Participar/Participate (or call this Take Action?). Maybe icons for each?

Featured Stories: The most requested feature. Much of the top screen real estate can be taken up by a carousel style featured stories box with very large image, Title, author, date, maybe text teaser? We are flexible about the number of featured stories that rotate through the box (3? 5?)

Previous Featured Stories: Below the current features, with medium image thumbnails. Title, author, date, maybe text teaser?

Most recent stories: In a separate area from featured stories, either below or in the right hand column? Could be small thumbs and titles, or just titles, and author name (and date/time, small type?).

Categories: There was a lot of interest in making it easy to find different categories of stories. For example stories A-Z, stories by tag, stories by themes, most recent stories, etc. We are open to creative ways to think about this.

Subscribe: A prominent button to get people to sign up to receive stories on phones or by email.

Publish: A visible button that takes people to information on how to become a vozmob reporter

Donate: A prominent button that lets people donate money.

Mediatype: icons or an easy way to sort or filter stories by mediatype: photos, audio, video. Also a visual cue that a story has multiple photos.

Showcase: A place, prominent but separate from stories, that commercial media would use for ads but we can use to highlight important mobilizations, campaigns, events, etc.

Events: Upcoming events vozmob will be covering, and events we have recently covered, and a link to an archive of past events coverage. Ideally we would make small icons for these events, could always be of the same size, not just text links.

Groups: Groups that are using vozmob to blog. Ideally we would make small icons for each group.

Featured reporters: A box with blogger icons, automatically populated by those whose stories are currently featured?

Connect: A box with links to our presence across the web (facebook, myspace, twitter, youtube, etc)

Additional essential front page elements:

Login (note: when a user logs in, the login box changes to the user/editor/admin navigation menu box according to their privileges).

Search ContactLanguage select (this changes menu language)

More blocks:

Tags (could be tag cloud)Recent commentsMost viewed (titles, links)Supporters (includes logos of supporters)Map (small map icon that links to larger page map view?)

OVERLAY LAYOUT

Vozmob uses overlay boxes as the primary user interface for viewing individual stories. Here are the elements to be included in overlay layout, followed by some notes on issues to resolve.

Currently, vozmob overlays look like this:

Content Elements in Overlay layout

• Media: photo/photo slideshow, video, or audio player• Story Title• Story Body• Author (Story by: username)• Post Date and Time (24 Feb 2010 - 4:32pm)

Links in overlay layout

• user’s blog• Number of reads

• Print version• Share• Comment

Overlay Issues

We have reported some issues that we would like to resolve with the redesign of the overlay layout.

1. Keep media on the page.

Currently, when stories have a lot of text, the viewer has to scroll the page down to read it all. We’ve noticed that when we do presentations, this means that the audience doesn't get to continue looking at the image slideshow while the person reads their story (For example see http://vozmob.net/en/node/4372 or http://vozmob.net/en/blog/28).

A suggested solution: change the layout of the overlay box so that1. Make the overlay box wider 2. Align the image/video/audio over to the left3. Place all the text to the right of the image/video4. If the length of the text extends down and out of the overlay box, add a vertical scroll control on the right hand side of the text area.

That way when there are long text stories, viewers can continue to watch images while reading all the text.

2. Bilingual layout

As with the front page, we would like to at least experiment with a version of the layout that has english and spanish versions of the text side by side.

NODE LAYOUT

Node layout is what users currently see when they click on the title of a story. We mostly use Node layout as the place where bloggers go to edit a story.

We don’t have the budget at the moment to spend much time on the node view layout. In the future, we imagine building nice jquery tools that will make it easier for bloggers to drag and drop media elements (photos, audio, text) on a timeline to compose their stories.

Some changes we have identified to make to node layout:

* Provide a link to original, hi-res pictures* Install vertical tabs module to make it easier to edit stories

V. GRAPHIC ELEMENTS NOTES

Here are various graphics we have used for the project:. Everything is rini templeton remixes :)

LOGOCOMMENT AUDIO STORY

TRAINING NEWSPAPER RADIO

WORKSHOP

Available at http://www.flickr.com/photos/vozmob/sets/72157606422258183/

MAPSHARE SHARE INVERTED

LA JORNADA NEWSPAPERPRINT VERSION PRINT VERSION INVERTED

THUMBNAILS

That’s it. We can’t wait to see what you come up with :)

THANK YOU!