Product Designer @ Omega Point
Designed several new features for a React-based online quant investing web app. Created wireframes and Axure interactive prototypes while working with developers to roll-out new functionality.
New Ann Arbor Area Community Foundation Grants (AAACF) Visualization
The Ann Arbor Area Community Foundation has data on grant donors and the distribution of grants funded throughout Ann Arbor. We partnered with AAACF over several months to set up a data management plan and prep their data in time for the DataDive weekend. The visualization created was co-created with AAACF to help them understand their funding acquisition, distribution, and impact.
HTML, CSS, JavaScript (jQuery, JSON, leaflet.js map library), CSV parsing and JSON schema
Data assessment and project goal setting, Data management lifecycle, data cleaning and analysis, data workshops for beginners
During the A2DataDive, I performed a data interview with an AAACF representative as a way to understand her project goals. I unpacked her data needs and transformed these ideas into product requirements. This including presenting the representative with quick sketches of various dashboard styles that presented the data in various dimensions: spatial, temporal, and categorical.
Following the above data goal setting worksheet, my team worked with our partner organization to perform an on-site data assessment. Afterwards, we determined appropriate research questions that could be answered given our partner's existing data. These are the research questions:
As a team, we decided to visualize AAACF's data onto a map, showing distribution of grants by zip codes, filtered by time and 'field of interest.' Our team graphic designer compiled the sketches into a final front-end visual design, including following the color scheme already employed by the AAACF brochures and logo for a more branded look. I worked with another volunteer to develop the visualization.
I provided the initial set of JavaScript libraries that we would end up using for the development of the dashboard. This including introducing the team to jQuery.js, d3.js, SHPE files for the map, and JSON for the data. As we continued with our process, we included leaflet.js, jQuery-ui.js, and nvd3.js
Once we started development, I wrote helper functions in JavaScript that would perform the calculations and filtering of the JSON grant information data (as converted from the original .csv format). I also wrote the HTML and CSS required for the 'field of interest' filters, along with the associated jQuery script that would trigger the data filtering process once the filter was instantiated.
The final AAACF dashboard prototype can be viewed by visiting the dashboard here. (please allow a few seconds to load)