BROOKLYN BRIDGE PARK

Bringing the amusement of Brooklyn Bridge Park to the digital space.

 

MY ROLE:

I was responsible for the overall UX of the site — site map, research, user flows, wireframes, functional specifications, and QA. 

PROJECT TIME:

December 2013 - May 2014 

THE CHALLENGE

Get visitors to the park as seamlessly as possible. 

Brooklyn Bridge Park wanted a site that better reflected its mission and one-of-a-kind modular design. Being proud New Yorkers, we want to show everyone how wonderful and vibrant the park is. 

Brooklyn Bridge park has 9 sections with activities from soccer to BBQ to outdoor movie night and it hosts over 250 events per year. The park is so lively. Their old site simply wasn't doing the park its justice - it was dull and limited; it wasn't mobile-friendly which was a big problem for visitors at the park, and it didn't allow BBP ways to feature content or display park updates.  

The old site

DISCOVERY PHASE

How would you plan your trip to any destination? 

The discovery phase allowed us to audit the existing content and design, review the competitor landscape, understand our client's vision, and begin research into user needs, behaviors, and pain‐points. 

Understanding user's needs

Our research revealed that the user needs are different based on contexts of use, i.e. on-site park visitors, and off-site visitors. At the park, visitors need to find out what is happening at the park; whereas visitors not at the park want to figure out how to get there. By prioritizing users needs, the structures and layers of information fall into the hierarchy that is presented to the users. 

Working with Brooklyn Bridge Park and using the result of our research, we established the overarching design principles for UX and art direction. 

  • Encourages Action from Site Visitors

  • Enhances the Park Experience

  • Is as Inclusive as the Park

  • Embodies Design with Purpose

  • Has the Emotional Impact of the Park

  • Showcases a Vibrant and Active Park

 

After pinpointing the main user needs, we knew we want to make the site structure more defined. Therefore, we spent a good chunk of our time figuring out the site architecture.

Our main goal is making the site structure much easier to understand. First, we did a site audit and figured out what content is needed. Then, we reorganized the content and came up with a better copy for each nav item. We knew that if each section of the site is easily discoverable, then it would increase user engagement and the general retention rate.  

cover_BBPcover_BBP

DESIGN PHASE

Making it responsive.

Knowing park-goers are usually on the go, we took the mobile-first approach and aimed to design a responsive experience that showcases all the possibilities the park offers and encourages users to try something new.We created a new park map page, making it easier for visitors to browse on their phone and get to the park. We also created a better event calendar to help visitors plan their trip. 

After a lot of sketching and some paper prototyping, we moved onto making high fidelity wireframes. During the wireframing process, I worked closely with the dev team to ensure our design would work from an engineering perspective. We then worked with the clients to define the overall experience and language then began to piece the designs together. 

Featured Events, Calendar, Event Detail Page

Building Brooklyn Bridge Park's community 

Brooklyn Bridge Park's key KPI is to raise awareness of the park and get visitors to become part of the community through volunteering, membership, donation and more. Brooklyn Bridge Park was using multiple third party websites to handle their payments. It wasn't efficient as these systems would take users off-site and sometimes users never returned. We integrated Paypal onto the system to create one seamless payment experience. 

Surfacing add-ons at opportune moments

With the new payment system, we designed an effective check-out flow for all Brooklyn Bridge Park's needs. Because Brooklyn Bridge Park is not an e-commerce site, we want the flow to be super clear and get visitors to complete their purchase as soon as possible. When users add items to the cart, we take them to the checkout page immediately. They can see a highlighted cart icon in the menu as an indication that the cart is active. With Brooklyn Bridge Park's goal of building a larger community, we saw an opportunity to inform users the options to donate or become a member. Users can easily add these options to their cart.  

Featuring ways to get involved

We brought community-focused CTAs to the forefront — users can see them in the nav, on the home page and we designed a landing page to showcase all the ways visitors can be part of the Brooklyn Bridge Park community. From a high-level view, users can either give money (membership) or give time (volunteer, attend meetings). To make the actions clearer, we separated these options into those two categories.

Get Involved & Membership wires

THE AFTERMATH

The design never ends.

Our first round of design launched in May 2014, we have launched several updates since then and received multiple awards. We are constantly observing users' behaviors via Google Analytics and improving the site. Recently, we went to Brooklyn Bridge Park and conducted user interviews — we gave each interviewee a specific task for them to complete and asked for additional feedback. We got so many good inputs that helped shape our next iteration. 

The site has been successful since the launch — we compared the same period of time (May 21 - October 1) before and after the site redesign, visitors coming via organic search is 37.7% higher; mobile usage has increased to 23.3% higher; 219,418 more unique sessions. We have received multiple awards including Pixel Awards, Webby Award, SXSW 2015 Innovation Finalist and more. 

BBP-Mobile_mocksBBP-Mobile_mocks
[unex_ce_button id="content_wmbr712st" button_text_color="#ffffff" button_font="regular" button_font_size="16px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="transparent" button_padding="15px 60px 15px 60px" button_border_width="3px" button_border_color="#ffffff" button_border_radius="1px" button_text_hover_color="#c5eff7" button_text_spacing_hover="5px" button_bg_hover_color="transparent " button_border_hover_color="#c5eff7" button_link="http://www.brooklynbridgepark.org" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VISIT SITE ⇢[/ce_button]

CREDITS

Olivier Peyre, Creative Director
Camille Imbert, Associate Creative Director  

Lydia White, Art Director 
Shalimar Luis, Design
Ruth Sylvestre, Iconography and Design 

AWARDS & MENTIONS

Pixel Awards Winner
Webby Award Winner
SXSW 2015 Innovation Finalist 
Awwwards Honorable Mention
ZURB Responsive Gallery
Graphic Design USA