Gibney Dance

Understanding how users perceive and engage an arts organization to design for their needs.

Gibney Dance is a New York City-based dance and arts organization. Gibney engaged Objective Subject to refresh their brand, followed by a clean-slate redesign of their web platform. For this latter project, I collaborated with the OS team on User Research, and guided UX Design and UI Design (Interaction + Visual).

Date: Spring 2018

Brief

Old site showing “the three C’s”

Gibney’s old site made it hard for users to find what they needed, and didn’t communicate the breadth of their programming.

Gibney are known as a dance company, but their programming extends well beyond performance to public classes, artist services, and movement workshops for survivors of domestic violence. Their previous site’s information architecture was organized around “the three C’s”—Center, Company, and Community—overly broad categories that didn’t neatly contain most content, and therefore made it difficult for users to find exactly what they were looking for. Moreover, it was hard to get a snapshot of Gibney’s sprawling mission from the homepage, or anywhere else. We were asked to rethink the user experience while telling the Gibney story clearly, completely, and with emotional punch.

Process

Site map iteration

To design for user needs, we needed to understand how Gibney’s audiences perceive the organization, and what they come to the site to do. We designed a UX process to get to know them.

We conducted casual interviews with members of the public who had attended Gibney performances and classes, as well as dancers at different stages of their careers who had accessed Gibney services. It quickly emerged that users perceived Gibney’s programming buckets with more granularity than the “the three C’s”. Gibney’s information architecture didn’t match users’ mental model of Gibney’s programming and mission. 

Next we exhaustively catalogued every program, performance series, person, residency, service, and event type at Gibney, then, using insights that emerged during user interviews, we did card sort exercises with Gibney team members to find new content groupings that would hew closely to users’ mental models—and by extension, user tasks. For instance, the previous category of Center was too broad, so we broke it into Classes, Artist Services, and Rent Space—three activities that take place at the center but have very different audiences that come to the site for very different tasks. At the end of this, we iterated on a site map, again including team members from Gibney.

When the verticals felt right, we put them in front of users, and when we got some validation we began fleshing out the UI in wireframe. I designed landing pages to introduce each category and help users perform the tasks associated with them. As I iterated on wireframes, I kept in mind the scalable, resilient design system we would ultimately need to build—individual content modules that could be assembled into full pages as necessary to accommodate Gibney’s diverse programming. Once the basic structure of the system came into view, we extended the visual language of our brand refresh to the content modules.

Homepage wireframe
Landing page wireframe – pt.1
Landing page wireframe – pt.2
Calendar wireframes
Design system modules
Design system modules

Solution

Our site groups Gibney’s programming in a way that feels intuitively right to longtime users, while more fully introducing Gibney’s mission to new users. And it helps both groups perform the tasks that brought them to the site in the first place.

It all starts with the homepage: the key verticals we identified form primary navigation and link to landing pages that introduce aspects of Gibney’s programming while naturally leading users to key tasks. Users who scroll get a tease of this content, again grouped by the primary verticals. A few ‘utility’ functions that supersede the main vertical—Calendar, Rent Space, Donate, and Search—are arranged vertically in a white bar that hugs the right side of the browser window to differentiate them.

While clarifying Gibney’s information architecture was critical, it was only half the battle—we needed some flourishes to give the content personality. From the outset, Gibney expressed an objective that the homepage instantly communicate Gibney’s sprawling movement-centric mission. For the former, we designed an ‘agenda’ for the top of the homepage, which gives a quick tally of a week’s programming broken out by category and pulled in via a robust system in backend event tagging.

The calendar—especially critical as the actionable portal to performances, classes, trainings, and workshops—can be browsed in upcoming or monthly format. Robust backend event tagging makes the calendar easy to browse or filter.

gibney-vignette-1b
gibney-vignette-2b
gibney-vignette-3b
gibney-vignette-10b
gibney-vignette-20b
gibney-vignette-30b
gibney-vignette-40b

The site speaks with one voice and one visual language, and our design system accommodates Gibney’s diverse needs with room to grow. Basic modules accommodate consistent content types across pages, while custom modules let more important content shine. On the Community Action landing page, for instance, immersive video and audio modules showcase the stories of domestic violence survivors who have been positively impacted by Gibney workshops. Visual cues subtly reinforce hierarchy throughout: landing pages are coded with a bold black background punctuated by light content cards, while terminal pages are coded with a white background or custom, event-specific gradient.

Our design solution communicates Gibney’s mission and full offer legibly and powerfully, and helps the organization achieve their internal objectives by making it easier for users to achieve theirs.

Homepage – pt. 1
Homepage – pt. 2
Landing page – pt. 1
Landing page – pt. 2
Event page
Calendar