Green Dot Website

for Green Dot

Putting a brand new design system to the test.

2015 • Lead Interface Designer

Responsibilities: UX, UI, Visual Design

Team: VP of Design, Creative Director, Director of Product, Frontend Engineers, Senior UI Designer, Senior UX Designer, Copywriter

Brief

Alt
Wireframes from the begining of the Flex Web design system.

In 2015 Green Dot embarked on a redesign of their flagship website. The UX team had the foresight to have previously started putting together a responsive, atomic design system, Flex Web, but it was as yet untested. The process also involved building a large library of original photography that could be utilized for the company's various product lines.

Alt
Some of the photos from the new Green Dot photo library as well as a few stock photos used to round out the collection.

Process

As the lead for the website design team in the marketing department, I worked closely with the UX team, the marketing creative team, and the product & development teams as we created a coordinated process planning and building new web products. The push & pull between the needs and goals of each team was a fun balance to strike because there was a great group of people working together.

Alt
Collage of some of the blocks available as part of the Flex Web design system.

It started with the initial incarnation of the Flex Web design system. We started putting it through it’s paces on real products with real content and quickly found it’s limits. We then worked with the UX team to refine and expand the design system. We then worked with the product team to scope out the full redesign of the site and it’s vast marketing copy for numerous products, help section, and a few new products as well. We focused on creating a repeatable process that could be repurposed for the other websites that would quickly follow the Green Dot site. The last step was working hand-in-hand with the development team to help cut down on QA time for the initial project in this new process.

Alt
Example of a basic text + image block with a CTA.

Results

This process was by no means seamless, but through intense collaboration and short sprints we were able to successfully launch the new site and develop a plan for refining the process, which has now been used to successfully launch or relaunch over a dozen different web properties and apps.