AEM Template Design System
Challenge
Designing, building and maintaining the range of marketing websites that Green Dot owns has always been a challenge. The previous solutions involved either design and engineering launching and maintaining these sites, or an outside service translating designs into a CMS as needed. Neither option was very efficient however, being too time consuming, inflexible, slow to market or all of the above.
Process
We identified that a hybrid approach to building these websites was a way to be more agile. We would create design templates that could be translated into Adobe Experience Manager (AEM) by our contracted partner, allowing us to componetize blocks of web pages for re-use across many websites.
Solution
The result was a design system consisting of typography, colors, components and most importantly, micro templates in the form of "blocks", that marketing designers would use to design the websites, while our partner would templatize them in AEM. Customizations were defined in the design system and duplicated in AEM as well. Images, text, colors, spacing, and more could be configured in Figma, and the same done in AEM, resulting in a build once, configure in many different ways workflow. This allowed us to launch new versions go2bank.com, greendot.com, moneypak.com and greendotnetwork.com, all within 8 months.
