Dynamic Marketing Component
Designing a versatile card component for in-app marketing that fits Greenlight’s design system standards. Greenlight is a family banking app & debit card for kids that offers savings and earnings features that teach financial responsibility.
Team: 3 Product Designers + 1 Product Manager
My role: Design collaboration, Handoff, Presenting
Design system
〰️
Handoff
〰️
Business goals
〰️
Design system 〰️ Handoff 〰️ Business goals 〰️
Problem
At the time, Greenlight had 4+ disparate marketing patterns across the app. As our design system and app evolved, these patterns not only looked chaotic but were also difficult to update and test. We needed to quickly provide the engineering team with an updated component.
How might we design a new card component that is functional, easy to use/test, and design system compliant?
Brainstorming
Along with our design system lead, we brainstormed potential UI and requirements. Based on our competitors, we felt strongly that the card needed to be dismissable to minimize users' frustration and maintain a premium feel. I presented options to our PM partners to gather feedback and ensure alignment.
The new component had to be:
ADA-compliant and legible
Able to be dismissed
Dark mode compatible
Eye-catching (for conversion)
Flexible for single or multiple cards
Seamless with the updated app UI
Solution
After a few rounds of iteration, we designed a versatile solution that allowed a marketing image, title, body sentence, and call-to-action. The dynamic width of the component also allowed for it to appear as a carousel, with multiple cards, and alone.
Component Specs & Handoff
The new component consisted of a few existing design system patterns and elements. We made sure to specify them as well as allowance for dynamic text sizes, character limits, padding, and functionality.
The new component could also be paired with CRM software that allowed our marketing team to assign an image, text, and target cohort to each test.
Impact
Business & Engineering
Saved 2+ sprints of engineering time per a marketing test.
5+ pts conversion than the original designs when tested.
Customer Experience
Improved the premium quality of our app and decreased frustration by allowing ads to be dismissible when necessary.