Internship

Rethink Data Viz

@ Intuit

ROLE

Design Technology

Motion Design 

Visual Design

Interaction Deisgn

DURATION

2019.6- 2019.9

4 months

TECHNOLOGY

Sketch, Invision, D3.js, React, AR.js, HTML/CSS/Javascript, Principle, After Effects

ACHIEVEMENT

Presented to Intuit's VP of Design with the potential of further explorations

Overview

Purpose: This is the final project of my Design Technology Internship at Intuit. 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

Project Prompt

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, as well as 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 was asked to: 

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

Stage 2:Principles

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.

Stage 3:Design

From week 5 to week 8, my main goal was to brainstorm possible data visualization formats, and make sure 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 in week 8, I moved forward with 3 major concepts: Infographics, Motion Design and Augmented Reality.  

Radar Chart

Use the radar chart to compare areas that represent earning and losing money. See annual data as a whole.

Infographics

Use the infographic to display the proportion of a certain dataset, such as a company's employee data. Filters include types, skills and years.

Motion Design

This scale-shaped motion design is built for comparing two factors (or more) by visualizing an equation during a time period. 

Heat Map

Show a whole year's data on one page and indicate correlations in between. 

Motion Design

Use dots to indicate transitions between separate categories. This graph is perfect for the showing process. 

Line Chart

Use icons on a time-based line to display important events in a whole year. 

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. 

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.

Color

The color gradient includes three green colors as an indication of income levels: Light green means less income and dark green means more income.

Prediction

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.

Immediate Insight

Since all squares are assorted by weeks, months and quarters, it is very easy to visualize the daily/monthly performances in a whole year.

Multi-factor 

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.

Self-explorable

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.

Unbiased

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

Due to the intern showcase event in week 8, 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/weekend, etc. 

3. D3.js Prototype

After the intern showcase, the next step is to code a fully interactive prototype. I chose the d3.js library, because this is 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

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.

Color

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

Immediate Insight

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).

Self-explorable

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.

Prediction

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.

Multi-factor 

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)

3.Net Values

4. Predictions

Unbiased

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)

3.Net Values

4. Predictions

1.Inventory Status (low stock, out of stock)

2. AR.js Prototype

A week before the mid-time intern showcase, 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. 

3. Interactions

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). 

Final Product

Takeaways

During the internship, I had the opportunities

to practice the following technical skills: 

 

Html/CSS/JavaScript

D3.JS/Plotly.JS

Sketch/Invision Studio/Photoshop

Principle/AfterEffects

React

Github Webhost

Augmented Reality

From the experience, my soft skills

have also been improved significantly, for instance, I...

Am able to present my idea to people who don't know my design

Gain practical experience in professional networking

Am used to work in the fast-pacing working environment

Learn to gain and use feedback from design critiques to improve

Am willing to learn new skills uber-fast 

LOVE to work with a real-world problem 

Get along well with colleagues 

Enjoy the way I work!!!!!

Intern showcase @ Intuit, some teammates were missing

Thanks for visiting! 

Contact: 

Email: yug068@ucsd.edu

Location: 

La Jolla CA, 92092

outline_email_white_18dp.png

© 2019 by Shirley Guo, Last update: 10/08/2019

Picture4.png