Data scientists at Capital One wanted to have a quick and easy way to visualize large amounts of data. Their current method was manually looking through thousands of PowerPoint slides for a particular view. As you can imagine, the need to have an easy-to-navigate yet powerful data visualization web app was great.
Initially, the goal was to extend the functionality of an existing internal web app to meet the needs of the data team. I learned the existing app’s infrastructure, API’s, and database design before constructing a new graph prototype within it. I learned Angular and D3.js to make frontend code changes but also learned Python, Django, and database design to understand how data was being managed in the backend.
Due to the client’s time restraints and new requirements, they no longer proceeded with the web app integration. Instead, as a team we decided to create a new application that uniquely meets their needs. It must have:
- Easy navigation over different views/plots
- Easy to download plots
- Easy to download data behind a plot
- Automatically adjust to newly added/removed values in data table
- Low maintenance efforts
Together with other developers, we researched the best frontend tools to create this new app. In the end, the team decided to use Angular and Plotly.js for the frontend framework (and Django for the backend).
Using my past experiences working on projects from conception to maintenance, I also guided this clients’ project workflow. I gathered project requirements then proceeded to lead UX efforts in designing the app. I created wireframes of my designs using Sketch.
The same app is meant to be used for multiple models, all shown at once on the dashboard once the user logs in. An idea I had for future development is to add a “Bookmarks” section within each model for users to quickly access a particular view.
Because of the way the data is organized, users must make an initial selection to proceed to the next view.
Afterwards, the page refreshes and this plot view is displayed.
Most notable is the filtering mechanism in the left sidebar. The challenge was finding a solution that could handle the dataset’s large number of granularities. They had 8 levels of filters! As a result, I proposed this 2-filter sidebar where the user must first select a general dataset (Subprime, Nearprime, etc) before the finer granularities (View, Vintage, etc.) for that particular set appear. The specific filters are dynamic and change depending on the general dataset that was selected. They could also change depending on other filter selections. For example, “Year” and “Quarter” will only appear if they are selected within “Vintage.”
The plots are instantaneously generated on the right side depending on the user’s selections.
Since this project is still ongoing, please check back for the final update.
Oct. 2017 – Present