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.
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 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:
Multimedia content includes:
The following were the goals of the project:
I considered that the Singapore Views tool would be used in two distinct modes:
I started by designing UX/UI for the Presentation mode, then continued with the Edit mode.
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.
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.
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:
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.
There are 18 types of areas for Singapore Master Plan. Those icons are used as both of buttons and legend.
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:
Based on those categories, I made a visual map by using illustrations and 5 colours.
The left panel consists of:
The top panel is for saving and showing snapshots.
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.