Caso de estudio · Organización de justicia sin fines de lucro · Mississippi

Mississippi Center for Justice

Propuesta de diseño para el rediseño del sitio web de Mississippi Center for Justice: descubrimiento, estrategia de comunicación visual, dos conceptos creativos y dos direcciones para la página de inicio.

Alcance de este caso: el diseño UX/UI, mi parte en el equipo. El proyecto completo, de la propuesta al lanzamiento, está en el caso completo en AndiSites.

El reto de diseño

MCJ es un bufete de abogados sin fines de lucro que ofrece ayuda legal gratuita en áreas concretas: vivienda, propiedad heredada, eliminación de antecedentes penales, educación y salud. En la encuesta inicial, el personal describió el mismo problema: la gente no sabía qué hace MCJ, llamaba pidiendo servicios que no ofrece y esas llamadas solían terminar en frustración para ambas partes.

Las personas que atiende MCJ son, en su mayoría, habitantes de Mississippi que enfrentan barreras económicas, sociales y raciales. Cerca de 4 de cada 10 habitantes del estado son afroamericanos, la proporción más alta del país, y casi 1 de cada 5 vive en pobreza (Oficina del Censo de EE. UU. (se abre en una pestaña nueva, en inglés)). Para ellas, un sitio que se parece a sus propias comunidades, con sus caras, su río y su arte, dice antes que cualquier texto que este lugar es para ellas.

El sitio tenía que explicar con claridad y calma qué hace MCJ y cómo pedir ayuda, y sentirse como un espacio seguro donde las personas vean a gente como ellas.

Diseño de la página de inicio de Mississippi Center for Justice: una foto de personas de Mississippi sonriendo detrás del titular Empowering Communities, con «power» en terracota manuscrita, los botones Get Help y Donate Now, y tarjetas de servicios de vivienda, educación, salud y justicia económica.
Dirección A, fotográfica: personas reales de Mississippi, color cálido y acentos manuscritos.

Lo que diseñamos en equipo

Con el equipo partimos de la encuesta al personal y la convertimos en una estrategia de comunicación visual: primero claridad, después calidez. Desde ahí propusimos dos conceptos creativos:

  • Empowering Justice, One Community at a Time. Fotografía de personas reales de Mississippi; azul profundo, oliva, terracota y arena; una sans serif fuerte para los títulos y acentos manuscritos para citas e historias de la comunidad.
  • Justice Through Art. Una ilustración tipo mural que reúne la cultura de Mississippi, su gente y los símbolos de la justicia, con pinceladas y notas manuscritas.

Un wireframe anotado le dio a cada sección de la página de inicio una sola tarea: pedir ayuda, entender qué es MCJ, ver sus servicios, leer historias reales, apoyar la misión y mantenerse en contacto. Dos direcciones de página de inicio llevaron cada concepto a la pantalla.

Wireframe en escala de grises de la página de inicio con notas manuscritas junto a cada sección: hero, introducción, servicios clave, historias de éxito y cómo ayudar.
Wireframe anotado: cada sección de la página de inicio tiene una sola tarea.
Diseño alternativo de la página de inicio con una ilustración tipo mural de un mazo, una balanza de la justicia y columnas de un tribunal detrás del titular Empowering Communities.
Dirección B, ilustrada: un mural con la cultura de Mississippi y los símbolos de la justicia.
Mood board con el logo de MCJ, fotos de la comunidad, una ola pintada en azul, oliva y terracota, un mazo, el río Mississippi al atardecer y la frase Together we’re building a Fairer Mississippi.
Mood board, inspirado en Four Freedoms de Mildred Nungester Wolfe.
Títulos de sección About us! y Success Stories! con la segunda palabra en terracota manuscrita, sobre una ola de líneas finas de colores.
Acentos manuscritos para títulos, citas e historias de la comunidad.

Decisiones de accesibilidad

  • Los servicios justo después del hero, para que la gente vea qué hace MCJ antes de llamar.
  • «Get Help» como primera acción, antes de «Donate».
  • Letra manuscrita solo para acentos cortos; toda la información en una sans serif clara.
  • Una opción de idioma en el encabezado.

De la propuesta al sitio publicado

Una propuesta es un punto de partida, no una plantilla. A medida que avanzó el proyecto, el diseño se adaptó a lo que MCJ necesitaba en el día a día: el hero ahora cambia con cada campaña, el oliva dio paso al azul profundo, que además da más contraste al texto, y los servicios sumaron una tarjeta «Need something else?» para quienes no encuentran su necesidad en la lista. Lo que se mantuvo es el concepto: personas reales, color cálido, acentos manuscritos y un camino claro hacia la ayuda.

Tras el lanzamiento, AndiSites reportó (se abre en una pestaña nueva, en inglés) un 96 % más de usuarios activos, un 75 % más de interacción con los recursos legales y un 47 % más de personas que interactúan a fondo con el contenido.

Reconocimiento

Mi rol en el equipo

Parte del equipo de AndiSites Inc., a través de eMirDesigner LLC: síntesis del descubrimiento, estrategia visual, conceptos creativos, wireframe y diseño de la página de inicio.