2/2 Proyecto Lean UX | ¿Cómo lograr la igualdad entre los géneros y empoderar a todas las mujeres y las niñas?
Este artículo consta de dos partes. Ahora estás en la segunda, puedes acceder a la primera parte desde este link :
1⃣: Fase de discovery y solución (Primera parte)
2⃣: Fase de construcción MVAP y análisis de resultados (Segunda parte)
6.4. EL MVAP
Nuestro mvap es una landing page ya que es rápida de construir, podemos llegar con facilidad y en poco tiempo a potenciales clientes y comprobar si nuestro producto tiene cabida en el mundo real, y en caso afirmativo desarrollarlo.
🗒 6.5. Prototipado en baja fidelidad
Antes de prototipar nuestro mvap, realizamos un wireframe de baja fidelidad de la landing page, a través del software Balsamiq desde una perspectiva basada en la arquitectura del contenido, obviando el diseño y evitando elementos que pudieran distraer (colores, tipografías, imágenes, etc.), se trata en definitiva de representar de forma sencilla y esquemática, la estructura y los elementos que va a tener.
💻 6.6. Prototipado en alta fidelidad
Ahora sí, para poder dotar a nuestro wireframe de una capa visual, realizamos el prototipo en Figma, siguiendo las pautas del framework Bootstrap, con una rejilla de 12 columnas de 68 px de anchura, y 24 px de gutter.
Dentro de las secciones a full width, los contenidos van adaptados a caja para ayudar al usuario a establecer un límite visual, y ofrecer una sensación de orden y de organización del contenido.
Por otro lado, los contenedores, imágenes y videos se han ajustado para ocupar todo el ancho de la pantalla para generar un impacto visual más fuerte, proporcionando una sensación de inmersión y amplitud a la página. También nos permite poder jugar con fondos de color y además, las imágenes y videos a pantalla completa pueden ser especialmente efectivos en dispositivos móviles donde la pantalla es más pequeña.
¿De qué elementos constaría la landing page?
Constaría en su parte superior de un Navigation bar con un Hero en la primera sección con un vídeo demostrativo del SaaS.
En la sección siguiente, optamos por un diseño basado en el Patrón Z, el cual tiene como objetivo mejorar la experiencia de lectura del usuario, mediante el uso de imágenes y contenido para destacar los beneficios y las ventajas de nuestro producto/servicio.
En la siguiente sección, utilizamos un video a full width para ilustrar el funcionamiento de nuestro producto/servicio, con el fin de que el usuario pueda comprender su utilidad y sentir la necesidad de adquirirlo.
Ahora que el usuario ya ha comprendido cómo funciona EqualityScore, le presentamos una sección con un fondo degradado destacado (naranja + rojo) para llamar su atención, y un botón de llamada a la acción (CTA) con el objetivo de generar su interés, y motivarlo a solicitar una demostración de nuestro producto.
A través de la siguiente sección le mostramos algunos de los indicadores que nuestro producto es capaz de detectar para su posterior medición y análisis.
Para generar confianza a las posibles empresas interesadas, añadimos una sección con nuestros partners.
Y por último, y no menos importante, incluimos un Formulario de contacto preparado para la obtención de Leads y un Footer para proporcionar al usuario información de contacto, mejorar el seo, generar confianza a través de los enlaces a políticas legales, aumentar el alcance y la presencia de nuestra marca en las redes sociales, y en definitiva aumentar la usabilidad de nuestra onepage.
Y… ¡voilà!, ya tenemos nuestra one page para lanzar el producto al mercado, y evaluar resultados👇
Puedes verla en un entorno real en 👉 www.equalityscore.eu
7. La marca y guías de estilo
El nombre “EqualityScore” refleja nuestra visión de medir y evaluar el desempeño en cuanto a igualdad de género dentro de las empresas. La combinación de los conceptos de “igualdad” y “puntuación”, representa nuestra meta de proporcionar una herramienta objetiva y medible para evaluar, y mejorar la igualdad de género en el lugar de trabajo.
El color
EqualityScore ha tomado una decisión consciente de evitar el uso de colores asociados con estereotipos de género, como el rosa y el azul. En su lugar, se ha elegido el color naranja como principal, ya que se relaciona con el cambio debido a su asociación con la emoción y la acción. En psicología del color, se considera que el naranja es un color “activo” que estimula la creatividad y el pensamiento no convencional. Además, es un color cálido y energizante que puede inspirar optimismo y confianza, da sensación de calidez y cercanía.
Este color también se asocia con la sociabilidad y la comunicación, y puede ser utilizado para promover la interacción y la colaboración, valores clave que promueve la marca.
Al combinar el naranja con colores neutros como el blanco y tonos grisáceos y negros, se logra una estética limpia, sencilla y fácil de seguir.
El color rojo será nuestro color de acento para resaltar ciertos elementos o secciones del sitio web, con el objetivo de llamar la atención de los usuarios y llevarles a la acción.
Tipografía
EqualityScore utiliza la tipografía Ultramagnetic, una fuente sin serifa moderna con una estética elegante y sofisticada, y que gracias a sus glifos con esquinas redondeadas genera confianza.
La familia Ultramagnetic cuenta con un gran número de estilos, incluyendo versiones regulares, negritas, cursivas, cursivas con negritas, versiones con números alternativos, iconos y símbolos. Esto permite crear una jerarquía visual adecuada y aprovechar todas las posibilidades de la fuente.
Es una opción óptima para headings por su peso ya que crea un fuerte contraste visual.
Como tipografía secundaria hemos utilizado Montserrat, una familia de fuentes tipográficas creada por Julieta Ulanovsky en 2010 incluida en Google Fonts. Es una de las más populares en la actualidad, ya que se considera como una fuente “web-safe”.
La familia Montserrat consta de 18 estilos diferentes, que incluyen versiones regulares, negritas, cursivas y versiones con números alternativos, su versatilidad nos permite elegir la versión adecuada para cada elemento y crear jerarquía visual.
Montserrat es una fuente sin serifa con una estética moderna, con una gran legibilidad, especialmente en pantallas. Estas características la hacen muy flexible y adecuada tanto para títulos y encabezados como para cuerpos de texto.
📊 8. Llega el momento de validar | Objetivos, métricas y KPIs
Con la landing page preparada para su lanzamiento, definimos unos objetivos, establecemos una serie de métricas y utilizamos KPIs para medir y analizar su rendimiento.
Tras dos semanas, evaluamos si nuestro producto era interesante para los usuarios y si el modelo de negocio era viable y tenía cabida en el mercado. Para ello, utilizamos herramientas como Google Analytics, Hotjar y las estadísticas de Linkedin.
Establecimos tres objetivos principales:
1️⃣ Generar awarenes e interés en el usuario para comprobar el potencial del producto/servicio.
2️⃣ Generar intención de contratar el servicio.
3️⃣ Captar leads desde el formulario de la web y desde el CTA del menú.
Hotjar
A través de Hotjar hemos obtenido mapas de calor (ver gráfica 1) que nos han permitido visualizar cómo los usuarios interactúan con la página, por ejemplo en qué secciones se han detenido más, cómo se han movido por cada sección (ver gráfica 3) o dónde han hecho más clicks (ver gráfica 2).
El 75% de los usuarios se han quedado entre el hero (100%) y la primera sección con un 78,4% (color rojo y anaranjado), aunque otra parte importante (70,4%) ha llegado hasta la zona intermedia (color amarillo), donde se explican las ventajas de EqualityScore y se presenta el video promocional que ha tenido una gran acogida y reproducciones. Las zonas menos visitadas son las representadas por el color verde (57,7%) y el azul. Este último no aparece lo que significa que todos han completado el recorrido hasta el footer, aunque no se hayan detenido (54,6%).
Según Hotjar, han interactuado con la landing page 118 personas.
La segunda gráfica muestra el número de veces que los usuarios han hecho click en un mismo punto, con un total de 72. Los más destacados por orden de relevancia son: ventajas (9 clicks), cómo funciona (8 clicks), contactar (5 clicks) qué mide y más información (3 clicks).
Google Analytics
Para analizar y rastrear el tráfico a nuestra landing, la duración media de la sesión, y con ánimo de identificar fallos para poder optimizarlos y mejorar la experiencia de usuario, hemos utilizado como fiel amigo a Google Analitys.
Creamos también una serie de eventos dentro de la landing para saber qué secciones o elementos despertaban más interés.
De los datos recopilados durante las 2 semanas de medición de la landing, los más relevantes fueron:
Objetivo: generar awarenes e interés en el usuario para comprobar el potencial del servicio.
Métrica: nº de visitas a la web | KPI: conseguir 200 visitas
✅ 434 visitas a la landing page.
Métrica: nº de usuarios únicos | KPI: conseguir 100 usuarios
❌ 58 usuarios únicos visitaron la página.
Métrica: nº de usuarios recurrentes | KPI: conseguir 25 usuarios
❌ 16 usuarios de manera recurrente visitaron la web.
Métrica: tiempo medio del usuario en la página | KPI: conseguir 180s
✅ 4 min y 48 s es el tiempo medio de interacción.
Métrica: porcentaje de rebote en la página | KPI: minimizar el porcentaje de rebote al 40%.
✅ Tasa de rebote 22,01%.
Métrica: nº de eventos de tipo scroll | KPI: conseguir 200 eventos
✅ 791 eventos de tipo scroll hacia las distintas secciones de la página.
Métrica: nº de visualizaciones del video | KPI: conseguir que un 20% de los usuarios vean el video promocional
✅ 34 usuarios han visualizado el video lo que supone más de un 50% con respecto al total lo que significa una alta interacción.
Objetivo: Captar leads desde el formulario de la web y el CTA del menú.
Métrica: nº de eventos de tipo click | KPI: conseguir que un 80% de usuarios únicos hagan click en los CTAs, lo que se traduce en 20 clicks.
✅ 25 eventos de tipo click en los diferentes CTAs distribuidos por la web.
Métrica: nº de registros en los formularios | KPI: conseguir que un 10% de las visitas a la landing se conviertan en un lead.
❌ 11 usuarios, que podrían ser CEOs, llegaron o abrieron el formulario para solicitar más información aunque finalmente no lo completaron.
Objetivo: Generar intención de contratar el servicio.
Métrica: porcentaje de clicks en el botón de “Solicitar una demo” | KPI: conseguir que un 10% de los usuarios soliciten una demo.
❌ 0 usuarios
Aunque hicimos una campaña muy pequeña que solo incluyó LinkedIn, los datos geográficos nos revelaron que los visitantes en su mayoría se encontraban en España, pero también había visitantes de otros países, lo que nos demuestra que con pocos recursos podemos llegar bastante lejos.
A través de linkedin hemos podido ver el impacto de nuestro producto y la buena acogida que ha tenido, con 1.271 impresiones, 26 reacciones además de ofrecernos información sobre el tipo de perfil profesional que lo visitó, donde destacamos a 13 directores de proyecto como usuarios objetivos.
9. “La conclusión es solo el comienzo de un nuevo comienzo.” — Ernest Hemingway
Hemos conseguido generar interés
La lectura que hacemos de los resultados, es positiva, con 434 visitas a la landing y más de un 50% de visualizaciones del video promocional, además, el porcentaje de rebote está por debajo de la media, lo que significa que la idea ha despertado interés.
La duración media de las sesiones es de casi 5 minutos y el 54,6% de los usuarios llegó hasta la última sección de la página. Podemos afirmar a través de Hotjar que los usuarios se detuvieron para leer los contenidos y que la página es fácil de consumir.
Por otro lado, no hemos alcanzado algunos de los KPI´s que nos habíamos propuesto, entre ellos:
- El número de usuarios únicos y recurrentes
- Captar los leads propuestos
- Solicitar una demo o información sobre el producto/servicio
Una de las razones puede ser que nos propusimos unos KPI´s demasiado altos. Las tasas de conversión suelen ser más bajas, especialmente, si se trata de una página one page donde el SEO (que podría haber sido un aliado para atraer más tráfico), apenas funciona tanto por la estructura, como por la falta de páginas internas, como por la poca antigüedad del sitio, entre otras muchas razones.
También hay que tener en cuenta que el tráfico fue conseguido sin inversión en anuncios y con poca difusión, sólo a través de 2 publicaciones por Linkedin. Si hubiéramos podido invertir en publicidad, hubiéramos aumentado el alcance, el tráfico, y también llegar a nuestro público objetivo a través de la segmentación, lo que nos hubiera aportado datos más significativos para saber, si realmente nuestro producto tiene cabida en el mercado, y si los CEOs de algunas empresas estarían dispuestos a implementarlo.
Este mínimo producto viable es una prueba del Leitmotiv que define la metodología Lean UX: “Falla rápido, falla barato”. Gracias a la analítica, hemos descubierto que, al desarrollar un proyecto de manera ágil y sin realizar demasiada investigación, la idea ha sido capaz de generar suficiente interés como para continuar dándole una vuelta…
🔮 10. “El futuro no es algo que suceda, sino algo que se crea.” — Alan Kay
Tras analizar los resultados como futurible nos gustaría llevar a cabo las siguientes acciones:
- Mejorar el alcance de la campaña invirtiendo en anuncios que nos permitan segmentar (Linkedin, Google y Twitter), crear comunidad para concienciar a la gente promoviendo su difusión, y conseguir reuniones con CEOs comprometidos para explicarles el servicio de primera mano.
- Aumentar la credibilidad añadiendo testimonios de empresas que ya tienen EqualityScore implementado.
Una vez que el producto/servicio entrara en el mercado, queremos escalar la empresa proponiendo fomentar la igualdad de ideología, raza y orientación sexual entrenando a LANA para ello.
Además, escalaríamos el ranking de puntuación a nivel internacional, así más empresas llevarían a cabo nuestro trabajo por la igualdad, el cuál no sólo se establece dentro de la empresa, sino que por ende también al entorno habitual de cada persona.
Ampliaríamos nuestra gama de pulseras con una variedad de colores para adaptarnos a los gustos de nuestros usuarios. Además, utilizaríamos materiales sostenibles para las correas y trabajaríamos con pequeños productores para apoyar economías locales.
Por último, ofreceríamos opciones de personalización en nuestro SaaS para adaptarlo al estilo y a la imagen de la marca de cada empresa mejorando así su experiencia en el uso de nuestro producto.
👏 11. Agradecimientos
Queremos agradecer encarecidamente a:
- Leticia Martin Fuertes, lingüista computacional en paradigma digital que nos ayudó a cerciorarnos de todo lo que es capaz de hacer LANA.
- A Elena mateos lopez, IOS y Frontend Developer en Holafly por darnos una perspectiva diferente sobre el feminismo, especialmente en el entorno laboral.
- Jose Manuel Gallego Chamorro, CTO de Holafly que sin su script, LANA habría costado mucho más trabajo hacerla realidad.
- Mayte Valdayo Gallego, diseñadora UX/UI y Frontend developer, mi gran compañera de viaje en este proyecto, por su gran esfuerzo y dedicación, y como madre todoterreno a la que admiro.
Terminamos con una frase célebre de Michelle Obama, defensora de la igualdad de género y empoderamiento de las mujeres durante su mandato como primera dama de los estados unidos:
“Cuando las mujeres tienen éxito, toda la sociedad prospera”.
Y si has llegado hasta aquí, quiero darte las gracias por haber leído hasta el final 😉
