ux web designer - ibm tealeaf administrator cro - ab testing€¦ · rediseño y actualización de...

17
Eduardo García Jiménez UX Web Designer - IBM Tealeaf administrator CRO - AB Testing [email protected] 620 69 69 09 EGJ 1 de octubre de 2015

Upload: others

Post on 18-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Eduardo García JiménezUX Web Designer - IBM Tealeaf administratorCRO - AB Testing

[email protected] 69 69 09

EGJ1 de octubre de 2015

Page 2: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Perfil

Hola, me llamo Eduardo García, y aunque académicamente tengo formación en Ingeniería de Edificación y Máster en Project Management, mi pasión siempre ha sido dedicarme al mundo web, y sobre todo a la usabilidad y al diseño de experiencias de usuario.

Así que tomé la decisión de formarme en el mundo de internet y las nuevas tecnologías. He realizado un curso presencial, de un año de duración, de Técnico en Aplicaciones Web

2

(maquetación web, HTML, CSS, programación JS, JQuery, SQL y PHP) en la academia CEI de Madrid.

Asimismo también he realizado un curso de usabilidad y experiencia de usuario donde me inicié en esta disciplina realizando un curso on-line en UX Learn, además de bastante formación autodidacta (lecturas, videos, blogs...).

He realizado varios proyectos web asociados a estos cursos o como freelance, de los que muestro una selección en las páginas siguientes,

donde hago especial hincapié en los objetivos y satisfacción de los usuarios.

Desde enero de 2014 formo parte del departamento de UX de casadellibro.com, desarrollando principalmente labores de investigación de usuarios, generando propuestas para el equipo de desarrollo, test A/B con Optimizely , test de usabilidad remotos con Userzoom. Desde hace un año soy administrador del software CEM - IBM Tealeaf, para extraer y modelar patrones de comportamiento de usuarios, detectar obstáculos...etc Espero que os guste , mientras tanto, yo seguiré trabajando para mejorar.

MUCHAS GRACIAS.

Page 3: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Nombre del proyecto: Site corporativo SUMA interiores

Proyecto encargado por: SUMA Interiores

Objetivo:Puesta al día de la imagen y aumentar el número de con-tactos recibidos - leads.

Maquetación web y experiencia de usuario

3

marzo 2013

Como punto de partida rediseñé el site corporativo de Suma interiores. Sencillo, limpio, eficaz.... (pues así deberían ser las oficinas).

Pero una vez que hemos modernizado la imagen de la web, me pregunto ¿hemos pensado lo que realmente buscan los usuarios de la web cuando escriben en Google: mamparas, reformas, oficinas...? Estos usuarios están buscando una em-presa que les realice una reforma en sus oficinas, pero sobre todo quieren saber cuánto les va a costar para decidir entre

una empresa u otra, podemos poner ejemplos, fotos, la misión de la empresa... pero lo que en realidad quieren son precios, es decir, NÚMEROS!. (Los números tienen un efecto mágico para pasar a la acción).

Así que se propone esta nueva web, con precios de productos, donde además de forma inmediata podemos obtener un presupuesto aproxi-mado de nuestra reforma e invitamos a contactar para solicitar un pre-supuesto definitivo. (Estoy impaciente por ver cómo afectan estos cam-bios al ratio de presupuestos solicitados / nº visitas en Analytics).(Proyecto pendiente de publicación on-line).

¿Es ésto lo que necesitan los usuarios?¿Hemos pensado en sus necesidades yobjetivos?

Proyecto 1

Page 4: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

4

Diseño web centradoen el usuario

- Mejor respuesta de las necesidades de los usuarios.

- Por lo tanto, también cumplirá mejor nuestros objetivos. Además, los mediremos.

- Y seguiremos mejorando.

diciembre 2013

Proyecto 1

Page 5: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Nombre del proyecto: Homes After Sales

Proyecto encargado por: Proyecto fin de curso CEI Madrid y UX Learn

Objetivo: Con la finanalidad de fusionar mis dos campos profesionales, decidí realizar como proyecto fin de curso una aplicación web en PHP para la gestión de la postventa inmobiliaria.

Definí los objetivos para cada uno de los perfiles de usuario. Creando las “personas” o perfiles para cada uno de las tipologías de usuario:

a) Propietarios de viviendas que tiene incidencias. b) Profesionales (pintores, fontaneros...) que tienen que arreglar esas incidencias. c) Gestores: que reciben las incidencias, las aprueban o no, abren servicios de profesionales, dan de alta propietarios y profesionales...etc.

La maquetación hace uso de Bootstrap, que es limpio, minimalista, responsive... en definitiva aporta ventajas.

Para la creación de gráficos utilicé la librería de JavaScript HightCharts, algún plugin de jQuery para ordenar las tablas... etc.

En definitiva, creo que un ejercicio bastante completo.

Creación de personas

Programación web PHP y experiencia de usuario

5

Proyecto 2

Page 6: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Experiencia de usuario - Diseño - Wordpress

5 6

Nombre del proyecto: Sanchez Silvosa Floristas

Proyecto encargado por: Agencia de marketing on-line Perfect WEB Objetivo:

Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords. Se ha utilizado un lenguaje de landing-page, puesto que se accederá directamente a la sección que el usuario haya buscado en Google.

Se ha desarrollado mediante un tema totalmente personalizado en Wordpress (el CMS mediante Advanced Custom Fields). El cliente quería un gestor de contenidos para poder, fácilmente, modificar el contenido de determinados elementos de la web.

El prototipo inicial se realizó con Axure, para definir la estructura, navegación,... y poder comenzar a crear el contenido lo antes posible. Asimismo se diseñaron unas instrucciones básicas visuales para que el cliente final pueda comenzar a utilizar la web sin problemas y hacer el uso del CMS.

URL:www.sanchezsilvosa.es

Sustituir imágenes de la web

4 Poner el cursor sobre la fotografía que queramos cambiar por otra

5 Click en el aspa para borrar la foto que queremos eliminarde la web. (El �chero de la foto no se elimina del servidor, por lo tanto podremos volver a recuperar la foro, si queremos).

4

5

Pasos 1,2 y 3 igual que el caso anterior.

6 Click en añadir imagen.6

DISEÑO WEB - CMS - UX

Instrucciones CMS

Experiencia de usuario - Wordpress

7

Proyecto 3

Page 7: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

(Continuación de Sanchez Silvosa Floristas) Y llegados a este punto... ¿es ésto todo lo que podemos hacer para ayudar a nuestras usuarias a elegir su ramo de novia perfecto? ¿simplemente las invitamos a que nos cuenten su propuesta?, quizás podamos animarlas a que nos digan los factores clave para la elección de un ramo y así, les demos una solución a su problema. De esta forma podríamos ofrecer directamente una propuesta personalizada, y establecer el primer contacto (objetivo de la campaña de Google Adwords).

Vayamos a ello:Los factores para la elección de un ramo de novia son muy variados, subjetivos y personales pero hay unos cuantos factores clave que no podemos obviar, estos son:

- Estación del año en que se celebrará la boda, pues no todas las flores naturales están disponibles.- Personalidad de la novia.- Tipo de boda.- La complexión física de la novia, altura....- Color del pelo y de la piel.- Estilo del vestido.

Así que habrá que diseñar un formulario para conocer a la novia y ofrecerle una solución personalizada y rápida.

Habrá que hacer un test A/B para medir la efectividad de cada una de las opciones y obtener datos reales (una vez entras en la analítica, es una droga, no puedes salir).

URL:www.sanchezsilvosa.es

Seguro que podemos hacer algo más...¿era ésto lo que necesitaban nuestros usuarios?

Nuevo formulario de factores clave para la elección de un ramo de novia.

Proyecto 3

Page 8: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

10

Espasa Calpe - casa del libro.com Actualmente desarrollo mi labor en el departamento de Usabilidad y Experiencia de Usuario de casadellibro.com.

Principalmente desarrollando labores de:

- Investigación de usuarios, mediante test de usabilidad moderados presenciales y test de usabilidad remotos, con el software Userzoom (por ejemplo, la realización de un estudio comparativo midiendo el esfuerzo del usuario para realizar las mismas tareas en casadellibro.com y dos competidores.). Estudios de tipo true intent - VOC, para conocer objetivos y dificultades de los usuarios.

- Optimización de la conversión (CRO) mediante generación de test A/B con el software Optimizely.

- Con toda la información de los puntos anteriores generación de propuestas de nuevas soluciones, creando prototipos navegables con Axure, trabajando en la versión escritorio, versión móvil responsive, apps Android e iOS, ereaders.

- Actualmente una de mis principales funciones es la administración del software CEM - IBM Tealeaf. Como referente de datos del comportatamiento real de los usuarios en la web. Donde a partir de casos reales de problemas/obstáculos que han tenido los usuarios se modelan una serie de eventos para evaluar el alcance de dicho obstáculo. De esta froma podremos ponderar el impacto del problema, reallizar alguna propuesta mediante el software de test ab y subir a producción la versión optimizada. Posteriormente monitorizaremos con los mismos eventos que creamos para analizar el impacto económico y la solución del problema.

casadellibro.comProyecto 4

Page 9: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

PerfilRevisiones de diseño

Nuevo diseño temáticas destacadas en home Nuevo diseño slider home y landings

Rediseño tarifa plana en gastos de envío

Nuevo diseño árbol de categorías

Page 10: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Obstáculo login En la versión definitiva cada una delas dos opciones tiene su CTA en la zonainferio derecha, disminuyendo la posibilidadesde error. Las dos opciones se muestran de formahorizontal y la opciñon más usada en la zona derecha.

Variación 2

Page 11: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Obstáculo en formas de pagoVersión original

Variación

Variación rediseño final

En el formulario de las diferentes formas de pago de tarjetas casa del libro se integró una nueva modalidad de tarjeta dando lugar a confiusión por parte de los usuarios. Este obstáculo detectado por el departamento de atención al cliente de casa del libro (gestionado por Sandra Heras), fue en primer lugar monitorizado en Tealeaf, midiendo el número de errores que se devuelven al usuario al utilizar este tipo de tarjeta. Se hizo un nuevo diseño visual con Optimizely que se probó durante varias semanas (test AB), hasta que se aprobó la versión definitiva.

Page 12: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

7

dispositivos e-Reader Taguspropuestas navegacion task-flow

Page 13: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Proyecto 3diagrama flujo wireframenuevo proceso de compra

Page 14: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

card-sorting - categorización

Page 15: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Test de usabilidad remotos - Userzoommedición de esfurzo y eficiencia de las mismas tareas en tres e-commerce

Page 16: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

https://www.hotjar.com/founding-members

Desde el año 2014 llevo colaborando con hotjar. Soy socio fundador en la versión beta. Se trata de una suite encaminada a aglutinar sobre una misma plataforma diferentes herramientas que permite analizar el comportamiento de los usuarios, así como recibir directamente sus sugerencias, opiniones, dificultades, reclutarlos para test de usabilidad moderados....etc.

Page 17: UX Web Designer - IBM Tealeaf administrator CRO - AB Testing€¦ · Rediseño y actualización de un site corporativo. Dará respuesta a una serie de campañas de Google Adwords

Qué puedo aportar:

620 69 69 [email protected] EGJ

Creatividad.

Empatía con el resto del equipo y con los usuarios de los proyectos.

Perfil multidisciplinar:

diseño gráfico.

HTML, CSS, JS, jQuery.

experiencia de usuario / usabilidad.

CRO - A/B Testing - Optimizely

CEM - Custormer experience Management - IBM Tealeaf

Pero sobre todo: mucho sentido común, ganas e ilusión.

Eduardo García JiménezUX Web Designer1 de octubre 2015