Senior Capstone Project
Democratizing Financial knowledge.
Overview
This project embarks on a mission to transform the Survey of Consumer Finance (SCF) – a valuable set of financial data collected every 3 years by the Federal Reserve – into an accessible and engaging experience for everyone.
Traditionally, the SCF's vastness – encompassing an average of 250 variables and more than 20k rows of data in each year’s extracted dataset – can be daunting to navigate, even for seasoned researchers. This web application aims to bridge this gap, unlocking the power of the SCF for a wider audience.
Live site unavailable right now
Understanding the gap of existing tools.
Currently, two SCF data exploration platforms exist: the Statistical Data Application (SDA) and the interactive chartbook. SDA boasts advanced analysis tools like correlation and regression, yet untrained users find it daunting. Conversely, the chartbook offers simple data visualization but lacks depth for rigorous exploration. Downloading the raw data for personal analysis is an option, but deciphering the variables requires constant codebook reference.
Understanding user needs.
To understand the needs of users unfamiliar with SCF, I presented the interviewees with a scenario where they needed to find the average household income by education level using SCF data, simulating basic data exploration. Additionally, I conducted secondary research through competitor analysis and industry articles to gain a broader understanding of user expectations and existing challenges.
Guide to a Better SCF Experience.
By stepping into the shoes of these personas, I was able to empathize with user pain points and identify key opportunities for improvement. Robert's frustrations pointed towards streamlining workflows and enhancing data accessibility. Priya's struggles underscored the need for intuitive navigation and simplified visualizations.
Design goals:
Streamlined Access to Knowledge:
- Intuitive navigation: Design a hierarchy that prioritizes frequently used features and offers clear pathways to deeper levels of information.
- Contextual explanations: Integrate dynamic tooltips and hover-over info cards to quickly clarify terms and data definitions.
- Drill-down capabilities: Allow users to explore the data by navigating through hierarchies and breakdowns.
One-Stop Platform:
- Integrated tools: Allow users to perform calculations, compare data sets, and export findings within the platform for a seamless workflow.
Storytelling and Guidance:
- Persona creation: Allow users to create or use a set of pre-designed personas to explore the dataset.
- Interest-guided insights: Provide relevant SCF data specific to the chosen persona's circumstances.
Prioritizing feature
Driven by the wealth of information within the SCF dataset and a deep understanding of user challenges, I've prioritized the development of intuitive data exploration and analysis tools.
Mid-fidelity prototype
This Mid-fidelity prototype showcases a user flow that guides users from pinpointing their interests to tailored data exploration(the data exploration page dynamically highlights variables related to user-chosen interests), and analytic tools.
Usability study and findings
Refining the design
Fueled by insights from usability testing and inspired by innovative approaches to data visualization from https://nfp73.ch/de, I redesigned the way users explore variables within the SCF dataset. Instead of traditional lists, I’ve introduced an interactive map of variables, offering a more intuitive and engaging experience. I also simplified the interface of the analysis page, allowing user to perform desired tasks easily.
Product mockups
Front-end
- HTML
- module CSS
- JavaScript
- React
- Framer Motion
Back-end
- Node.js
- Express.js
- MySQL
- Sequelize
Deployment
- Azure
Navbar
The navbar features a rounded shape that highlights the current page. This shape follows the user's cursor as it moves across the navbar. When the cursor leaves the navbar, the shape returns to its position on the current page.
Variable map
The variable map, created with d3.js, is designed to represent SCF data in the form of a radial tree for visual clarity. When a user hovers over a node, the variable's descriptive details are displayed. Furthermore, clicking on a node reveals the names of its immediate child nodes. This interaction is intended to simplify the process of searching for specific variables within the data set.
Analytic tool
This user-friendly interface allows users to visualize and analyze topics of their interest. Users have the option to choose up to two distribution variables. Additionally, they can independently select how each distribution method is displayed. For instance, if the chosen distribution method is age, users can specify which age groups they want to see. They also have the capability to select the data's unit and the range of years it covers. Finally, users can export their visualizations. The entire user interface is integrated with the backend, triggering queries based on the user's selected data visualization methods.
GPT helper beta
OpenAI's recently launched Assistant API has enabled me to create an interactive assistant that can answer queries about the SCF dataset, including specific questions such as “What is the average income among people who are younger than 35 years old?” Currently, this assistant is in a training phase, so its responses might occasionally be inaccurate or unpredictable.
MySQL
Since the SCF lacks an API, I need to create a custom RESTful API. This will enable users to make queries through the frontend UI. I've chosen NodeJs for its compatibility with MySQL, which will serve as the database for this project. In MySQL, the SCF data will be organized by year, mirroring its original structure.
RESTful-API
Express.js, known for its minimalist and adaptable design, complements Node.js effectively. For this reason, I've selected Express.js as the framework to develop my API. Furthermore, by integrating Sequelize, a powerful ORM, I can write queries for the MySQL database more efficiently and with greater ease.
Microsoft Azure
I chose to deploy my web application on Azure by the fact that NodeJS is developed by Microsoft and Azure was providing free credits. The transition of my local MySQL database to Azure's MySQL flexible server was a smooth process. Additionally, deploying the web application on Azure proved to be a straightforward task.
User Research Challenge: Limited awareness and use of SCF.
- Solution: Focus initially on common tasks like data exploration and analysis during interviews. This approach not only aligns with more familiar activities for users but also helps in investigating potential solutions.
The web app significantly simplifies the exploration of the extensive and complex SCF data. It achieves this by providing an intuitive interface that smartly organizes and presents information, making it more accessible to a broader audience.
Adding more SCF data variables to the web app, making the GPT helper more accurate by giving it more data and specific training, and improving accessibility of the web app.
Technical Skills Acquired:
- Gained proficiency in Framer Motion, Node.js, Express.js, Sequelize, D3.js, and Azure. This diverse technological skill set broadened my development capabilities.
More projects
Design and develop an informative and community-representative online presence for Planet Longhorn.
UX case study for a floral arrangement app, enabling users to design customized arrangements for various occasions.
