Design Systems for Data Products

Nov 28, 2017

–

1:30 pm

–

Alamo Drafthouse New Mission

Linh Yao Pham

Product Designer

Trifactor

Themes and patterns in the design and application of systems for data products, analytic tools, and visualizations.

Transcript

Una Kravets:

So, I want to introduce our next speaker. Our next speaker is Linh Yao Pham and she's a product designer at Trifacta. She studied computer science at Boston University and specialize in applications, analytics and visualization. Last night, she told me she was a data nerd. Previously, Linh was a design lead at Salesforce. Despite her technical background, she describes herself as a design.

Please join me in welcoming Linh to the stage.

(Applause)

Linh Yao Pham:

I'm Linh. There it goes. Now you guys can hear me. Hey, guys. Hi! That's me giving you guys a hug. I hope you guys are having a great time. You know, I've been to a lot of tech and design conferences. I don't think I've ever seen one where the lineup of speakers were predominantly women, so hats off to Jina for pulling that off.

(Applause)

Linh:

Thanks to you guys for being here. On that note, I'd like to share, like, a personal story with you guys. I started my career in academia, at Boston University's information technology department. Now the IT department was in the same building as the math and computer science department and in the basement of this building, somewhere, there was a super competing cluster that was running the physics department's research on I think it was colliders. It should come to no surprise to you that I was among the 5% to 10% in the building at any one given point in time. You get used to it, after awhile.

Anyway, I was also only 19 years old. A couple of semesters in, scholarships fell through, family was going through a hard time so I took on a full time staff position sorry, I'm echoing and it's driving me crazy. Is there anything I can do? Sorry about that. I guess I'll keep going and try to adjust. So, I was the youngest full time employee they had ever hired. As you can imagine, it was kind of an intimidating situation and place for me, at the time. I made it a habit of mine, very early on in my career, that whenever I needed to muster up the courage to speak up and make my thoughts and voice known, I would turn to data. I guess you can say I found my professional voice through data and since then, I've dedicated my career to trying to make it more accessible so I'm really excited to talk to you about data products.

Before we get rolling, though, I have a burning curiosity about you guys. I'll be honest, I've been stalking you through the channels for the Design Systems groups. There are some seriously, ridiculously talented people in the room so it's very humbling to be standing here in the room. I'd like everyone to stand up for a second. Just for a second.

Okay. Thanks, guys. Okay. If you are currently not working on the Design System, if you don't have a Design System and if you don't think you need a Design System, please have a seat.

(Laughing)

Linh:

Okay. So, like, one person who just sat down. What are we doing here?

(Laughing)

Linh:

I was not expecting that. Well, welcome, I applaud your curiosity. Let me know if there's anything I can do to help. To everyone else who's still standing, if your Design System does not contain components for data visualization or analytic tools, please have a seat.

Wow. There are a lot of people standing. Where are your Design Systems? I haven't been able to locate them. You can all sit down now. I was just curious because I've been digging around. I'm not seeing any out there.

Okay. So, let's get rolling. Make sure this is working.

Okay. So, let's start off on the same vocabulary. What are data products? According to DJ Patil, a good definition of a data product is a product that facilitates an end goal through the use of data. This definition sounds good to me, so let's go with it. By this definition, wearables, self driving cars, you know, your thermostat, those are data products, too.

Today, I'm going to be talking primarily about web based data products and primarily analytic software.

Okay, what does it mean to have a Design System for a data product? Are there examples? I did do some due diligence, which is why I had this curiosity. Uh oh.

Can you go back a slide?

Okay. So, did a little research. G E has a great one. They built their on chart and framework on D3, I B M. Now that I know you're out there and that's all fine. I suspect you're still working on yours and I suspect that because we're still working on ours at Trifacta, in development. And, before the Trifacta, I was at Salesforce analytics and we had our own internal design system on the analytics team.

So, after my disappointing search for more data Design Systems, including those that belong to data products, but don't address data design problems at all, I pondered over this question, why aren't more Design System being me, I try to break it down to the different design disciplines involved with making a Design System for data products and you can find values based on their output and impact. Here's my oversimplified assumption. Design Systems design values beautiful, scalable products with strong brands and vision. User experience is replacing painful problems with delightful experiences. Data design is about discovery, insight, solutions and meaning derived from data. So, I traverse between those two worlds and if you're working on a data analytic platform or application tool, you probably sit on this boat, too. So, confession. There's an impostor among us. I am not a Design System designers, so this is a design system conference so I really wanted to talk about Design Systems. I'm a user of Design Systems. I've contributed to them. So, you can hear out my talk from the perspective of your number one customer.

Very prodesign systems. Accelerated my workload, or productivity. Creating a Design System from the user experience of data is very much a team effort. It's very rare you'll find a designer who can traverse through each of these disciplines and operate at the highest level. I mean, each of these disciplines takes a lot of practice and experience to be good at and frankly, I think these folks don't exist with the exception of my friend and Trifacta colleague, the creative, hardworking genius, Giorgio Cornelius. There are no conflicts. They're very complimentary. You can have a beautiful, scalable product with strong, branded vision while replacing painful problems with delightful experiences and offering discovery, insight, solutions. So why aren't more Design System supporting the deeper problems of data design then?

I think one of the reasons why is data design is hard and not because most designers aren't trained in stats. The hardest problems in data design aren't the mathematical ones. They're the human ones, the ones that require us to reference psychology, cognitive science, fields that are trying to evolve our understanding of human perception. I mean, consider what we visual, data. We visual data because visualizing amplifies our receptivity. 70% of your nerve receptors are from sight, making vision the most power and efficient means of consuming information, for most people. Understanding the different ways in which people perceive and learn and think and process and make decisions, that's just a general design problem. I think it's one of particular importance when you're designing for data analysis or one that is collecting behavioral information. Somebody has to make sense of all of that.

And I think it's these human factors that makes it incredibly difficult to reduce design problems down to a logical system. So, now my question is that will frame the rest of this talk how do we extend Design System to better support the user experience of data and the application of visualization and analytic tools in our products? I'm not claiming to have the full answer on this, but I spent some time thinking about some of the design problems I've run into time and time again for explanatory visualization and I came up with six ideas of ways you can approach your Design Systems design to help designers produce better data products. You can think of them as suggestions, thoughts, ideas.

Some of these ideas are very specific to data design and some of them can be applied to any Design System.

Chances are good, most of you are already considering things like this in the design of your Design Systems.

Okay. These are the first five. I'm going to go through each of them, one by one, with some quick examples.

So, number one, identify the cognitive preferences or objectives of your primary users. Understanding how your primary user thinks and processes complex information, quantitative information. It doesn't just help the data designer, it can aid you in shaping your brand and design principles, guiding your approach as you create usable patterns. And if only if it were a binary problem, as easy as putting people into one or two categories and we all have a habit of doing that. Most data companies I've consulted or worked for, they tend to group people into technical or nontechnical. The truth of the matter is most people fall somewhere along a spectrum and characters on either side of the spectrum, they're not mutually exclusive.

So, when you're dealing with a platform tool and you're working with people with different mental models and different ways of solving problems. You try to make everybody happy so when I worked on the query building tool, we introduced this concept of three mod switching. Did anybody use an HTML switching back in the day? It's the same idea. The same query, but you can go back and forth, constructing it by manipulating a chart, building a table or just writing out the query language. We have a similar type of toggling experience in the Trifacta product. Some of our users have a preference of viewing scripts in text. Others prefer natural language. We make it possible to toggle between the two.

One of my favorite visualizations comes from The Functional Art. It is scientists and engineers and arts, designers and journalists. It's probably hard to read from where you're sitting. Visualization's preferred by scientists and engineers. They tend to prefer visualizations with more abstraction, functionality, density, multi dimensionality. Visualization's preferred by artists, designers and journalists. I pulled this from I think a bootstrap template of dashboards. Just a quick note. It's best to avoid curves. Unless you're graphing a polynomial function, you're applying points on the graph that don't exist when you add curves to your lines.

Some times it's better to appeal to the cognitive objective of your product rather than the cognitive preference. In cognitive sciences, there is low process theory. I don't know if you guys have read, Thinking fast and slow. So few hands. It's an amazing book. It's one of my favorites. Dual process theory asserts that our brain form thoughts of means. One processes deliberate, conscience. Daniel divided it into these thinking processes for decision making into these two different systems. While both systems are always on, it's one system or the other that will take control and make decisions.

So, in simple terms, we either make snap judgments or we mull things over carefully.

So, how does this apply to design? Let me show you an example of what it means for Design System one. Weather app. There's actually a lot of data that goes into weather forecasting. But, these are automatically every day decisions. I'm just checking out the weather to see what to wear today. I don't need to look at the radar or barometer. The image of the cloud and the sun is enough. System one can be a little error prone. Have any of you ever checked the weather, saw that it was going to be sunny, stepped outside and found that it was cold and rainy? It's when system two kicks in. Digs deeper to make a conscious decision. Do I go back inside for a coat? You know, I might find out that the rain might let up in an hour.

So, I think as users experience designers, we need to design for system one. Don't make users think, make their lives easier. What are example of where one might want to design to engage a person's system two? Do you ever see what an air traffic controller looks at? I don't know about you, but it feels like looking at an interface that resembles the sparseness of this. You can deliberately make an interface more dense to slow users down.

Okay. Point number two or, idea number two optimize for the efficiency of visual perception. So, just pulling up from some visual grammar. I'm going to go through a color example. I'm not going to talk too much about color. Diana Mounter is going to talk about color tomorrow. I'm going to talk about color in the context of visualization. Color is very important and special to visualization because it is preattentively processed by your brain. Let me show you what I mean by that. How many of these squares have rounded corners? What if I do that? Way easier, right? Notice the difference. You get color without having to think about it.

And color can be used to encode multiple dimensions in your visualization. You can even remove labels from an access through the use of color.

Now, if this room is a representative sample of the general population, about 5% of you will find this completely unusable because it looks like this to you. And I say, 5%, color blindness effects 8% to 10%. This is one of the types, the green cone abnormality, Deuteranopia. So, choosing color pallets for accessibility and colorblindness is actually really hard, especially if your visualizations are multivariate, multi dimensional and you need a strong pallet. But it doesn't have to be ugly. They're usually ugly, but it doesn't have to be ugly. I'll show you a favorite done by one of my very talented friends, Eli Brumbaugh. It looked good with the brand color. Pretty remarkable work. Here's what that pallet looks like through the filters of the types of color blindness.

Oh, and important to note, it's shown in this way, in his graphic, because most charting frameworks will take in your colors as an array so the charting matters. Most users will only ever see the first two colors.

And it's like he was psychic, it just kind of worked in all of the marketing material. Anyway, so, there's an example.

Okay. Idea number three, create guidelines for displaying content. The most well known examples of machine learning I'm going to say M L. People you might know, things you might buy. Some are pretty obvious. You don't realize that 75% of what you watch on Netflix is driven by machine learning algorithms.

There are some of you that visually highlight M L. They use this Einstein logo. I imagine it will appear in the Design Systems. We help a user complete their intended task by interacting with a data grid, a set of suggestion cards will appear on the right. It's a very good pattern. They're grouped and you get a preview of the results in a yellow highlighted column.

Copy, voice and tone can go a long way for M L based content. I'd like to compare the messaging. One of the left from Soup Shop. Get a 10 cent discount today. That's a little T M I. Compare and contrast that to Four square. Your friend Joey says, try the carne asada burrito.

Number four, design and build for extensible, configurable, and composable visualizations. If you've ever written data visualizations, you probably found yourself writing a lot of the same code over and over again. Luckily, most charts can be easily modularized and separating visualizations into components works quite naturally. There are many open source frame works built on these three. If you're looking for an open source visualization framework that's well architected for visibility, I recommend looking at deeply depth chart.

Writing usage guidelines for visualizations. My plan is to consult with a domain expert, if you can. Let's use the ubiquitous line chart. It's also called a time series chart, where your x axis is always a time dimension and most best practices assert that that x axis should be continuous and an ordinal value but that's not always the case. Lime chart can work with discrete and nominal values, nominal means unordered.

If you added a grouping to that time dimension and break it out into small, multiples, the dimension on the x axis actually becomes discrete. And you're probably thinking, I don't know what you're talking about, it's still continuous. If I filter this and remove the two years in the middle, 2011 2012 and say we were comparing trend lines between 2010 and 2013, it would still be a valuable visualization. Even a basic chart can get tricky when you're writing guidelines so work with a domain expert, if you can.

Number five, address the exceptions. The special snowflakes. If you don't know what a special snowflake is in the context of Design Systems, Google Brian Frost, atomical design.

Many Design System teams have a process for bringing new component. I haven't really come across any Design Systems team that might actively address when it's okay to go away from the Design System. I've run into the past where I'm not providing the best design systems for our design because I'm trying to make use of the components available to me. Make piece with data's special snowflakes. Support their innovation, believe in them.

Here's a couple examples of a special snowflake. First, let me give you some context, in 1985, Microsoft gave birth to Excel sorry about that animation, I just learned how to animate. Excel's been around and it pre dates us. It's still the world's dominant tool for working with data. Our global financial systems run on Excel. Don't get me wrong, Excel's an incredibly powerful tool but it doesn't scale. Data has grown and changed at a faster rate than Excel has. Excel has created a design problem if you're developing analytic products, using direct data manipulated has been so hard engrained in users, it's second nature so getting them to shift is an incredibly difficult task. This interaction model isn't just horribly inefficient or feasible, it isn't even possible. Try loading 5,000 rows of data into Excel.

To solve some of these problems, people have tried Trifacta has its predictive interaction model. To solve some of these okay. So on the upper left hand corner of this slide is our actual table component in our Design System. We also have a table like interface in the transform tool. This is our special snowflake, it's innovation.

Another special snowflake, in the name of innovation, at Salesforce, we had ECLAIR, you could interact with the data visualization itself to modify the underlying query rather than interacting with controls elsewhere in the UI.

Wrapping up, let's review. Identify the cognitive preferences or objectives of your primary users, optimize the efficiency of visual perception, create guidelines for displaying content based on machine learning recommendations, design the build for extensible, configureable and composable visualizations and address the exceptions.

So, number six, here's my suggestion for yours. Practice integrity. I have to quote Edward Tufte. Analytical presentations ultimately stand or fall depending on the quality, relevance and integrity of their content. I mean data and graphic. If your data is of questionable quality, however slight it may seen, the repercussions of building a product on top of that can be severe. Remember Apple Maps that launched with i O S6? It had a lot of bad data. This was five years ago. I'm sure they've come a long ways since, but do you know anybody who uses Apple Maps? It's really hard to go back when you lose the trust of your consumers.

You can take the post modern approach to truth where everybody get to have their own view and version of the truth, there's a little bit more leeway. If you're designing things like reports and dashboards, these detailed minute things, however instant is may seem, you're essentially lying to your users. Consider the fact that most people look at data to make decisions. You lie to someone in this context, you're depriving them of making the right decisions for their businesses and families, to get dramatic. It's never been trendier to be truth. We're seeing this occur.

It's probably one of the biggest reasons why I'm so proud of to a member of the product and design team at Trifacta, we're solving the world's most unsexy problems in data for data professionals. It's through cleaning up data for analysis that you get closer to good data quality. I'd be remiss if I didn't thank my fellow colleagues at Trifacta. To express my gratitude for providing me with unrelenting support and mentorship, we are unfortunately not hiring right now, but if you're interested in working with us in the future or interested in hearing more about how we're developing our Design Systems, don't hesitate to connect with us later.

And, that's it. Thanks, guys.

(Applause)

Una:

Thank you so much for that. That was a great talk. That's something we don't think about much. Now, I'm inspired. Can we get some mic number four action, or we could just share. Please, take a seat.

Okay. So my first question is about, how did you get interested in data design?

Linh:

It happened at B U by accident. As I mentioned when I opened this talk, you know, I was 19 years old. I was, like, kind of pretty intimidated, a lot shier back then and it was a technology department I was working in so it just became a habit, working with the people I worked with and it's also very academic so, you know, if you disagreed, you had to prepare yourself for a healthy debate. That's just how it goes. And there was this one incident where I kind of uncovered a very complex problem in the university accounts provisioning process. It was actually kind of a big deal, it was a multimillion dollar problem and I got my point across by visualizing it. I didn't know it at the time, but I made a heat map. It made such an impact. It led me to work on some interesting projects while I was there.

Una:

What advice would you give to designers when developers who want to learn more about statistics and data?

Linh:

Find somebody.

Una:

Mentorship?

Linh:

Just reach out. We're all resourceful. Find a group, start a group.

Una:

That's a great point.

Linh:

Find people to follow. Look up what they follow. Do everything that you do now to learn about visual design or user experience design. It's a different group of people. There's quite a community, too.

Una: