Cities For Digital Rights 2020 project header image

Cities For Digital Rights

Institutional website

The Cities Coalition for Digital Rights, launched by the Cities of Amsterdam, Barcelona and New York in November 2018, is a network of cities helping each other in the greenfield of digital rights based policy-making. The coalition is committed to promoting and defending digital rights in urban context through city action, to resolve common digital challenges and work towards legal, ethical and operational frameworks to advance human rights in digital environments.

Areas
Skills

Cities for Digital Rights screens positioned diagonally

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.

Cities for Digital Rights computer, tablet and mobile mockups

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.

Information Architecture Diagram

The wireframes helped us explore usability, check the position and hierarchy of key elements, and validate the user’s interaction.

Wireframes image of the design

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.

Ui kit pages positioned diagonally

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.

A component analysed by the contrast checker to meet wcag guidelines

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.

Interactive prototype with interaction connectors in Figma

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.



I´ve worked with

Do you need help with your project?

Let's get in touch.