Problem
Old Legacy Database
In the current experience, users could only filter data between 2 data sets. For example, " get Gender_of_Traders () ; byLocation.Kenya () ". couldnt see how many traders in kenya were female that traded maize or getGender_of_Traders(); byLocation.Kenya().tradeCommodity("maize");
Poor User Experience
The filtering design was constrained by single-select dropdowns, lacking scalability and foresight for future improvements. Additionally, the exclusive use of bar graphs as a display is inadequate for in-depth exploration of correlations and distinctions across multiple datasets.
Solution
Filtering & Search
I designed new filtering components that include checkboxes for applying multiple filters simultaneously, breadcrumbs to track selected filter states, date pickers for specifying time ranges of aggregated data, and toggles for datasets with limited options, such as Gender (Male or Female).
Graphing
Negotiated with Engineering and opted to integrate a React D3 data visualization library that included the most popular graphing features requested by our users. Post-implementation, users could view data through tables, line graphs, scatter plots, pie charts, and enhanced bar charts. These updates included features such as hovering for tooltips and footnotes.
Data Retrieval
The final improvement included adding features for exporting, saving, sharing, and managing search history, aligning with best practices in data visualization. Previously lacking, these enhancements aimed to create a more centralized experience where users no longer need external screenshot tools post-query, nor repeat filters after a refresh. Instead, they can easily access and reuse past search results.
Related work
