Web Development

Netspend is a leader in providing prepaid debit cards in the United States. Netspend's mission is "to provide products and services that empower consumers with the convenience, security and freedom to be self-banked."

Website Redesign

Netspend was long overdue for a website refresh. The site’s most valuable sections were overhauled to include new designs and to add and reconfigure content.

Netspend homepage redesign displayed on an iMac

Website Redesign


We tested various aspects on the homepage leading in to the build, including:

  • Product Placement: Product placement was tested to determine the impact of switching products on the page. Of the two products offered, it was determined that swapping the order could be done with no significant drop off in orders, but a strong lean toward whichever was placed in the hero.
  • Hero Design: Many incremental changes were tested including image vs no image, form vs no form, text variations, colors, etc.
  • Form Lead Generation: Adding a form to the hero section was a goal for the marketing department. This would allow for lead generation and retargeting to those who dropped off during signup. Testing was done to figure out any friction caused by its placement.

The Rounded Corner Conundrum

Designers requested to have the alternating rounded corners on the sections. This was challenging with different gradient backgrounds, and images that could run up to the edge of the section. Section styles had to be integrated into the cms to be built on the fly.

The solution was to start with a section with one rounded top corner as you normally would. The opposing top corner is a corner cutout svg with a fill of the section’s background color or, if the background is a gradient, the starting gradient color. The svg has a negative absolute position relative to the section.

Then, a negative top margin is set on the entire section to get the overlapping effect and the bottom padding is doubled to account for this.

CMS integration includes corner orientation, background color selection (which also alters the svg fill), and section padding (which alters padding, margins, and svg position).

Homepage Before

Netspend homepage before the redesign

Homepage After

Netspend homepage after the redesign

Website Redesign

Demand Deposit Account

Netspend’s historically bread and butter product was a general purpose reloadable (GPR) card. However, a push was made to establish more customer base for their traditional checking account cards, or Demand Deposit Accounts (DDA). With this goal, a new design was launched.

A similar layout was used as the homepage, and, for the most part, the components were reused for these pages. All that was needed was a reskinning of the components by updating page template styles.

Redesigned demand deposit account webpages


Building out the background pathways was the challenge here. These needed to be repeatable so that they ran the entire window width, even on large screens, and they needed to repeat of the left and right sides at different Y coordinates.

Our solution was to work closely with the design team to incorporate a system for using these lines. First, we agreed on a finite amount of Y coordinates that the pathway runs—100px, 200px, 275px, and 485px from the top. I then built a Illustrator template for the design team to use which includes horizontal rules at these coordinates and another vertical rule to line up the pathways that transverse from section to section.

In the CMS, these coordinates translated to component styles. Line color is automatically set based on the background color.

Website Redesign

Business to Business

While these pages live on the same domain as our consumer products, the business products have a different audience. The branding is different than the consumer side with altered colors and vector images, and taking it a step further, the B2B pages are given their our section and their own navigation, to better isolate it from consumer pages.

Redesigned Netspend business to business pages

Netspend Partners

In addition to our own website, we have a handful of partner sites that we manage. Most are single page or a small amount of pages and built with Handlebars, a simple templating language, and an in-house styling framework. For Control Card, which has a bigger scope and includes a blog, Hugo is used along with the same in-house styling framework.

Webpages for various Netpspend partners

Disclosure Forms

In 2016, CFPB mandated that all prepaid card disclosures include specific language, are formatted in a universal way to their specifications, and are accessible digitally.

This was a cross-team initiative to meet deadlines set by the CFPB. Legal prepared the disclosure language, design laid it out according to CFPB specs, and I was tasked to building a system to turn legal’s disclosure docs into individual webpages and them housing them all on one website.

Example of a short form within a full disclosure form

Disclosure Forms

Document Conversion

The most tedious task to this was converting legal’s Word documents to normalized html. At this point I already had html templates made with placeholder text, I just needed to move the text from the Word doc into my template. This may sounds simple, but the html that Word exports is far from pretty. Copying and pasting was out of the question because it’s error prone, and did I mention that there are over a 100 of these disclosure forms?

To solve this, I created a lengthy gulp script to find and replace over 200 regex rules and to normalize it down to something fairly production ready. From here, the form is about 98% done, and after some final manual corrections, the disclosure forms are ready for production. All in all, this process takes around 10 minutes per form as opposed 1-2 hours if we were to copy-paste by hand. Also, QA is much quicker because mistakes are far less likely.


A screenshot of a document and it's code when exported from a Word doc, but before normalization


A screenshot of a document and it's code after normalization

Disclosure Forms

This site is dedicated to housing Netspend’s legal forms, including the disclosure HTML and PDF forms our team creates. It’s integrated with our existing homegrown backend so that legal can enable and disable forms as they please. I wouldn’t call it pretty, but it serves its function, and it turns out that this is a helpful internal tool to reference as well. form listing page displayed on an iMac