Role: Product Design Director (player/coach)
Collaborators: UX Designer, Illustrator/Animator, Content Lead, Product Manager, Development Lead
Collaborators: UX Designer, Illustrator/Animator, Content Lead, Product Manager, Development Lead
Addressing the knowledge gap
The knowledge gap for financial literacy is a significant issue, particularly for K-12 learners in underserved communities. The lack of access to resources and learning opportunities hinders their ability to make informed financial decisions later in life, perpetuating financial inequality cycles.
The knowledge gap for financial literacy is a significant issue, particularly for K-12 learners in underserved communities. The lack of access to resources and learning opportunities hinders their ability to make informed financial decisions later in life, perpetuating financial inequality cycles.
We designed a suite of desktop and mobile-friendly interactive digital courses to equip students with the knowledge and skills needed to navigate their financial future. These courses address various financial concepts such as saving, credit management, cryptocurrency foundations, the connection between money and mental well-being, and more. One of the primary goals was to ensure the long-term impact and scalability of our solutions, avoiding the need to reinvent the wheel for each new learning experience. To address this, I led a team of designers and collaborated with other team leads to create a scalable suite of digital courses and tools to increase course output exponentially, getting more tools in front of these communities quicker and more efficiently.
First, we identified and solved for scalable solutions through UX and Design System updates
Unique K-12 Design System Branch: We developed a branch of EverFi's core design system specifically tailored to the K-12 audience. This branch incorporated age-appropriate color palettes, UI elements, and iconography, promoting visual consistency and brand recognition across various courses.
Unique K-12 Design System Branch: We developed a branch of EverFi's core design system specifically tailored to the K-12 audience. This branch incorporated age-appropriate color palettes, UI elements, and iconography, promoting visual consistency and brand recognition across various courses.
Interaction Pattern Library and Course Rhythms:
We created a library of patterns and course rhythms. The library included a variety of layouts, gamified interactions, interactive calculation tools, and more. This approach eliminated the need to create bespoke interactions for every course allowing them to be reserved for unique moments, saving significant time and resources.
We created a library of patterns and course rhythms. The library included a variety of layouts, gamified interactions, interactive calculation tools, and more. This approach eliminated the need to create bespoke interactions for every course allowing them to be reserved for unique moments, saving significant time and resources.
User-Centered Design: We conducted UX research to test character styles, story narratives, and interactions to make sure they resonated with the middle and high school age groups. This user-centered approach ensured the overall design language and character development were engaging and age-appropriate.
We then worked with content leads to develop relatable story narratives and character archetypes
Building a Character Universe: We created a universe where characters and their narratives intersected throughout different courses. This resulted in a library of over 100 characters with interconnected storylines. We worked with the Creative Art Director to build the library efficiently by creating characters using the "Hannah-Barbara" approach. This meant making the character design process modular by reusing pre-drawn components to optimize efficiency. This allowed us to produce a high volume of characters quickly, while on tight timelines.
Despite that guardrail, we were still committed to giving each character some unique attributes to ensure students from all walks of life could see themselves represented in these courses.
During projects, we collaborated closely with content design leads and product managers to ensure consistent storytelling, engaging subject matters, and a strong level of diversity throughout the different courses. We created our own Financial Literacy Universe.
The above represents a sample size of the entire character library which reached upwards of around 100 characters.
Impact: These solutions yielded significant benefits
Increased Efficiency: The efficiencies that we incorporated resulted in a 25% increase in course output productivity. Having established systems for managing interactive patterns, character stories, and design elements facilitated transparency and collaboration across multiple teams, enabling them to work on various courses simultaneously.
Improved Scalability: The reusable systems and streamlined development process allowed us to scale production efficiently, reaching a wider range of students with crucial financial literacy knowledge.
Enhanced Learning Experience: The combination of engaging narratives, interactive elements, and a user-centered approach fostered a more effective and enjoyable learning experience for students. 98% of teachers said their students found the content engaging, interesting and helpful.
But don't just take my word for it, check out the video below to hear testimonials of students and teachers who've experienced the impact from one of our middle school courses about saving, done in partnership with Varo Bank.
