Future Cities Laboratory, Singapore-ETH Centre is a Swiss research institute's satellite company in Singapore. Their research focuses on urban design, technology and smart cities. I was part of the 'Ecosystem Services in Urban Landscapes' project, which aimed to quantify the benefits of natural ecosystems on human cities.
I designed the UI/UX for an iPad app to showcase the team's work for a research exhibition.
UI/UX for iPad app
Video Presentation
Adobe Suite
Figma
Singapore Views
Unity/Vuforia AR SDK
Researchers:
Zuzana Drillet, Naika Meili, Song Xiao Ping
Angela Dissegna, Philipp Urech, Fung Tze Kuan, Rachel Leong, Ho Xin Ying (intern), Clifford Goh (intern)
Developers:
Chi Zhang (iPad App)
Jan Perhac ('Singapore Views' tool, used to generate visualization images)
My research team 'Ecosystem Services In Urban Landscapes' was given a 3x3m exhibition space consisting of physical models of buildings & landscape, printed explainer panels, a TV screen playing a video.
Due to the short duration I had to work on this project (<1 month, alongside other work responsibilities), my research was focused on precedent studies of existing geospatial tools.
Singapore Views is proprietary geospatial visualization software developed in-house at FCL.
Because it was designed for experts by experts, the app functionality was more complex than needed for my purpose - an iPad exhibition app for laypeople.
CityEngine is a Geographic Information Systems tool that allows researchers to rapidly generate & view urban models in a 3D environment.
The many options intimidate & overwhelm the first-time user.
One of the challenges I faced was how to present the different types of research data visualizations. There were more than 10 datasets that were visualized in a wide range of formats, from 2D (vector, raster) to 3D (point cloud, building model...) to various media (image, video, text...)
A non-exhaustive list of datasets generated by the researchers:
Land Cover Map
Digital Terrain Model
Ecological Research Quadrats
Physical Landscape Design
Park Popularity & Visit Frequency
Recreational Value of Green Areas
Photo Density at Parks (Flickr)
3D Point Cloud Model
Surface Temperatures (DART) & Climate Data
3D / LoD3 Building Model
AR Vuforia Model
I classified them into 6 general categories; which greatly simplified how I would present them in the UI.
By categorizing them this way, the user simply needs to switch between 2D, 3D & AR modes rather than navigate a convoluted list of datasets.
Exhibition visitors have the following characteristics
The profile of an average exhibition visitor necessitates the development of an intuitive, user-friendly navigation system that users can pick up immediately.
“Overview first, zoom and filter, then details-on- demand”
When I was conceptualizing the app navigation, I thought it made sense to reference Shneiderman's Visual Information-Seeking Mantra for designing visualization systems.
1. Overview First:
2. Zoom and Filter
3. Details on Demand
However, I realized that this might not be the most suitable ordering principle for my use case. For an app that users will use for 5 min at most, I wanted to eliminate any semblance of a learning curve.
I tried several versions of the UI, all of which centre around a few principles
Given the profile of the exhibition visitor, I made sure users were handheld through every possible action
User is treated like a complete beginner. All screens have large instructions & tutorial texts guiding the user exactly what to do.
Kept to the existing visual identity of FCL; black/white solid colors
Visuals kept clean & simple, flat textures.
UI designed to be undistracting so that the visualizations stand out.
Nowadays, icon labels are rarely used as users are expected to learn & recognize what the icon does.
I made sure textual labels accompanied most icons or symbols
I was generally satisfied with the design of the app. Although it was meant to be 'simple', it was actually not that straightforward since I was used to complicated interfaces & had to unlearn my assumptions, think from a beginner's perspective
Unfortunately, due to the short timeline & other commitments, only a basic version with limited functionality was developed in the end.
People generally responded well. Ideally I would have liked to sit at the booth to observe and survey people.