UX para startups y emprendedores

Es curioso como a lo largo de los años en los que llevamos trabajando en la tarea de contribuir a mejorar la experiencia de usuario y la transformación digital en empresas y organizaciones, hay una serie de elementos comunes que detectamos se repiten una y otra vez.

Product Box
Conceptualización del proyecto con juegos sencillos

En muchas sesiones de consultoría, workshops y formación in company vemos que hay un conjunto de cuestiones, que impactan directamente en la UX de los proyectos (y de los productos) que trascienden al propio proyecto, y están íntimamente ligadas a la conceptualización del mismo.

Es por ello que hemos podido establecer una serie de líneas metodológicas que es muy conveniente cuidar, mimar y atender debidamente cuando se aborda un proyecto digital (o analógico, o mixto).

Por supuesto, si nos planteamos el escenario de un proyecto semilla, en sus primeras fases, o una startup (si es que hay alguna diferencia) sabemos que es vital considerar tener resueltas estas cuestiones para, además de optimizar los esfuerzos y recursos, contar con la mejor base de inicio del trabajo.

Card sorting
Técnicas de evaluación de usabilidad: card sorting

Por ello nos atrevemos a compartir un top 10 de recomendaciones relacionadas con la experiencia de usuario que hemos trabajado después de varios años de experiencia:

  1. Responder a la pregunta: por qué he de usar tu producto o servicio y no otro?
  2. Fijar los objetivos específicos del proyecto digital, prestando especial atención al qué, cuánto, para qué y cómo.
  3. Determinar los perfiles de usuario y el objetivo principal de cada uno de ellos.
  4. Ser capaz de responder a la pregunta: ¿cuál es la principal necesidad de cada uno de los perfiles de usuario a los que se dirige mi producto o servicio?
  5. Ser capaz de responder a la pregunta: ¿cuál es la principal motivación de cada uno de los perfiles de usuario a los que se dirige mi producto o servicio?
  6. Ser capaz de responder a la pregunta: ¿cómo mi producto o servicio va a solucionar la principal necesidad de cada uno de los perfiles de usuario a los que me dirijo?
  7. Determinar qué cosas voy a permitir que las personas realicen en mi producto digital (web, app, etc.)
  8. Determinar en qué pantallas o procesos las personas van a poder satisfacer su necesidad principal.
  9. Determinar qué métricas voy a considerar para evaluar el cumplimiento de los objetivos del proyecto.
  10. Diseñar un plan de testing para todos los pasos en los que se tome una decisión en el proyecto.

Todas estas cuestiones que planteamos en este post pueden ser más o menos discutibles, pueden ser más o menos concretas, más o menos costosas. Lo que es cierto es que las compartimos desde la experiencia. Y eso sí es real.

Consejos de diseño para prevenir el abandono en las compras online

En este blog muchas veces se ha hablado de cómo facilitar las tareas a los usuarios ayuda a que tengan una mejor experiencia de uso. Hoy daremos unos consejos para un tema que en un e-commerce es uno de los aspectos más importantes junto con los medios de pago: los usuarios que abandonan el proceso de compra. 

Test con usuarios
Usuario realizando una prueba de test think aloud, donde localizamos abandonos de carrito

El proceso final de compra se puede abandonar por muchas razones. La principal suele ser que el usuario se equivoque (al meter un producto en el carrito o al poner más unidades de las que realmente desea) y no poder enmendar el error. Otra razón es que el usuario se distraiga y vaya a otra página en la que le sugerimos ofertas o artículos parecidos y no sepa volver y no compre lo que deseaba.

Como suele ser habitual en este blog, os traemos una traducción adaptada (y comentada a nuestra manera) de un post en el blog UX Movement escrito por Monique Rivers titulado “5 consejos de diseño para evitar el abandono del proceso de compra”. Como siempre os recomendamos leer la fuente original.

En él, Rivers nos da una serie de consejos prácticos para evitar que los usuarios abandonen el proceso de compra en el que estaban inmersos.

¡No distraigas al usuario! Mantén las opciones de navegación al mínimo

El proceso de compra se trata de comprar cosas. Hay que reducir las opciones de navegación al mínimo. Distraer al usuario con páginas de checkout ricas en contenidos y que lo distraigan de su objetivo: COMPRAR, es una mala idea.

Ofrece una página de checkout lo más simple y limpia posible. Debes dirigir la atención del usuario a que finalice el proceso de compra.

Muestra los pasos en un proceso con pasos múltiples

El checkout suele ser un proceso de varios pasos. Tienes que mostrar los pasos claramente y decirle al usuario en qué paso se encuentra claramente para que no abandone el proceso y prevenir confusiones. También es importante que el usuario sepa que puede modificar y cancelar el pedido en cualquier paso es importante. Asegura al usuario que pueda corregir sus errores en cualquier momento sin tener que cancelar todo el proceso y volver a empezar de nuevo, lo cual frusta al usuario y le anima a no volver.

Añade botones de “Atrás”

Antes de llevar a los usuarios a la página de pago, debes enseñarles un resumen de su pedido con un bóton de “Atrás” bien grande arriba a la derecha.

Saber que puede cambiar y modificar cualquier cosa es un gran alivio para el usuario. Asimismo es recomendable que los avisos de errores no se hagan mediante ventanas emergentes, para no volver loco al usuario, especialmente si hace la compra desde dispositivos móviles, ya que los pop-up son especialmente molestos allí.

El usuario debe poder volver sobre sus pasos, sin tener que volver a rellenar todo. Rivers recomienda usar un sistema de gestión de sesiones de usuario como $_SESSION o WP_Session.

Haz el registro del usuario opcional

NUNCA hagas que el usuario tenga que registrarse para poder comprar. El registro es una cosa que siempre molesta al usuario y en las tiendas online hay un gran número de compradores ocasionales que se pierden si los obligas a registrarse.

Además el registro distrae al usuario, al tener que rellenar un formulario más y salir del proceso de compra. Lo mejor es tener dos procesos de compra: uno para usarios registrados y otro para no registrados.

Permite una fácil modificación del pedido

Los usuarios se pueden equivocar, de hecho se equivocan mucho. Poner un botón o un enlace que borre cada artículo de una manera fácil facilita que en caso de que se cometa uno, el usuario lo pueda corregir fácilmente.

Un diseño correcto y simple del proceso de compra se convertirá en un indice de abandono del proceso de compra menor.

Como siempre nos podéis contar vuestras experiencias diseñando este tipo de páginas y decir si estáis o no de acuerdo con estos consejos.

El login perfecto

Una de las cosas más difíciles de hacer a la hora de diseñar una aplicación web suele ser tanto la gestión de los usuarios y sus datos como el proceso de registro y de login. Lo primero por los problemas de seguridad y jurídicos que plantea y lo segundo porque parece que nunca se acierta en cuántos datos tenemos que pedir para registrarse y cómo tiene que ser la caja de login dentro de la aplicación y cómo debe insertarse el proceso en una página por la que puedas navegar sin registrarte y no volver locos a los usuarios registrados buscando el login (cosa que suele ser un error común, por poner un ejemplo en un blog de WordPress.com si no entras en él desde la página principal).

Hoy vamos a hablar del proceso de login y más concretamente de la pantalla de login y el registro. Jeff Atwood ha escrito en su blog Coding Horror (dedicado a la programación y al factor humano, es decir usabilidad y programación) un artículo titulado The God login (El login de Dios en castellano). Al artículo le falta una explicación de lo que es el login y su historia que voy a explicar antes de comentar su artículo.

El login viene de los sistemas de tiempo compartido, más conocidos como mainframes, de la primera época de la informática. En aquellos tiempos no había ordenadores personales, sólo terminales de un ordenador más grande. Al principio eran sólo teclados que enviaban órdenes a un soporte donde se guardaban y luego el ordenador las procesaba. Posteriormente ya eran teclado y pantallas tal y como hoy conocemos a los terminales y al haber aumentado la potencia ya permitían la interactividad y el multiusuario.

Resumiendo el usuario hacía login (metía usuario y password y el mainframe los validaba con la lista que tenía), programaba las tareas o cálculos que tenía que hacer y el ordenador los ejecutaba según el tiempo que tenía el usuario disponible (de ahí el nombre de tiempo compartido) y el ordenador se los devolvía cuando los hubiera acabado.

Posteriormente cuando se creó el correo electrónico era similar. El usuario escribía los correos, hacía login en el servidor de correo, los mandaba a la cola del servidor de correo y éste los procesaba. De ahí, las direcciones de correo: usuario@servidor, donde usuario era el nombre con el que hacía login el usuario y el servidor era el servidor que recibía y enviaba sus correos, para saber a qué servidor tenía que dirigirse otro servidor de correo.

Usuario y dirección de correo están muy unidos, si conoces la historia de la informática. De hecho casi se podrían decir que son lo mismo, o que se deben de usar indistintamente que es la afirmación principal del artículo de Jeff.

Explicado esto, vamos con el resto. Jeff nos da una serie de útiles consejos a la hora de diseñar una pantalla de login:

  • Permitir al usuario usar su dirección de correo para hacer login – la identidad del usuario acaba siendo el correo, así que aunque le dejemos elegir un nombre de usuario permitamos también que haga login con su dirección de correo.
  • Avisar al usuario cuando el correo no existe – los usuarios pueden tener más de un correo y olvidar con cuál de ellos se registraron, así que no está de más avisarles de cuando un correo no está en nuestra base de datos.
  • Permitir al usuario cambiar fácilmente entre registrarse y la pantalla de login – muchos sitios han comenzado a colocar juntos el login y el registro porque se han dado cuenta que los usuarios lo perciben como cosas similares
  • Usar palabras simples/comunes – hay muchas maneras de poner las pestañas de login y registro: login, entrar, registrarse, crear usuario, etc.
  • Probar que se guardan bien los datos en los gestores de contraseñas de los navegadores – Deberiamos probar que se pueden autocompletar el usuario y la contraseña con al menos los 4 navegadores más usados(IE, Firefox, Chrome y Safari) con los gestores de contraseñas integrados que llevan.
  • Cuida los errores comunes de los usuarios – Debemos avisar de que el bloquear mayúsculas está encendido y de posibles errores al escribir los dominios de los servicios de correo más habituales.
  • Ayuda a los usuarios a elegir contraseñas seguras – Hay muchas escuelas sobre ésto, pero Jeff recomienda contraseñas de 8 carácteres mínimo y comprobar que el password no está en la lista de los 10000 passwords más comunes.
  • No te olvides del teclado – Verifica que funciona la secuencia: usuario/correo, tabulador, contraseña, intro.
  • Limita el número de veces que el usuario puede hacer login – Normalmente 3 veces suele ser un número bueno de veces que cómo máximo alguien puede intentar acceder legítimamente a un sitio web. Más veces casi siempre será alguien intentando robar una contraseña.

Back to basics a lo bestia: UX sin distracciones

Bueno pues tarde o temprano este post tenía que ver la luz. O mejor dicho, esta experiencia que estoy llevando a cabo en propias carnes, tenía que tener un reflejo en el blog.

¿Qué es lo que estoy haciendo, y qué tiene que ver con el título del post?

Lo que estoy haciendo desde hace exactamente un mes es trabajar con herramientas desde la línea de comando. Y para quienes se pregunten qué demonios es eso, trato de explicarlo.

La Wikipedia nos dice lo siguiente:

La interfaz de línea de comandos, traducción del inglés command-line interface o CLI –la cual es, en realidad, una transcripción incorrecta de Interfaz de línea de órdenes, por el falso amigo command (orden/instrucción)– es un método que permite a los usuarios dar instrucciones a algún programa informático por medio de una línea de texto simple.

O lo que es lo mismo, trabajar con aplicaciones que simplemente necesitan un terminal para funcionar. Vaya… que no hay un entorno gráfico con iconos, drag&drop y cosas así. Todo muy feo, muy poco amigable y muy complicado de manejar. Todo lo contrario a lo que podemos entender como usabilidad.

Mplayer
Captura de pantalla de mplayer reproduciendo un stream de radio

Habrá quien piense: “este tío se ha vuelto loco o le da dado un siroco“. Todo lo contrario. Precisamente la intención que tengo es la de bajar a los infiernos y empezar desde cero a experimentar el uso de aplicaciones que tienen una serie de funcionalidad disponible, pero que son de uso complejo. Ese uso complejo está determinado en buena medida por el contexto en el que se inscriben: la línea de comandos. Todo lo que el usuario puede hacer es pulsar teclas. Nada de ratón, nada de comportamiento, nada de interacción que no sea pulsar teclas.

¿Qué es lo que espero encontrar con esta experiencia? Quiero comprender mucho mejor cómo funciona una aplicación y quiero usarla sin todo el abanico de ayudas que supone una interfaz gráfica. Quiero entender las funcionalidades. Quiero saber cómo funciona internamente la lógica de las aplicaciones. Quiero, en definitiva, una inmersión total en el manejo y entendimiento de una serie de aplicaciones. ¿Para qué? Para tratar de entender cómo en el proceso de creación de interfaces gráficas hemos complicado el uso de las aplicaciones, si es que lo hemos hecho. Y también para evaluar en la medida de lo posible cómo hemos construido un lenguaje visual y en qué medida hemos priorizado lo importante de lo accesorio.

Es todo un poco loco, pero creo que es necesario de vez en cuando bajar a los infiernos para tomar una referencia.

Para quienes tengan la curiosidad de qué es lo que estoy utilizando:

  • mutt, un cliente de correo electrónico
  • vim, un procesador de texto
  • tg, un cliente de Telegram
  • t, un cliente de Twitter
  • mplayer, un cliente multimedia para escuchar radio online
  • taskwarrior, un gestor de tareas

Os iré contando.

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.