Developing a Patterns Library at Globo.com Laura Lessa

Agenda What is Globo.com? Background to the project Objectives Initial Scope Structure Challenges Next steps

What is Globo.com?

Background to the project

Objectives

Initial Scope

Structure

Challenges

Next steps

What is Globo.com?

What is Globo.com? The Internet branch of Globo media group (TV channels, newspapers, radio stations and magazines) It is a portal that includes about 280 websites of News, Sports and Entertainment content produced by all the companies within the group

What is Globo.com? HOMEPAGE NEWS SPORTS ENTERTAINMENT VIDEOS

Homepage

News central – G1.com.br

Sports central – globoesporte.com.br

Entertainment central

TV sites

Videos – Globo Media Center

Background to the project

Background to the project Idea of a Globo.com ‘quality standart’ applied to all their interactive media products, but not registered Tacit knowledge

Background to the project Demand to websites produced by Globo.com increased Creative team doubled in one year Natural tendency to design slightly different solutions to similar problems

Background for the project Damage of Usability of Globo.com because the lack of consistency Waste of time to Implement similar solutions Need to define User Experience Patterns

Objectives

Objectives Register and spread the ‘quality standard’ of Globo.com Increase the Usability and consistency of Globo.com websites Ease and speed up the development of websites Encourage collaboration of the creative team Promote innovation in the whole company

Register and spread the ‘quality standard’ of Globo.com

Increase the Usability and consistency of Globo.com websites

Ease and speed up the development of websites

Encourage collaboration of the creative team

Promote innovation in the whole company

The Pattern Library

The Pattern Library Project begins in January, 2006 Budget to hire a trainee and two part-times IAs Laura Klemz Carla Barretto Renato Rosa

Project begins in January, 2006

Budget to hire a trainee and two part-times IAs

The Pattern Library Decision to use a Wiki tool to enable collaboration of the whole creative team Liberty Simplicity Power to the people!

The Pattern Library Initial Scope: Global elements Boxes and editorial headlines Search Photos Labels and texts Standard pages and flows Videos

Initial Scope:

Global elements

Boxes and editorial headlines

Search

Photos

Labels and texts

Standard pages and flows

Videos

The Pattern Library Basic structure of a topic: Basic rules Possible Applications Sizes and dimensions Interactive behaviour Appearance Exceptions and alternatives Examples of use

Basic structure of a topic:

Basic rules

Possible Applications

Sizes and dimensions

Interactive behaviour

Appearance

Exceptions and alternatives

Examples of use

The Pattern Library Now, the initial scope is almost complete, where are we going? Improve SEO practices Define Accessibility patterns

Now, the initial scope is almost complete, where are we going?

Improve SEO practices

Define Accessibility patterns

Challenges for the Pattern Library Increase the collaboration of the whole creative team in suggesting new guidelines and uses Improve the information-sharing and use of the Pattern Library Maintain the content reliable, useful and up-to-date How to have great collaboration and avoid the information chaos?

Increase the collaboration of the whole creative team in suggesting new guidelines and uses

Improve the information-sharing and use of the Pattern Library

Maintain the content reliable, useful and up-to-date

Please, collaborate! Questions? Suggestions? Muchas gracias  Laura Lessa [email_address] http://lauralessa.net