Affiliate Membership Cards: Building for Flexibility & Durability

A client of ours recently came to us with an interesting request: could the site provide digital member ID cards for their members?

A little context: the National Education Association (NEA) is a long-time client. In addition to the national site, we support the websites of 20+ local- and state-level NEA affiliates, with more being added every few months. Each site runs on the same Drupal codebase, which allows us to develop features and functionality that can be shared by all the sites.

One of the affiliates joining the platform came to us with the member ID card request. The site they were migrating away from allowed their members to log in and access a digital copy of their physical member ID card. The cards displayed the user's name and member ID number; were branded with their logo and colors; and could be printed (many members print out their cards and carry them in their wallets). Would we be able to replicate the feature on their new site?

We were in a good position to handle this request. From the very beginning, the NEA platform has allowed each affiliate on the platform to control its site’s branding with its own colors and logos, as well as to pick from a curated list of fonts.

The NEA platform also allows affiliates to enable a members-only login. When users create an account, the site verifies their membership details in real-time, and active members are granted access to members-only content.

Requirements

We had many of the supporting pieces in place already. The only question was how to create a card, not just for one affiliate, but for any of the 20+ affiliates who might want to offer their own member ID cards to their members. That meant that, past the initial setup, the ideal solution would:

• Handle logo files of all dimensions
• Display the affiliate’s and member’s name, and the member’s ID number
• Print at wallet size
• Require as little work from a backend or frontend developer as possible

We didn’t want to be in the position of needing to design a custom card for each affiliate, and we didn’t want the affiliates to have to do any extra work either (for instance, by needing to provide a special version of their logo for the card). When a new affiliate asked for the member ID card feature, we wanted to be able to just flip a switch.

The Technical Solution

We considered a variety of approaches, from simply overlaying text on top of an existing, static image, to a more advanced Google Wallet and Apple Wallet implementation, but most solutions were either not scalable to dozens of affiliates, or did not meet the print requirements.

We finally settled on creating what we called an SVG template. Unlike a PNG or a GIF, an SVG is a plain-text image format that (among other advantages) can be hand-coded. The SVG template would look like a regular member ID card, but would have placeholders for variable content, such as the member's name and the affiliate's brand colors. Creating a unique card for each member, no matter which affiliate they belonged to, would be a matter of a simple search-and-replace, followed by a conversion from the SVG to a PNG. (SVGs are primarily meant to be viewed in a browser, and are not easily viewed once downloaded to a person's computer.)

While we had initially hoped to perform all the work on the server, we ran into issues handling some of the logos that needed to be brought into the template, making a server-based implementation less maintainable than we'd anticipated. (It turns out there are quite a lot of, shall we say, creative ways to construct an SVG.) Thanks to some great prototyping work from our own Neal Maher, we successfully transitioned to using HTML's <canvas> element to both create the SVG and transform it to a PNG. Performing the work in the browser made it easier to handle oversized or very tall logos, and will allow us to use custom fonts in the future without much trouble. At the same time, since the member ID card has a simple design, frontend rendering is extremely performant across a range of mobile hardware.

Another advantage of using the <canvas> element is that it is part of the official HTML spec. Not only does this mean that we can expect <canvas> to enjoy support across major browsers for years to come, but we can create our member ID cards without relying on any third-party software. As long as we've got a browser, we're covered.

The Finished Product

So far, the ID cards have worked out just as we’d hoped: over a dozen other affiliates have opted into having the cards on their own sites.

Below are a few examples of member ID cards from the wild (names and member IDs have been changed). We’ll start with Delaware.

Here’s an example of Nevada’s card, whose source logo is oversized (though you would never know it!).

We’ll round it out with Utah’s card, which features a very tall logo.

As previously mentioned, should the affiliate change their brand colors or update their logo, they can make those changes in the UI and the member ID card will automatically reflect the changes. Likewise, if we ever want to make a change to the overall design of the cards, we only need to do that in one place.

I am also happy to report that, when a new affiliate with a members-only section wants to offer the ID card to their members, all it requires is for a developer to enable a Drupal module. That’s about as close to flipping a switch as it gets!