European Design Award

Red Dot Design Award

HERE

Interactive animation

Data visualization suite

The Wall Street Journal microsite

Together with HERE’s data scientists, we analyzed traffic data to discover hidden patterns and insights that could drive the narrative and user interactions.

Discover & define

In a workshop setting we gather input from various people from within the organisation. In the context of the project, stakeholders share their views, challenges and desires. Workshops create support for change through shared vision of outcome and increased ownership.

Stakeholder workshops

Data driven projects require early understanding of your data and data processes. This is why we thoroughly examine the available data from existing solutions and reports to identify the possible uses to distill key insights for end users. Having this knowledge at an early stage in the process increases the value our designs can provide by presenting relevant information in the right way and at the correct moment in the users' workflow.

Data inventory

Ideate & prototype

Together with our client we identify the available and required data, and examine the ways that we can aggregate, parse, filter and analyze it. Data driven projects require early understanding of the data parameters, which are crucial to the entire design process. In the analysis we identify the possibilities that the data offers in terms of a meaningful project experience and narrative.

Data analysis & storytelling

Scenarios are paradoxically concrete but rough, tangible yet flexible. They encourage ‘what if?’ thinking. Rather than focusing on the abstract level, scenarios and storyboards bring focus to the content, storyline and narrative of the project. A scenario outlines the story textually, whereas a storyboard supports the scenario visually; bringing it to the next level, showing what the experience will be like and how events will follow each other. So that you and the other team members can understand the final deliverables and each component.

Scenario & storyboard creation

Prototypes form an essential part of the design process. Prototyping aids understanding of a product and demonstrates interactivity, experience and ‘feeling’ to both users and stakeholders. Early prototyping speeds things up later in the project process by catching problems early, before coding even begins.

The prototype can take on many shapes and forms; from a paper or 3D printed physical prototype, digital click-through prototype or mock-up visualization of interactive installation setups.

(Rapid) prototyping

Depending on the project’s data requirements and the format and volume of the data available, the end product might require a different data structure, aggregations or filtering or the data might benefit from another transformation to improve its usefulness to the project.

We can determine together with our client what is needed, and take responsibility for these tasks. Make sure that the content that is needed is at the correct place, in the right format and in on time to contribute to the project’s success.

Data engineering

Refine & deliver

In the ideation phase, visual design focuses on the overall look and feel. During production, we design all aspects of the project in detail. Assets are designed as deconstructed elements such as additional pages or screens, user interface elements like buttons and icons, system states and transitions. All assets and changes are captured in the lean design style guide, a reference point for development now and in the future.

Visual design

During the motion production we create animations, to optimise timing and animating artist-impressions from the ideation phase. Based on the storyboards and concept design, we create motion graphics with the use of 2D and/or 3D animation, and/or cinematographic techniques. This results in high fidelity footage that is used within an online project or as a stand-alone deliverable. During this activity, elements such as graphic design, animation, cinematography and video production are synthesized into a unified whole.

Motion design

When called for in a project, we can deliver bespoke software in the form of interactive installations, generative design, automated print processing or data processing. We develop in multiple languages such as Java, C++, QML, R, Python and C# and frameworks like Unity3D, Processing, Qt, OpenFrameworks and Unity3D.

Software development follows the same agile workflow we apply throughout our development process. Our expertise and flexibility in development languages allows us to choose the technology that best suits your needs.

Software development

Native mobile applications have several advantages over web applications such as higher performance, offline usage and a more native feel. Native applications also have more possibilities for deeper integration with the mobile hardware such as the device sensors, camera and location data. We can develop completely custom native mobile applications and support the delivery process. We can deliver cross-platform using Qt/QML or Unity3D so we don’t have to develop two separate applications for iOS and Android, but share common functionality.

App development

Support & validate

With the outcome of our analysis as a guiding principle, we started to explore visualizations and scenarios to convey a meaningful storyline.

Inspired by HERE’s identity, we created a visual style that provides a vibrant experience, but does not overrule the messaging.

We developed an application that seamlessly guides the user in exploring the visualizations.

We transformed and supplemented client-supplied data into a format that could be easily processed by a 3D application using Python. Using this application, we generated and rendered animated objects based on the data that represented different scenarios, such as traffic routes and speed patterns over time. Likewise, we used the same data to create a data-driven system that generated all the 2D data visualizations accompanying the 3D renders.

In order to create data visualizations that are both informative and cinematic, we have developed a combination of traditional 2D visualizations with more experimental 3D visualizations. These were then enriched by adding motion as an extra dimension, which allowed us to strengthen the storyline and convey key insights even better.

We used Cinema4D to generate the 3D data-driven visualizations and Adobe After Effects for 2D visualizations and compositing. The videos were then embedded in a touch-enabled presentation application that we custom built-in C++/QML using the Qt Framework.

The challenge

Value delivered

Phases and toolkit items used

Discover & define

Ideate & prototype

Refine & deliver

The Wall Street Journal microsite

Get in touch

News about data, strategy, design and technology

Or follow us on social