Imagen principal del proyecto Cities For Digital Rights 2020

Cities For Digital Rights

Web institucional

La Coalición de Ciudades por los Derechos Digitales, lanzada por las ciudades de Ámsterdam, Barcelona y Nueva York en noviembre de 2018 y ahora con una membresía de más de 50 ciudades en todo el mundo, es una red de ciudades que se ayudan mutuamente en el ámbito de la formulación de políticas basadas en derechos digitales. La Coalición se compromete a promover y defender los derechos digitales en el contexto urbano a través de la acción de la ciudad, resolver desafíos digitales comunes y trabajar hacia marcos legales, éticos y operativos para avanzar en los derechos humanos en entornos digitales. Proyecto en colaboración con SokoTech.

En este proyecto, ayudamos a la coalición en el rediseño de su sitio web.

Areas
Skills

Pantallas de Cities for Digital Rights posicionadas diagonalmente

Visión General

Abogando por el Empoderamiento y la Equidad Digital

El sitio web Cities for Digital Rights es una plataforma para municipios, legisladores, activistas y ciudadanos que trabajan en la promoción e implementación de iniciativas de derechos digitales dentro de entornos urbanos, ofreciendo un espacio central para el diálogo, la colaboración y la acción.

Los usuarios varían desde representantes del gobierno local, activistas, grupos de defensa, legisladores y ciudadanos que buscan información sobre las implicaciones éticas, legales y sociales de las tecnologías digitales.

Sirve como un centro de colaboración donde los actores de diferentes sectores pueden intercambiar conocimientos, compartir recursos y trabajar en conjunto a través de investigaciones, informes y estudios de caso para crear ciudades que prioricen el uso ético y responsable de la tecnología.



El desafío

Diseñar una experiencia visual e interactiva en múltiples plataformas

El lenguaje de diseño del proyecto fue elaborado para comunicar su identidad y valores. Incluye una paleta de colores distintiva, que presenta azules vibrantes complementados con sutiles grises, y fuentes sans-serif.

Esta combinación no solo evoca una sensación de innovación y progreso, sino que también mantiene una estética profesional alineada con los objetivos del proyecto. Además, el lenguaje de diseño prioriza los requisitos de accesibilidad, asegurando una interacción fluida para todos los usuarios.

Para este projecto he colaborado con la coalición con el diseño web de su nueva plataforma colaborativa, enfocándome en el diseño visual y la definición de la arquitectura de la información. También he creado las ilustraciones y recursos para diferentes plataformas de redes sociales.

Mockups de laptop, tablet y móvil.

Desarollo

Organizing the information

Como punto de partida, realicé un mapa de todas las posibles interacciones de los usuarios en un diagrama de Arquitectura de la Información, organizándolas de manera coherente para crear un flujo lógico que atendiera las necesidades y expectativas de los usuarios, facilitando el descubrimiento intuitivo de contenido.

Diagrama de la arquitectura de la información

El siguiente paso fue crear wireframes para explorar la usabilidad, comprobar la posición y jerarquía de los elementos clave, y validar la interacción del usuario.

Imagen de wireframes del diseño

Desarrollé un kit de interfaz de usuario (UI Kit) para tener un conjunto consistente de componentes reutilizables como botones, tipografía, iconos y esquemas de colores. Esto aseguró un lenguaje visual cohesivo en toda la plataforma.

Paginas del Ui kit posicionadas diagonalmente

La Accesibilidad fue una consideración importante, asegurando un diseño inclusivo para todos los usuarios. Se puso énfasis en lograr un contraste de color sólido, cumpliendo con las directrices de WCAG 2.1 y asegurando una calificación AAA y AA para legibilidad y visibilidad en diversos escenarios. El kit también incorpora tipografía escalable y diseños intuitivos que admiten etiquetas compatibles con lectores de pantalla.

Un componente analizado con el verificador de contraste para cumplir con las directrices de WCAG.

Desarrollé un prototipo interactivo para probar la interacción de la interfaz. Esto proporcionó valiosos insights sobre la navegación, funcionalidad y la experiencia general del usuario, lo que ayudó a perfeccionar la interfaz y mejorar la usabilidad.

Prototipo interactivo con conectores de interacción en Figma

Solución

Un diseño para comunicar sobre los derechos digitales

La solución de diseño es una plataforma amigable para el usuario que comunica una estética moderna y limpia, que facilita la navegación y la interacción con el contenido, asegurando que los usuarios puedan acceder sin esfuerzo a información crucial sobre sus derechos digitales.



Presione 'r' mientras pasa el mouse sobre el prototipo para reiniciarlo.



He trabajado con

Necesitas ayuda con tu proyecto?

Hablemos