Urbanflow Helsinki

Building an operating system for everyday life.

Introduction

Urbanflow, a joint effort of Nordkapp and Urbanscale, envisions an operating system for cities. The scenario explored in the video revolves around situated urban screens and their potential uses.

Watch the Video Watch the introduction video

The general challenge is that while cities are fast, municipal decision making is slow by nature. The heavy and invisible decision-making process within cities causes disconnect with citizens, and despite an abundance of commercial messaging platforms, there is yet to be a dedicated platform where the city and its citizens can meet.

Existing commercial messaging tries to get attention by being 'the loudest voice' in the city and attempting to occupy the most space. We believe that city space should be shared equally between citizens and corporations and that a compromise is possible. We know that there are better and more subtle ways to negotiate the co-existence of commercial, corporate, municipal and citizen-authored content in the city.

Our vision is to make the city more accessible and enjoyable for both residents and visitors through a situated interactive service. By sharing real-time data and feedback about the city, we aim to create a more efficient, transparent relationship between city administrators and citizens. The unique benefit of situated urban screens lies in their capacity to be both locally-oriented and general purpose at once. The same urban screen can show contextual, hyperlocal information as well as broader, citywide content, allowing users to peek around walls and across the city. For officials and administrators this means making the city more transparent and efficient to manage through the use of real-time data and feedback.

Design principles

Attract

Attract

The screen is a living object. It behaves in a manner that subtly attracts attention, enticing the person to approach. Even in a passive mode the screen detects movement in the vicinity, wakes up and subtly mirrors or alters its movement to encourage interaction with the screen.

Inform

Inform

The screen gives useful and immediate information. It entices users to invest time in the interaction and gives them the means to control and display relevant information.

Encourage

Encourage

The way in which the screen behaves encourages interaction and exploration. The screen can be touched anywhere. Touching causes ripples that spread out and momentarily reveal the wealth of digital information within.

Wayshowing

In its simplest form, Urbanflow presents itself as a city map. As a street map, its role is multifaceted; it is a tool for orientation, identification and discovery, as well as a source of comfort for visitors.

Wayshowing

 

As a rich, digital service, Urbanflow can provide users with immediate, useful information. The situated nature of urban screens means that the ‘one size fits all’ approach to street cartography can be discarded and replaced with a living system that adapts to individual users’ needs and requests. Variables such as date, time and location may be reflected in the map’s content. The depth of the concept comes from a range of layers built upon the Urbanflow city map, designed to maximise the potential of Helsinki’s situated urban screens.

1. Wayshowing

The first of these layers is powerful search and transit planning. This enables users to find and get to where they need to go, assisted by live transit information and route suggestion. As a service discovery and wayshowing tool, Urbanflow allows users to query the city itself and dig deeper than ever before.

2. Ambient data

The addition of an ambient data layer to the map allows citizens to explore and compare the city’s ‘invisible’ information, such as energy consumption, traffic density, air quality and municipal works. The visibility of this type of data increases citizens’ awareness of their immediate environment, as well as their effect on it. As a two-way communication channel between city administrators and citizens, Urbanflow not only allows users to view city information, but also submit requests and reports of their own, informing municipal government about issues in their local environment.

How does this benefit the city?

The benefits of this are significant. First, the city itself becomes more transparent and reactive to its citizens’ needs. It becomes easier to navigate for visitors, and more serendipitous for locals. City officials and municipal governments are provided with a completely new way to connect with citizens and visitors and a city that is more connected to its people works and feels better.

Recent years have seen urban projects like Legible London explore the possibilities of traditional ‘poster’ street maps, infusing them with new life and reinstating their position as meaningful navigation tools. An abundance of research in this field means that we have never been more aware of the implications of good and bad map/user relationships. As people travel to new places more and more, a greater focus is placed on delivering immediate, useful information.

Urbanflow is about taking good maps to the next level and making them great. The new direction, and challenge, for street cartography is the digital platform. Not restricted by poster sizes, the digital map can extend far beyond the boundaries of its screen. The system will adapt to its surroundings by changing brightness and visual style per time of the day.

Core map elements

You are here

You are here

The map’s default view shows a central visual indicator of You Are Here (YAH). The YAH icon represents the position of both the screen and the user.

Heads up orientation

Heads up orientation

Unlike traditional maps which are north-facing, the Urbanflow map is orientated ‘heads up’ by default to reflect the actual real orientation of the screen in relation to its environment. Places ahead of the user are above the YAH.

Walking minutes

Walking minutes

The screen promotes walking as the best means of exploring the immediate surroundings. A circle representing a comfortable walking distance of five minutes (400 meters) is centered on the YAH.

Concentric walk

Concentric walk

When the user zooms or pans the map, larger walking distance circles appear on the map (10 minute, 15 minute, 30 minute walk). The concentric circles are centered on the YAH, forming a constant reference and orientation point.

Touchable places

Touchable places

Significant locations and buildings are shown on the map as touchable places. Touching a place dims the map, hiding other visible places and highlighting information and detailed actions specific to that place.

Immediate route thinking

Immediate route thinking

Touching a place immediately reveals a dimmed route from the YAH to that place.

Information layers

Information layers

Information is displayed as layers and extraneous layers are hidden or dimmed when the user is focused on an item or a specific layer.

Controls

Controls

Information layer toggles and map manipulation functions are available as visible controls: Pan/Zoom/Center/Orient.

Search

Search

Search allows users to query the city and locate streets, places and objects. The search function is intuitive and users are assisted by predictive suggestions.

Interaction design

Design intent: easy one-handed interaction

The design of the Urbanflow interface benefits from multi-touch, but core interactions require only one-handed, single-digit interaction. This, along with the incorporation of visible controls for key functions, makes Urbanflow accessible for a wide spectrum of users with varying abilities.

Encourage touching and swiping

As a touch-activated service, Urbanflow enables a two-way user experience and an interaction design based on surface gestures such as swipes, taps and drags. Familiar gestures such as swipe to pan and pinch to zoom are featured with the intention of encouraging users to be as tactile as possible.

Close-up interaction

Urbanflow’s design respects the physical limitations of a large screen with close-up interaction. The screen can be controlled using small, efficient movements and touch targets have been designed with parallax in consideration.

What the user can do

  • Pan the map by swiping.
  • Zoom the map by pinching.
  • See objects on screen.
  • Touch on-screen objects.
  • Toggle objects categories on and off.
  • Use a cluster of control buttons to pan, zoom, center and rotate.
  • See how to walk or use public transport to get somewhere from here.
  • See additional information about a place.

Behaviour

Touching the map Touching the map

When the user touches the ‘blank’ map surface, a ripple effect is reveals street addresses and places otherwise hidden from view. The revealed places remain visible and touchable for a few seconds.

Touching a place Touching a place

When the user touches a place on the map, it is highlighted. Minimal information, dimmed route and additional functions are shown. Other places are dimmed.

Touching the YAH Touching the YAH

When the user touches the YAH, the map shows additional information such as the screen’s address and the direction of north. These help the user to understand their position within the map.

Showing information Showing information

Touching an information icon shows the ‘additional information pane’ with scrollable content. The user can scroll either by swiping or using next/previous buttons.

Panning the map Panning the map

Panning the map reveals concentric walking time/distance circles, centered on the YAH.

Day and night mode Day and night mode

In order to offer the optimal experience 24/7, the map adapts to outside world by changing its mode by the amount of light available: at night the map is more pleasing, dark version whereas at daytime a light map can be used for users' viewing pleasure.

Physical limitations

Touch target scale

The design assumes a 10 mm safety glass in front of the screen, leading to a touch target minimum size of 25 x 25 mm. A visible icon is placed inside the target area

Visual focus

The design assumes an interaction distance of 60 cm from the screen. The screen is physically much larger than the area the user can bring into visual focus. This leads to a primary visual focus area of a 100 mm circle. The secondary visual focus area is a 300 x 200 mm rectangle centered on the focus area. When the user is interacting with an element on the screen, all associated elements should be brought into the area of visual focus.

Extra sensorial input + output

The optimal setup of the screen has a built-in proximity sensor or camera to detect movement in front of the display. The design benefits from multitouch, but core interactions require only single digit input. As a touch-activated service, Urbanflow enables a two-way user experience and an interaction design based on surface gestures such as swipes and taps, as well as more complex gestures and functionality such as the inclusion of keyboards and mice. Buttons and switches are replaced by finger movements, reducing the risk of vandalism and breakdown in public locations.

Visual design

In order to work well in a everyday surroundings, design should be polite, and adaptive. How we’ve approached this with Urbanflow is through the main visual elements of the interface; typograpy, iconography, the grid and the overall tone of voice.

Grid as a backbone

The backbone of Urbanflow is the grid system that dictates elements’ placing on screen and the visual hierarchy. The grid system is adapted to each different screen size individually by maintaining the principles dictated by ergonomics and physical interaction.

Typography & the icons

The base of Urbanflow typography is Mark Simonson’s Proxima Nova, which “straddles the gap between typefaces like Futura and Akzidenz Grotesk. The result is a hybrid combining humanistic proportions with a somewhat geometric appearance.” On urban screens, this means an optimal balance between legibility and warmth.

Scalability

At present, the design of the Urbanflow map takes inspiration from design-conscious Helsinki, with a look and feel that is firmly rooted in our city. This varies greatly from city to city, and this is why Urbanflow has been designed to allow flexible customisation through customizable iconography and typography. In essence, the visual system can be branded to each city just by switching selected elementes while retaining a solid behavioural and perceptual functionality. In practice, this means that the system can be adapted to fit the identity of any city.

Background research

Nordkapp has been actively pursuing the urban space through research and observations since 2009. The Urbanflow project adds to this by uniting a number of different departments within the City of Helsinki. A round of interviews was conducted in the spring of 2011 with the aim of understanding the needs and priorities of individual stakeholders.

Interviewees included:

  • The Public Works Department (HKR)
  • Helsinki City Tourist & Convention Bureau
  • Helsinki City Events Office
  • The Communications Office
  • Helsinki Region Transport (HSL)

These interviews highlighted two recurring needs. First, there is a need to inform local citizens about daily disruptions or events within the city and provide a direct, immediate communication channel. The second need concerns domestic or foreign tourists, and the provision of easy-to-understand information about places, services and transport. Urbanflow is a response to these needs, and a step towards the transparent, networked city of the future.

This research period also highlighted key criteria to be discussed in the development of this service. Issues such as ownership, content management and maintenance must be considered as we move towards making Urbanflow a reality. Honest questions and a clear vision will be fundamental to Urbanflow’s success in the future.

Team

Conceived and designed by

Nordkapp

  • Sami Niemelä — Design direction + visual design
  • Kate Whelan — Interaction design, iconography
  • Akseli Anttila — Interaction Design
  • Jukka Koops — Motion graphics, visual design, audio
  • Tia Sistonen — Design Research
  • Teppo Kotirinta — Design Research
  • Ilkka Haavisto — Business Development

  • nordkapp.fi / @Nordkapp

Urbanscale

  • Adam Greenfield — Design Direction
  • Mayo Nissen — Interaction Design
  • Jeff Kirsch — Interaction Design

  • urbanscale.org / @urbnscl

Stakeholders

City of Helsinki

The Helsinki Event Unit
The Public Workds Department (HKR)
Communications Office
Helsinki Region Transport (HSL)
The Tourist & Convention Bureau

Clear Channel Finland

clearchannel.fi

Forum Virium Helsinki

forumvirium.fi

Data sources

City of Helsinki

City Planning Department
hel.fi/hki/ksv/en/Etusivu

HSY—Helsinki region environmental services authority

hsy.fi/en/

Port of Helsinki

portofhelsinki.fi

With special thanks to all of our interviewees in the City of Helsinki, HSL, and on the streets of Helsinki and Tallinn.

Contributors

Timelapse photography

Johannes Niva

Music

Curve Quartet
soundcloud.com/curve-quartet

Voiceover

Humina + Simon Fields
humina.net

Photos