Process

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.