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.
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:
- Presentation mode — When a user gives a presentation with the tool
- 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.
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.
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.
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.
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:
- Controlling presentations
- Importing data and visual input
- Customising the UI Panels
- Adding visualisation and multimedia contents to the 3D view
- Actions during presentations.
Based on those categories, I made a visual map by using illustrations and 5 colours.
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.
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.
