Success Story: The SAPAN Institute

By: Jon Reid June 21, 2016

The Opportunity:

The SAPAN Institute is a non-profit organization dedicated to the education, collaboration, advancement and celebration of South Asian performing arts. SAPAN came to Function1 with a need to modernize and streamline their existing WordPress site.

Creating the new sapanarts.org provided an excellent opportunity to dig into the details of configuring, theming and coding on this latest and greatest Drupal platform. This build yielded rewarding results on top of increasing our real world knowledge of Drupal 8, including a contributed module and numerous bug fix contributions.

SAPAN’s primary requests included:

Migration to a Powerful, Easy-to-Use CMS;
Mobile Friendly Site;
Social Media Integration;
MailChimp Integration;
Multi-author, Multi-site Blog Functionality;
Visual Content Showcase;
and a More dynamic, interactive Design.

Drupal 8 was launched while our UX team was collaborating with SAPAN to create a sleek, vibrant look, and after reviewing the many features and enhancements, it was decided that this exciting platform would be used to build out the non-profit's new site. This decision had the new sapanarts.org migrated to Drupal very quickly and set them up on a feature-rich platform that would be easily extensible into the future.

"The website revamp has been awesome, for a few reasons. It is much clearer and easier to navigate. The design adds a more modern touch, allowing us to stay up-to-date with similar organizations' sites. "- Nikhil

The Solution

Fullscreen, Image-based Visually Interactive Experience

Tasked with the challenge of matching the vibrancy of their in-person presence with their online persona is something we took great pride in accomplishing. The overall design objective was to create a site that exudes the same energy and passion as the performances for which the SAPAN team is so renowned. By incorporating full-width images shot at various SAPAN events throughout the site, we were able to tap into the energy and exuberance of the performance company.

On the homepage, we developed a hero paragraph underneath the navigation where the client is able to feature a single hero image, image carousel or an auto-play hero video. The hero section is the end user's first impression of the site and a fullscreen image or video has the ability to draw someone to further explore the homepage and entire website.

SAPAN's previous website (which was developed using Wordpress), had a dated, busy look and feel. Using a "less is more" design approach by interspersing bold fullscreen images and the simple san serif web-safe Google Font, Roboto, we were able to successfully deploy a clean, modernized, responsive user experience.

In order to achieve a more dynamic feel, CSS Transitions were added across the site, including animating the text on interior page lead images and the Get Involved and Upcoming Event sections hover states.

In addition to adding CSS Animation, integrating SAPAN's social channels was an essential element in creating a successfully interactive user experience. This was accomplished in part by adding a Social Media section to the homepage (Keeping up with SAPAN) in which the user is able to switch back and forth between SAPAN's Instagram and YouTube feeds without leaving the site, in real time. Links to SAPAN's social channels are displayed in the footer and the Add to Any module was used to add Social Sharing features. These can be found on pages throughout the site, allowing users to share videos, images, events and blogs to their own social channels, bolstering SAPAN's social presence.

SAPAN needed more than just a beautiful new site. They needed to be able to maintain and build upon the solid foundation provided by Drupal 8 and Function1. To best enable the non-technical users at SAPAN, Function1 provided a library of custom display options using the Paragraphs module. Armed with these options, the users at SAPAN can easily build responsive content including elements like:

Full width media
Slideshows
Customizable background images
Multi-column
Custom blocks anywhere on the page

SAPAN Timeline

"One new feature that is extremely useful for our organization is the timeline. It really puts SAPAN's history and background into perspective in a meaningful way." - Nikhil

Responsive Overhaul

When approached by SAPAN to work on a revitalized design, one of the major objectives was to create a responsive experience, a feature that was prominently lacking on their previous WordPress site. With mobile web browsing increasing and steadily eclipsing desktop, it was imperative that the design was effortlessly translated across device views.

To accomplish this, Function1 built a custom, responsive theme using Bootstrap and SASS. With this approach responsive layouts were created for the varied content on sapanarts.org from the various artist listings, photo & video galleries, event calendar, blogs and forms.

With over one third of sapanarts.org traffic coming from mobile users and an amazing 40% bounce rate it's clear the investment in responsive was a good one.

Content Migration

SAPAN had built an outstanding library of content over years of performing. From blogs to photo galleries and users, it was very important to not allow this content to fall to the wayside as they progressed away from WordPress. Taking advantage of the fact that the Migrate module is now part of Drupal 8 core, despite it's experimental status at the time of this migration, and building on the solid base provided by amitgoyal, Function1 was able to quickly and cleanly migrate the bulk of the WordPress content.

Are you interested in obtaining a quote for your website redesign? Contact us at info@function1.com.

Tags: case study, success story, Drupal, Drupal 8, drupal theme, theming, web design, user experience, non-profit

Blog