Proyecto: rediseño del ecommerce Up&Scrap

De nuevo uno de esos momentos que molan cuando uno dedica su tiempo en cuerpo y alma a tratar de enfocar proyectos con una nueva perspectiva.

En este caso os quiero hacer algunos comentarios al hilo del trabajo de rediseño en el que hemos aportado nuestro granito de arena desde el Estudio: el ecommerce de Up&Scrap.

Up&Scrap es una empresa aragonesa que se dedica a vender materiales de scrapbooking. Su catálogo de productos es muy diverso y teníamos el encargo de abordar el rediseño del mismo con un claro objetivo de optimización.

Nuestra intervención ha tenido lugar en los primeros pasos del rediseño, donde hemos planeado una revisión de la arquitectura de la información así como de los modelos de interacción que llevan al usuario a hacer una selección de producto y se produzca de la mejor manera posible la venta final. Que, por cierto, es de lo que se trata en la mayoría de ecommerce’s, por no decir en todos.

Hemos utilizado las técnicas habituales para abordar un proyecto de este tipo:

  1. Estudio de la competencia en tanto en cuanto queríamos detectar y estudiar buenas prácticas.
  2. Estudio de buenas prácticas en sectores complementarios.
  3. Entrevistas para obtener el máximo de información de primera mano, con el objetivo de intentar no dejar ningún detalle del comportamiento de los usuarios a la hora de interactuar con el ecommerce.
  4. Observación. ¿Y qué es lo que hemos observado? Al tratarse de un ecommerce que vende un producto tagible, estuvimos visitando, y observando, las instalaciones logísticas de Up&Scrap con el objetivo de tener un conocimiento mucho más rico de los procesos que se siguen para que una venta se entregue al cliente, lo cual nos llevó a conocer cómo son las maneras en las que los usuarios interactuan con la propia tienda, además de conocer los procesos internos que llevan al ecommerce a proporcionar el servicio al cliente final.
  5. Prototipado de alto nivel. Lo que hicimos fue tratar de consensuar con el cliente las pantallas con las que íbamos a trabajar, donde intentamos reflejar lo que el usuario iba a ver, cómo podría realizarse la interacción. Es un buen momento también para comprobar que las funcionalidades y los requisitos están plasmados en la propuesta. Y es bastante sencillo de visualizar para el cliente.
  6. Prototipado de bajo nivel. O lo que es lo mismo: diseñamos todas las pantallas, sin visual, que son necesarias para que los usuarios realicen las tareas que harán cumplir los objetivos de negocio del ecommerce.

Vamos a hacer algunos comentarios al hilo de algunas de las pantallas que hemos trabajado en este proyecto.

Página principal

Como es sencillo de imaginar, la página principal en un ecommerce de este tipo y de esta naturaleza tiene en la página principal una buena tarjeta de presentación. La recurrencia en las visitas es uno de los índices que hay que considerar a la hora de prestar más o menos atención a los detalles de interacción y los copys, desde nuestra experiencia.

U&S Home
Diseño visual de la página principal

U&S wireframe Home
Modelo de trabajo de wireframe de la página principal en una de sus versiones de trabajo

Ficha de producto

La ficha de producto, en mi opinión, es el momento del ecommerce en el que más atención hay que prestar a los detalles y a la interacción con el usuario, considerando los escenarios de uso (que hemos tenido que identificar en algún momento de la fase de prototipado).

U&S Ficha de producto
Diseño visual de la ficha de producto

U&S wireframe Producto
Wireframe de trabajo de la ficha de producto

Listado de producto

Se trata de uno de los momentos, que no necesariamente el único, en los que el usuario tiene la posibilidad (y la intención) de hacer una selección de producto para considerar su idoneidad. Dicho así quizá parezca un poco abstracto, pero si entendemos este momento como un momento de indagación por parte del usuario, creo que podremos comprender mejor la importancia de esta pantalla en un entorno de ecommerce como del que estamos hablando.

U&S Listado de producto
Diseño visual del listado de producto

U&S wireframe Listado
Wireframe del listado de producto en una de sus versiones

Checkout

Qué vamos a decir de la pantalla de checkout, ¿verdad? Pues eso.

U&S Checkout
Diseño visual del checkout

U&S wireframe Checkout
Wireframe de trabajo del checkout

Por supuesto, todo esto que cuento aquí ni se hace en dos días ni es tan sencillo como sólo leerlo (ni mirar los WF o las pantallas visuales). Es sólo un resumen de la metodología de trabajo utilizada para abordar el proceso de rediseño. Nada nás que eso. Y nada menos :)

Los resultados del proceso de trabajo se pueden ver en el propio ecommerce de Up&Scrap.

El trabajo de diseño visual y la integración ha corrido a cabo del equipo de Hiberus Internet.

Como siempre digo en estos casos, cualquier feedback será bien recibido.

25 personas que me han influenciado en mi trabajo como UX

Han tenido que pasar unos cuantos días hasta que el primer post de 2015 ha sido publicado, pero más vale tarde que nunca.

A lo que vamos. Este post es una de esas paradas en el camino en las que uno echa la vista atrás para observar el trecho recorrido. Digamos que no tanto lo recorrido, sino la compañía de personas que, desde una perspectiva intelectual, le han acompañado a uno.

Y pensando en ello, un día de enero me puse a escribir una lista de personas que me han influenciado de tal forma en mi quehacer profesional que me parecía bonito hacer una lista con sus nombres, usuario de Twitter y web de referencia. Y me puse a ello.

La verdad es que me siento muy honrado de publicar algo así ya que en cierta medida supone un ejercicio de transparencia, o de desnudez. Y me gusta y a la vez me sonroja, pero estas cosas es mejor no pensarlas demasiado y ponerse a ello.

Es una lista muy personal. Hay gente más o menos conocida en ciertos ámbitos, unos más que otros, pero es mi lista, y de cada una de esas personas he aprendido, mucho o poco, algo muy relevante e importante para mi. Eso sí, me vais a permitir que guarde para mi lo que he aprendido de cada una de ellas. Creo que con la información que habitualmente comparte, cada cual si le interesa puede aprender o acercarse a ellos.

La lista la he publicado en PDF pero también en Google Docs, que es mucho más cómodo para mi. Ya que estaba, he hecho una lista pública de Twitter con todas esas personas, por si a alguien le resulta de interés. Cada cual que se la sirva de donde guste :)


25 personas que me han influenciado en mi trabajo como UX from Daniel Torres Burriel

Se acaba 2014: resumen del año en este weblog

Pues un año más, amiguitos. Esto es acojonante. El tiempo se pasa que es una barbaridad y nosotros, cual espectadores impasibles, asistimos al consumo de las fechas del calendario casi sin darnos cuenta.

Pero bueno, antes de que esto se me vaya mucho de las manos vamos a hablar de lo que es interesante por aquí, y no de mis pajas mentales cuando llegan estas fechas.

La cuestión es que este post sigue siendo el que más ilusión me hace publicar todos los años: el resumen del año que venimos haciendo por aquí desde 2006.

Este año 2014, como habréis visto, trae una novedad. Ya hay un resumen del año del blog escrito y publicado. Es el de @veniabi, que se ha incorporado al estudio en 2014. Es un gran cambio y un significativo avance. Y 2015 traerá más novedades y avances en este sentido.

En otro orden de cosas, el año que termina ha sido un buen año profesional. En el estudio lo hemos notado, y hemos dejado buen reflejo de ello en el blog ya que, una vez más, ha sufrido las consecuencias de la agenda. No hemos escrito todo lo que nos hubiera gustado. Pero en ello estamos.

2014 ha sido el año en el que hemos consolidado el estudio como partner importante de nuestros colaboradores, clientes y proveedores. No es ningún secreto que las gentes de Hiberus Internet confían en nosotros para algunos de sus proyectos, ni que las estrechas colaboraciones profesionales con agencias cercanas nos están proporcionando a todos unos frutos más que positivos: Flat 101 (@rtayar) y CCB Marketing Services (@calvoconbarba) son dos mejores ejemplos en esa línea de colaboraciones.

Son 11 años de este blog, que se dice pronto. De hecho se dice muy pronto. Pero 11 años es mucho tiempo como para continuar sintiendo orgullo del trabajo realizado en él hasta la fecha. Y un motivo más para hacer un esfuerzo extra en mejorar sus posts, la frecuencia de los mismos y la interacción con quienes nos visitáis.

El año 2015 pretende ser un año en el que demos un salto cualitativo en todos los proyectos en los que el estudio ha sido parte promotora: tanto Torresburriel Estudio como UX Learn se han hecho mayores de edad y es hora de que se comporten como tal. Tenemos buena compañía para hacerlo posible, y por ganas no será.

Y dicho todo ello, vamos con el resumen de lo publicado en el blog este año.

Enero

En enero recién habíamos empezado a hacer una revisión semanal de la actividad en el estudio. Fue un intento de mantener vivo el blog, aunque no logramos mantenerlo todo el año.

Febrero

Este mes lo más indicativo fue que publicamos uno de esos post que mola mil escribir. Habíamos terminado la primera fase del proyecto de Cuéntica, y lo quisimos contar. En paralelo, las retrospectivas semanales iban contando el día a día de los proyectos.

Marzo

El mes de marzo fue el que dio la bienvenida a @veniabi en el blog. Además contamos otro de esos proyectos en los que estuvimos trabajando mucho tiempo y disfrutando muchísimo contándolo. Como en el mes anterior, las retrospectivas semanales eran quienes mandaban en el blog.

Abril

En abril esta casa terminó su reforma integral y una mudanza completa. Después de varios años rediseñados este blog y nació la web del Estudio. En una propiedad digital como esta, con tantos años a la espalda y con tanto contenido detrás, no es nada fácil abordar un proyecto de este tipo. Pero conseguimos que las paredes, las columnas maestras y el resultado final estuvieran a la altura de lo esperado.

También hubo decepciones, pues ganamos un proyecto precioso que no supimos cómo llevar a buen puerto, y desaparecimos del mismo casi como lágrimas en la lluvia. Lo cierto es que fue nuestro peor momento. Pero hemos llegado a diciembre, eh? ;)

Mayo

El mes de mayo nos trajo la desaparición de las retrospectivas semanales. Fueron semanas muy duras ya que las cosas no siempre salen como uno ha planificado, y hubo que corregir la dirección del camino sobre la marcha. De hecho todos los posts de ese mes fueron cosa de Verónica.

Junio

El mes de junio fue un mes en el que el Estudio comenzó a sentir los efectos de empezar a hacerse mayor. Fueron semanas de un intenso trabajo de ese que no se ve, de establecer y consolidar acuerdos con proveedores y clientes, de  sacar adelante proyectos comprometidos, de burocracia a veces desesperante, y de establecimiento de acuerdos de colaboración.

Julio

Exactamente igual que en el mes de junio: mucho trabajo, a veces desesperante, de ese que no se ve. Pero había que hacerlo y los efectos en el blog fueron devastadores. Si no es por Verónica, dos meses en blanco por completo.

La buena noticia es que en medio de tanto trabajo invisible, algunos frutos se vieron: la primera edición de UX Zaragoza, un evento público y gratuito sobre Experiencia de Usuario organizado desde el Estudio.

Agosto

El colofón de la sequía productora de posts tuvo su clímax en el mes en el que parece que todo el mundo se va de vacaciones, pero es uno de los momentos más intensos de trabajo en este sector, o al menos esa es nuestra experiencia. Un solo post que publicamos, pero que resumía dos meses de trabajo en sendos proyectos. Fue duro pero mereció la pena.

Septiembre

El mes de la vuelta al cole supuso para el Estudio la consolidación del proyecto que andábamos buscando: esto ya no es el blog de @torresburriel, sino que es una empresa de diseño de productos digitales y de servicios. Y como tal nos comportamos, y como tal actuamos. ¿El problema? Que nos siguió costando mucho encontrar tiempo disponible para contar cosas aquí. Aún con todo tratamos de explicarlo, pues aún nos quedaba un mes de sequía.

Octubre

Yo creo que fue el mes más complicado del año, y mira que los meses de verano fueron chungos. Pero octubre fue la expresión más palpable del cansancio acumulado durante el año. La apuesta había sido importante y empezábamos a notar los efectos de no haber descansado lo suficiente. Aunque ya sabíamos que era el último mes complicado, antes de poder empezar a contar los muchos proyectos en los que estábamos trabajando.

Noviembre

Mira que le tengo manía personal al mes de noviembre, pero este año en lo profesional fue el mes en el que, al fin, podíamos sacar la cabeza del enjambre de proyectos en los que andábamos metidos y empezar a contar muchas más cosas. El blog lo notó, como debe ser.

Diciembre

Este suele ser un mes en el que gran parte de la producción de posts asociados a proyectos ve la luz en enero y febrero del año siguiente. Es la segunda época del año en cantidad de trabajo, pues por alguna razón todos queremos cerrar el año con un montón de cosas hechas y terminadas. Y a nosotros es a quien nos toca ponernos con ello. Pero lo hacemos encantados, que conste. Es además un mes en el que terminamos la planificación del año siguiente, momento en el cual podemos empezar a contar algunas cosas que vendrán. De momento, en nuestro caso, será darle la bienvenida a un nuevo componente en el estudio: Samuel Gimeno se incorporará al mismo en enero, y ya seremos tres personas en plantilla, junto con nuestra red de alianzas. Y Verónica que nos dejó su primer resumen del año.

Por supuesto, la hemeroteca particular de esta serie de posts:

Mi resumen del año 2014

Como @torresburriel, yo también voy a hacer un resumen del año en lo que se refiere a los post publicados por mí y a mi incorporación a Torresburriel Estudio este 2014.

Los que seguís el blog habréis podido comprobar que llevo en la empresa cerca de un año, por lo que estoy contentísima, no sólo por estar trabajando, lo cual lamentablemente mucha gente joven como yo no puede decir en este tiempo de crisis, sino porque además me gusta mucho lo que hago. Y por otro lado, aunque suene a “peloteo”, tengo que decir que también tengo un muy buen jefe ;) Entre otros aspectos, porque, a pesar de tener siempre mucho trabajo, me enseña cada vez más cosas lo cual me permite evolucionar como profesional, y espero seguir haciéndolo :)

Verónica trabajando en Torresburriel Estudio.
Aquí me tenéis trabajando en el Estudio.

En cuanto a los posts, puede que no haya escrito muchos, pero yo estoy contenta con lo que he hecho. No tenía mucha costumbre de escribir en un blog, por lo que para mí es un gran avance. Además, el volumen de trabajo en el Estudio tampoco ha permitido seguir escribiendo con la misma frecuencia con la que lo hacía antes Daniel, pero procuraremos mantener el blog más activo de aquí en adelante.

Y dicho todo esto, os muestro los posts de cada mes.

Marzo

Abril

Mayo

Junio

Julio

Agosto

Septiembre

Octubre

Lamentablemente no escribí nada en el blog este mes :S

Noviembre

Diciembre

Y otro mes en el que aún no había hecho acto de presencia en el blog.

Como ya he dicho, procuraré escribir más :)

Proyecto: rediseño de Simply Online

Bueno pues otro proyecto que está ya en producción y del que podemos contar algunas cosas del trabajo que hemos realizado para llevarlo al estado en el que se encuentra actualmente.

Se trata, de nuevo, de un proyecto del ámbito del ecommerce, en este caso de un supermercado. Porque no todo es hype y tiendas mega-molonas. La gente sigue comprando sus cosas de comer y de limpiar en los sitios de siempre, y éstos permiten (o lo intentan) que lo sigamos haciendo por internet.

DV Simply Anonimo
Página principal de Simply Online cuando el usuario está autenticado

Es el caso de Simply, que en su ecommerce Simply Online decidió dar un paso adelante en cuestiones de diseño y optimización y, entre otras cosas, nos contrató la parte conceptual y visual. Y abordamos el proyecto no sin un componente extra de ilusión. ¿Quién no ha comprado tantas y tantas veces en Simply? Yo reconozco que me hace ilusión trabajar en proyectos así, qué le vamos a hacer.

Lo que hemos hecho en Simply, de la mano de sus responsables del canal online, ha sido una reconceptualización de las pantallas y los procesos que gestionan y que guían al usuario a través de su ecommerce. Empezando por la página principal, pasando por la selección de producto, y finalizando por el propio carrito de la compra.

Una propiedad digital como de la Simply, que tiene un producto con una serie de condicionantes, implica una serie de limitaciones o requerimientos que hay que considerar de una forma bastante seria cuando se trata de abordar un trabajo de diseño. El producto final que el usuario ve es el producto de una serie de combinaciones internas, que ahora no es necesario detallar, que hacen que ése sea el que es. ¿Qué quiero decir con esto? Que la carga de trabajo que supone comprender y considerar una serie de cuestiones internas en este sector no es un tema menor, en absoluto. Las implicaciones que a nivel de diseño y a nivel de experiencia de uso son extraordinariamente interesantes si las observamos desde una perspectiva profesional.

Pero no me quiero enrollar mucho más con esto. Es mejor y más útil que os cuente qué es lo que hemos hecho, y cómo:

  • Hemos repensado la página principal para:
    • facilitar el inicio de la compra
    • enseñar producto
    • comunicar mejor las fortalezas de Simply online
  • Hemos hecho transparentes los procesos de petición de datos:
    • Cuando se quiere conocer la ubicación del usuario
    • Cuando se quiere completar un proceso de compra sin estar registrado
    • Cuando se quiere conocer una información de producto
    • Cuando el usuario se quiere autenticar (si previamente está registrado)
  • Hemos optimizado la información y diseño del carrito de la compra
    • Para promocionar y facilitar la finalización de la compra
    • Para facilitar el uso de cupones
    • Para facilitar la percepción de los descuentos aplicados
    • Para servir de ayuda en el propio proceso de la compra

¿Cómo lo hemos hecho? Hemos utilizado las técnicas básicas de análisis etnográfico y diseño conceptual que solemos usar en el estudio:

  • Entrevistas con usuarios para conocer el primer nivel de patrones de uso
  • Entrevistas con stakeholders para conocer de primera mano los procesos internos del sector alimentación
  • Entrevistas con responsables técnicos y logísticos del canal online para conocer y consolidar todo lo que tiene que ver con producto, envío y patrones de uso
  • Diseño de wireframes, validado paso a paso con responsables del proyecto en el cliente
  • Diseño visual de patrones que a partir de una pantalla se extiendan como objetos de utilización en todo el site
  • Coordinación con el equipo de desarrollo e integración

Wireframe de la página principal

El foco está puesto especialmente en el inicio del proceso de compra a través de un CTA claro y evidente, el producto genérico y el producto específico, empaquetado en ofertas y promociones.

WF Simply Home User
Wireframe de la página principal de Simply Online cuando el usuario está autenticado

Wireframe de la página principal cuando se piden datos

El objetivo de algunas pantallas está basado en la exitosa interacción con el usuario, como el momento en el que se solicita el código postal de éste. Se solicita un dato, y a la vez se muestra con claridad por qué se pide, qué ventajas ofrece para el usuario, y algunos de los beneficios complementarios que supone el canal online.

WF Simply Home
Wireframe de la página principal de Simply Online cuando se necesita un dato específico por parte del usuario

Diseño visual del detalle de la petición de datos

DV Simply CP
Diseño visual del detalle cuando se necesita un dato específico por parte del usuario

Detalle del diseño visual de producto

DV Simply Ofertas
Diseño visual del detalle cuando se quiere mostrar producto, detalle y acceso a compra

Wireframe para hacer transparente la compra

Lo que más nos interesa en este punto es que el usuario haya podido navegar por el surtido de producto, configurado un carrito y efectuado el inicio del checkout. Los datos los pedimos sólo cuando es imprescindible, y de una forma razonable.

WF Simply Cart
Detalle cuando se desea que el usuario introduzca sus datos para completar una compra

El proyecto en nuestra parte, como pasa tantas veces, lo hemos llevado a cabo gracias al trabajo de las buenas gentes del equipo: @lizano, @veniabi y yo mismo. La integración y el código front han sido obra del equipo de Hiberus Internet.

Si queréis ver más pantallas y wireframes, hemos dejado un álbum en Flickr: Rediseño de Simply Online.

Como decimos siempre en estos casos, estaremos encantados de escuchar lo que queráis decir.

Proyecto: rediseño de Cestalia

Otro proyecto en el que hemos trabajado en el estudio y que ve la luz después de varios meses de trabajo.

En este caso se trata de lo que llamamos un ecommerce de bajo alcance. Lo llamamos de bajo alcance porque se trata de un tipo de proyecto que tiene un dominio de audiencia limitado, pero muy cualificado y francamente optimizado.

Cestalia es una empresa que se dedica a la creación y distribución de lotes y cestas de navidad. Nuestro cometido en el proyecto ha sido, desde el inicio, plantear un rediseño del ecommerce orientado a la maximización de las ventas a través del canal web. La empresa, en todo caso, también tiene canales tradicionales de venta, si bien el canal web es el principal en cuanto a pedidos.

DV Cestalia Home
Captura de pantalla de la página principal de Cestalia

Lo que hemos planteado en el proyecto es una apuesta por varios elementos que influyan decisivamente no tanto en la decisión de compra, como en la operativa de la misma.

Una de las mejores decisiones que el cliente ha tomado, siguiendo nuestro consejo, es la de cuidar los copys y los mensajes. Sirva un ejemplo de la descripción que de ellos mismos hacen:

Somos una PYME, con 12 empleados y sede en Zaragoza, que llevamos 7 años haciendo exclusivamente lotes y cestas de navidad. No somos los números 1, ni la empresa más grande del sector. Y esta situación le beneficia a usted, porque somos ambiciosos y nos obliga a esforzarnos cada día en mejorar. Porque queremos llegar a ser, con ayuda de nuestros clientes, los números 1.

No es sencillo encontrar empresas (y clientes) que tengan la capacidad de transparencia como la que nos hemos encontrado en Cestalia, esa es la verdad.

En términos de interfaz hemos planteado una serie de elementos que son las claves, a nuestro entender, del rediseño:

  • Minimización del menú de navegación de forma que éste sea exclusivamente operativo.
  • Dotar del máximo protagonismo a las imágenes de los lotes, para contribuir decisivamente a la visualización de los mismos, proporcionando un componente aspiracional (si es que podemos hablar de aspiracional en este contexto).
  • Aumento significativo de la importancia y relevancia de los CTA desde el inicio.
  • Mostrar sin complejos la USP en todas las pantallas del site.
  • Dotar de espacio relevante al contenido referido a los servicios implícitos de Cestalia.
  • Carrito de la compra que acompaña todo el tiempo a la experiencia de compra.
  • Checkout en una sola pantalla, dando todo el protagonismo a la inserción de datos.

Nuestro trabajo ha sido la conceptualización del site (yo mismo y @veniabi), el diseño visual (@lizano) y la realización de las maquetas HTML (@superwillyfoc). La implementación e integración en la plataforma ha sido un trabajo del equipo de Hiberus Internet.

Algunas de las imágenes que cuentan la historia de este proyecto:

Utilizamos el sketching para conceptualizar algunos procesos de la parte responsive

Sketch Cestalia
Dibujos que utilizamos para empezar a definir algunos procesos para la parte responsive del ecommerce

Hicimos análisis de situación con el diseño anterior

Revisión de pantallas
Una de las partes más divertidas fue la de hacer análisis a partir del diseño anterior

Algunas propuestas las diseñamos con el cliente, sobre el diseño anterior

Análisis de pantallas
Con la colaboración del cliente, el análisis sobre el diseño anterior fue una gran herramienta

Gran parte de las decisiones de diseño las tomamos sobre los wireframes

WF Cestalia Home
Un elemento importante en el proceso de trabajo fue que algunas cuestiones las descartamos tras analizar los wireframes

WF Cestalia Checkout
Aunque otros wireframes permanecieron intactos después del proceso de análisis y validación

Apostamos por la máxima transparencia de forma consistente en todo el ecommerce

DV Cestalia About Us
Una de las apuestas fuertes fue la de mostrar la empresa de una forma diferente, abierta y transpartente, dándole relevancia

Tratamos de que la inclusión de datos no tuviera distracciones

DV Cestalia Checkout
La pantalla de Checkout no tiene nada que no sea elementos para completar la acción

Como siempre, estaremos encantados de escuchar vuestras opiniones al respecto.

Curso “Interaction Design” (II)

Retomando el post anterior en el que os conté la primera parte del curso “Interaction Design” al que asistí en ITANNOVA (Instituto Tecnológico de Aragón), hoy escribo sobre las dos sesiones siguientes en las que estuvo con nosotros @saertus hablándonos, principalmente, del diseño de interacción en apps y el prototipado de éstas.

Andrés Botero comenzó nombrando una serie de Principios básicos para un UX, tales como:

  • Todo lo que hacemos tenemos que testearlo, ya que no somos usuarios modelo.
  • La experiencia no tiene por qué basarse sólo en el sistema, sino que se basa en todo lo demás (en el antes, el después,…). La experiencia es holística.
  • Hay que preguntarse siempre el porqué de todo lo que se hace en la realización de un proyecto y pensar en todas las situaciones posibles, no sólo en la más cómoda.

Posteriormente tratamos los Wireframes, que separó en dos grupos:

  • Lo-Fi Wireframes: tienen poco nivel de detalle y carecen de contenido. En estos se pueden añadir comentarios explicativos.
  • Hi-Fi Wireframes: son de alta calidad y contienen prácticamente todo. Son el resultado de la segunda fase de diseño de wireframes.

Seguidamente nos explicó dos conceptos sobre el contenido que se encuentra en los sitios web:

  • Macrocopy: hace referencia a la voz y el tono del lenguaje del contenido.
  • Microcopy: se trata de los textos pequeños que aparecen en todo el sistema.

El contenido de un site es muy importante a la hora de abordar los wireframes, ya que en la mayoría de las ocasiones nos podemos encontrar con que el contenido ha afectado de alguna forma a la estructura de los wireframes que hemos construido.

Dadas las explicaciones, diseñamos los wireframes de nuestra app con más detalle y Andrés nos habló sobre distintos tipos de patrones de interacción para que los reflejásemos también en nuestros diseños, tal y como podéis ver a continuación.

Wireframes incluyendo las interacciones de la app.
Diseño de algunos Wireframes del proyecto reflejando las interacciones dentro de la app.

En cuanto a los patrones de interacción, nos mostró diversos estándares que podemos encontrar en múltiples dispositivos: sitios webs, móviles, televisores, etc.

Por si a alguien le interesa consultar patrones de interacción os indico tres webs que nos recomendó @saertus:

  • uxarchive.com: muestra muchísimos tipos de interacción para apps.
  • capptivate.co: muestra interacciones de movimiento también para apps.
  • patterntap.com: son patrones para diferentes dispositivos, aunque más para desktop.

Tras esto, y con la finalidad de adquirir nuevas ideas de cara a la construcción de los prototipos de un proyecto, nos explicó en qué consiste el concepto deconstrucción. Se trata básicamente de fijarse con mucho detalle en las cosas que componen una web. Y si esto lo hacemos con un sitio que nos gusta podemos obtener buenas ideas.

Otro de los temas que tratamos fue el de los gestos que hacemos al interactuar con los productos digitales, que no paran de evolucionar. Cada vez hay más productos con los que interactuamos: móviles, relojes, etc. Y lo importante es que los gestos que se hagan para dicha interacción sean intuitivos para los usuarios.

Otro aspecto importante a la hora de diseñar un producto digital es lo que se conoce como Storytelling. Cuando se presenta un producto a un cliente, este pide una serie de explicaciones o cuando se vaya a vender el producto al usuario, no basta con enseñarlo simplemente, sino que hay que contar la historia que ha sido construida anteriormente siguiendo una serie de pasos. Esto es básicamente en lo que consiste el Storytelling. Y acompañándolo está el Screenflows, una herramienta muy útil de cara a mostrar las pantallas y contar la historia.

Y ya pasamos a hablar del prototipado y las distintas formas que hay de construir los prototipos:

  • Papel: se hacen los diseños sobre papel y la interacción se consigue poniendo los dibujos unos sobre otros según corresponda. Otra forma es con la app PopApp que os conté en el post anterior.
  • Herramientas web
  • HTML / CSS /JS
  • Quartz Composer: Se trata de una herramienta de diseño de Apple.
  • Origami: Es similar al anterior, pero con una “capa” por encima para hacerlo más sencillo y vistoso para el diseñador.

Andrés nos recomendó diversas herramientas y aplicaciones para realizar prototipos y os las pongo a continuación:

  • Fluidui: es un software para construir prototipos de aplicaciones móviles.
  • Gomockingbird: es una herramienta online que sirve para prototipar tanto sitios web como aplicaciones.
  • Balsamiq: se trata de una herramienta para sitios web y aplicaciones, como la anterior.
  • Invision: es una aplicación para prototipar y además pueden trabajar simultáneamente varias personas y se poner hacer comentarios sobre el prototipo.
  • Framer: permite pasar los diseños de Photoshop a Framer para dotarlos de interacción. Está pensado fundamentalmente para app, pero también sirve para ordenador.
  • Flinto: Es más sencillo y es muy útil para prototipos rápidos y sencillos de apps.
  • Pixate: Es más potente que Flinto y funciona con capas como Photoshop. Y es un pack: se instala en el ordenador y se puede visualizar en el móvil.

Y por último, hablamos de otros temas como son:

  • Las animaciones, que en numerosas ocasiones son las responsables de que una app brille más que otra, de ahí su importancia.
  • El universo multidispositivo, en constante evolución y crecimiento.
  • Los inputs methods, que también existe una gran variedad que sigue creciendo. Existen muchas formas de interactuar con los productos digitales: la voz, el teclado, el ratón, las pantallas táctiles, etc.
  • El Responsive Design, lo cual dió pie a hablar también del conocido “Mobile First”, tema que ya hemos tratado en este Blog tiempo atrás en el Post “Cómo diseñar una Web Mobile”.

Así que ya véis que el curso “Interaction Design”, en su conjunto, abarcó un gran temario, y a mí personalmente me gustó mucho, tanto el curso en sí como los profesionales que lo impartieron :)

Proyecto: diseño de IberCaja Aula en Red

Hace pocas semanas que se ha puesto en producción un proyecto en el que hemos participado en el proceso de rediseño. En este caso se trata de un proyecto de la Obra Social de IberCaja llamado IberCaja Aula en Red. Como es costumbre en esta casa, os contamos lo que hemos hecho en el proyecto y estaremos encantados de recibir el feedback que os parezca oportuno, si es que os parece oportuno.

El encargo del cliente fue abordar un proceso de rediseño que llevase al proyecto a obtener:

  • mejores resultados a la hora de conseguir leads en forma de contactos
  • unidades didácticas abiertas y completadas

El objetivo de la web es proporcionar a alumnos y personal docente una serie de actividades complementarias para la formación en las aulas y en los espacios de tiempo no lectivos de forma que las materias vistas en diferentes niveles educativos estén presentes de forma activa, de cara a la consolidación de los conocimientos. En ese contexto, lo que se propone tanto a estudiantes como al personal docente, es una serie de unidades didácticas con las que complementar lo visto en las aulas.

Nuestro objetivo en la parte de diseño ha sido proporcionar una experiencia transparente para el acceso a las unidades didácticas, a la formación complementaria para personal docente y a los concursos orientados a estudiantes.

El principal reto que tuvimos que afrontar fue la organización de los contenidos disponibles en dos planos:

  • El acceso a las unidades didácticas en función del perfil de usuario: estudiantes, personal docente, y padres y madres.
  • El consumo de las unidades didácticas de apoyo a los contenidos del aula, entendiendo consumo como el proceso mediante el cual las y los estudiantes desarrollan una actividad formativa complementaria al aula, poniendo el foco exclusivamente en su acción.

En ese sentido las pantallas clave propuestas, y su diseño, se han basado en enfocar desde el inicio en esos planos:

  • Proporcionar acceso a unidades didácticas en función de dos criterios: nivel educativo y tipo de contenido
  • Proporcionar acceso a formación complementaria en función de perfiles de usuario: personal docente y alumnado
  • Poner el foco en la actividad del alumnado cuando se trata de fomentar su actividad con las unidades didácticas
  • Dotar de toda la información necesaria de la manera más sencilla, pero a la vez más completa, cuando se trata de conseguir leads en ámbitos de formación para personal docente

El resultado es el que se puede experimentar en la web que actualmente existe en producción: IberCaja Aula en Red.

El desarrollo del trabajo, entre otras cuestiones, lo hemos llevado a cabo en coordinación con la dirección de la Obra Social de IberCaja, el personal de IberCaja y sus centros, así como el Centro de Cálculo Bosco, que es quien en su momento diseñó e implementó los elementos interactivos que despliegan la funcionalidad de las unidades didácticas.

Nosotros desarrollamos nuestra metodología de trabajo en proyectos en los que queremos asegurar la mejor experiencia de usuario:

  • Sesiones grupales con el cliente en las que planteamos la investigación previa para dotar al proyecto de objetivos definidos y claros, aplicando la famosa regla SMART
  • Una arquitectura de la información consistente y alineada con los stakeholders identificados
  • El diseño de unos wireframes con los que asegurar que todos los actores del proyecto permanecían alineados en todo momento
  • El diseño de una línea visual consistente con los requerimientos internos
  • El despliegue en visual de todas las pantallas que conforman los procesos del sitio web

¿Cómo lo hicimos? Así:

Wireframe de la página principal

Wireframe página principal. Ibercaja Aula en Red.

Wireframe de una unidad didáctica

Wireframe de Ficha de contenido didáctico. Ibercaja Aula en Red.

Wireframe de la página de formación para docentes

Wireframe de Ficha de curso profesor. Ibercaja Aula en Red.

Visual de la página principal

Página principal. Ibercaja Aula en Red.

Visual de unidad didáctica

Modelo de ficha didáctica. Ibercaja Aula en Red.

Visual de unidad didáctica en modo trabajo

Modelo de ficha didáctica en simulación. Ibercaja Aula en Red.

Visual de formación para docentes

Modelo de ficha de actividad para profesores. Ibercaja Aula en Red.

Como siempre, insisto, estaremos encantados de escuchar, o leer, lo que tengáis que decir.

Curso “Interaction Design” (I)

Después de casi dos meses sin escribir por aquí os cuento mi experiencia en un curso sobre Interaction Design al que asistí a finales de octubre que organizaba ITANNOVA (Instituto Tecnológico de Aragón).

El curso lo impartieron @EsterSerrano y @saertus, dos diseñadores de la empresa Designit, y sinceramente me encantó, tanto el contenido que vimos como la metodología que utilizaron ambos al impartir las clases.

Aunque tenía sus partes teóricas, fue un curso fundamentalmente práctico, que es la mejor forma de aprender de verdad.

Los dos primeros días estuvimos con Ester Serrano y los dos últimos con Andrés Botero. Y lo que hicimos fue, trabajando por equipos y partiendo de un sitio web real, desarrollar todos los pasos que se deberían seguir a la hora de diseñar un producto digital, empezando desde el estudio del producto hasta el prototipado del mismo.

Comenzamos con @EsterSerrano llevando a cabo un Briefing del proyecto para conocer mejor el producto y definir sus funcionalidades y clasificarlas en tres grupos:

  • Must have: son funcionalidades totalmente necesarias.
  • Incremental: no son tan fundamentales.
  • Delighter: son aspectos que el usuario no espera, pero en el momento que los conoce los quiere tener siempre.

Cabe decir que estos “delighters” con el tiempo se acaban convirtiendo en “incrementales” y posteriormente en “must have”.

A continuación pasamos a realizar un Benchmark con el fin de conocer todos los aspectos de la competencia y otros sitios web que, aunque no sean competencia, sirvan de ayuda para el proyecto a abordar.

También hicimos una Lluvia de ideas para que seamos capaces de generar numerosas ideas cuando trabajemos en el diseño de un producto digital. Ideas de todo tipo por muy absurdas que parezcan inicialmente, ya que de ahí siempre se puede sacar algo valioso.

Tras la generación de ideas llevamos a cabo la Creación de personas, atendiendo a aspectos como las necesidades que tiene la persona, sus motivaciones, preferencias, barreras o el objetivo que quiere satisfacer con el sitio web.

Posteriormente creamos un Mapa de empatía con la finalidad de conocer en mayor detalle a la persona. Para ello abordamos seis categorías:

  • Qué piensa
  • Qué ve
  • Qué dice
  • Qué hace
  • Qué siente (preocupaciones, miedos, …)
  • Qué oye

Y para finalizar la primera sesión creamos lo que se conoce como Customer Journey, que consiste en describir el viaje detallado de un cliente cuando está en conctacto con el producto o servicio diseñado. En este viaje se decriben tres momentos: antes, durante y después del contacto. Y suelen crearse dos Customer Journey: uno en el que se de un escenario favorable para el usuario y otro en el que le vaya mal algo.

Además de los momentos citados, se pueden utilizar otras dimensiones:

  • Emociones del usuario
  • Artefacto que utiliza
  • Espacios en los que se encuentra
  • Stackholders que intervienen

Para continuar con el Customer Journey, en la segunda sesión pasamos a identificar la pantalla que se encuentra detrás de cada momento, indicando el nombre de ésta. Cabe decir que no tiene por qué ser una única pantalla, pueden ser más, pero eso lo desarrollamos en una fase futura.

En la siguiente fotografía podéis ver el resultado de la mayoría de las fases realizadas hasta el momento.

Primeras fases del diseño de un producto digital
Primeras fases del diseño de un producto digital: Benchmark, Creación de personas, Mapa de empatía, Customer Journey, Identificación de pantallas.

Tras la identificación inicial de pantallas realizamos el Flujo de pantallas, que se compone de tres elementos:

  • Historias de uso: es un resumen de lo que quiere el usuario. (Hecho ya en fases anteriores).
  • Escenarios de uso: es la historia con un mayor nivel de contexto.
  • Casos de uso: consiste en desgranar una a una las historias del usuario de forma que obtengamos un guión de lo que hace el usuario en la web. Y este proceso es el que nos permite obtener los flujos de pantalla.

Este flujo lo representamos dibujando un mapa de pantallas, tal como se muestra en siguiente imagen, destacando en cada una la acción principal (CTA) que enlaza con la siguiente pantalla, mediante la inclusión de botones.

Flujo de pantallas de un producto digital.
Representación del Flujo de pantallas.

Del mismo modo que en el Customer Journey, no sólo hay que pensar en escenarios favorables, por ello es conveniente representar errores importantes que puedan suceder durante el proceso.

Una vez terminado el Flujo de pantallas de nuestro proyecto, Ester nos habló sobre dos puntos básicos antes de pasar al diseño de los Wireframes: los Principios de la Gestalt y los Heurísticos de Nielsen, una serie de normas básicas sobre diseño y usabilidad, respectivamente.

Y para terminar la sesión tratamos el Diseño conceptual, donde Ester nos explicó la diferencia entre dos tipos de Wireframes y elaboramos los de nuestro proyecto, como os enseño más abajo.

  • Wireframe conceptual: en él sólo se representa el contenido, sin tener en cuenta otros aspectos como la navegación.
  • Wireframe detallado: en él se plantea ya cómo va a ser el aspecto, cómo se presentarán los distintos elementos (la ubicación, el tamaño, etc.).

Wireframes de un producto digital.
Wireframes del producto digital.

Además, para poder interactuar con nuestros Wireframes, nos enseñó una aplicación que me gustó mucho, llamada Popapp.In. Esta aplicación permite convertir en prototipos unos simples Sketches de la app de un proyecto. Lo único que hay que hacer es fotografiar con el móvil los dibujos sobre papel del proyecto y posteriormente POP permite seleccionar los botones de las distintas pantallas para enlazarlos con otras y así poder interactuar con la app diseñada. Me parece super interesante y útil para muchas ocasiones.

En general, las dos sesiones con Ester Serrano me gustaron mucho. Muchos temas ya los conocía, pero nunca está de más volverlos a tratar. Además, nunca había elaborado todas las fases del diseño de un proyecto concreto teniendo que tomar, junto con mis compañeros de equipo, todas las decisiones, lo cual cambia mucho todo y deja ver nuevas cosas.

En el próximo post os contaré cómo fueron las otras dos sesiones del curso con Andrés Botero, en las que nos centramos más en los prototipos de los proyectos.

CX Meeting, encuentro de experiencia de cliente

Bueno, pues un mes después de contar que llevaba yo mucho tiempo sin escribir, vuelvo a la carga con un post de esos que mola mucho escribir. Y es que ayer mismo tuve la oportunidad de asistir a un evento, privado, llamado CX Meeting:

Encuentro especializado en experiencia de cliente basado en casos reales, actuales y que tienen su clave en la innovación para la diferenciación y generación de resultados.

Ni qué decir tiene que ya sólo con las personas que han liderado la organización de este evento ya me podía hacer a la idea de que me iba a gustar lo allí visto y escuchado. Y la realidad lo confirmó.

El encuentro se basó en las experiencias de varias empresas en torno a la experiencia de cliente, o lo que es lo mismo, al cuidado, atención, detalles y método de trabajo orientado a mejorar el servicio que se proporciona a los clientes en el seno de un producto o servicio.

Dicho así puede que sorprenda que en esta casa, donde hablamos de experiencia de usuario, estemos mirando a los paisajes de la experiencia de cliente. Nada más lejos de la realidad. Estamos hablando de un mismo campo de trabajo: la mejora de la experiencia de usuario. Porque usuario es cliente, es ciudadano, es prescriptor, es candidato, es consumidor… El hecho diferencial radica en que los límites de las experiencias que ayer nos contaron las empresas asistentes no se quedaba en lo digital sino que lo transcendía, y nacía y aterrizaba en lo offline.

Y de ahí que me gustara, y mucho.

No es la primera vez que en este blog hablamos de propias experiencias de trabajo en las que hemos constatado que el trabajo de mejora de experiencia de usuario en el entorno digital nos lleva por los caminos del offline. De hecho hablamos de ello en UX Zaragoza aportando 3 casos en los que ese camino se había producido. Por ello, escuchar experiencias de empresas grandes y consolidadas como Iberia, ALSA, Opticalia o Bosch me gustó especialmente.

Vamos a repasar lo que más interesante me pareció de las experiencias que compartieron los asistentes a CX Meeting.

Para empezar fueron unos monstruos del diseño de servicios quienes abrieron la jornada: Fjord.

@stereochromo nos habló de lo que hacen en las oficinas de Fjord Madrid y nos contó cómo a través de un método de trabajo son capaces de convencer a sus clientes de que el diseño visual es sólo el 10% del trabajo en un proyecto, pese a que ese proyecto sea un proyecto de diseño.

David Arconada, de Iberia, nos contó de una forma excelente cómo están abordando las mejoras en experiencia de cliente en la compañía. Las claves: detalles de mejora en experiencia de cliente que se introducen dentro de procesos que ya existen y que, aporto, tienen un coste de implementación extraordinariamente poco significativo (especialmente si los comparamos con la ganancia en términos de fidelización). Fue la ponencia que más me gustó.

Virginia Fernández, de ALSA, nos explicó cómo incorporar la experiencia de cliente dentro de una compañía de transporte de viajeros por carretera, desde el momento en el que el departamento es unipersonal hasta que se consolida como equipo de trabajo estable y, lógicamente, más poblado de efectivos. Relató de una forma brillante cómo la mejora en la percepción del servicio se logra a través de una comunicación explícita y sistematizada de los procesos que ya se estaban ejecutando en la empresa. Virginia comunica estupendamente.

Jaime Compadre, de Bosch, nos contó cómo vender una plancha. Suena un poco a broma si lo dejamos con ese titular, pero desarrolló de forma amena y muy efectiva cómo a través de la investigación de usuarios se puede consolidar un naming para producto que es mucho más eficaz, comprensible y adoptable por parte de los usuarios.

Víctor Gonzalo, de Opticalia fue el golpe encima de la mesa del evento. Con un carisma extraordinario y una forma de comunicar que no pasaba desapercibida, detalló la estrategia seguida en Opticalia para alinear las expectativas de los usuarios cuando se compran unas gafas en el campo de la moda, de forma que se alejase del campo de la medicina o de la prótesis. Me pareció francamente brillante.

Mercedes Carreras, de la Xunta de Galicia, fue otro de los descubrimientos que hicieron que mi cerebro funcionase revolucionado después de su intervención. Contó cómo la Xunta de Galicia está implementando servicios en el ámbito sanitario que están pensados para adaptarse a las necesidades de los usuarios, ciudadanos en este caso, de forma que sean los servicios los que estén a disposición del usuario y no al contrario. Francamente esperanzador.

Dolors Pou, de User Zoom, ya conocida en los ámbitos de la UX y de este blog, nos contó cómo utilizar las herramientas de investigación de usuarios para resolver el ciclo completo de mejora de un producto digital (en el caso que nos contó, un e-commerce de gran dimensión). De un plumazo Dolors saltó del discurso que podemos escuchar en cualquier encuentro de usabilidad y UX a un discurso centrado en los servicios y en la experiencia global de cliente.

@abarbero estuvo hablando de Feebbo, y lo hizo con una naturalidad pasmosa. Me recordó a esas veces en las que cuando era estudiante y llegaba a un examen sabiendo que me iba a salir bien porque lo llevaba tan bien preparado y no me quedaba ninguna duda de que todo iba a ir bien. Me pareció especialmente brillante cómo contó que Feebbo interviene sólo en los contextos en los que el usuario es susceptible de contestar una encuesta dentro de un proceso de compra, localización de información o contratación de un servicio.

Hubo más, pero estas ponencias son las que más me gustaron y las que más me hicieron pensar. Y eso es algo que hace mucho que no me sucedía en un evento, la verdad.

Como conclusión lo que me quedó muy claro es que pude constatar que cuando hablamos de la experiencia de usuario debemos pensar, una y otra vez, en que el entorno digital no es sino una extensión del entorno offline. O si le queremos dar la vuelta, el entorno digital no lo debemos separar del entorno offline, ya sea porque los prestadores de servicios digitales tienen siempre una serie de condicionantes que residen en lo offline o, atención, porque los usuarios siempre, y digo siempre, tienen condicionantes que habitan en el offline. Porque hasta la fecha no se conoce ser humano que no sea de carne y hueso.

Obvio, pero conviene no olvidarlo.