2013

An Interactive Experience of New York Botanical Garden

|          MADWELL NYC       |

APPROACH

This is a microsite for the Native Plant Garden, one of the permanent gardens at New York Botanical Garden. My brief was to design a microsite with a homepage, a map, a how to visit and an about page that would be housed in the current New York Botanical Garden website. The main challenge was to show the existing 300+ plants and animals. 

MY ROLE

I created the wireframes and visual language for the microsite.

TIMELINE

2 Months

DELIVERABLES

UX
Visual Design

TEAM

Chris Sojka
Julia Compton
Ane Aranburu

FINAL RESULT

The Native Plant Garden microsite offers an interactive experience of the actual garden located at The New York Botanical Garden. The focus of the site is that the user has to be able to explore the garden and learn about the plants and animals that live in it.

module_1920x960_npgmodule_1920x960_npg

MOODBOARD

We gathered a few examples of the aesthetics we were looking for. Since the main goal of the site was to explore the gardens, the map page was the one that got more attention. We looked at several examples of maps, and modern ways to visualize maps so we could engage with younger audiences. 

NPG_moodboardNPG_moodboard

WIREFRAMES

The site had to have a Home Page, a Map, a Plant My Visit and an About page. 

NPG_wireframesNPG_wireframes

THE MAP

We found a map that the architects used to build the garden. We used it as a reference and as a guide to create the map.  Due to the geometric nature of garden designs, we followed the same approach as the references we found for the moodboard: we used geometric shapes for all the elements on the map.

map_process01map_process01
map_progressmap_progress
MAPMAP

COLORS, TYPOGRAPHY & ICONS

We decided to use Proxima Nova as a sans-serif modern and versatile typography, and complement it with Adelle, a serif font for the scientific information we were going to display about the plants.

 

npg Colorsnpg Colors
NPG typeNPG type
nybg_icons3-01nybg_icons3-01

FINAL VISUAL DESIGN

This are most of the screens that I produced. I delivered all the assets on Adobe Illustrator on a 1800px wide canvas. The developers built the interactive map using Herokuapp.

NPG_all_v2NPG_all_v2

MICROINTERACTIONS

I created various microinteractions to engage the user. Once you landed at the microsite, the homepage would have this blooming flower where you could access the interactive map and start exploring it.

npg_flowernpg_flower