Los websites son como dinosaurios, solo que están vivos

4 September 2017

[ Sonia Jalfin, from Sociopúblico, nos cuenta paso a paso cómo se construyó el nuevo sitio web de CIPPEC, un think tank argentino.]

Hace poco vi una presentación de Lauren Rabaino, directiva de Vox Media, que empezaba así:

El argumento de Lauren es el siguiente:

Nuestra audiencia está en las redes sociales. Conversa sobre los temas que le interesan. Si queremos que nos escuchen tenemos que crear marcas que produzcan contenido relevante que funcione bien en esos lugares. Creemos marcas, creemos contenido, no sitios web.

Lauren, tenés razón.

Los websites parecen en peligro de extinción. Nuestros contenidos están vivos -cada vez más- en los espacios de intercambio que ofrecen las redes sociales. Los websites son -cada vez más- repositorios donde guardamos todos esos contenidos por si alguien quiere ir a buscarlos con premeditación. Son nuestro archivo. Pero por eso mismo, no podemos vivir sin ellos. Cumplen un rol fundamental. Son nuestra casa, el lugar en el que recibimos a las personas que realmente quieren conocernos.

En Sociopúblico nos encanta hacer sitios web porque nos dedicamos a la comunicación de ideas complejas y eso nos exige aprovechar todos los canales y recursos.

Por eso cuando CIPPEC, uno de los principales think tanks de América Latina, llegó con el pedido de que rediseñarámos su sitio web nos entusiasmamos pensando en las formas posibles de organizar el trabajo.

Este fue el proceso que recorrimos juntos. Cinco etapas útiles para crear tu propio dinosaurio… vivo.

Paso 1: ¡Hola, audiencia!

Como si fuéramos paleontólogos, lo primero es investigar el terreno. En el caso de CIPPEC, nos propusimos conocer a fondo sus necesidades, su funcionamiento y su estrategia de comunicación. Pero lo más importante no fue conocerlos a ellos, sino a su público.

Para esto decidimos hacer entrevistas en profundidad con usuarios del sitio antiguo que teníamos que rediseñar.

Muchas veces este paso se deja de lado por falta de tiempo o de presupuesto. Sin embargo, no hay nada más importante. Y tampoco lleva mucho tiempo. En este caso, hicimos sólo 10 entrevistas de 30 minutos cada una. Trescientos minutos, cinco horas, que fueron el tiempo más útil de todo el proceso.

Trabajar con una estrategia centrada en el usuario parece sencillo pero muchas veces es lo más difícil. Como miembros de un think tank podemos creer que ya sabemos todo sobre nuestra institución y nuestro público. Como profesionales de la comunicación, tal vez nos cueste darle el micrófono a usuarios que no saben nada de diseño o de desarrollo. Pero conversar con usuarios reales puede derribar algunas de nuestras suposiciones, ofrecernos ideas nuevas y -sobre todo- ayudarnos a construir un diseño útil.

Gracias a las entrevistas, pudimos definir lo que en el campo de la experiencia de usuario se llama “usuario persona” o simplemente “persona”:

Un usuario persona es una representación de las características, habilidades, objetivos y actitudes de un usuario hipotético.  

En las entrevistas tratamos de entender qué hacen y qué necesitan los usuarios cuando llegan al sitio web de CIPPEC. Tres consejos básicos para tener en cuenta en esta etapa son:

  1. Evitar que nuestras preguntas induzcan una respuesta: es mejor dejar que los usuarios nos expliquen qué hacen en el sitio, qué les interesa y qué les molesta o resulta incómodo sin guiar demasiado la conversación.
  2. Tratar de captar lo que de verdad hacen y no lo que dicen que hacen o lo que opinan sobre el diseño.
  3. Prestar atención a las palabras específicas que usan los usuarios para describir secciones o contenidos. Queremos que nuestro sitio hable ese mismo idioma.

Las entrevistas de CIPPEC nos permitieron entender que teníamos dos grandes tipos de usuarios personas. Son ellos:

Por un lado, los especialistas: investigadores, académicos, asesores políticos o los periodistas cuando están en el proceso de escribir una nota. Todos ellos encuentran en CIPPEC un referente sobre su campo. Consumen sobre todo publicaciones o informes completos. Llegan al sitio en general sabiendo lo que vienen a buscar. Tienen objetivos precisos: están detrás de un tema o un dato en particular. Conocen bien el perfil y el trabajo de CIPPEC.

Por otro lado, los usuarios de tipo generalista. Son los donantes de la institución (empresarios, ejecutivos), colegas de otras instituciones que se dedican a la comunicación, la administración o el desarrollo institucional, los periodistas cuando están en busca de temas nuevos para sumarios, y la comunidad más amplia de interesados en las políticas públicas que no sigue el tema al detalle pero se interesa ocasionalmente. Todos ellos priorizan los contenidos sintéticos, los videos e infografías. Suelen llegar al sitio para saber qué está haciendo la institución en términos generales, no para buscar un tema en particular.

En las entrevistas con usuarios aprendimos cosas muy útiles, como por ejemplo:

  • Que la sección “Nosotros” o “Equipo” no solo cumple un rol de presentación formal, sino que tiene una fuerte dimensión social. A los usuarios expertos les interesa seguir la trayectoria profesional de los colegas, saber si cambian de área o si se suman a un proyecto nuevo. Por eso decidimos incluir un acceso a la información sobre los expertos junto a cada contenido: en las publicaciones, en las áreas de CIPPEC, y también en una nueva sección de expertos.

  • Los usuarios generalistas quieren saber qué opinan algunos miembros de la institución sobre temas de coyuntura. Muchas veces usan esa información para conversar en reuniones de trabajo o en situaciones sociales. Por eso creamos la sección Textual, donde se reúnen opiniones vertidas en blogs o en la prensa.

Paso 2: Fluir con el usuario

Ya conocíamos a nuestros usuarios. El segundo paso fue ayudarlos a recorrer el sitio y cumplir sus objetivos de la forma más simple posible.

Para eso construimos un esquema que organiza toda la información que vamos a ofrecer y los caminos que los usuarios usarán para recorrerla. Es el flow del sitio.

En las entrevistas registramos que podía haber muchas formas de llegar a la misma información. Algunos usuarios prefieren empezar por su tema. Otros ya saben qué área de CIPPEC trabaja con cierta temática y prefieren empezar por ahí. Otros buscan contenido a partir de un experto reconocido. Por eso imaginamos una estructura modular. Cada pieza de contenido lleva varios tags: pertenece a un tema, a un área de la institución, a uno o varios expertos y a un tipo de contenido (video, publicación, gráfico, etc). Eso permite que el buscador y los filtros traigan la información que los usuarios necesitan.

Una vez que nos aseguramos de esto, pusimos el buscador por todos lados. En cada sección o segmento donde los usuarios pudieran necesitarlo.

Así quedó nuestro árbol de contenidos y flow. Es el mapa de los caminos que nos señalaron los usuarios:

Y este es un acercamiento a algunas secciones internas:

Crear un flow obligó a pensar en el pasado y el futuro.

  • Sobre el pasado: a lo largo de su historia CIPPEC había desarrollado varios micrositios de proyectos específicos, en parte porque su website anterior no tenía flexibilidad para resolver esas necesidades. En esta etapa, evaluamos cada uno de ellos y decidimos cuáles conservar de acuerdo con su tráfico y actualidad.
  • Sobre el futuro: imaginamos una estructura de post-types flexible que permita crear páginas de proyectos nuevos sin necesidad de construir un sitio externo. Si bien los usuarios nos dijeron que siguen prefiriendo los PDFs para leer textos largos, dejamos un modelo listo para generar publicaciones puramente digitales, con la posibilidad de embeber destacados, videos, contenido de redes sociales y gráficos interactivos.

3. Wireframes y diseño

Con la vista general del esqueleto, pudimos empezar a diagramar cada página. Un wireframe es como el plano arquitectónico de una web: define qué se ve, cuánto mide, en qué orden y en qué disposición. Nada más. Por ahora no hay colores, ni definición de tipografías o estilos.

CIPPEC necesitaba flexibilidad para publicar sus contenidos, así que armamos una grilla bien versátil de 15 columnas. La grilla nos permite armar módulos chicos, de 2 o 3 columnas, para citas pequeñas o una columna lateral, y también módulos que ocupen todo el ancho de la pantalla, como el que requiere un destacado principal o el header de una publicación.

Superados los debates y definiciones sobre el contenido y la estructura, llegó el momento de preocuparse por el diseño visual y la estética.

El primer paso fue establecer una guía de estilo: un manual que define la paleta cromática, el estilo de botones, iconografía y tipografías (para títulos, párrafos, destacados, etc).

Los elementos interactivos no tienen una vista única: hay que pensar cómo se ven en distintas situaciones y diseñar cada una de sus instancias. Por ejemplo, un botón puede cambiar de color cuando el cursor está sobre él y volver a cambiar con un clic. Esto puede parecer menor, pero es esencial para la comunicación con el usuario. Necesitamos hacerle saber que un botón es clickeable, que la página se está cargando, que recibimos su formulario, etc.

La guía de estilo es un primer paso fundamental para que luego sea más simple diseñar cada pantalla.

En el caso de CIPPEC se adaptaron los colores institucionales para que respondan mejor al entorno web sin perder la identidad visual de la institución, se diseñaron íconos específicos para reflejar la variedad de contenidos y  se aplicaron dos tipografías bien modernas pero con una reminiscencia clásica, entre otras cosas.

4. Maquetado e implementación

Llegó la hora de hacerlo realidad: el maquetado y la implementación. Elegimos usar WordPress como CMS por su versatilidad y facilidad de uso. Pero como todo en este proceso, también lo adaptamos a las necesidades puntuales de CIPPEC y del diseño. Por ejemplo, los estilos de títulos tienen un máximo de caracteres habilitados desde el sistema porque el equipo de CIPPEC prefirió evitar la tentación de usar títulos demasiado largos.

También adaptamos el administrador de contenidos. Pensamos en las personas del equipo de comunicación con tanto cuidado como en el usuario final, porque ellos también van a interactuar con el sitio todos los días y su trabajo es clave. Por eso usamos títulos e indicaciones intuitivas en todos lados y habilitamos funciones que facilitan la carga de contenidos: drag and drop para ordenar posteos, selección de menús desplegables para elegir tags, entre otros.

Antes de dar por terminado el trabajo volvimos al comienzo: testear con usuarios. Otra vez, pero ahora con el sitio casi terminado. Eso nos permitió verificar cómo funcionaba el diseño y qué ajustes se necesitaban.+

Así llegamos al último paso del desarrollo antes del despegue. Es el paso preferido de los obsesivos como nosotros: el control de calidad o QA. Básicamente se trata de hacer clic en todo. Revisar el sitio en teléfonos, tablets y en todos los browsers. Navegar como un principiante y hacer todos los caminos posibles para encontrar errores y cosas para mejorar. Es el momento de hacerlo intensivamente, porque más adelante el sitio va a estar online y no queremos que esos errores los descubra un usuario y arruinen su experiencia.

5. Puesta online y carga de contenidos

En el caso de CIPPEC, todas las publicaciones anteriores de la institución se migraron mediante un proceso automático. Tuvimos que resolver algunos problemas puntuales para que las etiquetas funcionaran bien en estas publicaciones viejas. Por ejemplo, algunas de ellas pertenecían a áreas institucionales que ya no existen.

Los nuevos contenidos -como nuevos eventos y novedades- se cargaron de forma manual durante dos semanas en un sitio de pruebas. Esto le permitió al equipo de comunicación de CIPPEC aprender a usar el administrador de contenidos en contacto permanente con nosotros, antes de salir al ruedo.

Y entonces sí: ¡pusimos el sitio online!

¿Y ahora qué?

Los sitios, como los dinosaurios, dejan una huella fuerte.

Cuando cambian, generan también cambios a su alrededor. Sebastián Zírpolo, director de Comunicación de CIPPEC, dice

Desde que lanzamos el sitio cambió la cultura interna de la institución. Hay más interés por comunicar lo que hacemos, todos nos piden mejorar sus fotos y sus biografías, y se muestran preocupados para que sus contenidos estén online.

En estos días, además, CIPPEC lanzó con nosotros una campaña de comunicación previa a las elecciones legislativas en Argentina, que empezó en las redes sociales y siguió en la nueva web con una serie de contenidos integrados. Acá la pueden visitar. ¡Y contarnos qué les parece!