Mejorando la confianza del usuario mediante un rediseño

Rediseño de la home de una ONG para hacer llegar su propuesta de valor y recuperar la confianza de los usuarios.

  • Proyecto real
  • Investigación UX
  • Design System
  • Diseño UI
  • Handoff
  • Figma

El proyecto

Rediseño de la homepage y creación de un sistema de diseño escalable para una organización guatemalteca de apoyo a las ONG.

Mi rol

Diseñador de Producto (UX/UI), dirigiendo la investigación, la arquitectura de la información, el diseño de la interfaz, la creación de prototipos y la creación de un sistema de diseño modular.

Resultados clave

El proyecto dio como resultado un sistema de diseño coherente y un prototipo de alta fidelidad, entregado con un traspaso detallado para su desarrollo, que sentó las bases de una experiencia de usuario clara, coherente y escalable.

Cliente

Este proyecto fue para una ONG guatemalteca que ayuda a otras organizaciones no lucrativas a crecer y profesionalizarse mediante cursos, consultoría y acreditaciones. También pone en contacto a donantes y empresas con una exclusiva base de datos de entidades fiables que han superado su proceso de evaluación.

Problema inicial

El sitio web existente presentaba dos grandes obstáculos:

  • Falta de confianza hacia las ONG guatemaltecas y hacia el propio equipo de evaluación de la organización.
  • Una arquitectura de la información confusa que no diferenciaba claramente entre recursos para ONG y donantes, lo que provocó el abandono de los usuarios.

Objetivos

  • Transmitir transparencia y credibilidad (contenido claro sobre las evaluaciones, el equipo y la metodología).
  • Diferenciar los recursos para públicos distintos (donantes y ONG).
  • Reflejar la nueva misión y visión de la organización.
  • Mejora la experiencia del usuario y elimina los callejones sin salida en la navegación.

DESCUBRIMIENTO

Diagrama que muestra el flujo de usuarios a través de la web anterior, destacando los cuellos de botella de navegación encontrados durante la investigación.

Flujo de usuarios

Mapeé los flujos de usuario del sitio web para identificar los pasos necesarios para completar tareas clave y descubrir áreas de mejora. El análisis reveló graves cuellos de botella: en algunos casos, los usuarios no podían completar la tarea en absoluto.

Captura de pantalla de la home con anotaciones que muestra los problemas de usabilidad identificados en la evaluación heurística.

Auditoría funcional y Evaluación heurística

A partir de los problemas encontrados en el flujo de usuarios, revisé la web para detectar los problemas más urgentes que afectaban a la navegación y a la claridad del mensaje.

Para complementar este análisis inicial, realicé una evaluación heurística utilizando una plantilla de puntuación para proporcionar una métrica de usabilidad objetiva para la interfaz.

Benchmark de organizaciones sin fines de lucro similares que muestran las mejores prácticas en transparencia y comunicación de impacto.
Benchmark de organizaciones sin fines de lucro similares que muestran las mejores prácticas en claridad de navegación y posicionamiento de la misión.

Benchmark

Analicé organizaciones similares para identificar las mejores prácticas en:
  • Transparencia y comunicación de impacto.
  • Claridad de navegación.

Posicionamiento de la misión y la visión.

Proto-Personas

Como no tuve acceso directo a los usuarios finales, desarrollé proto-personas basándome en la información facilitada por el cliente. Éstos sirvieron como hipótesis iniciales que se validarían en fases posteriores.

Ana (Directora de ONG)

  • Necesidad: Ganar credibilidad y conseguir oportunidades de financiación.
  • Problema: El proceso de validación es largo y confuso.
  • Insight: Si el proceso fuera más claro y transparente, sería más probable que lo completara.
  • HMW: Simplifica el proceso, guía a los usuarios paso a paso y comunica claramente el valor de ser validado.

Daniel (Donante)

  • Necesidad: Encontrar rápidamente ONG fiables con un impacto real.
  • Problema: El sitio web carece de transparencia y presenta la información de forma confusa.
  • Perspectiva: Si el impacto se comunicara con mayor claridad, confiaría en la plataforma y procedería a realizar una donación.
  • HMW: Muestra el impacto visualmente, garantiza información verificada y facilita el descubrimiento de ONG relevantes.

DEFINICIÓN

Problem Statements

A partir de la síntesis de la investigación, identifiqué dos problemas clave:

ONG

  • Ana, directora de una pequeña ONG, necesita mejorar la credibilidad de su organización y acceder a mejores oportunidades de financiación.
  • El proceso de validación en el sitio actual es tedioso y confuso, lo que provoca frustración y abandono.

Donantes

  • Daniel, un donante con poco tiempo, quiere encontrar ONG fiables que tengan impacto real.
  • La falta de transparencia y la presentación confusa de la información generan desconfianza, lo que le impide tomar una decisión sobre la donación.

HMW globales

Confianza

  • ¿Cómo podemos transmitir transparencia para que los donadores confíen tanto en las ONG como en el equipo de evaluación?

Arquitectura de la información

  • ¿Cómo podemos evitar los "callejones sin salida" y hacer que la navegación sea más intuitiva?

Misión y visión

  • ¿Cómo podríamos comunicar la nueva misión de forma clara e inspiradora desde la página de inicio?

DESARROLLO

Principios de diseño y concepto

A partir de los HMW, establecí tres principios rectores para el rediseño:

Transparencia

Destaca la metodología, las métricas de impacto y el equipo de evaluación.

Claridad de la audiencia

Crear puntos de entrada diferenciados para donantes y ONG.

Diseño orientado a la misión

Comunicar la visión de la organización de forma destacada en la página de inicio.

Estos principios guiaron el rediseño de la página de inicio, garantizando que la solución abordara directamente los problemas identificados.

Rediseñé la arquitectura de la información para separar claramente los puntos de entrada para donantes y ONG, al tiempo que se daba mayor visibilidad a la misión y la visión.

Arquitectura de la información

Rediseñé la AI para separar claramente los puntos de entrada para donantes y ONG, al tiempo que se daba mayor visibilidad a la misión y la visión.

Gráfico de resultados de "Tree test" que muestra las tasas de éxito de las tareas para la arquitectura de información rediseñada.

Tree test

Validé la nueva AI con un "tree test" que mostró claras mejoras en las tasas de éxito de las tareas (por ejemplo, localizar información de evaluación, encontrar ONG por categorías).

Wireframes de baja fidelidad

Diseñé wireframes low-fi para probar la estructura y la jerarquía de la información antes de pasar al prototipado.

Wireframe de baja fidelidad que explora el diseño de la página de inicio y la jerarquía del contenido.
Wireframe de baja fidelidad que explora el diseño de la página web dirigida a la ONG y la jerarquía de contenido.
Wireframe de baja fidelidad que explora el diseño de la página orientada al donante y la jerarquía del contenido.

Design System

UI Kit

Colores

Muestra del color amarillo principal de la marca utilizado en el sistema de diseño.
Muestra del color turquesa secundario de la marca utilizado en el sistema de diseño.
Paleta de colores ampliada del sistema de diseño que muestra tonalidades y matices para cada color de la marca.

Tipografía

Escala tipográfica para encabezados definida en el sistema de diseño
Escala tipográfica para el texto principal definida en el sistema de diseño.

Rejillas

Diseño de cuadrícula de escritorio de 12 columnas utilizado en el sistema de diseño.
Diseño de cuadrícula móvil de 4 columnas utilizado en el sistema de diseño

Iconos

Conjunto de iconos personalizados creados para el sistema de diseño.
Biblioteca completa de iconos del sistema de diseño

Elevaciones

Niveles de elevación y sombra definidos en el sistema de diseño.

Componentes

Botones

Estados del componente del botón (predeterminado, al pasar el ratón por encima, pulsado y deshabilitado) para las variantes primaria y secundaria.

Tarjetas

Componente de tarjeta utilizado para mostrar las ONG verificadas en el listado de organizaciones.
Tarjeta + ONG
Componente de la tarjeta utilizado para mostrar testimonios de donantes y organizaciones.
Tarjeta de testimonio
Componente de tarjeta utilizado dentro del carrusel de organizaciones destacadas
Tarjeta Carrusel

Entradas

Estados del componente de entrada del formulario: predeterminado, al pasar el ratón por encima, activo, enfocado, error y deshabilitado

ENTREGA

Diseño

Menú

Escritorio
Diseño de menú desplegable de escritorio para la sección Organizaciones
Diseño de menú desplegable de escritorio para la sección Donantes y Empresas.
Diseño de menú desplegable de escritorio para la sección "Acerca de nosotros".
Móvil
Play Video

Inicio

Escritorio
Final high-fidelity desktop mockup of the redesigned homepage — hero section
Final high-fidelity desktop mockup of the redesigned homepage — donor section
Final high-fidelity desktop mockup of the redesigned homepage — NGO listing section
Final high-fidelity desktop mockup of the redesigned homepage — impact and testimonials section
Móvil
Plus mobile device
Animated preview of the mobile homepage design for the organization

Reflexión post-lanzamiento

El alcance del proyecto cubría el diseño de la home y el handoff completo del design system, no un acompañamiento durante el desarrollo. Aun así, antes de cerrar el proyecto expliqué cada página al responsable y al desarrollador en una reunión dedicada, y quedé disponible para dudas puntuales.

Con el tiempo he visto que algunos detalles de la implementación final que se alejan del diseño entregado. Es un buen recordatorio de que, si el alcance no incluye una revisión post-lanzamiento, conviene dejarlo explícito desde el principio o proponerlo como un servicio aparte.

Volver a los proyectos