Overview
Advocating for Digital Empowerment and Equity
The Cities for Digital Rights website is a platform for municipalities, policymakers, activists, and citizens working on advocating for and implementing digital rights initiatives within urban environments, offering a central space for dialogue, collaboration, and action. Users range from local government representatives, activists, advocacy groups, policymakers and citizens seeking insights into the ethical, legal, and social implications of digital technologies.
It serves as a collaborative hub where stakeholders across sectors can exchange knowledge, share resources, and work collaboratively through research, reports and case studies to create cities that prioritize the ethical and responsible use of technology.
The challenge
Design a visual and interactive experience across platforms
The design language for the project, was crafted to communicate its identity and values. It encompasses a distinctive color scheme, featuring vibrant blues complemented by subtle grays, and utilizes bold sans-serif font styles.
This combination not only evokes a sense of innovation and progress but also maintains a professional aesthetic in alignment with the project’s goals. Additionally, the design language prioritizes accessibility requirements, ensuring seamless engagement for all users.
I helped the coalition with the web design of their new collaborative platform, focusing on the visual design and the definition of the information architecture. I also created the illustrations and assets for different social media platforms.
Development
Organizing the information
As a starting point I mapped out all potential user interactions in an Information Architecture diagram, organizing coherently to create a logical flow that addressed user needs and expectations, supporting the intuitive discovery of relevant content.
The wireframes helped us explore usability, check the position and hierarchy of key elements, and validate the user’s interaction.
I developed a UI Kit to have a consistent set of reusable components such as buttons, typography, icons, and color schemes. This ensured a cohesive visual language across the platform.
Accessibility was an important consideration, ensuring an inclusive design for all users. Emphasis was placed on achieving robust color contrast, adhering to WCAG 2.1 guidelines, and securing a AAA and AA rating for readability and visibility across diverse scenarios. The kit also incorporates scalable typography and intuitive layouts that support screen reader-friendly labeling.
I developed an interactive prototype to test the interface’s interaction. This provided valuable insights into the navigation, functionality, and overall user experience, which helped refine the UI and improve usability.
Solution
A design solution for digital rights awareness
The design solution is a user-friendly platform that communicates a clean, modern aesthetic, that facilitates easy navigation and engagement with content, ensuring that users can effortlessly access crucial information about their digital rights.
Type 'r' while hovering over the prototype to restart it.