Budgets to Blueprints Website Case Study
The journey through building Budgets to Blueprints, an interactive learning resource teaching young adults about personal finance
Project Date
July 2023 — May 2024
Project Roles
Heaven Robinson | Lead Designer
Catherine Tran | Lead Researcher
Both team members contributed to the research, development and design.
Project Overview
Budgets to Blueprints is an online interactive website dedicated to helping students familiarize themselves with essential financial life skills, empowering them to make informed and responsible financial decisions. It features a gamified approach that merges trivia challenges with a choose-your-own-path home building storyline. Exploring the content-heavy field of finance through a website game, students dive headfirst into concepts like budgeting and loans, crafting their digital dream homes along the way.
Some key components of the project included:
- a design system with a brand style guide, user interface (UI) components and pattern library
- user research and testing
- a fully functional website
The website was developed using HTML, CSS and Javascript, with visual elements made in Adobe Illustrator and Photoshop.
The Problem
In a society where financial literacy is a critical skill, young adults often find themselves navigating a complex world without sufficient knowledge about personal finance. For instance, many teenagers are not financially prepared for life, with 74% of them not feeling confident in their financial knowledge and capability (MoneyTransfers, September 2022).
While they’ve personally felt the impact of major economic events like the 2008 recession and COVID-19, it doesn’t necessarily mean their financial knowledge has increased along with their exposure to financial issues. For example, personal finance resources remain heavily desired by 55% of college students based on this 2021 study by Mintel.
Budgets to Blueprints fills a need within the market by addressing the issue of financial illiteracy among young adults. This resource acts as a guide to get students comfortable engaging with financial topics and helps build their confidence as they begin their financial independence.
The Solution
We began the journey of creating Budgets to Blueprints back in the summer of 2023, when our team had the idea of building a digital learning resource teaching important life skills through gamification. After considering topics like health and emotional intelligence, we landed on creating a website focusing on financial literacy, aiming to teach and reach high school students and young adults.
The website idea then transformed to have the goal of taking learning to a new level and feature a story where students build a house (and their knowledge) through gaming and trivia. With the game, we wanted to break away from the traditional method of financial education through lengthy articles and video lectures. After conducting extensive competitor and market research, we found that our advantage was that we cover a variety of financial topics, while those products tend to only cover one.
As for the branding, we crafted a design system with clear guidelines for visual style and UI elements. This iterative process strengthened the brand’s mission and made the website and all its touchpoints visually cohesive. You can find the Design System here.
With the initial design elements set, we set out to build the Alpha, the first draft of our project and the first step to developing our final website. It was a rough ride navigating all the coding, but we managed to produce a functional draft of Budgets to Blueprints with home building cards and our “Trivia Terrace” where users challenge themselves to finance questions.
We also created a user experience (UX) research plan, a comprehensive guide designed to put our capstone project to the UX test. From hypotheses and personas to an interview script and analysis, we were prepared to collect actionable results to better serve our young adult audience. You can find our User Experience Research Plan here.
Moving on to the Beta, we created a polished draft of our final website, good enough to user test, demo and present at miniMerge. We continued developing using HTML, CSS and Javascript, and implemented updated guidelines from the second iteration of the design system.
In spring 2024, we hit the ground running by recruiting and conducting user testing. Below are some of our key findings. One quote from a participant that was the driving force for continued development was “[The website] is a strong idea…but needs to look as good as the idea.” The complete User Experience Research Report can be found here.
Then, work on the 1.0 version of the website began. I built out the remaining home building pages and added more visuals throughout the site following our style guide. Based on user feedback, we included gif animation and redesigned the question cards to make the game more engaging and visually appealing.
One big obstacle when developing the 1.0 was figuring out how to save the user’s progress throughout the game, from their home building choices to questions answered. After considering avenues like connecting to an external database and JSON, we landed on using localStorage as the website is ideally played once by each user. Below is an example in the code of how localStorage was used to keep track of the visits to Trivia Terrace and which questions were answered.
Once the trivia functionality was squared away, I got to work on figuring out how to save all the user’s home building choices and display them at the conclusion of the game. Still using localStorage, I added ids to each option and mapped out all the possible combinations in Javascript. I also created all 243 home combination images using Adobe Photoshop for the website to pull from based on the user’s selections. Below is the simplified process from selections saved in localStorage, to the function in Javascript, to the final home image.
In addition, a major pivot we had in this process was abandoning the idea of keeping a running score when users answered questions correctly to then use the points to make their home building choice. Among all the other design and development implementations, this idea did not seem feasible in the timeline. Instead, we shifted to keep the game lighthearted, with a focus on building your dream home while answering finance questions along the way.
The final touch to our 1.0 was making the screens responsive and optimizing for mobile. I went into CSS and Javascript to adjust formatting and to display a warning message when viewports weren’t optimal.
And with that, our 1.0 was done! You can find the final Budgets to Blueprints website here.
Results
Our team is proud of how far we’ve come, from the bullet point idea on a Google doc to a functional website educating young adults about personal finance. We’ve learned more about the importance of working early and often, as troubleshooting can really put a dent in the creative process and efficiency. Plus, the design system and user testing highlighted the significance of feedback and the crucial role of data in supporting design and development decisions.
As for next steps, we would love to revisit the running score element, but for now, Budgets to Blueprints is ready to play!
Final Deliverables
Budgets to Blueprints Website
https://budgetstoblueprints.com/
Project Deliverables and Supporting Materials
https://projects.nmi.cool/2024/em/budgets/
