The Decade of Action (2020-2030) is also the decade of rapid urbanization. By 2030, close to 70% of humanity will be living in cities. Cities consume 80% of the world’s energy and produce more than 70% of the world’s CO2 emissions. Are our cities prepared to face the challenge of achieving sustainable development?
This is a project I worked on during my time at the United Nations Development Programme (UNDP), in the Digital Team formed by three Editors, a Project Manager, a Web Developer and myself as a Visual Designer. I had the opportunity to lead the creative direction, coordinate the team to build a strong and powerful interactive map and produced the Web Design and CSS animations to explain how the Sustainable Development Goals will be vital for the cities of the future.
UI/UX Web Design
1 × project manager
3 × editors
1 × UX/UI designer
1 × developer
1 × external agency
When creating multimedia stories, at UNDP, we've always tried to find innovative and effective ways to explain our narrative, to re-engage old users, and at the same time, reach new audiences.
After investigating new design trends, we saw Isometric illustration had great potential to achieve our goals. Isometric illustrations offer a unique view, perfect for technical illustrations and city-scenes. They offer clarity and have been used to diagram complex information for centuries. For the 10th World Urban Forum, we decided to create an interactive map with the help of DKNG studios, who volunteered their illustration services to the project.
Phase 1: Creative Direction & Content structure
To start the project we met multiple times with DKNG studios. We built a mood board to define the style, look and feel of the story and we approved the first sketches of the Isometric Illustration. We also decided which sustainable elements we wanted to include in the map.
Phase 2: Designing the interface
Once we had the map created by DKNG studios, we continued onto ideating the interface seeking to address a few key questions: How would users interact with the map? How would they navigate the story? I created animated mockups to test the interactive elements of the site and met with the web developer to see what could be done technically in the development phase.
Phase 3: CSS Animation
When the designs and interactions were established I moved onto animating the elements of the city. In order to show the vitality of the city it was necessary to have moving elements. I generated a CSS animation to achieve a faster and responsive experience on the site.