Siemens are world leaders in technology infrastructure.
They approached us with the ambition of creating an app for city managers across the world to understand Smart Cities in a way that plots their readiness and potential for digitalization.
We created the Atlas of Digitalization, which ranks cities based on a wide number of data points that pertain to digitalization and smart cities. Based on our three key themes: Sustainability, Mobility and Opportunity, we created a 3D data vis for each city based on their score.
Additional team: Victor Szilagyi, Ben Willer, Owen Manby, Christopher Camplin, Emma Willis
126
Days to public release
9
Cities catalogued on release
Working with content strategists and researchers, we began by compiling relevant data points for each city in the index.
From this, we created a comprehensive list of factors that influence each theme and a weighted system to score them. In addition, extensive desk research was undertaken to support content provided by Siemens and inform the authoring long form articles about each city. The articles and scores in the product are updated on an ongoing basis and informed as cities develop their digital strategy and implementation.
An additional aim of creating the index is to communicate Siemens’ capabilities in Smart City provision, and to connect users with experts in Siemens. The end product is a responsive web based experience that enables any user to simply access complex data which maps a city’s digital preparedness – both now and in the future.
We launched the Atlas of Digitalization with 9 cities
And we got immediate engagement from city managers around the world. Users liked the accessible content; the data comparison tool was the most popular feature. For Siemens, it gives them a powerful way to analyse and compare the digitalization of cities – whilst providing their customers with a product they can use and engage with.
The story of digitalization is introduced through the Timeline of Industrialisation feature.
It contextualises the Atlas with a scrollytelling narrative that uses data visualisation with responsive 3D graphics built in WebGL.
Driving the visual language are a series of 3D globes that represent the three core themes of the Atlas: Sustainability, Mobility and Opportunity.
Designed in Cinema 4D and coded in WebGL, the globes serve as a visual identifier for each city, driven by data.
Johannesburg
Singapore
Taipei
London
Cities are summarised in simple cards, using the globes as a data driven identifier with an overall Readiness and Potential score. The design of the product uses a strict grid into which all components fit, making it easy to iterate and add to as a growing source of knowledge
Starting with a high level index, each city has four levels of detail that cater to varying audiences of the product
01 — INDEX
Here users can see which cities are in the Atlas and get comparative scores for Readiness and Potential. The product has a 'featured' and 'recently added' component to prioritise certain cities if required or let the user know when a new city has been added.
02 — CITY OVERVIEW
Clicking into a city provides a user with additional detail. Written content and data visualisations give a break down of high level scores and provides initial context.
03 — THE DATA
At this level, users get a detailed view of data contributing to Sustainability, Mobility and Opportunity. They can compare multiple cities and understand in detail the kinds of infrastructure and processes that make certain cities better than others with regards to digitalization.
04 — INSIGHT
Diving deep into insight through written content supported by bespoke charts and data vis.
In collaboration with researchers and writers, I also helped to create the content for the insight layer of the product. We designed 100s of unique charts that support written content to tell the story of how cities are digitizing and moving into the future. They give context to the data and help explain the human, qualitative side of the information.
Users liked the accessible content; the data comparison tool was the most popular feature. Not only was the experience designed for desktop, it was fully responsive across tablet and mobile too.
Previous Project:
Metropolitan Museum of Art
Digital and printed map for one of the world's most-visited museums
Next Project:
Kitty
Mobile app that makes splitting & sharing household bills a breeze
Ronan Kelly
Currently:
Product Designer at Sweep
I have spent 10 years helping companies of all sizes to design solutions for complex problems. To do this, I combine user centered product and graphic design practices that create engaging, successful digital products.
