Rethink Data Viz
Presented to Intuit's VP of Design with the potential of further explorations
Purpose: This is the final project of my Intuit internship. After my internship ended, my manager presented my project to the VP of Design on Sep 10.
Categories: Data Visualization, Future Vision
Outcome: Create principles for Intuit's data visualization with two high-fidelity prototypes as examples.
Our customers have high expectations for the data in our products. Not only do they want to be delighted with animations and transitions, but it’s also important that they can quickly and easily see the value in the data. The designer needs to consider the entire experience, not just the feel and appearance of the chart or visual, but the real-world questions the customer needs the data to answer. We can delight our customers by delivering data in a beautiful, and understandable format.
Stage 1: Audit
At the early stage, I spent the first three weeks auditing current data viz principles displayed in Intuit's Quickbooks product, and some of Intuit's competitors (ZehoBooks, Xero, Wave, Slickpie, ONEUP). The audit process greatly helped me to understand the pros and cons of Intuit's current data visualization on their products.
Specifically, I did the following:
1. Audit data viz in Intuit products (what’s good/what’s not)
2. Audit data viz outside of Intuit (what works well/what doesn’t)
3. Investigate where we should take data viz
4. Start to think about what we could show/prototype
Some problematic data visualization examples
Currently, Intuit's Quickbook product does not have any official data visualization standard, so my next step was to create my own Data Viz principles. During this period, I did a lot of research in addition to the previous audit. After a whole week of careful considerations and getting feedback from my manager, I created six distinctive principles: Color, Immediate Insights, Self Explorable, Predictions, Multi-factor, and Unbiased.
From week 5 to week 8, I brainstorm possible data visualization formats and ensure they satisfy all my design principles. I got my inspiration from data viz books, journals, and websites such as "Flowing Data" and "Data is beautiful". In total, I created 12 possible low fidelity prototypes, sketched them, and asked for feedback from my colleagues.
After the intern showcase, I moved forward with 3 major concepts: Infographics, Motion Design, and Augmented Reality.
Half of the low-fidelity designs, for the full documentation please refer to the full deck.
Stage 4: Prototype
During the prototyping period, I spent the first two weeks developing the heatmap (infographics) prototype, and the last two weeks building the AR prototype. I barely started a scale-like motion design prototype, but I will continue exploring the concept in the future.
Prototype 1: Heatmap
Heatmap is designed to show an overall picture of a time-based dataset. By clicking and hovering on the graph, users could view a single dataset from various perspectives: a general yearly performance or a detailed hourly report.
The use case of heatmap includes income/expense visualization, working hours tracking, and more.
The color gradient includes three green colors as an indication of income levels: Light green means less income and dark green means more income.
The heatmap design includes a feature of showing predictions. The predicted value still has the same color as real data, but the opacity decreases.
Thus, users could visualize the difference between real data and predicted data, and make further decisions.
Since all squares are assorted by weeks, months, and quarters, it is very easy to visualize the daily/monthly performances in a whole year.
Instead of adding a second external factor, the heatmap focuses on exploring various dimensions on a single factor.
Users could catch the insights from yearly, monthly, daily, and hourly charts, and can choose how exhaustive they want the information visualization to be.
The heatmap design includes smooth transitions between different pages. Every square is hoverable and clickable. Users could hover on squares to see the income value for that specific day/month, or click to dive into the smaller hierarchy.
The representation of data viz is fairly straightforward because it only uses squares and numbers.
The insight from the heatmap is relatively obvious and objective.
1. Sketch File
My initial goal for the heatmap was to visualize a whole picture of a time-based dataset and delineate the correlation between various data.
For instance, from the graph on the left, users could observe that later months and later days in a month have higher values than other days.
2. Invision Prototype
I created an interactive prototype using Invision. In particular, when users hover on a specific square, the daily income along with total income will show up.
The feedback I got from the intern showcase included rethinking the structure of displaying data, such as differentiating weekdays/weekends, etc.
3. D3.js Prototype
After the intern showcase, I coded a fully interactive prototype. I chose the d3.js library because this was by far the most powerful data visualization tool for programmers.
In the following design critique, I presented my idea to the whole design system team. According to their feedback, the biggest problem was that the current design was too overwhelming to read, which led to my next revision.
4. Principle Prototype
To make the graph less overwhelming, I created a flow to display data in a hierarchy. Users can interact with the prototype and dig into various layers.
I attended the design critique again and presented my new prototype. Delightedly, most of the designers were pleased with the improvements!
5. Final Product
Prototype 2: Augmented Reality
I created this AR prototype to visualize inventory status. Without logging into the laptop, users could simply take out their phones to scan the QR code and the marker on the report page and have a glance at current inventory status for their businesses.
Users could also interact with the prototype to view prediction and to add more stocks.
I used three sets of the gradient to show net value levels for three different groups of stocks (In Stock, Low Stock, Out of Stock).
I used dark colors as higher net value and light colors as the lower net value
At first glance, it is visually obvious for users to have a general sense of the current inventory situation.
For instance, this user has a total of 10 inventories, of which 5 are in stock, 3 are low stock and 2 are out of stock. His/her next step would be to add more stock to the more profitable item (dark red box).
After scanning the QR code and then the marker, users can interact with the prototype in 2 ways:
1. Click on the boxes and check “estimated out of stock date” and “estimated loss per day”, (The chosen box will be marked as blue).
2. Click on “Add Stock” to navigate to a preset website.
The prototype shows “Expected out of stock time” and “Expected loss per day” information, where users click on a specific square so that they know what to do for the next step.
Current prototypes include 4 areas of data, with the potential to have more:
1.Number of items
2.Inventory Status (in stock, low stock, out of stock)
Using infographics (assume boxes are stock items), the AR prototype displays data in a fairly direct and objective way. There is little room for misleading customers.
1. Sketch File
Current inventory data visualization
My inventory data visualization design
During the initial auditing period, I was truly surprised by how simple and meaningless the current inventory page was, so I marked this page down and decided to revise the data viz if I can. I recreated the graph with the concept of infographics. In particular, each square represented one item, and the net value for each inventory was indicated by color. This design is also a perfect example of the "multi-factor" principle.
Updated Design Old Design
1.Number of items
2.Inventory Status (in stock, low stock, out of stock)
1.Inventory Status (low stock, out of stock)
2. AR.js Prototype
My manager suggested to me to turn the inventory graph into an AR prototype. Immediately after that, I spent a couple of days developing a low-fidelity prototype. I used AR.js library and a-frame for all entities and hosted the code on Github Page. In this way, users could simply scan the marker in a web browser and see the visualization on their phones. There's no need to download any apps in order to run this prototype.
I presented this prototype during the intern showcase. and fortunately was given quite a few praises. The only suggestions were to add more interactions, which I achieved in future development.
Since I had never used an AR library before, I spent a great amount of time searching for possible ways to add interactions. I also asked an AR engineer for help. As a result, I developed two interactions added to my prototype.
1. When users click on a box, this item's name and estimated out of stock time will be displayed on the screen.
2. When a high net value item is out of stock, the prototype will show an "Add Stock" option, and users could click the text and be navigated to a site to add more stock (currently preset to google homepage).