top of page
.png)
Menendez Law Firm
Rediseñar su Página Web enfocada en la accesibilidad para los usuarios
Objetivo
Rediseñar la Página Web de Menendez Law Fim con un mejor flujo para el usuario, incluyendo la información relevante y confiable que requiere la firma en función de los servicios que ofrece; al igual que un fácil acceso para captar clientes potenciales.
Posición
Product Designer
Investigación de usuarios, Interacción, Diseño visual, Prototipos y Pruebas.
Desafío
Crear un sitio Web que sea accesible, ya que su cliente promedio es de edad de 50+, por lo que debe enfocarse en que sea comprensible, fácil de manejar y sumamente responsiva. La mayoría de los usuarios interactúan con la página desde sus ordenadores, por lo que el diseño comenzó para desktop y finalizó adaptándose al móvil.
Tiempo del Proyecto
2 meses
Únicamente área de diseño sin desarrollo. (El desarrollo queda
pendiente, a cargo del cliente, pero con mi participación de apoyo)
Solución
Trabajé en el proyecto para Menendez Law Firm como Diseñadora de Producto, donde el objetivo era rediseñar su Página Web existente, para actualizarla e implementar los elementos adecuados para sus clientes, pues resultaba anticuada y difícil de utilizar.
La mayor parte de sus consumidores interactuaban desde la computadora por lo que lo correcto fue empezar con Desktop-First Design y después adaptarlo a las versiones móviles, por supuesto siempre teniendo en mente al usuario y sobre todo que fuera fácil de utilizar, no solamente para las personas mayores, sino para cualquier usuario con capacidades diferentes temporales o permanentes.
Proceso
.png)
Conociendo al Usuario
Hice una investigación dentro de la firma con referencia a los casos del último año, y esta fue la información que obtuve:
-
La edad de los usuarios oscila entre 43 y 91 años.
-
El 77.27% de los clientes saben utilizar una computadora.
-
El 23.73% necesita que algún familiar o amigo les ayude con asuntos tecnológicos.
-
El servicio con mayor demanda es la Planeación Patrimonial, seguido por Defensa de Impuestos.
​
La Siguiente información fue obtenida de estadísticas realizadas por instituciones estadounidenses, ya que la firma se
encuentra en Florida fue importante entender al consumidor desde su perspectiva.
-
Actualmente hay un mayor crecimiento de personas entre 33-54 años que están interesadas en hacer Planeación
Patrimonial. -
Las mujeres obtienen mayor motivación para planear cuando un ser querido fallece.
-
Los hombres obtienen mayor motivación para planear al retirarse.
Entrevistas al Usuario
Entrevisté a algunos clientes actuales de la Firma y a varios prospectos para comprender sus necesidades, sus Pain-points y cómo podía mejorar su experiencia,
-
La mayoría de los usuarios no planean antes por procrastinación, pero la razón principal ha sido que su economía se ha visto afectada por factores como la pandemia, la inflación y situaciones políticas.
-
Sienten que es complicado encontrar a alguien de confianza porque las páginas web son difíciles de entender y necesitan la ayuda de alguien más joven para utilizarlas.
-
No encuentran la información necesaria para saber si pueden o no hacer Planeación Patrimonial.
​
Después de obtener estos datos, pude hacer el siguiente mapa de empatía, y las proto-personas.
Mapa de Empatía
User Personas
Las User-Personas están inspiradas en los gustos, necesidades y experiencias propias de los entrevistados.
Áreas de Oportunidad
Estas son las áreas de oportunidad que había en la Página Web existente y modernicé en el nuevo diseño.
-
Esta es la vista que tenemos al entrar a la página web desde Desktop y podemos ver que está el número telefónico en un botón, otro botón en el lateral derecho superior, un pop up para contacto y detrás del pop up un formulario de contacto.
-
La barra de navegación es tan grande que apenas se ve el hero image.
-
La diferencia de distancia ente el margen de la izquierda y el de la derecha muestra asimetría.
-
Siguiendo con la versión Desktop, las secciones tienen diferente tamaño y no está bien distribuido el texto; ya que donde, hay más información el área es más pequeña.
-
Falta de proporción. Como lo mencioné, vemos áreas demasiado grandes o muy pequeñas que no van acorde a las medidas requeridas.
-
Demasiados elementos visuales, una imagen detrás de otra hace que el objetivo sea confuso y se pierda lo importante.
-
Ahora, con la versión móvil vemos las mismas áreas de oportunidad como lo repetitivo de los iconos, tipografía demasiado grande, secciones inconsistentes con el tamaño, etc.
Arquitectura de Información
La Arquitectura de información fue planeada para que los usuarios puedan encontrar el contenido de manera sencilla y organizada.
Paper Wireframes
Los Wireframes con pluma y papel. Esto me dio una mejor idea de cómo deseaba diseñar esta plataforma y la información que esperaba tener en ella, así como el fácil acceso a los elementos.
Wireframes de Baja Fidelidad
Después de los Wireframes Digitales llevé a cabo los Wireframes de Baja Fidelidad con los que realicé pruebas sobre el funcionamiento básico de la aplicación.
Nótese que los Wireframes son tamaño Desktop y Mobile por lo que se hicieron pruebas sobre las dos versiones.
Mockups de Alta Fidelidad
Los Mockups son el resultado de la Arquitectura de Información, los Wireframes de Baja Fidelidad y los Elementos de Diseño unidos en este producto.
Versión Desktop y Mobile.
Elementos de Diseño
En esta sección se encuentran los elementos de diseño que realicé para la aplicación.
Colores
Tipografía
Botones
Iconografía
Tarjetas
Inputs
Vista Previa del Prototipo
Estas son todas las interacciones que se realizaron para el prototipo hecho con Figma para versión Desktop y Mobile.
Prototipo de Alta Fidelidad
Este Prototipo de Alta Fidelidad es el resultado de los Mockups de Alta Fidelidad, como de las interacciones que se añadieron y es posible interactuar con este prototipo realizado con Figma para Desktop y Mobile.
Pruebas de Usabilidad
El enfoque principal al crear este diseño es que el Sitio Web sea sencillo de utilizar para las personas mayores; por lo que modifiqué cada Elemento de Interacción, aumentando su tamaño y separación para facilitar la selección; también agregué botones que cuenten con una función y/o dirección clara.
En el caso de la versión Desktop, los elementos interactúan en Hover; y en la Mobile, evité los carruseles y todos los componentes están a la vista haciendo el User Flow más claro.
Se hizo la prueba de usabilidad del producto con varios usuarios en el que contaron con un tiempo estimado de 20 minutos para completar las siguientes tareas:
-
Hacer Contacto con la Firma.
-
Encontrar el Learning Center.
-
Entontrar el área adecuada de lo que estaban buscando.
Al terminar esta prueba se concluyó que:
​
-
Los iconos debían tener los títulos de lo que significaban para poder identificarlos.
Antes
Después
-
Diseñé el Menú con un botón que incluyera el nombre y el icono, haciéndolo fácil de identificar.
Antes
Después
-
El formulario de contacto al final evita la fatiga al navegar la página, y dirige al prospecto hacia el objetivo de convertirse en cliente.
Desktop
Mobile
Aprendizaje
Trabajar en este proyecto ha sido una experiencia retadora y sumamente gratificante. Damos por hecho que ciertos iconos o animaciones son intuitivas y hasta obvias de utilizar, pero muchas veces dejamos de lado a los mayores para los que esto es una novedad. El enfoque total de este trabajo fue hacia las personas de 50+; disfruté mucho hablar con ellos y comprendí lo grande y agobiante que ven la tecnología.
Mi mayor objetivo fue demostrar que el sitio Web no tiene por qué ser inaccesible para algunas generaciones e hice todo lo que se requiere para entregar un producto que los haga sentir bienvenidos y que todo ha sido pensado para ellos y para su comodidad.
El mayor aprendizaje que tuve fue:
-
Nunca des nada por hecho: Creer que iconos, animaciones, etc. son obvias porque nosotros lo sabemos es un gran error ya que debemos tener en cuenta que el usuario para el que estamos diseñando probablemente no tiene la misma experiencia en este campo; por lo que debemos crear un producto más sencillo de utilizar, en el que lo guiemos a través de la jerarquía e instrucciones precisas.
-
Ponerse en los zapatos del usuario: Creo que cuando trabajamos en un proyecto en el que la accesibilidad es el enfoque principal, el punto de partida no es nuestro conocimiento o dominio del mundo tecnológico, sino la empatía; debemos hablar con el usuario, entenderlo y sobre todo ver y experimentar como ellos lo hacen para ser capaces de comprender los obstáculos que los limitan y reducirlos, entregando una aplicación asequible.
-
Los colores también son parte de la accesibilidad:Comprender que debemos balancear los colores, aun cuando éstos sean los que la empresa que nos contrató utiliza como distintivos; hay que saber utilizarlos sabiamente para demostrar jerarquía, importancia y consistencia.
Así mismo, es indispensable no abusar de los colores brillantes que son agobiantes, pues esto facilitará que el usuario quiera seguir navegando en nuestra página, y mejorará su experiencia en general.
​
​
​
​
Espero que hayas disfrutado tanto este proyecto como yo, ¡Gracias por llegar hasta aquí conmigo!
bottom of page