Concept to Construct | The Team's Dashboard Story

Well, first of all, thank you to everyone who is tuned in today and welcome to Concept to Construct, a segment that's all about ideas and the people who bring them to life. I'm your host, Abe Carryl, and I'm also the product manager for the Cloudflare for Teams dashboard. And I'm joined by lead designer, Bethany Sonefeld and the incredibly talented Lily Craver. Today, we're going to be talking a little bit about the Teams dashboard. And if you aren't familiar with it, don't worry, we'll get to that in just a second. But first, let's get to know Lily and Bethany a little bit better. So can either one of you can kind of kick off here, but can you tell us a little bit about yourself, your background and what you do at Cloudflare? You want to go first, Bethany? Hey, y'all. So my name is Bethany. I have been at Cloudflare for a little bit over a year now and have been working on Cloudflare for Teams since July of last year. So I guess, yeah, full year. So I am a design manager at Cloudflare. So I manage the team in Austin, and I also kind of contribute at an individual contributor level to the Teams platform. So that looks like, you know, working with our engineers to get things implemented, working with product managers to figure out what requirements we're going to be building on and executing on those things. And just doing a lot of research, talking to our customers, talking to our users. So that's mostly my favorite part of that. Before Cloudflare, I was focused more on consumer products at a company called RetailMeNot, which is a promo code website. I'm sure some of you have maybe used it before. And then prior to that, I was at IBM working on their corporate design system. Cool. So similar to Bethany, I work on, or sorry, my name is Lily Craver. And similar to Bethany, I work on the Teams dashboard. I am actually a front-end engineer, though. So I handle all the sort of taking of Bethany's stuff and actually implementing them within our code base. And I've been at Cloudflare for about 10 months to almost a year now. And it's been all dedicated to the Teams platform. And before that, I actually was, well, I still am a game developer. So I like to bring a lot of the creative passion from that stuff back into my work for front-end. So yeah. Cool. And I should have said this at first, but Bethany and Lily are two of the people who I collaborate with the most. They're also two of my favorite people at Cloudflare. So I'm super happy to be doing this with them. Bethany has all kinds of cool side projects that she works on as well. And I've gotten to play some of Lily's games on the side, which are super fun, which kind of leads me to my next question, which is for both of you going back in time a little bit, what was the first kind of creative project that you worked on? And that can be anything. That can be anything from arts and crafts to Legos to web or game design. But just like, what was the first time that you really felt like you were doing something creative? Yeah, I guess since Bethany took the other one first, I'll take this one. So yeah, the first thing I sort of alluded to previously was probably the biggest undertaking was my game, which was a six plus year project because it's still going on. And that project is extremely fulfilling because it was the first time ever that, because I've done various things outside of Cloudflare and outside of work in general that were sort of creative passion projects, but they were sort of just for myself and maybe a few friends. And that was really it. Whereas Project Arrhythmia, my game was the first time ever that I actually built a community around the project. And it really gave me the sense of like, okay, this like creative cycle. So instead of just making things for me, I was more like taking in feedback, making changes, and then continuing that cycle over and over again. And it sort of taught me a lot about just like, that sort of like endless cycle of improvement that sort of carried me through most of my work, like in the future, because I started that in high school. So obviously I wasn't working that much then, but yeah. Oh, that's really cool. Stephanie? That makes my story seem a little petty, but I'll share it anyway. A few things come to mind. So when I was a kid, I would always make my own birthday cards or like Valentine's Day cards. Like I always thought it was so dumb to spend six dollars, you know, on a card that I didn't make or design. And so I feel like that was my first time that I knew I kind of wanted to be a designer, because I would do really random things, like cut up a Colgate box that had like the holographics on it. And then I would like make a star and like put it on the card. So like that was me as a kid being very creative, is just like taking all these things, random things I could find around my house, and making greeting cards or like birthday cards. And I think my mom saved them up until like last year when they moved homes. Wow. I have this stack of cards that you made for me personally. I was like, oh that's sweet, but also like really embarrassing. That's great. Second part that I wanted to share, because it's like my favorite story. Do y'all remember those like trifold boards that you had in like middle school or elementary school you would like put together a concept or like, you know, share it in the fair. I would always be the person that would volunteer, like I want to design it, like I want to like cut the stuff out and like arrange it on the board. And that was like the second time that I kind of figured in my mind like, oh I think this is something I could make a career out of maybe. But back then I didn't know really what that meant, but I just knew that I would always want to like arrange the stuff on the board for the final presentation. That is really cool. I was definitely never that person. I was the person contributing the last day and being like, hey can you squeeze my thing into the to the bottom right of the board. But I know, I know. But that's really cool. And you got, you talked a little about this by saying, you know, how you use things around the house and you kind of found, you know, things that were leftover kind of and use those in your process. But is that kind of like what your creative process was? Do you feel like you've always had a process of how you develop things or, you know, did you start to form that later? I don't know. It's hard to say. I think I've always looked for inspiration outside of what exists. Like, like things are always done a certain way. I'm not describing this very well, but like I, like with web trends nowadays, like everything kind of looks the same. So whenever I need inspiration, I'll try to look at how people are solving a similar problem, but it's not exactly the same. So I think that that's kind of always been my MO is just like looking outside of the box and trying to, to find inspiration in things that aren't necessarily mapped one -to-one to the exact problem you're solving. Interesting. Lily, do you feel the same way? And, and I know that, that you kind of talked a little bit about project arrhythmia, but, but what was kind of like the driver behind that as well? And like, what made you want to start that project? And then kind of like, what was your process to build it and to keep it alive for the past six years? Yeah. So that's a really interesting question. It was sort of weird because it happened organically through other creative projects I was working on. I was working on a bunch of audio synthesizer simulations at the time and it was super nerdy sounding, but yeah, I was super into like music and just like how it could create like artistic stuff because I was at film school. And as I was experimenting with that, some of my friends, they came across a few different games. And one of them was called os, which is like a rhythm game. And I was like, oh, I could just smash these two things together and it would be a really interesting thing. And so I just went and experimented from that. And then in terms of keeping it alive for six years, that was not a trivial task. Obviously, most people get discouraged quite frequently, like within a year. So six years, it was sort of crazy. And to be honest, without the people using it, I would have never lasted more than a year probably. But there's people in the community nowadays that were still in the community six years ago. Like it's really insane. And just like knowing that people are like really thankful and relying on you for like game updates and stuff, it's a pretty good motivator. So especially like when people draw like fan art and stuff. So yeah, no, that's definitely a pretty big motivator. Yeah, that's really cool. And I think that you hit on an interesting point around community. I think that especially, you know, in the climate that we're currently in, I think the community is so important and making sure that we do that through things like design, I feel like is really, you know, what keeps people tied to those products and the services that they love so much is, you know, how they look and feel and, you know, how it inspires them to take certain actions. And I think that's just a really cool part of the job. But that's fascinating. So do either one of you remember the first job or side hustle that you had where you started making money from your ability to do these things? For me, it was my internship, which now I feel like it's more common to have an internship. But back then it was like an extra thing to do. So I was like, wow, I was just blown away by the fact that someone wanted to pay me when I was still in school, still learning to actually design something for them. So that was really cool. And like, I think getting experience is one of the most important things because you're doing those things hands on, you're getting to learn from others around you. And so that three months that I spent at my internship, like just added so much value to even things that I'm dealing with now in my career. Like I learned so much while I was there. That's cool. Was there anything scary about your first internship? Like when you first started, you know, what was like the most exciting part of it? And what was the scariest part of like having that responsibility to kind of do whatever it was that you were tasked with in that? I think the scariest part, like as a designer, critique is a really big part of our culture where you get feedback on your designs. And I was just so scared to share because I wasn't sure if I was, what I was building was good enough. I wasn't sure if they were going to be using these things, but they ended up using them. Like that's why I was there. But it was still really scary for me to be designing something that was going to be seen by like potentially millions of people because it was going on like a public facing website. And so that was just like super intimidating, but I kind of got over that like with the help of my mentor there. And they were really great about, you know, giving me those opportunities, which I was super, super grateful for. Do you feel like when you started doing that and more people started getting involved in the process, do you feel like it changed your approach or anything about how you came up with those initial concepts? Or do you feel like it stayed relatively the same? I think for me, it definitely changed it because whenever you have more cooks in the kitchen, you have more opinions, you have more feedback, and you have more diversity in the skill sets and the people on your team, which I think will ultimately make a better product versus like, I'm just designing this thing. I don't know what anyone else thinks about it. Like, and it's good to go, right? Like that's why critique is so important and user research and usability studies, sharing your things often and frequently is super crucial. That's cool. And Lily, do you remember the first time that you started to think, you know, I could potentially make a career out of this? And this is, you know, something I could do every day? Yeah, actually. So I had an internship. God, it was a very long time ago. I don't even remember what grade I was in. But I it was during the switch over to Obamacare. And so I guess that was a really long time ago. And essentially, I was working for a hospital at the time as an intern, and I was tasked with coding a UI that would actually convert everything in our system over from the older system that we had over to the Obamacare system. And it was like that moment where it really clicked that like, I really like solving problems. Because it was a lot of the stuff I was doing was extremely unfocused. And then once I actually got that internship and did that job, it was like, Oh, this is like, super interesting, because I have a specific problem that I want to solve, and a specific end goal. And I can just like work towards it. And it was super fun. And so honestly, that was sort of the moment where I was like, Okay, I want to be a programmer. And that's going to be like what I do. Yeah, wow. So I think I just heard you say, I don't know what grade I was in. Does that mean that you had an internship when you were still in grade school? Yeah, I think it was between middle school and high school. Wow. Yeah, I was not doing internships. At that time in my life. I think that that was probably around the time that I was a fry cook at Chick-fil-A, but definitely wasn't doing any any internships at that time in my life. Yeah, that's really cool. Was there any anything that like motivated you to get started that early? Um, boredom. Yeah. Because I do coding stuff all the time. Like, like I said, even before that, but it was just always so like, I like I just want a problem to solve. And when I they were putting out options for that summer, it was specifically for a summer. And I actually got to stay a little bit longer. But that summer, specifically, it was like, Oh, man, I'm just so bored. I need something to do. Wow, that's great. I was, I was definitely not looking for for more things to do at that time in my life. But, but that's awesome. Okay, so so fast forward a little bit. And, you know, when did both of you start at Cloudflare? I know that it was around, you know, 10 months and Bethany's been a little bit longer. But, you know, when did you start? And what specifically brought you here? You know, was there something that that about Cloudflare or the or the product that you both started working on to cod your eye? Or, you know, how did that even come about? I'll get to Bethany first. Um, so I never thought I'd say this as a designer coming out of school, but like, I just love building enterprise software. I feel like the problems that we have to solve and the complexities that's involved with building something at that scale really keeps me on my toes. And I find that that really keeps my gears turning in my brain versus like, more consumer focused products, not knocking that at all. But just for me personally, that's why I wanted to join Cloudflare. The second part was just that the Austin team at the time was pretty small. And so I had the opportunity to come in and kind of build out a team, be involved with the product strategy group, shipping things very fast. I remember I asked one of the product managers, like, you know, how often do designers, their designs get built? And he was like, well, all the time and coming from places where sometimes you design this beautiful concept, get tested, um, and you'd get such good user feedback, but then it would sit in Google drive for like a year, right. Cause they didn't have resources to build it out. So that was really important to me to join somewhere where I could see the value of what I was creating and see that being used by our customers. So that the combination of those two things was what really drew me to, to come to Cloudflare. That's cool. What was your kind of first success story at Cloudflare of doing something like that? Like what was the first product or feature that you remember getting out the door? So when I first joined, I was on the registrar team and I was supporting our domain registration product. So we didn't have at the time, um, like a space where you could kind of see here's your domain. Here's when it expires. Um, here's how you can turn on auto renewal. So the first big project I worked on was creating kind of like a, a domain, uh, details view where you could kind of see those things. You can see when it expires so that it doesn't run out. Um, and, and you have a domain name that you don't own anymore. Cool. And Lily, I know that you said that you started 10 or 11 months ago. Um, what drew you to you to Cloudflare and what was your path here? Yeah. So when I was interviewing, uh, so before that, even to be honest, uh, I had already knew about Cloudflare at that point. Um, I was familiar with sort of the technologies that they had done and they had just released the, uh, the, their own custom DNS stuff with 1.1.1.1. Uh, and, um, so I was very familiar with a lot of that. Um, like a lot of those products and, um, it was sort of like the moment I talked with my manager and he was so excited about what we were building that that excitement just like immediately transferred to me. And almost day one, um, it was like every other job I've had, uh, there was always this, uh, expectation that what I was working on is not something that I care about. Like, it's not something that I would use. Uh, that expectation was like blown out of the water because, uh, the second I started actually going through the dashboard, I was like, I would use this. And not only would I use this, I would recommend this to people. Like this is like such a, um, like an immediate, like, wow, this is absolutely amazing. I, I actually like this software. It's great. Um, and so that was like a huge motivation because, uh, that was completely new to me. Uh, previously I had worked on stuff that like, I really just didn't care much about. It was just a job. Um, whereas this, it's like, um, it's sort of, it's actually very similar to the game where you get feedback from people and they're like genuinely happy and you can tell that they like the product, this thing that you built and, uh, you actually feel like you enjoy using the product. So yeah, that's definitely what's been motivating me and keeping me here. Yeah, it's really cool. Do you remember what the first feature that you got out the door was? Oh, so the first thing ever was, uh, and it wasn't even me that actually fixed it, but what I did is during orientation week, uh, I actually came across a bug in the design website, uh, and I alerted someone to, um, the bug and they actually managed to fix it. I was like, you need to exchange this URL for this URL because it's calling the wrong API. Oh, wow. That's awesome. During orientation week? Uh, yeah, I met, because I didn't have any access to any of the coding yet, so I couldn't actually change it myself, but I was like, please go change this because the website's broken right now. Uh, it was their design, like color layout, uh, thing because the API for that library had changed and yeah, it was just, it was so funny because, uh, like normally if you get a message from someone like that, you're like, okay, whatever. It's like, you're an, you're like a brand new person. I don't care. Um, but they were like, oh yeah, you're totally right. And then they fixed it. So it was sort of like kind of crazy that that wasn't anything to do with Dash, obviously, but, um, the Dashboard, uh, eventually the first product I think I, um, shipped on that was really just the first version of it. That was, technically it was already public, but, um, me, Sia and the rest of the team, like really, uh, got it through the finish line for that first, like initial full release. So yeah. Very cool. Well, so switching gears a little bit, I'm actually going to share my screen so that people can, uh, know what we're referring to with the Dash. So hopefully this is helpful and this kind of leads into my next question for Bethany, which is, can you tell us a little bit more about the history of Cloudflare for Teams and, you know, how we got to where we are and then, you know, even going into like what the initial concept was for that? Yeah. So this dates back, I would say back in March of 2019, was it? Yeah. We had this concept for Access Resolver. Access Resolver as it exists today is gateway. And so our idea was that we were going to build out this kind of enterprise version. Well, actually before Access Resolver, it was called 1.1.1.1 for business. Cause we just didn't like, we've heard that use case from a lot of our customers that they were like, Oh, I use the app. Like this would be cool if I could use it, you know, as an enterprise version. So we were like, okay, let's do it. And so the whole idea was that we were going to build out Access Resolver as this like standalone product, right. Separate from Cloudflare.com. Because fundamentally like the customer use case behind Access Resolver differs from like your core Cloudflare.com customer. So that's where we started. I think Lily had joined shortly after we had like some things in place. So at the time we only had like this overview screen, we had locations and we had policies. And those were like the core like feature set that we were going to ship with. Then on kind of parallel, we had access that already existed in Cloudflare.com that I think had been around for almost two years at that point. And so we, it was becoming a little bit bloated and we were wondering, could we combine Access Resolver and Access into this one single view to sell this as like a comprehensive security solution, right? And so that's where we started thinking about, okay, like how does the gateway puzzle piece and how does the access puzzle piece come together? And how do we design an architecture that's going to fit for this and really provide comprehensive security solution for our customers? And so that's where we are today is we have access, we have gateway, and we're going to be continuing to build out Cloudflare for Teams and add a lot of really amazing things. That's cool. Did you have any personal goals when you kind of kicked off and you started that migration process that you're talking about for the team site and for the team's dashboard? Yeah, for me personally, so access as it exists in Cloudflare.com is kind of one big long page of configurations and it doesn't really leave the user with a lot of discoverability. They kind of have to do that on their own. And so the goal with when we brought it over was to bring it into this new space and combine and group things in a way that really made sense to our customers because we weren't doing that as it existed today in Cloudflare .com. And so that was one of the main goals. The second goal was just overall improved usability of some of our patterns. So not all of the changes were cosmetic. There was a lot of thinking behind accessibility and does this pattern make sense for us right now and will it scale as the product continues to grow? That's something that honestly, I still struggle with today is that what we build today, there's always this thought in my mind, how will this age and will it age gracefully? And that's been one of my key goals with designing teams so far. And you kind of hit on this a little bit with the usability and kind of like the ease of drilling into certain areas. But was there, this is probably a hard question to answer, but was there anything that you wanted it to kind of feel like? Did you want it to feel energetic? Did you want it to feel simplistic? Was there some sort of like backing behind that? Yeah, I think for the most part, my design, the way I design is just try to simplify as much as possible. I know that's kind of cliche, but so I usually start with like a concept that has like all of the things in the kitchen sink, and then you kind of strip away elements and focus on like the actual problem you're trying to solve. And if a user can accomplish what their task is at hand. And so, and I don't know if from a code perspective, Lily, like maybe your process is similar where you kind of start with all of these things and then you strip away as necessary. I feel like there might be some overlap there, but I just feel like most enterprise software is just so boring and corporate and still. So my goal is to try to get away from that, but find the elegant balance where it's not super gimmicky and not distracting, but it's also not super flat and stale and boring. Yeah, that's really fair. Well, so that's actually a good non sequitur, but so Lily, no pressure at all, but what is it like working with design to bring some of those things to life? Yeah, so it's actually, Daphne is amazing, first off, I'll just say that. So, because I've worked with designers before and typically a lot of companies will set up sort of like a lot of layers between the design developers. Whereas it's been really great at Cloudflare specifically because there's been multiple times, this is before COVID, but me and Bethany would just like get together and make little tiny tweaks to things. Like those graphs, actually, we spent a good 30 minutes tweaking. And so we just sat next to each other and kept tweaking them. And that was an experience I had not had before. So, oh, there's a shark. Sorry. But it was really just a cool experience because typically design and engineering are not seen as like two parts of the same coin. They're sort of separate entities, but Bethany has been really great and the other designers have been really great about being super transparent. And so it makes it a lot easier to convert what Bethany wants back into like code. So it's also great because Bethany is actually able to look at all of the different PRs. So whenever, or to explain that, a pull request, meaning a bit of code that I've made, I want to submit it to the page. So it will actually reload with Bethany's designs. And so in order to do that, I have to get approval from various people, and that's including my fellow front-end engineers, but then also Bethany will quite frequently review it. And so it's a really nice process overall, I think. We're definitely like constantly improving it, but overall, I would say it's quite great working with Bethany and the rest of the design team. Yeah. That's awesome. Yeah, no pressure to say that since she's just right here. So I think that we have like 90 seconds left. So real quick, rapid fire, my favorite question to ask people, what is one of your favorite products on the market today? And what inspiration do you bring? Like if there's one thing that it does, what's one thing that you try to bring into your work today? Lily first. Yeah, it's definitely that like creative passion. It's just really interesting. Again, like I really like getting that feedback loop. So that's definitely, I look for that in every single job I take is that feedback loop, and Cloudflare has definitely provided it. Yeah. Cool. And Bethany? I'm a Spotify fangirl. So I always look to them for like new patterns. I feel like they're changing how people's listening experience. And I really appreciate that they take the time to do that research. Cool. Well, awesome. I think that is unfortunately all the time that we had today, but I very much appreciate both of you joining. This is a blast. This was a fun break. So hopefully everybody else had a good time and excited to see you all next week.