Civic
Plataforma de Verificación de Identidad y Autenticación
Civic es una empresa de identidad digital que ofrece herramientas para autenticación, verificación de identidad y control de acceso seguro en aplicaciones tanto descentralizadas como tradicionales. Fui responsable del diseño UX/UI del nuevo sitio web de Civic, trabajando en una renovación completa que reflejara la estrategia de productos actualizada de la empresa y que atrajera a una audiencia altamente técnica y conocedora de Web3, mientras mantenía accesibilidad para desarrolladores y equipos de producto dentro del ecosistema tecnológico más amplio.
Este proyecto surge de una investigación de tesis sobre el uso de la gamificación como una metodología lúdica para mejorar la experiencia de lectura digital en el nicho de lectores de manga. El objetivo era diseñar una aplicación de lectura de manga gamificada que fomente la interacción social, aumente la motivación para leer y promueva la construcción de comunidad.
Rol
Diseño UX/UI, Investigación de Usuarios, Diseño Visual
Duración
2 meses
Herramientas
Figma, Illustrator, Photoshop
Enunciado del Problema
Antes del rediseño, el sitio web de Civic carecía de claridad tanto en su estructura como en su mensaje. Aunque el producto en sí era técnicamente sólido, el sitio no explicaba claramente cómo funcionaba, para quién era o cómo se podía implementar. Los visitantes a menudo se iban sin una comprensión clara de la oferta, y la navegación parecía desconectada del recorrido real del usuario. También había una inconsistencia visual entre el sitio y la interfaz de usuario del producto de Civic, debilitando la experiencia general de la marca. El rediseño debía resolver estos problemas alineando la estructura, el contenido y la identidad visual con la sofisticación técnica de Civic y las expectativas de su base de usuarios.
Enunciado del Problema
Antes del rediseño, el sitio web de Civic carecía de claridad tanto en su estructura como en su mensaje. Aunque el producto en sí era técnicamente sólido, el sitio no explicaba claramente cómo funcionaba, para quién era o cómo se podía implementar. Los visitantes a menudo se iban sin una comprensión clara de la oferta, y la navegación parecía desconectada del recorrido real del usuario. También había una inconsistencia visual entre el sitio y la interfaz de usuario del producto de Civic, debilitando la experiencia general de la marca. El rediseño debía resolver estos problemas alineando la estructura, el contenido y la identidad visual con la sofisticación técnica de Civic y las expectativas de su base de usuarios.
Objetivos
El objetivo principal era diseñar un sitio web que comunicara claramente la propuesta de valor de Civic: herramientas de identidad seguras y respetuosas con la privacidad para plataformas digitales. El nuevo sitio debía simplificar el recorrido del usuario para desarrolladores y socios, facilitando la comprensión de los casos de uso, la exploración de la documentación de productos y el inicio de la integración con Civic Auth o Civic Pass. Desde una perspectiva de diseño, la meta era modernizar el aspecto y la sensación, manteniendo la funcionalidad y la rapidez, con una estructura modular que pudiera soportar nuevo contenido y funciones con el tiempo.
Objetivos
El objetivo principal era diseñar un sitio web que comunicara claramente la propuesta de valor de Civic: herramientas de identidad seguras y respetuosas con la privacidad para plataformas digitales. El nuevo sitio debía simplificar el recorrido del usuario para desarrolladores y socios, facilitando la comprensión de los casos de uso, la exploración de la documentación de productos y el inicio de la integración con Civic Auth o Civic Pass. Desde una perspectiva de diseño, la meta era modernizar el aspecto y la sensación, manteniendo la funcionalidad y la rapidez, con una estructura modular que pudiera soportar nuevo contenido y funciones con el tiempo.
Investigación y Referencias
Investigación y Referencias
Comencé con un repaso del panorama de las plataformas de identidad digital y autenticación, tanto de Web2 como de Web3, observando cómo actores como Auth0, Worldcoin y ENS estructuran sus narrativas de producto. También analicé sitios enfocados en desarrolladores como Stripe y Alchemy para entender las mejores prácticas en flujos de incorporación técnica. Internamente, revisé la documentación de Civic, las pantallas del producto y el feedback existente de los usuarios para identificar dónde ocurrían fricciones y confusiones. Esto me ayudó a identificar las brechas de contenido y problemas de usabilidad que el rediseño tendría que abordar.
Comencé con un repaso del panorama de las plataformas de identidad digital y autenticación, tanto de Web2 como de Web3, observando cómo actores como Auth0, Worldcoin y ENS estructuran sus narrativas de producto. También analicé sitios enfocados en desarrolladores como Stripe y Alchemy para entender las mejores prácticas en flujos de incorporación técnica. Internamente, revisé la documentación de Civic, las pantallas del producto y el feedback existente de los usuarios para identificar dónde ocurrían fricciones y confusiones. Esto me ayudó a identificar las brechas de contenido y problemas de usabilidad que el rediseño tendría que abordar.
Personas de usuario y recorridos
Personas de usuario y recorridos
El sitio web tenía dos públicos principales: los desarrolladores que buscaban integrar las herramientas de Civic en sus dApps o plataformas, y los socios o equipos que evaluaban a Civic como proveedor de infraestructura de identidad. Para los desarrolladores, el recorrido comenzaba con la comprensión de qué podían hacer Civic Auth o Civic Pass, seguido de la documentación técnica o el acceso a la API. Para quienes toman decisiones, la prioridad era entender el valor, el cumplimiento y la diferenciación. La estructura del sitio estaba diseñada para apoyar a ambos: acceso rápido al contenido técnico y una narrativa clara sobre confianza, privacidad y usabilidad.
El sitio web tenía dos públicos principales: los desarrolladores que buscaban integrar las herramientas de Civic en sus dApps o plataformas, y los socios o equipos que evaluaban a Civic como proveedor de infraestructura de identidad. Para los desarrolladores, el recorrido comenzaba con la comprensión de qué podían hacer Civic Auth o Civic Pass, seguido de la documentación técnica o el acceso a la API. Para quienes toman decisiones, la prioridad era entender el valor, el cumplimiento y la diferenciación. La estructura del sitio estaba diseñada para apoyar a ambos: acceso rápido al contenido técnico y una narrativa clara sobre confianza, privacidad y usabilidad.
Diseño de interfaz de usuario
Diseño de interfaz de usuario
La interfaz final aportó claridad y un toque de audacia. Me incliné por un tema oscuro con sutiles degradados y un contraste marcado, evocando la naturaleza de alta seguridad y privacidad de los productos de Civic. La tipografía fue seleccionada cuidadosamente para equilibrar la credibilidad tecnológica con la legibilidad, y se añadieron elementos visuales como íconos animados y micro-interacciones para darle dinamismo al sitio sin abrumar el contenido. Todos los componentes fueron construidos pensando en la escalabilidad, permitiendo al equipo de Civic crear nuevas páginas o secciones sin interrumpir la consistencia visual.
La interfaz final aportó claridad y un toque de audacia. Me incliné por un tema oscuro con sutiles degradados y un contraste marcado, evocando la naturaleza de alta seguridad y privacidad de los productos de Civic. La tipografía fue seleccionada cuidadosamente para equilibrar la credibilidad tecnológica con la legibilidad, y se añadieron elementos visuales como íconos animados y micro-interacciones para darle dinamismo al sitio sin abrumar el contenido. Todos los componentes fueron construidos pensando en la escalabilidad, permitiendo al equipo de Civic crear nuevas páginas o secciones sin interrumpir la consistencia visual.
Aprendizajes clave y reflexiones
Aprendizajes clave y reflexiones
Diseñar el sitio web de Civic me desafió a comunicar tecnología compleja y descentralizada de una forma clara y accionable. Reforzó el valor del pensamiento modular en el diseño web, especialmente para productos tecnológicos que evolucionan rápidamente. También profundicé mi comprensión sobre cómo estructurar el contenido para audiencias duales—técnicas y estratégicas—sin comprometer la claridad o el enfoque. Lo más importante es que el proyecto me mostró cómo la percepción de una marca se forma no solo por el pulido visual, sino por la precisión con la que se entrega la información, paso a paso.
Diseñar el sitio web de Civic me desafió a comunicar tecnología compleja y descentralizada de una forma clara y accionable. Reforzó el valor del pensamiento modular en el diseño web, especialmente para productos tecnológicos que evolucionan rápidamente. También profundicé mi comprensión sobre cómo estructurar el contenido para audiencias duales—técnicas y estratégicas—sin comprometer la claridad o el enfoque. Lo más importante es que el proyecto me mostró cómo la percepción de una marca se forma no solo por el pulido visual, sino por la precisión con la que se entrega la información, paso a paso.
Resultado
Resultado
El sitio final incluye una página de inicio dinámica, páginas de productos enfocadas y llamadas a la acción claras que se adaptan a la intención del usuario, ya sea leyendo documentación, reservando una demostración o explorando flujos de integración. Se utilizaron microinteracciones de manera sutil para guiar la atención, y la estructura general fue diseñada para el rendimiento y la capacidad de respuesta en todos los dispositivos.
El sitio final incluye una página de inicio dinámica, páginas de productos enfocadas y llamadas a la acción claras que se adaptan a la intención del usuario, ya sea leyendo documentación, reservando una demostración o explorando flujos de integración. Se utilizaron microinteracciones de manera sutil para guiar la atención, y la estructura general fue diseñada para el rendimiento y la capacidad de respuesta en todos los dispositivos.