Transformación digital de los estudios Meaningful Brands y Connect (Havas Media Group)

Planificación de una aplicación web para visualización de datos.

Durante los años 2016 y 2017, asumo la dirección y la planificación del proyecto de transformación digital y de visualización de los estudios de marca Meaningful Brands y Connect (Havas Media Group).

El reto: crear una aplicación web de consumo interno de gráficos y visualización desde cero. La materia prima con la que contábamos eran millones de datos en formato excel.

El proyecto de visualización conduce los estudios de Havas Media Group desde unas herramientas estáticas, con visualizaciones básicas y una respuesta a la demanda muy lenta, hacia una plataforma interactiva integrada en los servidores de la compañía que permite la personalización de las peticiones en tiempo real.

 

Diagrama de flujo de la aplicación.
Diagrama de flujo de la aplicación.

 

Nuestra misión:

• Homogeneizar la entrada y salida de datos

• Mejorar el aspecto de las visualizaciones

• Simplificar la narración visual

• Conseguir una experiencia de usuario e interactividad excelentes.

Meaningful Brands

Meaningful Brands es el primer estudio que conecta el valor de una marca con su aportación al bienestar individual y social. En el contexto tecnológico actual, donde el consumidor es participativo y crítico en parte a través de canales como social media y pueden hundir una marca o derribar un gobierno, es crítico entender bien cuál es el impacto que las marcas tienen en la calidad de vida.

Por ello, a través de esta aplicación, los usuarios pueden consultar el estudio de cada país y descargarse todo tipo de informes en formato Power Point, imágenes en PDF o jpeg o guardar cada una de las consultas realizadas.

El estudio se ha realizado en más de 34 países y aglutina a más de 1.000 marcas comerciales.

Havas Media Connect

Connect es un estudio para medir y comparar los niveles de influencia y asociación que guardan las marcas de un país o región. Estos estudios sirven para hacer recomendaciones estratégicas a los clientes respeto a puntos de contacto potentes y sustentados para cada una de sus campañas

Havas Media Connect también esclarece la asociación que hace el consumidor entre los puntos de contacto y las marcas. Esto ayuda a entender si una marca tiene algún territorio mediático bien definido, y a cuantificar las oportunidades que tiene la marca en términos de inversión y desarrollo de nuevos puntos de contacto.

Connect cuenta con una amplia base de datos en la nueva aplicación que permite un entendimiento claro de la dinámica de los medios según una categoría, un país, y un target específico.

 

El reto fue crear una aplicación web de gráficos y visualización desde cero con miles de datos en formato excel.
El reto fue crear una aplicación web de gráficos y visualización desde cero con miles de datos en formato excel.

 Desde unos datos en Excel a una  aplicación web interactiva

La aplicación interactiva para web recoge toda la información correspondiente al estudio Meaningful Brands y Connect 2017 de Havas Media Group. Junto con la empresa de inteligencia de localización Abacus Consulting Technologies,  se ha realizado una optimización de la base de datos del estudio y una aplicación web con detallados gráficos interactivos sobre los cambios significativos tanto en industrias, sub-industrias y marcas.

 

Arquitectura del proyecto.
Arquitectura del proyecto.

 

 

Datos estructurados en plantillas de Excel
Datos estructurados en plantillas de Excel

Transformación de los datos en archivos CSV

Los archivos CSV (del inglés comma-separated values) son un tipo de documento en formato abierto sencillo para representar datos en forma de tabla, en las que las columnas se separan por comas (o punto y coma en donde la coma es el separador decimal: Argentina, España, Brasil…) y las filas por saltos de línea.

 

Lectura, manipulación y análisis de datos con R
Lectura, manipulación y análisis de datos con R

 

Con un fichero de texto (.csv) podemos hacer maravillas en el mundo de la analítica web. Ya que con los medios adecuados podemos consultar los números que tenemos en nuestra base de datos de forma escalable, flexible y rápida.

 

Ejemplo de datos estructurados en formato JSON.
Ejemplo de datos estructurados en formato JSON.

 

Proceso de prototipado de la aplicación

En labores de diseño y usabilidad web, realicé un prototipado personalizado de dos aplicaciones: una para Meaningful Brands y otra para Connect.

 

Primeros prototipos de la aplicación.
Primeros prototipos de la aplicación.

 

Primero se hicieron los primeros sketch o bocetos en papel de la futura aplicación y la navegación entre distintas pantallas.

 

Los wireframes son una representación estática de lo que será la plataforma web.
Los wireframes son una representación estática de lo que será la plataforma web.

 

Después elaboramos multitud de versiones de los wireframes y los mockups, que contienen información adicional en cada una de las pantallas: disposición de los botones, contenidos, llamadas a la acción, movimientos tipo dentro de la navegación entre pantallas.

En general, los wirefames y mockups permiten visualizar la línea gráfica, la estructura de la información, el contenido y avanza las funcionalidades del proyecto. Se trata de una representación estática, se entrega y aprueba en formato de imagen.

 

 

Realización de prototipos para web.
Realización de prototipos para web.

 

 

Primeros desarrollos web de la aplicación

Una vez aprobados los wireframes, se pasó a su desarrollo para web, tabletas y móviles. En esta ocasión,  el desarrollo se realizó con Angulars.js, una arquitectura de trabajo realizada con el lenguaje JavaScript para el desarrollo de aplicaciones.

 

El selector principal de datos
El selector principal de datos

 

Las aplicaciones basadas en Angulars logran mayor fluidez en experiencia de usuario ya que la comunicación entre el cliente y el servidor se realiza de manera transparente para el usuario. La sensación es que nunca abandona la página (mayor rapidez en la carga de datos).

 

El menú de visualizaciones y un ejemplo de matriz.
El menú de visualizaciones y un ejemplo de matriz.

 

Prototipos y wireframes de visualizaciones

La aplicación comenzó siendo una plataforma para visualizar datos; por ello, las visualizaciones fueron analizadas y prototipadas de forma exclusiva.

Algunas tareas que destacamos de los prototipos: la creación de un libro de estilo de visualizaciones (tipografías, colores, tipos de gráficos…), los wireframes de los selectores de marcas y su repercusión en las visualizaciones, las proporciones y posicionamientos de los elementos gráficos que componen cada visualización o la información ofrecida por las distintas descripciones emergentes o ‘tooltips’ integradas en la aplicación.

 

Wireframe de los selectores de las visualizaciones.
Wireframe de los selectores de las visualizaciones.

 

Proporciones y colores de algunos elementos gráficos.
Proporciones y colores de algunos elementos gráficos.

 

 

Una vez que las visualizaciones han sido aprobadas en formato estático por el cliente, se realiza un nuevo wireframe con las visualizaciones integradas en la aplicación web.

 

Ejemplo de visualización
Ejemplo de visualización

 

El desarrollo web de las visualizaciones

Las visualizaciones fueron desarrolladas por Beatriz Martínez experta en la librería de javascript D3, gráficos vectoriales en SVG y el lenguaje de estilos CSS.

Algunos tipos de visualizaciones que se incluyen en la plataforma
Algunos tipos de visualizaciones que se incluyen en la plataforma

Desarrollamos varios tipos de visualizaciones, como son gráficos de línea, herramientas de matrices, gráficos de burbujas, histogramas, rankings de barras, mapas de posicionamiento, visualizaciones de araña, diagramas de las etapas del proceso de decisión de compra o tablas dinámicas de datos.

Visualizaciones interactivas realizadas con D3
Visualizaciones interactivas realizadas con D3

 Informes en formato PowerPoint desde la aplicación

El usuario puede descargar informe específicos sobre un país en formato Microsoft Power Point. Todos los informes parten de una plantilla única. Cuando el usuario selecciona el ámbito geográfico del informe, automáticamente se genera el informe y se descarga en su ordenador.

Wireframe del módulo para exportar informes en formato PowerPoint
Wireframe del módulo para exportar informes en formato PowerPoint

 

Informe que se descarga desde la aplicación personalizado según el país escogido.
Informe que se descarga desde la aplicación personalizado según el país escogido.

 

 

También se ofrece al usuario la posibilidad de descargar el informe en formato Microsoft Excel; es decir, los números tabulados en bruto.

 

Desde la propia plataforma se pueden exportar informe en formato Excel o Power Point.
Desde la propia plataforma se pueden exportar informe en formato Excel o Power Point.

 

Descargas de imágenes

La aplicación permite, una vez seleccionada una visualización, exportarla en varios formatos o guardarla en un carrito de la compra personalizado.

Formatos de descarga de las visualizaciones seleccionadas en la web.
Formatos de descarga de las visualizaciones seleccionadas en la web.

Los formatos en los que se pueden descargar las imágenes son PNG, PPTx (Microsoft PowerPoint) y XLS (Microsoft Excel).

 

Módulo de administración de usuarios

El proyecto incluye un módulo de administración de los usuarios de la aplicación. Cada perfil de usuarios tiene sus correspondientes permisos para entrar en la aplicación.

 

El módulo de administración de usuarios y sus permisos.
El módulo de administración de usuarios y sus permisos.

 

El módulo de administración incluye las funciones básicas para gestionar una base de datos de usuarios (crear, listar, actualizar y borrar).

 

 

Los administradores pueden crear, ver, actualizar y borrar usuarios desde la plataforma.
Los administradores pueden crear, ver, actualizar y borrar usuarios desde la plataforma.

Gestión del proyecto

La gestión y comunicación del proyecto con el cliente se realizó a través de la herramienta online de colaboración Basecamp.

 

Basecamp, herramienta online para colaborar con clientes.
Basecamp, herramienta online para colaborar con clientes.

 

En cuanto a la gestión de incidencias, se realizó a través del gestor Mantis Bug Tracker.

Mantis Bug Tracker es un software que constituye una solución completa para gestionar tareas en un equipo de trabajo
Mantis Bug Tracker es un software que constituye una solución completa para gestionar tareas en un equipo de trabajo

GRAPHICS: Personal Data Ecosystem, FTC

Protecting Consumer Privacy in an Era of Rapid Change
Federal Trade Commission
Diciembre de 2010

Peligro en la red.
Ejemplos:

– if you browse for products and services online, advertisers might collect and share information about your activities, including your searches, the websites you visit, and the content you view;

– if you participate in a social networking site, third-party applications are likely to have access to the information you or your friends post on the site;

– if you use location-enabled smartphone applications, multiple entities might have access to your precise whereabouts;

– if you use loyalty cards at a grocery store or send in a product warranty card, your name, address, and information about your purchase may be shared with data brokers and combined with other data.

Gracias por visitar el sitio de Juantxo Cruz

El ecositema de los datos personales.

Gracias por visitar el sitio de Juantxo Cruz

Los coleccionistas de datos.

Gracias por visitar el sitio de Juantxo Cruz

Ejemplos de cómo se usa la información personal.

COMICS: Política surrealista

¡Estamos salvados!
Spiderman y Superman nos sacarán de la crisis.

Gracias por visitar el sitio de Juantxo Cruz

Mike Bloomberg, alcalde de Nueva York
Ficha a Spiderman para luchar contra el paro.

Lástima que el Hombre Araña muera en el próximo número de febrero.

Gracias por visitar el sitio de Juantxo Cruz


Juventudes Socialistas de Catalunya

Montilla=Supermán
El increíble hombre normal.

Gracias por visitar el sitio de Juantxo Cruz

Obama también fue un superhéroe para salvar al mundo.
Capitán Obama.

Para vídeo, éste.

STATS: Sport+Markt, estrategia deportiva

Gracias por visitar el sitio de Juantxo Cruz

Sport+Markt
Análisis, consultoría, investigación
Deporte internacional
Bases de datos.
Proyectos en más de 120 países de todos los continentes
Constitución en 1986 en Colonia, Alemania
Sociedad Anónima desde el año 2000
Sedes en seis países
13 oficinas, con más de 500 empleados
Proyectos en más de 120 países de todos los continentes
Una de las empresas de mayor crecimiento en el sector
Estándar comercial reconocido por el mercado así como líder en innovación y servicio
Independiente y neutral
Organización de congresos propios dentro del sector (p. ej. International Football Summit)

Gracias por visitar el sitio de Juantxo Cruz

Clubes favoritos.

“Centros de Evaluación de Medios” en Colonia, Barcelona y Singapur para el análisis y el control mundial de formatos y contenidos de televisión, Internet, telefonía móvil, radio, prensa, etc

“Hacer posible el éxito de nuestros clientes en el negocio del deporte y del patrocinio internacional es nuestra misión desde hace más de 20 años y es, al mimo tiempo, el estímulo diario para que los que conformamos el equipo de SPORT+MARKT demos lo mejor de nosotros”.

Hartmut Zastrow
Director Ejecutivo / SPORT+MARKT AG

Gracias por visitar el sitio de Juantxo Cruz

Estudio sobre las camisetas de fútbol
Leonardo Giammarioli
International PR Manager
Leonardo.Giammarioli@sportundmarkt.com
+49 (0) 221 – 430 73 177

SPORT+MARKT SL Barcelona
Ronda General Mitre, 126 Ãtico 1
08021 Barcelona
España

Tel.: +34 – 93 253 18 33
Fax: +34 – 93 212 41 45

info.spain@sportundmarkt.com

ADS: RapLeaf, personalización y cookies

Gracias por visitar el sitio de Juantxo Cruz

RAPLEAF.COM
‘Personalize your custormers´ experiences’
Auren Hoffman, CEO
Publicidad, marketing
San Francisco, startup
Personalización de servicios y publicidad a través de ‘cookies’ y direcciones IP.
Estudios sobre el perfil y el interés de la audiencia.

Cookies 101
La información la consiguen en las redes sociales (Facebook, My Space, Flickr, Linkedin…)
Segmenta la audiencia de acuerdo a los intereses personales.
Criticas al método:
– La publicidad en la red debería ser regulada
– Las direcciones IP deberían ser protegidas legalmente.

Gracias por visitar el sitio de Juantxo Cruz


Estudio sobre los fans
de la Copa Mundial de Fútbol realizado con la información obtenida de Twitter.

Gracias por visitar el sitio de Juantxo Cruz

Análisis de fans musicales por edades analizando las preferencias de los usuarios en la red.

Cláusulas del servicio.
Rapleaf

667 Mission Street, 4th Floor
San Francisco, CA 94105

Gracias por visitar el sitio de Juantxo Cruz

Gráfico de The Wall Street Journal

Gracias por visitar el sitio de Juantxo Cruz

Gráfico interactivo, WSJ

ADS: Motorola vs Apple

Gracias por visitar el sitio de Juantxo Cruz

Motorola, 2010
Dispuesta a heredar la antigua filosofía de Apple.
Droid 2.

Gracias por visitar el sitio de Juantxo Cruz

Publicidad de página completa.
Sí, es importante que sorporten Flash.

Gracias por visitar el sitio de Juantxo Cruz

Motorola Droid X, 2010

Gracias por visitar el sitio de Juantxo Cruz

Motorola, 1990
Desde 1.000$

Gracias por visitar el sitio de Juantxo Cruz

Motorola, 1984
Rudy Krolopp y el primer móvil comercial.
Dynatac 8000X
3.995$
Gran link.

Gracias por visitar el sitio de Juantxo Cruz

Apple, 1980. El microprocesador, de Motorola.
2.500$

Apple inició la revolución del ordenador personal en la década de los setenta con el Apple II y reinventó el ordenador personal en los ochenta con el Macintosh. Hoy, Apple sigue liderando la industria en innovación con sus premiados ordenadores de sobremesa y portátiles, el sistema operativo OS X, iLife y sus aplicaciones profesionales. Apple está también en la vanguardia de la revolución musical con sus reproductores de música portátiles iPod y la tienda de música online iTunes.

Gracias por visitar el sitio de Juantxo Cruz

Motorola, 1970

Gracias por visitar el sitio de Juantxo Cruz

Motorola, 1960

Gracias por visitar el sitio de Juantxo Cruz

Motorola, 1950

Gracias por visitar el sitio de Juantxo Cruz

Motorola, 1945

Motorola fue pionera de la tecnología móvil en los años 1930 con radios para automóvil y redes de radio para seguridad pública, y en comunicaciones entre el espacio y La Tierra para el programa Apollo. En la década de 1980 Motorola revoluciona las comunicaciones personales con el primer teléfono celular portátil comercial. Hoy, sus nuevos dispositivos inteligentes, redes y software hacen que las comunicaciones no sólo sean móviles sino sencillas y eficientes. Redefiniendo continuamente “el dispositivo inicialmente conocido como teléfono móvil”, Motorola lidera también la industria en diseño, con premiados productos como el icónico RAZR. Motorola tuvo en 2004 unas ventas de 31.300 millones de dólares en EEUU. Para más información visitar www.motorola.com

Aquí, la historia de Motorola

GRAPHICS: Burbuja inmobiliaria, en Rusia no, gracias

Gracias por visitar el sitio de Juantxo Cruz

Región de ROSTOV, Rusia.
Caída del mercado inmobiliario.
Depresión.
Cómo salir de la burbuja.
La crisis es mundial pero existe un lugar en el mundo que no tiene pompas inmobiliarias, según ellos: “The absence of speculative bubbles in the regional real estate market and the deficits in most segments – is the main competitive advantage of Rostov Region and the idea that is being presented at MIPIM-2010”, – said the executive director of Investment Promotion Agency of Rostov Region Igor Burakov.
Presentación en Cannes, The International Market for Real Estate Professionals and Investors.
Rostov Region: Crisis-Proof.

Gracias por visitar el sitio de Juantxo Cruz

La RECESIÓN inmobiliaria.

Gracias por visitar el sitio de Juantxo Cruz

La crisis del LADRILLO.