2023 UX DESIGN DATA ANALYTICS

Costco Gasoline Sales Forecasting Report — Optimizing Dashboard Tooling

Overview

BACKGROUND How might we improve the forecasting report in order to make it a more effective tool for stakeholders and users? The data science team has created a Power BI forecast report for gasoline sales volumes at all Costco locations worldwide for all grades of fuel. The current report only displays the raw output and has no data visualizations that can effectively communicate different user needs and stories

For this project, I was tasked to develop designs for an updated dashboard that included different data visualization views and new data analysis tools.

Internship project, 10 Weeks (January 2023 - May 2023)
THE TEAM Working with the data science and analytics team at Costco Without having much data science experience myself (other than taking a class in college), the Costco data science and analytics team never hesitated in helping me understand all things data science, from SQL to Power BI, and how to design effectively for data. The department is responsible for the reporting tools for all of Costco and their subsidiaries, but during my time there, I mainly worked with the gasoline purchasing/buying team.

Team: 1 ux designer/mentor, 1 data science/analytics manager, 1 product owner, 1 gasoline central director, 2 data scientists/engineers, 1 ux design intern (that's me)

Tools: Figma, Power BI, Google Suite

Project start

PROJECT MANAGEMENT Roadmapping With only 12 weeks alloted for this internship project, I wanted to make sure that I was properly organized and prioritizing the correct goals to not only finish in time, but also to deliver a working prototype/product. With this roadmap, I was able to roughly plan out what I wanted to achieve during each week and as a way to communicate my progress with my managers.
CURRENT STATE UX Analysis: Gasoline sales forecasting dashboard To start off with this project, I wanted to do a ux analysis of their current gasoline forecasting report and make note about any areas that could be improved. Not knowing about the goals and function for each page yet, I critiqued only based on ui elements and basic reporting usability. This ux analysis helped raise questions about aspects of the design as well as current pain points and needs, contributing to the user research script following.

Research methods

METHOD #1 Interviews: Affinity diagram I conducted research interviews with 3 individuals — a product owner, the lead data scientist, and the gasoline central director — all of whom have different perspectives and use cases for the gasoline forecasting report.

As a way to summarize all my findings and find connections, I created an affinity diagram. This method allowed me to clearly establish which pain points should be prioritized versus the features that could be introduced at a different time.
METHOD #2 Information Architecture: Dashboard site map Being that this is a reporting dashboard, it’ll consist of large data and numerical values that if not organized correctly, will be overwhelming to the user. Through the info architecture discipline, I wanted to find areas to simplify in the current site map as well as see where new features could be properly placed.

I believe good ux is intuitive and the report should be easy to navigate, especially for those who are accessing it for the first time.
This is the site map for the current gas sales dashboard.
Here is the updated site map with suggested features outlined in blue.

Before we design

PROJECT DEFINITION A comprehensive and user-friendly solution for analyzing gas volume/price data to help support purchasing decisions. The gasoline sales forecasting report was essentially abandoned and no longer ran current data. Instead, the buying team received a weekly forecasting CSV that entailed the forecast data values, upper and lower thresholds, locations, and item numbers (fuel types).

The updated reporting dashboard will address current limitations in the decision-making process by providing features such as better region filtering, actual vs forecast values comparison, anomaly highlighting, and customization options.
DESIGN FRAMEWORK Exercising the lean ux design cycle Using lean ux for this project was incredibly useful due to its rapid iterative cycles and collaborative work environment. Through this design framework, I was able to concretely establish achievable goals and make detailed design decisions to ensure a smooth transition from design to development.
DESIGN CONSTRAINTS How do I design in Power BI? Microsoft Power BI is Costco’s choice of data reporting software and power bi does not have many customizable options for dashboard creation. For example, if I were to use a specific font not native to power bi, I would have to follow a very complex workaround that’s not very intuitive to replicate for future dashboards/reports. I took these step to be able to design with these constraints:
  • Learned the basic design functionalities of power bi through their training course, “Dashboard in a Day”.
  • Decided to plan for simple and clean designs that could be easily implemented and templated for future data reports.
  • Tested the accessibility of power bi’s fonts by making sure the numerical values were tabular figures and that the typeface letters were distinguishable from one another

Iterations & feedback

DRAFTING Structure wireframes Because I was thinking of adding more features such as KPIs and better filtering options, I wanted to test out different placements before starting low fidelity wireframes. Taking inspiration from successful data dashboard platforms such as Google Analytics and designing for data visualization best practices, I drafted structure wireframes below.
LOW FIDELITY MVPs and explorations After getting clearance on some of the structural elements, I then started on the low fidelity design process for each report page. I wanted to explore as many appropriate data visualization graphs as I could; showing different presentations of the same data set.
FEEDBACK Design review #1 For design reviews, I sent out an outlined design document consisting of the different types of data visualizations and explorations; depending on the type of feedback, I would frequently schedule meetings to discuss further.

During this first review, it was made apparent that due to scope, the proposed features such as KPI’s and region map views were not viable. So moving forward with the next set of iterations, I worked on the following:
  • Create Power BI data graph mocks, making sure that the graph components are distinguishable from one another; include legends and line variety.
  • Focus on designing features that could be implemented quickly, not needing to create new SQL functions.
  • Start exploring data accessible color palettes that match well with Costco’s branding.
HIGH FIDELITY Final page iterations I approached these final wireframes as minimum viable products, only keeping the needed visualizations with few new features or graph choices.
FEEDBACK Design review #2 In order to start development and continue to remain on track, these designs were pretty much final and just needed to be signed off. The second design review consisted of very small changes/suggestions for functions specific to varying gas prices (one of which got pushed back to consideration after I left). Majority was more pleased with the vibrant color palette and primary use of line graphs and that is what we went forward with.
PROPOSED DESIGNS Final approved dashboard pages and features Below are the final designs that addressed and improved user pain points from the current gasoline forecasting report.
The forecasting summary page showcases a high level overview of gasoline sales/forecast in comparison to last year's numbers.
The planning page is a more granular display of sales performance by location, fuel type, and/or date range.
The analysis page is a new page specifically for comparing multiple locations to one another. Primarily for use cases such as how a new gasoline station is performing versus the neighboring station.

Design system

GRIDS, FONT, & COLOR Explorations and working with Power BI guidelines Way before designing, I visited Power BI to see the design constraints I was to be working with. I made sure to convert Power BI’s grids, typefaces, and font sizes on Figma so I wasn’t designing totally out of its capabilities.

In development

POWER BI PAGES Different design, same usability Because I designed outside of Costco’s design guidelines for data reports, it’s not allowed to be put through the QA process. Since this is an active report and is needed to perform purchasing duties, the engineering team had to re-create my design to Costco’s standards.

Other than the obvious design change, the page’s usability remains the same as the proposed design. The only thing really different would be some substitutes to the date and demand change slicers (this is due to issues with retrieving data when using those specific slicers) and the pages being strictly 16:9.
The forecasting page, implemented the new confidence intervals and relative date range slicer
The planning page, implemented the new donut graph, relative date range slicer, and demand change input
The analysis page, implemented the multiple line graph, relative date range slicer, and demand change input

Handing off

RECOMMENDATIONS Updating Costco's Power BI design guidelines Costco’s current Power BI design guidelines needed some work and this project was kind of a glimpse of what reports could look like if they were refreshed. During my final presentation, I strongly advocated for a new user friendly design guidelines. That being said, I’m happy to have contributed to a future project for the product team.
RE-DO If I were to do this project over again... I would dedicate meeting time for design reviews rather than sending over design review documents; quicker feedback and room for open discussions.

Retropective

WHAT I LEARNED... ‍Working with design constraints is very feasible ‍I was very fortunate that in my past experiences, I mostly had free rein on the designs. Although this project let me explore outside of Costco’s design guidelines, it was my first time being limited to design to a software’s capabilities. And honestly, being constrained wasn’t as bad as I thought it was going to be! I may have had to omit using my fonts of choice, but I also learned about the importance of tabular spacing and letter accessibility. Costco overall improved my ability to adapt, compromise, and educate myself on things I’m unfamiliar with.
NEXT PROJECT: ‍WBEZ Browse Screen