Redesigning the Information Architecture of the NYBG Website Navigation

Project Overview

Scope of Work

Opportunity & Objective

Problem Space

Initial Problem Statement

Research Methods Overview

  • Mission Model Canvas — used to understand business
  • Competitive Matrix — analyzed similar attractions
  • Feature Analysis — Compared and contrasted what features competitors and similarly structured companies (comparators) had
  • Card Sorting — used to understand how to organize the content of a site
  • Tree Study — used to test how people approach content ton a site

Mission Model Canvas

  • Determined NYBG is a mission driven organization focusing on education, research and conservation.
  • Relies on its admission fees, donations, and memberships as sources of revenue.
Mission Model Canvas for the NYBG

Competitive Matrix

  • American Museum of Natural History
  • Brooklyn Botanical Garden
  • Brooklyn Museum
  • The Metropolitan Museum of Art
  • Queens Botanical Garden
Competitive Matrix for the NYBG

Feature Analysis

Feature Analysis Competitors (left )and Comparators (right)

Existing Navigation Analysis

  • This is where we got the most insights as we observed how users responded to the current setup and explained the challenges they encountered in trying to complete the tasks.
  • The tasks were based on what Erin, our user persona, would be likely to do on the site.

Tree Study Summary

  • Scenario 1: You are planning to propose to your significant other in the beautiful setting of the New York Botanical Garden.
  • TASK 1: Use the menu in this survey to choose the package and reserve the date.
  • SCENARIO 2: Congratulations, your now fiancé said YES! You both were so impressed by the natural beauty of the New York Botanical Garden that you have decided to look into it as your wedding venue.
  • TASK 2: Use the menu in this survey to find out more information, including the name of the Catering Company.
  • SCENARIO 3: Your wedding day is almost here and all details have been finalized. Your photographer just emailed you to let you know the New York Botanical Garden requires an application for photography.
  • TASK 3: Use the menu in the survey top find and submit your application.

Tree Study Results — Round 1

Card Sorting

Open Card Sorting

  • Events — all 5 participants created this category
  • About — at least ⅗ participants created this category
  • Memberships — at least ⅗ participants created this category
  • Photography — at least ⅗ participants created this category
  • Venues — at least ⅗ participants created this category

Closed Card Sorting — 1st Round

Results

Closed Card Sorting — 2nd Round

Most users created a new Events or Weddings category.
  • Average results did not change significantly.
  • Could not change much of the content for consistency between rounds, so people had similar issues as in first round.
  • Most users created a new Events or Weddings category.

Heuristic Evaluation

Findings & Insights

  1. Card Sorting revealed that there were a lot of redundant and inconsistent links.
  2. An additional category was needed to hold all private events related content.
  3. Also unclear — photography pages
  4. People have different mental models regarding where things should be — i.e. looking in Plan your Visit before Private Events to find private event related pages
  5. People will look for keywords related to their task. i.e. “garden” or “event”
  6. Will often overlook slight differences between similarly worded categories — i.e. “special events” vs. “special occasions” or “photo permit form” vs “event request form”
  1. Changed wording to be more consistent across navigation.
  2. Added a Private Events menu.
  3. Place links to one page in multiple relevant menus to consider varied mental models
  4. Keep labeling simple, specific and consistent — leave no room for doubt

Design

Existing NYBG site map (1st & 2nd levels of hierarchy)
Proposed NYBG site map (1st & 2nd levels of hierarchy)

Hi-fi Mockup

Overview of Final Design & Navigation Changes

Visual Design Changes

  1. Imagery: Changed background image so the page immediately evokes beauty and a place you’d want to visit.
  2. Embodying the NYBG’s mission: While there is an existing button for #plantlove, a user would not be inclined to click on it with out understanding its importance, which is a shame because the “#plantlove” campaign’s existing message does a great job of embodying the NYBG’s mission of adopting a love for and understanding of plants’ role in our lives.
  3. Color: While the colors of the website may have appeared to change drastically, I kept the white and black for contrast and readability, while adding a bit of transparency to blend better with the background photo. The only pop of color on the home page (and throughout the whole site) should be from the imagery of the garden itself so that visitors to the site are immediately captivated and persuaded to see the NYBG for themselves. In terms of accessibility, green and red may be difficult to distinguish so the image can be replaced every time the page is reloaded.

Navigation Changes

Sample Tree Study Scenario — Task 1

  1. Hover over “Private Event Rentals” → dropdown menu appears
  2. Hover over “Social Events” → submenu appears on the right
  3. Hover over and click on “Marriage Proposals” to access package and reservation information.

Next Steps

  1. Conduct Usability Testing again with final navigation
  • — Continue testing until majority Direct Successes are achieved
  • — Apply feedback to final design
  • — Would likely be addressing issues with Delightfulness of the site.

--

--

--

User Experience Designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Dawn Pomegranate Splash

How to lose 10 pounds in a month..I mean..what makes Fitbit successful? (in terms of UX)

Case Study:Wireframing Glovo App

My ultimate usability lab setup for less than €1000

A brief approach on how to solve problem of food delivery for a firm using the design thinking…

Craft your home

6 tips to build an intranet that your employees will love to use

Make Your Slack App Feel Like Home: Engagement

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Valeria Gonzalez

Valeria Gonzalez

User Experience Designer

More from Medium

Sustainability Victoria — Ux Design 2

Reflection Point: Product Design

UX Design Process and a Secret Sauce for Growth

Takeaways from “Presenting UX Work in a Compelling Way” by the Nielsen Norman Group UX Podcast