The data science & analytics team at Costco had an existing report tracking gasoline sales volumes at all locations worldwide across different grades of fuel. However, the report lacked helpful visualizations, making it hard to understand and communicate user needs effectively.
2023
Sreedev Sidharthan
Yufan Guo
Vijay Singh
Figma
Power BI
UX Design
UX Research
During my internship at Costco, I was tasked with leading a project that aimed at improving the gasoline sales/forecasting dashboard, which lacked effective data visualizations and useful analysis tooling.
Over 10 weeks, I worked with the data science team to create a dashboard that is not only easy to navigate, but works as a tool that can help support purchasing decisions and can generate performance summaries. I conducted thorough UX audits, interviews, and affinity diagrams to pinpoint user needs and pain points, worked within the constraints of Power BI, and iteratively crafted low, mid, and high fidelity wireframes that incorporated frequent feedback from stakeholders.
The final designs successfully addressed key issues and introduced new features such as a designated page for location specific comparisons and analysis. Although the engineering team had to rework the designs in order to test in QA, this project initiated conversations on the potential benefits of a design guideline refresh to enhance the accessibility, usability, and functionality of future data reports.
Push notifications enhance user engagement and retention by sending timely, relevant content directly to users' devices. This helps keep them informed, encourages them to use the app more, and provides a direct way to communicate with users.
Each week, the data science team sent the gasoline purchasing team a CSV file containing upper and lower forecast thresholds for different locations and fuel types. Using this file, the purchasing team then had to make manual calculations to analyze the data. This was a problem because:
Without knowing the goals and purpose of each page yet, I conducted a UX audit focused only on the UI and usability. This helped me identify current pain points, needs, and key questions to include in interview scripts.
1.
Typography and labeling
Lacks type hierarchy and clear labeling, making the graphs harder to understand.
2.
Filtering
Takes up too much space and lacks useful features for effective analysis.
3.
Background
The busy background is distracting and takes focus away from the data.
4.
Space and separation
Not enough white space or distinct separation, making everything look and feel cluttered.
By talking to three key individuals — the product owner, lead data scientist, and gasoline central director — I gained a clear understanding of the product, goals, and current behaviors from each user.
Using an affinity diagram, I organized my findings and found key insights from the interviews. This process highlighted the core issues and which solutions should be prioritized.
Data metrics
Different visualizations, data customization, summarized metrics, and analysis tooling.
Decision support
A resource that helps make purchasing decisions
Strategic reporting
Summarized reports for executive purposes, regional filtering, fiscal/international views.
Using the categories from the affinity diagram and the features available in Power BI, I brainstormed potential features and updates to include in the new dashboard.
| Category | Features |
|---|---|
| Data metrics | - Date range filter - Additional graphs (donut, multi line, bar and whisker) - Heat map data table |
| Decision support | - Demand change filter - Comparing multiple locations |
| Strategic reporting | - Forecast line chart with confidence intervals - International map view - Key performance indicators |
| Dashboard updates | - Minimal color palette - Standardized fonts, spacing, and labeling |
We're dealing with large data and numerical values, so it can get overwhelming quick. By condensing, simplifying, and reorganizing the site map, we're making sure navigation is intuitive even to someone who may be accessing the report for the first time.
An updated site map with suggested features highlighted in blue.
To understand how to design effective data dashboards, I studied dashboards from Google Analytics and Shopify. This helped me learn common design decisions and best practices, giving me a solid baseline for this project.
Power BI has limited customizable options and some features require complex workarounds that are hard to replicate for future dashboards. For example, applying custom fonts requires updating a JSON file, but users can only see the font if it's already installed on their system.
To handle these limits, I learned more about Power BI through Dashboard in a Day, planned for simple, yet accessible graphs and tested accessibility on native fonts and numbers.
These skeletons helped me test different formats before creating mid-fidelity wireframes, making it easier to plan section placements. I then reviewed them with my manager and got approval to proceed.
To start off wireframing, I first created the base template and established the non-negotiable elements, then went on to develop various data visualizations (molecules), both small and large.
Feeling confident with the structure skeletons and elements, I experimented with different combinations, created 14 variations, and compiled them into a document and sent out the first design review.
I treated these high-fidelity wireframes as minimum viable products, including only necessary elements that could be shipped quickly. I explored colors, made the changes, and compiled them into another document for the second design review.
To start development and stay on track, these designs were nearly final. The second design review mainly focused on finalizing the color palette, data visualization types, and small adjustments such as keeping the date range filter within the graph container.
After a final review with my manager, we confirmed these designs and presented them at the third design review with the PM and engineer working on the Power BI implementation. A dashboard with data analysis tools that help make purchasing decisions and view high-level summaries.
The forecast summary page showcases a high level overview of gasoline sales and forecasts in comparison to last year's numbers.
| # | Initial problem | Solution |
|---|---|---|
| 1. | Dashboard felt unorganized and the background is distracting | A cleaner user interface with better labeling, separation, and a minimal color palette |
| 2. | The filters tab was cluttered and took up too much space | Sectioned dropdown slicers with better placement |
| 3. | Unable to forecast for upcoming months | Confidence interval that forcasts "x" months in advance, from 75%-99% |
The planning page is a more granular display of sales performance by location, fuel type, and/or date range.
| # | Initial problem | Solution |
|---|---|---|
| 1. | Cannot look at data in a specific time frame | Relative date range slicer with the ability to analyze data given time frame |
| 2. | The graphs are confusing | Updated category labels, legends, data titles, and added more data visualizations |
The analysis page is specifically for comparing data between multiple locations. An example use case would be comparing the performance of a new gasoline station to others within a 5-mile radius.
| # | Initial problem | Solution |
|---|---|---|
| 1. | Unable to compare data between two locations | A designated page just for analysis, ability to compare more than two locations |
| 2. | Unable to adjust forecast data depending on outside factors | Demand change slicer that can adjust data up or down "x" percentages |
For the dashboard to pass QA, the engineering team had to redesign it to fit Costco's current design guidelines. Despite some design changes, substitutions, and a fixed 16:9 aspect ratio, the usability and features of each page remained true to the initial proposals.
This was my first time designing within software limitations, and honestly, it wasn't as bad as I thought it was going to be. Although I had to scale back on ambitious designs, I learned so much more about designing for data, like tabular spacing or using different line styles for accessibility. Overall, this project challenged me to adapt, compromise, and continually learn, and I believe I became a better designer from it.
A huge shoutout and thanks to my team at Costco—I now have very high standards for what constitutes as good data design.