I was recently invited to speak about building social communities at the LACTLD Conference (Country Code Top-Level Domain) organized by NIC Mexico

ccTLD’s are the organizations that control domains names that allows people to have something like mydomain.mx or Love.Me which makes it a lot more interesting for some type of businesses. A classic example would be .tv domains

This year’s reunion was held in Monterrey and I was invited to speak about the influence of web communities and social media.

It is fair to say that the technological education among the crowd was very high, after all, this audience works with the very core of the internet: domain names.

Since the needs of ccLTD’s are quite different from many other industries, I was a bit worried about coming up with something relevant to say in just 45 minutes.

There’s so much to say about social media, building web communities, where to start, what to do and what to avoid that I had a really hard time deciding what to include and what to leave out of the presentation!

The Question/Answer portion of the event was highly interactive. I was asked very good and challenging questions which i guess means that the audience was paying attention! =p

Video of the presentation will be available soon, in the meantime, here’s the actual slides I presented:

At the end of the presentation, I gave away a copy of Six Pixels of Separation by Mitch Joel, which covers in great way the way businesses can connect to their audience.
Meet Natalia from Paraguay, winner of the book:

El siguiente artículo fue escrito por Romeo Márquez para la revista Software Guru, el cual puede ser consultado aquí

A inicios del 2009 el staff de Software Gurú nos presentó a Gelattina la posibilidad de realizar el diseño de interfaz para su nuevo proyecto: SGuía, una herramienta creada para ayudar a los profesionistas de TI a encontrar los productos y servicios que le apoyen a desarrollar software de alta calidad.

El proyecto nos pareció muy interesante y a la vez vimos una buena oportunidad de documentar el proceso para compartirlo con los lectores de SG.

Nuestra colaboración en el proyecto se enfocó a desarrollar la arquitectura de información así como el diseño gráfico de la interfaz mientras que la integración con la administración de contenido fueron realizadas por el equipo de Software Gurú.

Dicho sea de paso, las oficinas de SG se encuentran en la Ciudad de México y gelattina está basada en Monterrey, por lo que trabajar a distancia solamente hizo el proyecto aun más atractivo!

La pre-producción

Notamos una gran ventaja de trabajar con el equipo de SG puesto que tienen muy buenas prácticas de documentación de requerimientos. Para el análisis inicial SG nos proporcionó su visión del proyecto, un modelo de dominio, actores o usuarios y los casos de uso del sitio.

Toda esa información es muy valiosa pues en todo proyecto de diseño de interfaz, es sumamente importante entender quien será el usuario final de la aplicación, para así, poder lograr satisfacer sus necesidades en términos de usabilidad.

Para este proyecto, los dos públicos principales son:
1)    Profesionales de IT en busca de servicios
2)    Proveedores buscando promover sus productos

Otro aspecto clave tiene que ver con el conocimiento del sistema de administración de contenido. Es importante tomar en cuenta la plataforma de desarrollo para diseñar la interfaz de acuerdo a los requerimientos técnicos. Para este proyecto se selecciónó Drupal y es parte de nuestra responsabilidad conocer las mejores prácticas de diseño para dicha plataforma.

Los 6 pasos con los que se creó la interfaz de usuario de SGuía

1.    Brief Creativo
Este documento nos ayuda a definir las necesidades del negocio y los resultados deseados del diseño.
El brief también ayuda a recabar la información relacionada con la identidad corporativa de la compañía, tecnologías a utilizar en el proyecto, listar requerimientos estéticos, proyectos competidores y dar un panorama general de los contenidos a publicar.

SG fue muy específico en sus requerimientos por lo que desde un inicio, quedó muy clara la expectativa que teníamos que cumplir.

2.    Arquitectura de información
Durante esta etapa, el arquitecto de información clasifica el contenido y busca crear un menú de navegación optimizado. El resultado que se obtiene es el mapa del sitio que será clave para la etapa de diseño.
En esta etapa es bueno realizar un benchmark entre proyectos similares para aprender e identificar los elementos que mejor puedan servirnos.

Un menú de navegación bien planeado es crítico para lograr una buena usabilidad ya que el usuario final no debe pensar demasiado para identificar donde podría estar la información que busca.

La SGuía originalmente contemplaba que las 4 categorías principales fueran parte de la opción del menú “Categorías”. En el interés de facilitar la navegación al usuario, se optó por  desplegarlas como parte del menú principal.

Además del menú de navegación principal, se plantearon una serie de elementos que no son propiamente parte de la navegación pero que sirven como ayuda al usuario, por ejemplo, el listado alfabético de todas las empresas registradas ubicado en la columna derecha.

Finalmente el arquitecto de información realiza los Wireframes (representación sin elementos gráficos que muestran contenido y comportamiento de las páginas) de la portada e interiores ya que sirven como herramienta de discusión entre él y los programadores, diseñadores y cliente.
Los wireframes son particularmente útiles durante la etapa de planeación ya que dejarán claro que elementos se planean incluir en la interfaz.

3.    Diseño gráfico
Las dos etapas anteriores nos dan la suficiente información para que el diseñador realice la mejor interfaz posible totalmente orientada al público del sitio.

En esta etapa el diseñador realiza también su propio benchmarking con un enfoque en buscar las soluciones gráficas que sirvan mejor al sitio.

Con un mapa de sitio claro, wireframes bien definidos, conocimiento del perfil del usuario final y una idea clara del contenido, el diseñador tiene todo lo que necesita para crear la interfaz. Como verás, no es sólo cuestión de sentarse a diseñar si no existe todo un proceso de planeación detrás!

Para poder replicar la experiencia del usuario común de la SGuía, el equipo gráfico de gelattina diseñó 9 pantallas que mostraran el recorrido de un usuario desde la portada del sitio hasta que encontrara la información de un producto en particular ya sea por navegación directa o haciendo uso del buscador.

Durante la sesión de revisión con SG validamos que todos los elementos propuestos fueran viables técnicamente y que no hubiera alguna restricción técnica de Drupal para poder implementarlos.

4.    Maquetación
Una vez aprobado el diseño, el equipo de desarrollo pudo entrar en acción para maquetar las plantillas de acuerdo a los estándares Web, es decir, con XHTML, CSS.
Adicionalmente, se integró jQuery al código, un Framework de JavaScript que en este proyecto se utilizó entre otras cosas, para darle un movimiento especifico a los iconos de portada.

5.    Integración con Administrador de Contenido
La integración del diseño con Drupal, fue ejecutada por el equipo de desarrollo de SG y gelattina apoyó proporcionando las plantillas y los elementos complementarios que la aplicación fue requiriendo.

6.    QA & Testing
La fase final previa a la publicación incluye la revisión del diseño buscando asegurarse de que haya sido integrado correctamente con el administrador de contenido
Una parte fundamental antes de publicar cualquier sitio es el beta testing no solo a la interfaz, sino adicionalmente al proyecto completo.

Dependiendo del tiempo y el presupuesto, es recomendable hacer usability testing.

La prueba de la Cajuela

La prueba de la cajuela (Trunk test) fue creada por Steve Krug -experto en usabilidad- y consiste en una evacuación sencilla para determinar si un sitio tiene una buena interfaz.

Solemos pensar que la navegación de un sitio empieza desde la página principal. Sin embargo, los buscadores suelen dirigirnos a partes específicas en el interior del sitio

Imagina que te meten a la cajuela de un carro y te dan muchas vueltas y al final te avientan a una página interior de un sitio Web.

Si la página está bien diseñada deberías ser capaz de responder a estas preguntas sin dudarlo:

¿Qué sitio es este?
¿En que página estoy?
¿Cuáles son las secciones principales de este sitio?
¿Cuáles son mis opciones en este nivel?
¿Dónde estoy?
¿Cómo puedo buscar?

Conclusión
La creación de un proyecto Web -cualquiera que sea su tamaño- que busque ser exitoso requerirá de un buen trabajo de integración tanto en la parte tecnológica como en la interfaz del usuario.

Mientras más se utilice la empatía con el usuario y se combine el conocimiento de sus hábitos de navegación, mayor probabilidad tiene de éxito el proyecto.

La SGuia fue creada para cumplir con las necesidades de los lectores de esta revista, por lo que te invito a conocer el sitio, utilizarlo y enviarme cualquier comentario o retroalimentación!

I was going through the comments trapped in the spam folder on this blog and i noticed a new trend: Jokes on Spam comments!

Truth be told, most of them were funny and clever. Do i still feel tempted to buy Viagra? I don’t think so!
But i appreciate the free laugh!

Here are a few examples on those jokes:

• Where does a bird go when it loses its tail? The retail store.
• Did you hear about the dyslexic Satanist? He sold his soul to Santa.
• What’s green and red and goes 1000 miles an hour? A frog in a blender.
• How do they put out fires at the post office? They stamp them out.
• Wanna good joke? What did one ocean say to the other ocean? Nothing, they just waved.

Like we’ve told you about before, here @ Gelattina we take the care of our world very seriously. That’s why we decided take our commitment to this idea a step further, and reduce the ecological footprint our work produces.

To achieve this, we enlisted the help of professionals that would make the energetic use on our offices more efficient. They placed light panels, which modulate the intensity of the light-bulbs depending on the ambience. Movement sensors can also be found throughout our offices, they automatically lit up the rooms where movement takes place.

This setup helps us to be more sustainable, and also make our daily lives a lot more comfortable (we don’t have to worry about light-switches) and helps us save some money, because we get just the amount of energy we need.

Wiring your home with sensors and panels might not be a practical solution for most of us, but with a little bit of care and attention we can help our planet to be a bit more green and our wallets a bit more full. Light and electricity are key resources we need in our daily lives, but that need doesn’t give us permission to abuse it. For additional knowledge,  check out some how you can be a bit more about ec0-friendly in general, at home, and at work.

See you later!

Over/Out!

Como les habíamos contado antes, aquí en Gelattina nos tomamos muy enserio el cuidado de nuestro medio ambiente. Por eso, decidimos tomar un paso más hacia convertirnos en una empresa más verde y con menos impacto energético en nuestra área.

Para lograr esto contratamos un servicio profesional para eficientar el uso de energía de nuestras oficinas. En las diferentes áreas de trabajo, se instalaron celdas fotosensibles que modulan la intensidad de los focos dependiendo de la luz disponible en el ambiente y sensores de movimiento por todas las oficinas y pasillos.

Aparte de ayudarnos a que nuestro trabajo sea más sustentable, adoptar esta tecnología nos ha hecho incluso la vida más cómoda, ya que no nos tenemos que preocupar de prender y apagar switches, así que ya no hay lámpara que se quede prendida por haber olvidado apagarla. Esto adicionalmente ahorra dinero, ya que se usa la cantidad de energía necesaria para trabajar.

Aunque poner sensores y paneles de luz no sea práctico para todos nosotros, con un poco de cuidado y atención podemos lograr ayudar al planeta y a nuestro bolsillo. La luz y electricidad es un recurso muy importante para nuestras vidas, pero eso no nos da derecho a abusar y no cuidarla. Si quieres más información, conoce las mejores prácticas ecológicas en general, en casa, y en el trabajo.

Cambio/Fuera

Interesting ad on Youtube made to promote Acciona, a Spanish company in the sustainability business.
I could tell you what the ad is about, but really, it is a much better experience if you see it for yourself.

Without further due: http://www.youtube.com/experiencere

I am on my way to Tampico, a nice little city 6 hours away from Monterrey.

I was invited as a guest speaker at Feedback, a 2-day event conmemorating the graphic design carrer’s 20th anniversary at Universidad del Noreste.

I hear there’s gonna be a full house and that tickets are sold out! (if that means 50 or 500, that i don’t know)

I will be speaking about interactive advertising and also i will beta test my material for an upcoming conference at Campus Party MX!

After the event a few good twitter friends and me will get together and finally meet in person, i love that!

I’ll keep you posted on how everything goes!

The November 2009 edition of our monthly wallpaper is ready for you to download!

It’s available in the following formats:

• Version 320×480 (iPhone/iTouch)
• Version 800×600
• Version 1024×768
• Version 1280×800

Remember to leave us your feedback and suggestions on the comments section or in our Twitter or Facebook accounts!

Like many people, I am a big fan of Steve Jobs; not only his leadership, his products or his company, but also his presentation style.
So I am excited to share with you a new book on the techniques that have turned the CEO of Apple into one of the world’s most extraordinary communicators.
The book is titled The Presentation Secrets of Steve Jobs: How to be Insanely Great in Front of Any Audience

The subject is of personal interest to me because I often have to do presentations. Not massive presentations like Steve’s but even a small sales presentation truly requires a good structure and rhythm to keep the listener’s attention.

So I just ordered my copy of the book and look forward to learn more about the fine art of presenting! As soon as i finish reading it i will post a review on it!

Belowe there’s an interview with the author of the book and there’s also a slide show on Steve Jobs’ Presentation Secrets

Enjoy!

Si no pudiste venir al SHDH Monterrey 3, en Gelattina, te dejamos la siguiente transmisión en vivo!
Para que quede constancia de que si nos ponemos a trabajar!

Last Thursday I attended Webcom 09 at the ICAO head office in Montreal.
Webcom 09 is an event dedicated to Enterprise 2.0, Marketing 2.0 with a full track on Media 2.0
Webcom 09 had over 40 speakers/experts assembled in Montreal for training sessions, case studies, conferences and debates.

The content was very interesting, the speakers very knowledgeable, the crowd was full of influential people and in general was a great learning experience!
Next time you’re in Montreal, look for the Webcom, it’s a must for industry professionals!

This is a series of video interviews made during the event, enjoy!

Live Streaming by Ustream.TV

One of the more unique offerings we have here @ Gelattina are our Social Media strategies. We started offering this service because we identified a strong growth opportunity in the sector. Having among our ranks avid users and experts on the diverse social media platforms who also have keen marketing sensibilities, developing this product seems obvious.

Software Guru, a leading Mexican technology magazine, was holding it’s annual SG Conference & Expo, and being good friends with us and respected colleagues, they asked us to develop a SM Strategy for the upcoming event. After careful research we came up with a multi-tiered plan, which covered most major platforms and assured the best exposure of the event.

We developed and interesting before, during, and after campaign for SG, which was comprised by the following:

1. Before: First we created a Facebook, Youtube, and Twitter account for the event. Each site had a different use, and each was useful on it’s own way. Facebook was loaded to the brims with pictures and videos from past events, helpful information, and has links to various sites of interest. Youtube served mainly to host videos from past events and a teaser video of SG’09 and finally Twitter was used to promote the event and the content update on the various sites. Various pre-event contests were held on Facebook and Twitter, mainly raffling magazine subscriptions among the user base. After measuring the response to each of the sites, we decided to shift the strategy a bit and create an SG’09 dedicated blog and focus on Twitter to spread the word. Youtube retained the same function and Facebook became an aggregator of sorts for the rest of the campaign.

The week before the opening of the event, we performed a more complex content via our newly created blog. The prize were three tickets to attend SG’09 and there were three ways to win: by a random raffle via email, by attaining maximum RT of event related comments of Twitter, and finally by authoring an article for our blog. We had awesome response on the first two forms, probably because the later required much more work.

2.- During: For three days we provided intensive coverage of the daily happenings of the event. We did this writing comprehensive articles of select conferences daily on the blog, tweeting about the SG’09 and inviting the event goers to use the #SG09 hash-tag and  performed live-blogging with the Cover-It-Live tool of the major conferences. Additionally we recorded and transmitted live-video  feed, uploaded pics to the event’s Flickr account, and did random contests during the event. While we did fewer tasks than in the setup, this phase was a lot more work for use, because of the break-neck pace we needed to have to keep up with the event, which most of the time had simultaneous occurrences around the halls. It was also the most rewarding, as we had great response from people inside and out of the event. The coverage was very well received by the appropriate people, which is extremely satisfying.

3.-After: After the event was done, we did added more content to the blog. Articles, video, links and documents used during the actual presentation were uploaded for everyone to access and use. All these changes were reflected on the Facebook account and we also used Twitter to invite everyone to read the remaining articles and download the files we made available. Also we have some pending video we’re transferring into digital format for us to upload to the Youtube channel.

So that’s basically how the whole thing played out. It was extremely rewarding and fun to do, and we’re happy to be pioneers of the this type of coverage in our country. We’re sure as time passes by this type of activities will be more and more popular and as today, we’ll be pushing the envelope of what can be done when we mix marketing, creativity and technology.

Don’t forget check-out our coverage on Facebook, Youtube, Twitter, Flickr, and of course the dedicated blog.

Over/Out!

There is one rarity among our projects if we think about it deeply: the Hand-Made video. Few productions require such effort in both its physical component than its digital aspect, and a lot of work goes into giving soul and personality to the little paper people and props that appear in these videos.

But don’t be deceived into thinking that it only requires drawings (upon drawings!) to be made, and voice over’s to do.

Prior to the actual “hand-made” phase, a script that is clear and pleasant must be made, as well as a storyboard that details the whole video, much in the vein of an ad or short movie preproduction practices. After that Ana, our resident “hand-made” expert, begins to draw a huge amount of content to be used on the video.

Whenever a production reaches the end of the actual “hand-made” phase, Ana has to deal with the coloring, cutting and arrangement of the elements to be used in the video. She does so many variants and drawings, that some of us even helped once ( I even actually got a rather pleasant déjà-vu from the 5^th Grade art class!) since the amount of work to be done was absolutely  humungous.

Even though my previous comment may belittle the process, and make it sound easy and carefree, this is quite deceiving, as the work needed to finish the HMV requires arduous work, and sometimes even more effort than the earlier phases.

The timing, music and voice over need to be perfectly planned and executed for the whole video to flow as intended. Any spastic movements should be intentional to give it more charm, as unintentional flaws in the animation process just look plain awkward most of the time. Each pose has to be shot individually, much like stop motion animation.

After walking you through the whole process, we have to thank the biggest inspiration behind our “Hand-made videos”: the masters @ Common Craft. Their fun, innovative videos gave us food for thought and this lead us to the creation of this product. Personally I couldn’t disagree more with their name, their craft is everything BUT common.

We’ve already made a wealth of video with this method, and each process has been hard, but rewarding and enjoyable for all of us. We hope you guys feel the same about them, and that we’ve been able to honor our inspiration.

You can watch our work here.

Over/Out!

No soporto el tráfico. Cuando dan las siete de la noche y es hora de regresar a casa, ya estoy resignado a que me esperan unos 30 minutos de cláxones y ansias (cuando a otra hora me tardaría siete minutos). Podríamos culpar a la pésima planeación urbana, la hora pico, etc. Dicho esto, no podemos dejar pasar que la culpa principalmente yace en nosotros. ¿Por qué? Si nos ponemos a observar las personas a nuestro alrededor, nos podemos dar cuenta de algo un poco aterrador: todos viajamos solos.

 Es ahí en donde podemos encontrar la raíz de nuestros problemas.  Gracias a las comodidades de los sistemas financieros modernos (y también por que nuestro transporte público no es muy bueno) muchos de nosotros contamos con automóvil. Naturalmente, si tienes tu propio carro, lo más lógico es que quieras usarlo. Y aunque aparentemente sea la opción más práctica, cuando millones de personas piensan lo mismo deja de serlo. No es saludable ni económico. Gastamos en gasolina, contaminamos el aire y causamos embotellamientos por doquier.

Pero bueno, también hay que mencionar que hay una solución sorprendentemente fácil para esto llamada Carpooling. Algo que probablemente todos hemos hecho de chicos de alguna u otra manera y en diversas situaciones. Pedir “ride”, hacer “viajes” para ir al colegio, todo eso es Carpooling. Definitivamente tiene sus incomodidades; tenemos que estar listos a tiempo, levantarnos a cierta hora y depender en otros. Pero también ahorramos dinero, ayudar a conservar el medio ambiente y ventilar nuestras quejas sobre el tráfico con alguien más. Aunque hacer “viajes” no es la práctica más común en el mundo laboral en Monterrey, pero igual vale la pena hablarlo con algunos compañeros de trabajo cercanos y de confianza. Si todos hiciéramos esto, muchos de nuestro problemas de transito quedarían resueltos.

Aquí en Gelattina, queremos contribuir aunque sea un poco a la conservación del medio ambiente (y la economía personal!), por lo que hemos creado un nuevo video hecho a mano sobre el tema, que puedes ver a final del post. También puedes ingresar a nuestra página para informarte.

Esperamos lo hayas disfrutado ¡Hasta la próxima!