Singapore Views

Singapore Views is a software for making interactive presentations using multiple geo-data of  Singapore and multimedia elements (pictures, videos and 3D models) for researchers and designers in urban planning. The presentations made with Singapore Views help the audience to better understand the context and give a more immersive and dynamic experience than static presentations. I developed the concept and designed the UX/UI for the initial prototypes.

TEAM

Shiho Asada | Creative Direction / UX/UI Design 
Jan Perhac | Concept Direction / Software Development
Remo Burkhard | Concept Direction
Simon Schubiger | Software Development

DATA

Urban Heat Island Effect | Singapore-ETH Centre
Green Buildings | Future Cities Laboratory

CHALLENGE

Developing a Visually Oriented Presentation Tool for Megapixel Displays

The project started by thinking about how to utilise a large video wall at Future Cities Laboratory, a Singapore-based Swiss research institution focusing on urban planning. The video wall consists of 16 units of 55" displays in a 4×4 grid, resulting in a 33-megapixel display. It's approximately 4.9m wide and 2.7m high. In spite of the fact that it's a quite  high-spec display, it had until then been used  only for standard slide presentations. 

DSC01407 copy
IMG_7144_skewed

The previous uses of the video wall: The left is with PowerPoint, the right is with an urban planning software.  The displays' frames distracted from the presentations.

Designing with Multiple Data and Media

The most challenging part was figuring out how to visualise multiple geo-data and show multimedia content at the same time. The datasets are for example:

  • Singapore Master Plan 2014 
  • Temperature data of the urban heat island effect in Singapore
  • Locations of selected green buildings in Singapore

Multimedia content includes:

  • 3D models of buildings
  • Pictures
  • Videos

The following were the goals of the project:

  • Creating a user-friendly and visually oriented presentation tool for researchers and designers in urban planning
  • Integrating several geo-data  and multimedia content in one application to fully showcase research outcomes
  • Giving the audience a clear understanding of city design and urban research in Singapore
  • Providing a seamless and immersive presentation experience to the audience

DESIGN PROCESS

I considered that the Singapore Views tool would be used in two distinct modes:

  1. Presentation mode — When a  user gives a presentation with the tool
  2. Edit mode — When  a user creates his/her presentation with the tool

I started by designing UX/UI for the Presentation mode,  then continued with the Edit mode.

User Persona & Goals

The target users of Singapore Views are mainly reseachers and designers working on urban planning, big data and civil engineering. The user persona was made based on the profiles of the reseachers and designers working at Future Cities Laboratory and their needs for presentation tools.

SG_user2

PHASE 1, PRESENTATION MODE

Storyboarding

I made a storyboard to  express physical interaction between a presenter (e.g. researchers, designers in urban planning) and Singapore Views as well as a user scenario. Considering how multiple presentation contents can be shown together on the screen was a challenge. 

storyboard

VISUAL DESIGN

Colour Coding and UI Design

Regarding the colour code, I employed a greyish-blue colour scheme considering the colour temperture of the displays.

The UI mainly consists of the following three components:

  • 3D map view of Singapore,  presenting the spatial information of the built environments and dynamic geo-data
  • UI panels,  complementing the 3D map
  • Logo and project title

I designed the UI panels  to fit the gridded 16:9 screen format of the video wall. The areas of the 3D map covered by the UI panels are blurred out.

 The UI panels show detail information of the model, legend, time slider and/or an overall map of Singapore, depending on the 3D map views.

SG views DG Edit dark over

While giving a presentation, a presenter can review previous snapshots and layers from the hidden UI panels on the left side.  The panels can be pulled out when the mouse goes to the top-left corner.

Icons for Master Plan Layers

There are 18 types of areas for Singapore Master Plan. Those icons are used as both of buttons and legend.

sg-views-icon_round_export

PHASE 2, EDIT MODE

Defining the Functions

Firstly, we defined the functions for the Edit mode and grouped them into 5 categories based on the users' actions which need to create presentations:

  1. Controlling presentations
  2. Importing data and visual input
  3. Customising the UI Panels
  4. Adding visualisation and multimedia contents to the 3D view
  5. Actions during presentations.

Based on those categories, I made a visual map by using illustrations and 5 colours.

function

UI DESIGN

Sketching

Static Mockups

The left panel consists of:

  • Presentations—Viewing the existing presentations and creating new ones
  • Projects—Data and multimedia content related to each project
  • General—Data and multimedia content related to Singapore data (Master Plan,  infrastructures etc.)

The top panel is for saving and showing snapshots.

VLA_mockup_edit

The Edit mode can be used with desktop and laptop PC, and it is also designed to fit the video wall same as it will do in the Presentation mode. 

Interactive Prototype

By using InVision, I made an interactive mockup for showing how a user can make a presentation with Singapore Views. This prototype was shared with the team and is being implemented.

ALL PROJECTS