Asi se conceptualizo y se desarrollo la nueva web de elartedemedir.com, la empresa de Gemma Muñoz y Tristán Elosegui

Conozco a Gemma Muñoz, la principal cara de la analítica web en España (y parte del extranjero), desde hace ya unos cuantos años. Gemma y yo hemos compartido muchas cosas juntos, algunas personales y algunas profesionales, algunas buenas y acojonantes y algunas menos buenas y menos acojonantes, e incluso llegamos a ser socios de empresa en Mind Your Group, en una decisión que tomé principalmente por el privilegio que suponía poder trabajar con ella cada día.

Gemma, además de la principal divulgadora de la analítica web en este santo pais, fue (es) autora, junto con Tristán Elosegui, de un libro fundamental en esta disciplina en España, que es “El arte de medir“. Ese libro sirvió, de hecho, para dar nombre a su propia empresa, que formó en 2011, y tras el parentesis de ser socia en MYG, esa empresa, El arte de medir, se ha reforzado con un equipo muy potente, encabezado por su nuevo socio, Tristán Elosegui. Un tipo realmente majo y profesional que conozco desde el año 2010, cuando me entrevistó para su blog acerca de mi trabajo y la analítica web.

El arte de medir, la empresa, queda en este 2014 encabezada por Gemma Muñoz y Tristán Elosegui, además de otros grandes profesionales, pero claro… necesitaban una nueva web, porque el concepto había pasado de ser un libro a ser una empresa

Imagen de la web elartedemedir.com cuando se promocionaba el libro

Así era la web de “El arte de medir” cuando el proyecto “solo” era un libro, no una empresa

Y en esa tesitura aparecimos nosotros. Como amigo personal de Gemma y de Tristán (con su permiso) y teniendo en cuenta nuestro bagaje en trabajos conjuntos, nos encargaron el reto de reestrcuturar, conceptualiar y desarrollar toda su nueva presencia digital, la de su empresa… y claro, a nosotros nos gustan las cosas dificiles, así que lógicamente dijimos que sí. Las cosas fáciles ya son para otros… Así que nos pusimos en cabeza de esto, por nuestra parte, en nuestra empresa Flat101, los señores Jorge Rigabert, Miguel Monreal y servidor, con la misión de que elartedemedir.com, la web de la empresa de analítica digital fuera el principal activo comercial de la empresa y representara sus valores, además de explicar perfectamente los servicios que prestan. ¿Antes de seguir leyendo quereis ver el resultado final? Pues entrad en www.elartedemedir.com … pero ahora sigue leyendo!

Si lo pensamos, “El arte de medir” nació como un libro, y la primera web del dominio iba en esa linea, promocionar un libro, una publicación. No había más objetivo que el de promocionar el libro e incentivar su compra.

En una segunda etapa, cuando Tristán y Gemma ya nombraron a su empresa como su libro, “El arte de medir”, había que convertir la web en algo diferente, en un sitio web destinado a potenciales clientes y partners, que debían poder localizar rápidamente a la empresa, a que se dedica e identificar sus servicios y en que podían ayudarles. Como el trabajo de la web definitiva iba a ser largo, se hizo un trabajo provisional sobre la web previa, de forma que la web pasó de ser una web pensada para promocionar un libro a la web de una empresa que busca, como todas, explicar sus servicios, exponer sus trabajos y a sus clientes y facilitar el contacto para que cuentes con sus servicios.

Imagen de la web de empresa de "El arte de medir"

La segunda web de “El arte de medir”, ahora ya yendo un paso más allá del concepto del libro y orientando la presencia online como empresa

Y finalmente, cuando empezamos a pensar en que hacer y como con la web de “El arte de medir” le dimos forma a lo largo de tres meses hasta conseguir la versión actual, que es la que está actualmente online.

La primera parte del trabajo: el concepto y la estructura de elartedemedir.com

El trabajo que teníamos por delante no era poca cosa. Hablamos de reposicionar una marca, que pasa de ser un libro a ser una empresa del entorno digital y donde además están dos de los principales profesionales de internet de este pais, así que había que hacer las cosas con cabeza, despacio y bien, que la velocidad y el buen trabajo rara vez van juntos.

La primera tarea fue definir cuales iban a ser los objetivos principales de elartedemedir.com como web de empresa. De inicio, definimos como objetivos principales del site los siguientes:

  1. Captación de leads (formularios de contacto) de valor comercial para la empresa
  2. Difusión de la actividad de coaching inhouse
  3. Difusión de la actividad basada en conferencias y participación en eventos, tanto nacionales como extranjeros

En segundo lugar, definimos una estructura inicial para el sitio web que recogiera, con precisión de URLs y sus etiquetados básicos, la totalidad de los contenidos que un potencial usuario necesita encontrar en el sitio web, y que esos contenidos estuvieran articulados en una estructura pensada para lograr los objetivos previamente definidos.

Imagen de la excel en la que se pinto la estructura de la web

Una bonita hoja excel con la primera versión, que no fue la definitiva, de la estructura de la web (taxonomias, URLs, etiquetados) elartedemedir.com

La estructura del sitio web tiene que ser util para los objetivos que persigue. Esta es la premisa principal de cualquier estructura web, o debería serlo.

La segunda parte del trabajo:  el desarrollo visual y de interacción

Con unos objetivos claros y una estructura de contenidos bien definida y articulada en torno a éstos, llega el momento de conceptualizar y desarrollar la interacción (lo que el usuario debe hacer para lograr los objetivos definidos) a través de una interfaz visual que, además de contemplar este cumplimiento de objetivos, debe cumplir también una labor estética clara: no solo nos interesa la funcionalidad, sino que la estética de la web refleje la filosofía y valores de la misma, así como que aporte un punto de diferenciación y elegancia claros respecto a lo que hacen las webs de la competencia. Para ello, a la hora de valorar tanto la funcionalidad como la estética, valoramos la presencia digital de 14 empresas de actividad similar a El Arte de Medir.

Un punto importante era redefinirla parte gráfica en lo relativo, por ejemplo, al logo. “El arte de medir” pasaba de ser un libro a ser una empresa, y hay que entender que no podemos presentar dos actividades tan diferentes de una forma estéticamente similar. Por ello, y en un primer momento se hico un trabajo muy serio de “reconstrucción” del logo, porque habia que vincular la actividad de la empresa a un nuevo logo que reflejara la actividad, fuera reconocible y además rompiera con el concepto del nombre hasta el momento.

Aquí podeis ver, por ejemplo, un juego de logos que fue descartado y que eran los favoritos de Jorge y mios… pero no pudo ser, que el cliente siempre tiene la razón.

Imagen de logos no aceptados para el arte de medir

Estos logos tan guapos fueron descartados… y mira que son chulos. Mi socio Jorge es que es un primor.

Finalmente la web comenzó a tomar forma, a través de mútiples variaciones, reorientaciones, revisiones, etc, y tomo forma en un mockup, en una maqueta, que fue a la que los señores Gemma Muñoz y Tristán Elósegui dieron el OK. No es un tema menor, hablamos de la web de la empresa de analítica digital de más proyección sin duda. Este fue el diseño final aprobado:

Home inicial de la web elartedemedir.com

La primera versión del mockup aprobado para la nueva web elartedemedir.com, ¿mola? A nuestros clientes y a nosotros nos molo, y mucho

A partir de aquí, maquetar en HTML5 y desarrollar lar versiones mobile (smartphone y tablet), además de incorporar las partes que tocaban en la siguiente fase.

La tercera parte: la implementación del SEO, la analítica web y la programación necesaria

Lógicamente, es importante, por no decir imprescindible, que un sitio web de empresa sea localizado mediante los buscadores cuando alguien introcuce los términos vinculados a su actividad, que en el caso de “El arte de medir” son cosas del estilo de “empresa de analítica web”, “dashboard de datos” y cosas así. Así que todo nuestro trabajo SEO va orientado en esa línea: dar visibilidad a la empresa para los términos relevantes de su actividad y que representan a la misma.

Y, como no podría ser menos, aquí hay un trabajo de tagging de analítica dirigido por Gemma y Tristán, porque si vendes analítica lo primero que tienes que tener controlado es este aspecto, está claro. En la línea de analítica, el implementarla, el “placer” de hacerlo le cayo al bueno de Miguel… es un trabajo sucio, pero alguien tiene que haerlo :)

La cuarta parte: una nueva web lista para comerse el mundo

Y con todas estas piezas ensambladas tras haberlas pensado, estudiado y decidido, conseguimos ese todo que es esta web: elartemedir.com, donde como últio punto se trabajo mucho la adaptación a dispositivos mobile, algo clave y necesario hoy día.

Así luce la web en dispositivos desktop (es decir, pantallas de PC de toda la vida):

Página principal de la web elartedemedir.com

La home de elartedemedir.com en su versión actual online

Y así luce la web en un iPad:

Pagina principal de la web en un iPad

La home de la web en un iPad 3. Como podeis apreciar los elementos y la navegación no son iguales en ninguna de las 3 tipologías de dispositivo, porque el escenario y forma de uso es diferente en todos ellos

Y así luce la web, preciosa en mi mano, en un iPhone 5:

Home de elartdemedir.com en un iphone 5

La home de el arte de medir en un iPhone 5, luciendo preciosa en mi mano

Y ahora te toca a ti! Entra en elartedemedir.com y dinos como lo ves!

Be Sociable, Share!

Tags: , , , , , ,

  1. Gemma’s avatar

    Sólo puedo decir una cosa:

    GRACIAS!

    Con mayúsculas, como mayúsculo es tu equipo, grandes profesionales y mejores personas.

    Y el trabajo que habéis realizado para mí es muy especial, para mí y para todos los que tenemos tantísima ilusión puesta en esto, Edu, Tristán, Alex, Javi y Malale. Gracias de todo corazón por haber captado a la primera nuestra esencia, gracias por esas fases que hemos ido viendo (cuando nos dejábais jejeje) pasito a pasito y gracias por esta emoción compartida.

    Sois muy grandes.

    GRA CI AS

  2. Lucía’s avatar

    Soy fan tanto de Gemma como de Tristan, así que a lo mejor no soy muy objetiva ;) pero en mi opinión ha quedado súper chula, felicidades!

  3. Ricardo Tayar’s avatar

    Hola Gemma,

    ¿Qué puedo decir? Eres no solo una gran profesional, sino una gran amiga. Para nosotros, para todo el equipo, del que yo solo soy la punta, ha sido una experiencia más que retadora y entretenida, como siempre. Tanto Jorge, como Miguel o yo, que somos los que hemos trabajado directamente en elartedemedir.com, lo hemos disfrutado y nos hemos dejado, como es costumbre, un trocito de nosotros en esta web, porque es lo que nos gusta y es como trabajamos. Y el resto del equipo: Diego, Sandra, Esther, Carolina y Diego 2 han participado en algún momento y han ayudado a que esta web vea la luz, a veces animando, a veces aportando y siempre estando ahí, como debe ser.

    Creo que este es el comentario más ñoño que he escrito nunca. En fin, como decimos siempre, lo importante será que el sitio web cumpla su función.

    Un besote,

    Ricardo

  4. Ricardo Tayar’s avatar

    Hola Lucía,

    Si eres fan de Gemma y Tristán no eres objetiva, pero da igual!

    Lo que más me molesta es que no seas fan mia…. nooooo, que es broma!

    Lo importante siempre será, más allá de la apariencia, que el trabajo de sus frutos. Además de estar bien hecho y bien pensado, que funcione, y eso lo irán contando los propios Tristan y Gemma.

    Un saludo,

    Ricardo

  5. Rodrigo’s avatar

    Me gusta mucho. La ví primero en iphone, despues en Ipad y por fin ahora en el Mac, la verdad es que se ve muy limpia y profesional.
    Buen trabajo!

  6. Malale’s avatar

    Enhorabuena por el trabajo!
    No me repito en los halagos, a mi también me ha gustado mucho el resultado, ahora va a tener ojos muy expertos analizando su rendimiento! Pero quería comentaros que me ha gustado especialmente el nuevo logo! A pesar de haber dejado en el camino esos tan molones que nos has enseñado ;)
    Sois unos artistas!

  7. Ricardo Tayar’s avatar

    Hola Malale,

    En nuestra opinión teníamos un par de logos que molaban más incluso! Pero el cliente y la lógica del negocio se impusieron. El logo original, que no era el del puño, ami me encantaba, pero entiendo las razones del cambio y la lógica de tener el actual, que me parece muy molón tambien.

    Un saludo,

    Ricardo

  8. Ricardo Tayar’s avatar

    Hola Rodrigo,

    Gracias por el test de dispositivos! Muy importante que una web de este estilo funcione en todo tipo de cacharros, aunque es algo mucho más complejo de lo que pueda parecer, la verdad.

    Un saludo,

    Ricardo

  9. Fernando Carvallo’s avatar

    Les ha quedado genial. Me faltó ver una pestaña del libro, que, por cierto, es muy bueno, y chismear respecto a los análisis del tráfico que tienen (jajajajajaja, es broma).

    Felicitaciones

  10. Tony Esteban’s avatar

    Hola Ricardo,

    Me parece una página realmente genial. Me refiero a “genial” no solo en cuanto a “magnífico o estupendo”, también se pueden aplicar muchas de las otras acepciones de es palabra, como por ejemplo “que revela genio creador”. Créeme que no por hacer la pelota, puesto que no es necesario.

    Creo que sería bueno para los lectores del blog que dieras algún dato sobre el tiempo que habéis tardado en hacerlo y un pequeño esquema que podamos seguir los lectores para rehacer nuestras propias páginas (proceso en el que me encuentro).

    Gracias

  11. Ricardo Tayar’s avatar

    Hola Tony,

    Muchas gracias por tus palabras. En respuesta a tu pregunta, creo que en este casi hemos invertido cerca de 3 meses en la totalidad del desarrollo. Sobre las fases de como se ha hecho y cual ha sido el proceso, es una buena idea para un nuevo post, así que me lo apunto :)

    Un saludo,

    Ricardo

  12. Tony Esteban’s avatar

    Gracias Ricardo, al menos yo estaré esperando impaciente esperando al nuevo post. Seguramente me sirva para mi propio proyecto.

    Realmente 3 meses se me hacen poco con la carga de trabajo que seguro que lleváis. Yo llevo casi un año con otras dos personas y no hemos acabado. Esto demuestra que rehacer una web realmente conlleva un esfuerzo extra y mucha gente no es capaz de apreciarlo.

    Como te dije en mi anterior comentario, un resultado genial.