Netspend

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).

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.

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.

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.