Better Money
Habits
Educational Website Development
My Role
Day-to-day engineer and mentor to junior teammates
Developed and maintained cross-platform components
User research, prototyping, UI design and testing
Developer collaboration
Better Money Habits by Bank of America is an educational resource designed to empower users with essential financial literacy skills to achieve their financial goals, whether it's saving for the future, creating a budget, diving into investments, or purchasing a new home. In today's complex financial landscape, having a strong foundation in money management is crucial, and this project aims to provide the necessary knowledge and tools to make informed financial decisions.
To bring this initiative to life, we adopted a micro frontend approach, breaking down the project into smaller, manageable components. These components were meticulously crafted using a diverse range of frontend technologies, including HTML5, Handlebars, CSS3, SCSS, and JavaScript. We also harnessed the power of JavaScript libraries such as GSAP to infuse engaging animations into the user experience. To streamline development, we utilized Gulp as a task manager, automating processes like file minification, concatenation, image compression, and auto prefixing, ensuring a seamless and optimized user experience.
The Goal.
The goal of the Bank of America Financial Literacy website, "Better Money Habits," is to empower individuals with the knowledge and skills they need to make informed financial decisions and achieve greater financial stability. Through this online platform, Bank of America aims to provide a wide range of resources, tools, and educational content that can help people understand the intricacies of personal finance, including budgeting, saving, investing, and managing debt.
By promoting better money habits and financial literacy, the website ultimately strives to improve the financial well-being of its users, enabling them to make smarter choices and build a more secure financial future. It serves as a valuable resource for individuals seeking to enhance their financial knowledge and take control of their economic lives.
The Concept.
The Bank of America's financial literacy website, "Better Money Habits," is a valuable and accessible resource designed to empower individuals with the knowledge and tools needed to make informed financial decisions. This platform serves as an educational hub where users can explore a wide range of topics related to personal finance, including budgeting, saving, investing, and managing debt. Through a combination of interactive tools, informative articles, videos, and other engaging content, "Better Money Habits" strives to demystify complex financial concepts and offer practical advice for people of all financial backgrounds.
Whether you're a young adult just starting to navigate the world of finance or someone looking to fine-tune their money management skills, this website provides a wealth of information to help users build a more secure and prosperous financial future. It's a testament to Bank of America's commitment to promoting financial literacy and helping individuals achieve better financial outcomes.
The Design System.
Bank of America's financial literacy website, "Better Money Habits," boasts a meticulously crafted design system that mirrors the institution's commitment to empowering individuals with financial knowledge. The website's visual aesthetics are dominated by Bank of America's signature blue and white color scheme, instilling a sense of trust and professionalism in its users. The layout is intuitive, with a well-organized navigation menu, making it easy for visitors to find the information they need. Consistency in typography and iconography adds to the website's user-friendly experience, ensuring that the content is easily digestible for users of all backgrounds.
The design system extends beyond aesthetics, with a strong focus on accessibility and inclusivity. The website features a responsive design, catering to users across various devices, ensuring that financial education is accessible to everyone. Careful attention is given to the use of plain language and clear, concise content, ensuring that financial concepts are comprehensible to a wide audience. Overall, Bank of America's design system for "Better Money Habits" not only offers a visually pleasing experience but also makes vital financial information accessible and approachable, aligning with the bank's commitment to financial literacy and empowerment.
Accessibility Testing.
Accessibility testing for the Bank of America's financial literacy website, Better Money Habits, is a critical process to ensure that the platform is inclusive and usable by all individuals, regardless of their physical or cognitive abilities. This testing involves assessing the website's compliance with web accessibility standards, such as the Web Content Accessibility Guidelines (WCAG). Testers examine various aspects, including text-to-speech compatibility, keyboard navigation, and the use of alt text for images to ensure that people with disabilities can effectively access and navigate the site. The goal is to make financial education resources available to a broader audience, fostering financial inclusion and empowering individuals to make informed decisions about their finances.
In addition to meeting legal requirements, ensuring accessibility in the Better Money Habits website aligns with Bank of America's commitment to social responsibility. By conducting thorough accessibility testing, the bank not only complies with the law but also sends a message that it values diversity and inclusion. The testing process may involve user feedback and continuous improvement to enhance the user experience for those with disabilities. Ultimately, this approach demonstrates Bank of America's dedication to providing a level playing field for all its customers, fostering financial literacy and independence among a diverse range of individuals.