Green Dot
Bank Smarter. Reward Yourself.
Green Dot is a financial technology and bank holding company that provides solutions to Americans unbanked with its range of prepaid debit cards (plastic) and financial digital products. It is the world's largest prepaid debit card company by market capitalization. Green Dot is also a payments platform company and is the technology platform used by Apple Pay Cash, Uber, and Intuit.
Date
2015 - 2019
Role
Web Design, Web Development, Branding, Conversion Rate Optimization, UX/UI
Websites worked on
While at Green Dot I was fortunate enough to work with many of these brands and services:
Challenge:
I was initially brought in to help the marketing department design a new website for their flagship brand Green Dot in 2015. At the time the UX/UI team had just completed an innovative UX framework called Flex Web. Flex Web is an atomic design system consisting of usable design patterns and provides UX approved templates in HTML, CSS, and Javascript that be used in thousands of different combinations to solve any business requirement. The fully responsive framework is mobile first in concept, but adapts to any screen, large or small.
I worked within a design team in the marketing department and worked closely with the UX team, marketing team, and the product and development teams. The Flex Web design system at the time had not yet been tested. As we began working with it on real products with real content we quickly found it’s limits, and 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.
We faced many challenges in launching this very first site on Flex Web: a few of which were obtaining stakeholder approvals, fast release windows, obtaining content, designing based off the new framework, and learning the in’s and out’s of what was and wasn’t possible. Despite everything, the launch was a really great learning experience and a success.
A very important aspect of Flex Web was that It also brought consistency and visual governance across all the digital experiences. It made it easy to quickly re-skin the sites using CSS classes for each brand. A primary goal moving forward would be to create a repeatable process that could be repurposed for the other websites that would quickly follow the Green Dot site.
Over time, I was tasked with managing all aspects of site development for Green Dot and it’s partner sites; responsible for ushering projects through concept, design, production, development, testing, and deployment.
Website UI & Development
Over time, I was tasked with managing all aspects of site development for Green Dot and it’s partner sites; responsible for ushering projects through concept, design, production, development, testing, and deployment. Due to the amount of brands and sites I was working on (and my own sanity) it was absolutely necessary to develop a streamlined process so I can work efficiently and quickly. The process proved to be a success as I was able to take on more and more responsibility.
Process for website development
Production template set up in Sketch to export images at 1x and 2x. For every image used in Flex Web, an additional 6-10 image files to accommodate for the various screen resolutions.
The beauty about Flex Web was that we could quickly mock up a website using actual code. Using a dedicated test server I could provide working test links of high fidelty prototypes and provide to the Marketing stakeholder and compliance feeback to start the approval process.
After the content was fully approved it was then moved to deployment. In the initials days of Flex Web websites were coded and then packaged up and sent to engineers to deploy. The process was slow and constant changes meant the Marketing team would need to “own” their static pre-login sites. The engineers were more than happy to convert these over to Marketing and would free up a lot of their bandwidth. As a result I had to work closely with the release engineering teams to learn the deployment process which involved learning Jira and Perforce. I learned a great deal learning this process, and especially enjoyed working closely with the engineer team and gaining a better insight into their world.
Examples of sites worked on
We regularly A/B tested the Green Dot site using Adobe Target. In most cases we would test various marketing messages and imagery. We implemented these tests using JavaScript code.
Brand Guidelines
Explorations of a website redesign homepage
Explorations of product page redesigns
GoBank website
SimplyPaid website
