Case Studies

New Brand Identity and Website for Randy Burkett Lighting Design

Posted by Ken Moire & filed under Case Studies.

From Rich Fisher, Project Designer:

Back in 2015, Randy Burkett Lighting Design began the process of developing not only a new website but also a refreshed brand identity. As we were fast approaching the firms 30th year in existence, it was important that we leverage our history in creating something for the future. To best achieve that goal, we turned to Spry Digital. From the very onset of the process through to the website launch their team kept our goals at the forefront while guiding us to an end product has exceeded our expectations.


When Spry Digital were asked to design the new web experience for Randy Burkett Lighting Design, we were thrilled to accept the challenge. Randy Burkett Lighting Design has designed lighting for some of the most prominent buildings, monuments, landscapes and public spaces in North America.

Martin Luther King, Jr. Memorial (Washington, D.C.)

Martin Luther King, Jr. Memorial (Washington, D.C.)

Founded in 1988 by Randy Burkett, the St. Louis-based team consists of design professionals across disciplines, with lighting related backgrounds and educations in architectural engineering, architecture, interior design, and theatre. Coming from design backgrounds ourselves, we could appreciate the firm’s unique digital business challenges and help them to overcome any obstacles in communicating their work, discipline and philosophy to a wider audience.

The Challenge

Randy Burkett Lighting Design’s previous website was minimalistic and featured content that was tidy but small. Like many websites of the time, the site had been designed for screens less than 1000px wide and was not responsive. The content was high on aesthetic, but void of brand messaging and calls-to-action. The copy required an industrious attention from the user to read and synthesize what the firm had to say about their own work and practice.

The site was not built on a modern content management system (CMS), so was difficult to maintain and update, and did not provide scalability to grow with the firm as their work examples and content needs did.

Goals of the new website:

  • Design a responsive web experience that works and functions across a myriad of screens sizes and devices
  • Build on a modern, easy to use CMS that is scalable and can grow with the firm
  • Design layouts that make full use of the web canvas to highlight beautiful work
  • A multi-layer approach to content that appeals to a multiple audiences
  • Build the site on an SEO-friendly platform
  • Incorporate a blog where the client can express their culture and work

The team at Randy Burkett Lighting Design was quick to point out that while many of their partners include those in the architecture field, key decision makers and stakeholders on projects range from architects, building managers, interior designers, landscape designers and other non-design professionals. Thus, the primary content goal was to showcase the high level of expertise in their field, while making the content accessible to a range of audiences and not appear overly aloof – in other words, it needed to appeal to individuals from the technical and visual design field, as well as those who were not.

Spry Digital began work by conducting stakeholder meetings with the principals and staff to understand their business, people, approach, how they represent their work and the firm’s unique value proposition. One of the first areas on which Spry focused was the Randy Burkett Lighting Design brand itself: How has the brand historically represented the firm and how can the brand accommodate the future?

Brand Identity

Spry Digital considers every decision for our clients through the lens of a customer interacting with the brand. We spent time with the client to understand how the brand identity was used in communication pieces in the past, and how the brand is represented and perceived today. After evaluating the identity, it was agreed we would begin our work with a brand identity refresh to represent what Randy Burkett Lighting Design is today.

Legacy vs Future

The client’s previous word mark logo included a stacked and justified Old Style typeface. While an elegant treatment, it did not necessarily speak to the to modern highly-technical practice of lighting design. Since their existing logo enjoyed some familiarity with their audience, we considered how to remain loyal to the original mark, yet bring it forward with an updated typeface and treatment.

Old Randy Burkett Lighting Design Logo

Previous logotype

During the design process, Spry explored a variety of logo treatments – from variations of the old logotype to more abstract interpretations. The result is a primary logo that remains loyal to the original word mark with a more contemporary typeface and treatment. The 45 degree two tone background evokes a lit facet, hinting at the practice of lighting design.

Setting the Stage

Since the logo would typically be presented alongside visually striking imagery of lighting plans, architectural drawings and finished projects, we limited the palette to a selection of monochromatic dusky hues, akin to a midnight blue sky – a time of day when the magic of lighting design is revealed.

Creating a Brand System

With the primary logo revealing itself in the process, we then addressed the multiple uses of the brand identity across medium.

Randy Burkett Lighting Design requested specific strategy around the fact the firm is often referred to as RBLD. We designed a version of the mark with the four letter forms against the same background, knowing this treatment would work well as an avatar, icon or watermark on project images, presentations, and social media. For additional flexibility, we created a horizontal version of the full word mark. Both the abbreviated and horizontal versions are used on the two sides of the business card, while the stacked word mark is used on the website.

 

Randy Burkett Lighting Design Business Cards

Business cards

Randy Burkett Lighting Design Branding

Brand system

Spry Digital continues to work with Randy Burkett Lighting Design to extend the brand into multiple marketing, sales and communication pieces.

Website Planning

While the brand identity exercise was underway, Spry Digital got to work on planning the new website experience.

Architecture and User Experience

We took the information presented in the initial stakeholder meetings and began the process of documenting the requirements for the new website. We created an information architecture diagram to inform the main landing areas of the site and the audience’s journey through the site with navigation.

Randy Burkett Lighting Design UX Wireframes

UX – Content architecture wireframes

Wireframes were developed to inform the user experience and content architecture of the new website. At this stage, we are thinking about the user’s priorities, considering a multi-layer messaging approach to attract intended audiences and guide them to the call-to-action.

We designed multiple areas on the home page to draw users into key landing areas, like featured work, services, studio, and the blog. Throughout the site are omnipresent calls-to-action to reach out and contact RBLD, assuming a visitor has already been wowed by the beautiful work. We consider the multiple audiences and address their questions and expectations when they land on any area within the website.

With the user experience portion of the planning done, we set forth on the visual look and feel of the new web experience, taking direction from the brand identity exercise.

Defining the Visual Language

A priority of the visual aesthetic is to to consider how the website form, as well as any user interactions, translate between mobile and desktop, or any other device for that matter. Thinking about these different scenarios up front informs a more comprehensive design, consistent user experience and functionality across devices.

The visual design employs a magazine-style layout in its presentation. We created multiple versions, taking into consideration multiple font and color treatments. We were sure to make use of the phenomenal photography owned by RBLD with oversized areas, showcasing details of their work previously not seen by making full use of the web canvas.

Randy Burkett Lighting Design Portfolio

Portfolio project

Brand extension comes in the way of angled overlays in various content areas – the blog, studio, and calls to action – carrying the faceted theme of the logo through to the interface.

A unique “off canvas” menu hides the traditional masthead so not to conceal any of the beautiful photography. Microinteraction design in the form of animated hover states on thumbnails and key content blocks were included to create an enticing experience, encouraging discovery and interaction.

By the end of the visual design phase, we had achieved a balance of design aesthetic and practical data that would satisfy all audiences no matter their background.

Bringing it to life

The new website was built on the WordPress content management system (CMS). WordPress is the most popular open source CMS platform in the world, and could be easily managed and maintained by the client. We leveraged the Advanced Custom Fields plugin for WordPress to make content management a breeze, and utilized Zurb’s FoundationPress theme to speed up development of RBLD’s custom responsive web templates.

Other features of the new website include:

  • Featured work masthead on home page that randomizes on every page load, communicating the breadth of work and giving the site a fresh look on every visit
  • Customizable block on home page for Randy Burkett to push announcements
  • Off canvas main menu
  • Portfolio area sorted by industry
  • Portfolio projects cross-linked with related work and services to encourage further discovery
Randy Burkett Lighting Design Multi Device Responsive Website

Multi-device experience

Spry Digital tested the website on most popular screen sizes, operating systems and devices to ensure a consistent experience for every user.

Results

The new Randy Burkett Lighting Design web experience delivers on the goals defined at the offset of the project and presents the firm’s work and philosophy in a new light.

Randy Burkett Lighting Design Results

The new Randy Burkett Lighting Design web experience.

Since its launch in September, 2016, Randy Burkett Lighting Design has reported dozens of new leads generated by the website, and continues to receive positive praise from partners for the new brand identity and website.

Testimonial

Founder/Principal Randy Burkett had this to say about working with Spry:

The Spry team expended a significant amount of up-front time getting to know our design practice and philosophy, before embarking on the website and rebranding effort. The time spent proved invaluable throughout the entire process, as they were able to better anticipate our needs and meet expectations.

As design professionals ourselves, we chose to remain closely engaged with Spry during the development and rollout. They were always accommodating and worked responsively, while using their knowledge to keep us on track to our goals. They were the experts and it was their insight that ultimately led to a successful project for us all.

Visit Randy Burkett Lighting Design to explore their beautiful portfolio of work and the new brand identity and website by Spry.

Spry Digital Launches New Drupal Website For MSD

Posted by Ken Moire & filed under Case Studies.

Metropolitan Sewer District serves 1.3 million customers inhabiting 525 square miles of the Greater St. Louis area. It provides a multitude of services such as sewer maintenance and collection, floodwater control, monitoring of industrial waste, engineering design, construction of sewer lines, plan review and approvals, and issuance of building and connection permits.

Metropolitan St. Louis Sewer District Screen

Drupal 7 Content Management System

With so many service facets and types of customers, MSD needed more than just a website. They required an operational hub which would allow them to educate and service customers, interact with suppliers and expedite bidding opportunities. Also, as a public entity MSD is required to make thousands of documents, ordinances and pieces of information readily accessible to the public on demand.

Spry Digital partnered with Falk Harrison to provide MSD with a powerful website built on Drupal 7. Falk Harrison handled the design and content architecture of the site and Spry Digital assisted with content strategy, user experience and the front-end and Drupal development.

Metropolitan St. Louis Sewer District Case Study

MSD Responsive Website

To allow multiple team members in various departments to publish content, Spry Digital set up a publishing workflow within Drupal that allows a central administrator to approve content. With such an important function of the site to serve up decades’-worth of documents, Spry Digital implemented Apache Solr to provide deep searching within PDF documents. Reporting provides MSD staff insights as to which vendors are downloading bidding opportunities. Finally, Spry Digital provided training for approximately fifty MSD employees on how to utilize the site.

The Spry Digital team smoothly handled transitioning the Metropolitan St. Louis Sewer District’s website to the user-friendly Drupal platform. Since the website redevelopment, we have been able to accomplish many changes and additions to the site, without the aid of additional support. That provides much more flexibility and control than our previous site. The Spry Digital team also performs maintenance, updates, website hosting, and cheerful tech support, making website management the easiest part of my job.

Crystal Howard
Public Information Representative, MSD

Since the launch of their new website, MSD has expressed the ease-of-use of the platform, finding Drupal an intuitive system to add, edit and manage content.

Spry Digital Launches New Brand Identity and Website For The Olive Link

Posted by Ken Moire & filed under Case Studies.

The four and a half mile business district along Olive Boulevard in University City has long been recognized as one of the most diverse in the St. Louis metropolitan area, hosting a variety of ethnic communities, eateries, shops and businesses. When The City of University City decided to embark on an initiative to bring visibility to this burgeoning business community, Spry Digital was engaged to develop a unique identity and website that would showcase the diverse attributes of the neighborhood while attracting new businesses to the area.

With input from the Olive Boulevard business community and The University City Chamber of Commerce, Spry Digital forged a new identity, The Olive Link, that speaks to the neighborhood’s geographic and cultural significance. As a main thoroughfare, “The Link” connects St. Louis City to the County. With its many ethnic businesses and restaurants, it connects St. Louis to the World. Spry Digital developed a brand voice deck, key messages and a vibrant logo system. The new logo, featuring four intersecting rings, is universal in design and symbolizes the four distinct business districts within The Olive Link, united as one community. The tagline “Get In The Mix” entices businesses, restaurants and patrons from all around the World to come explore all that The Olive Link has to offer.

The Olive Link Responsive Design

Spry Digital designed and developed an eye-catching responsive website built on the WordPress content management system. Features of the website include a commercial property database that provides prospecting businesses and property owners the ability to search available properties by type or use, and an interactive feature that invites visitors to explore the neighborhood. Content that inspires and communicates the vision of the up-and-coming business district was developed by Spry Digital from the intial brand voice work.

Spry Digital Case Study: The Olive Link brochure

To accompany the website, a printed brochure was also created by Spry Digital to share with visitors to the region. With the new identity and website, University City can sell The Olive Link as a viable option for businesses in the Midwest and beyond looking to set up shop in the St. Louis metro area and University City in particular. Here’s what the Deputy Director of Planning, Zoning and Economic Development Raymond Lai said about working with Spry: “Working well with city staff and a community stakeholder group, the responsive and talented Spry team was able to create The Olive Link brand and an impressive website for the 4-mile, 4-district commercial corridor of our City.”

See more of this project in our Work section.

New Drupal + CiviCRM Site: Variety the Children’s Charity of St. Louis

Posted by Ken Moire & filed under Case Studies.

Background

Variety the Children’s Charity of St. Louis is a 501(c)3 nonprofit organization dedicated to helping thousands of local St. Louis children with disabilities say “I can” by providing them with vital medical equipment, as well as educational, therapeutic, and recreational programs. Variety the Children’s Charity of St. Louis is an international leader in fundraising and providing grants to more than 75 partner agencies throughout the St. Louis area. The grants directly impact the lives of St. Louis area children with physical and mental disabilities.

Variety was looking for a partner to improve their website and online fundraising efforts with a more cost-effective, sustainable, and manageable platform. Already familiar with open source systems, Variety felt our recommendation of a Drupal website with CiviCRM integration was the right fit for their organization.

Goals

As defined by the client, the goals for the new Variety branding and website included:

  • Increase awareness of Variety the Children’s Charity mission.
  • Increase donor engagement and expand individual online donations.
  • Determine best way to incorporate Help A Variety Kid campaign into existing Variety brand and site architecture.
  • Provide strategy, user experience design, and development of a new donor management portal, Help A Variety Kid.
  • Implement real-time progress bars that show percentage of goal reached for specific donation goals.
  • Create automated emails and messages, including confirmation, thank you and receipts.
  • Create a platform for the community to get involved with corporate-sponsored and branded promotions and campaigns.

Requirements and Strategy Phase

The Variety Saint Louis site was built on an outdated version of the Orchard CMS, an open source .NET content management system. The site was not regularly maintained, which resulted in broken pages and difficultly in content administration. The site also experienced high bounce rates that Variety sought to improve. Based on our analysis of Variety’s organizational needs for their website, we recommended rebuilding the site using Drupal and CiviCRM.

During this strategy phase, we also worked with Variety to redefine their donation and event management processes. We examined the current online donation process and documented areas that would be configured to accept online donations and event registration.

Branding Strategy

We worked with Variety’s internal marketing team and their marketing agency, Momentum, to devise the best strategy for incorporating the newly branded donation platform, Help A Variety Kid (HAVK), into the Variety family. The discussion centered around whether to create HAVK as a standalone donation platform at its own url (separate from Varietystl.org) or incorporate HAVK into the website architecture that Spry Digital was currently developing in Drupal.

It was decided that Variety would leverage the brand recognition of Variety St. Louis by driving traffic from Help A Variety Kid marketing campaigns to the existing website. A new donation portal, branded Help A Variety Kid, would be developed on the new Drupal website that would accommodate a variety of donation types. Variety could continue to promote Help A Variety Kid in the media while driving traffic to Varietystl.org, improving brand recognition, site traffic, and organic SEO.

User Experience Design

We spent time with the client to understand the pain points with their current website and processes. Features identified during the requirements phase allowed us to capture important features for the wireframes.

  • Direct donation links that would allow users to donate in two easy steps.
  • A dedicated donation section that would engage donors and handle a variety of donation types.
  • Kickstarter-like donation pages that would allow a user to browse and choose a specific item that they would like to donate towards.
  • Thermometer gauges on items to indicate real-time percentage complete of goals.
  • Donation pages, powered by CiviCRM, with a contribution widget for online donation management.
  • Event Management, powered by CiviCRM, allowing upcoming events to display on the Drupal site and allowing participants to register online.

With the Drupal site migration underway and the Help A Variety Kid branding strategy coming into focus, we worked with the Momentum team to set a direction for the new donation portal on the website. Wireframes were created by Spry Digital to address layout, structure and functionality. An emphasis on design of the CiviCRM donation and event pages, beyond what CiviCRM provides out-of-the-box, was important to improve user experience and donation and event registration conversions.

Design and Development

The task of creating the front-end design of the Help A Variety Kid portal went to Momentum. They created a compelling, colorful design that highlighted photography of Variety Kids.

The Drupal website was developed using the Zen theme framework. Content types were identified and Drupal views were created to publish content throughout the site (including CiviCRM donation and event data). Blocks displaying the latest tweets and photos from Flickr were configured to provide fresh social media integration.

Several CiviCRM features were configured and integrated, including contribution widgets, donation forms, online event registration, and corporate sponsorship information. To provide a rich and seamless integration with Drupal, functionality provided by the CiviCRM Webform Integration module and CiviCRM View Integration was extensively used.

Our team also worked to reduce the number of steps potential donors must take to donate online by building a feature to automatically feed donation amounts entered in Calls to Action on Drupal pages into the CiviCRM donation form of the site.

Key Modules

  • CiviCRM
  • Twitter
  • Flickr
  • Views (including CiviCRM integration)
  • Panels
  • Webforms (including CiviCRM Webform integration)
  • Zen theme

Results

We measure success by meeting and exceeding goals for our clients. For Variety we accomplished:

  • Successfully integrated Help A Variety Kid donation platform into the existing Varietystl.org Drupal site, allowing donors to make multiple types of donations online and significantly streamlining fundraising efforts.
  • Provided the ability to promote corporate-sponsored donation campaigns.
  • Successfully integrated CiviCRM event management. Recently, 24 tables for Variety Trivia Night were registered and sold online.
  • Improved the bounce rate on Varietystl.org by 40%.

Variety Help A Variety Kid Donation Portal
How does the client enjoy their new Drupal/CiviCRM website?

We chose CiviCRM because of it’s ease to use, open source platform and ability to keep donor-generated pages.We absolutely love CiviCRM. Our bounce rate has decreased, our ease to change content is much improved, and our donations have increased.

Accolades for Spry Digital:

Their organizational timelines were fantastic. Clear, concise and if any problems were on the horizon they would properly adjust the schedule to meet our needs. Their knowledge of our website is impressive, I feel like they have a solution to any problem we have.

Visit Variety at Varietystl.org and make a donation today at HelpAVarietyKid.org.

If you want to know more about how Drupal or CiviCRM can help your fundraising goals, drop us a line.

New Drupal-CiviCRM Site: Gateway Off-Road Cyclists

Posted by Ken Moire & filed under Case Studies.

Background

The Gateway Off-Road Cyclists (GORC) is a 501(c)3 nonprofit corporation dedicated to advocacy, design, construction, and maintenance of multi-use trails in the Greater St. Louis area (Missouri and Illinois). As an International Mountain Bicycle Association (IMBA)-affiliated club, they organize social activities such as trail builds, group rides, organized trips, and local events.

We connected with lifetime member and senior volunteer Matt Hayes, who built and maintained GORC’s Drupal 6 site, at the St. Louis Drupal Group Meetup. With a working knowledge of Drupal and a clear understanding of the organization’s goals and processes, Matt stayed engaged as project manager on the client side and was responsible for membership data and content migration, which proved to be tremendous resource during the development of the site.

Goals

As defined by the client, the goals of a new GORC site included:

  • Improve GORC’s image with fresh website design.
  • Build the site on the latest Drupal platform, version 7.
  • Map, configure and implement the CiviCRM module for Drupal so GORC can better manage member accounts, renewals, volunteer activities/hours, and provide event registration on their site.
  • Design and implement a new trail conditions feature so that authorized users can provide up-to-the-minute trail conditions around local parks for visitors to gorctrails.com.
  • Expand awareness for off-road cycling, trail maintenance and trail advocacy in the Gateway area.
  • Increase memberships, sponsors, and donations.

With these goals in mind, we got to work on the plan.

Requirements and Strategy Phase

Knowing member management would be a key component of the new site, with CiviCRM being the backbone to power it, one of the first areas we examined was GORC’s membership process, from new member signup to renewals. We mapped how existing membership data would be migrated from their existing database, and documented how CiviCRM would be configured to track memberships, volunteer activities/hours, sponsorship details, donations and event registration.

On the Drupal side, we evaluated what modules would be used, readied the OAuth Facebook integration, and installed the base theme off of which to build the GORC theme (in this case, Omega). During this stage, we also took inventory of their current content, media, and other assets that would be used in the new buildout.

While analyzing the current site’s information architecture, we identified several opportunities to rearrange and optimize GORC’s content, media, and resources to optimize usability while improving SEO.

User Experience Design

We spent time with the client to understand the pain points of managing members and content on their previous site, and how members and users would want to use the new site (trail conditions, forums, etc.). Additional features were identified during the requirements phase that we captured in wireframes. These included:

  • A slider on the home page to promote latest events and rides.
  • Prominent trail conditions feature and events calendar on home page.
  • Membership registration and sign in using Facebook OAuth.
  • A dedicated area that included ‘Become a Member’, ‘Volunteer’, ‘Become a Sponsor’, and ‘Donate’ calls-to-action, specifically.
  • Pages for area parks that include descriptions of trail systems, downloadable trail maps, and up-to-the-minute trail conditions from registered users.
  • Events area, powered by CiviCRM, that distinguishes regularly scheduled rides from other types of events.

Several wireframes of key areas were produced to inform the layout, content structure and functionality. Extra attention was provided to the trail conditions and Civi-CRM-powered events areas since these involved the most labor from a theming perspective. By the end of this phase, the client had a clear understanding of what we were going to build and how we were going to build it.

Design and Development

We created two distinct style tiles for GORC. Style tiles are templates that address the use of branding, color palette, textures, font treatments, key messaging and call-to-action areas. By not representing content areas, containers, UI elements and functional minutiae, they allow the client to focus on the look and feel of a new site, prior to jumping into full design mode. Style tiles sped up the design phase since fewer revisions of design comps were required (the look and feel having already been decided).

GORC Style Tiles

A tale of two style tiles.

The GORC theme was developed using the Omega theme framework. All of the content types were identified and Drupal views were created to publish content throughout the site (including stored CiviCRM data). Styles were created using Sass CSS compiler. A combination of Display Suite and Panels was used to provide custom layouts for the home page, trail overview page, and the rides/events page. While our developers were busy developing the theme, Matt Hayes from GORC started the process of migrating content from the D6 site and membership info over to CiviCRM.

Several CiviCRM features were made available to the website user, including events, volunteer logging, and membership management. We extensively used CiviCRM Views integration and the CiviCRM Webform Integration module, as well as out-of-the-box pages that Civi provides by default.

GORC Trail Conditions

GORC Trail Conditions

In addition to extensive use of CiviCRM for member management, we also built a feature that allows registered users to easily provide trail condition updates. This functionality relies heavily on views to provide the relevant trail conditions on the homepage, trail overview page, and individual trail page (including a “weather vane” display).

Finally, we spent some time tuning the performance of the website at launch. We reviewed our views to determine which ones could be safely cached, minimized images, and installed and configured Memcached to provide server-side caching.

Results

Matt Hayes from GORC has this to say about their new website:

“The design is very professional and clean allowing for a well-organized page structure.

We have seen an uptick in new and renewing membership. Whereas we used to get 2-5 memberships throughout the year based on our old model, we are now seeing 16-20 memberships per month. A portion of this can be attributed to Civi’s built-in membership renewal reminder system which is a fantastic tool we always longed for.

Also…

“Our project scope was very specific in that we wanted to implement CiviCRM in its most complete form to help streamline and manage GORC’s membership. CiviCRM is fully functional with Drupal and we wanted to ensure a framework that would allow us to grow in the coming years. Spry Digital is one of the few companies that work with Drupal, let alone CiviCRM and have a focus of working with non-profits in the St. Louis area. Spry was the perfect match for our project scope and the passionate team had experience with both platforms.”

gorctrails.org

gorctrails.org

Visit the new GORC website: gorctrails.com