S2 • E3 – Oct 12, 2021

Inside Marketing Design at Stripe

with Staff Designer Tatiana van Campenhout

with Staff Designers Tatiana van Campenhout and

Stripe's website designs are so well-renowned in the design industry that whenever a new version launches, heavily-influenced sites start to pop up around the web. In this episode I speak to Tatiana about how it feels to have your work so publicly praised, copied and critiqued and we get the details on the process the Stripe team went through to bring the 2020 site redesign to life.

Timestamps

0:00 - Today's episode!

3:00 - Design team structure & collaboration

6:00 - Responsibilities of different design teams

8:30 - The Stripe brand

11:20 - Kicking off the 2020 site redesign

17:20 - Stress-testing the system

19:30 - Project timeline

24:30 - The site build process at Stripe

26:50 - After a site launch

29:30 - Design & project management tools

30:45 - Collaboration with marketing

33:40 - User research and testing

37:00 - Design trends & inspiration

43:00 - Project planning

45:20 - What's next for design at Stripe

49:10 - My takeaways

Transcript

Charli: Welcome back to "Inside Marketing Design". I'm Charli, I'm the creative director at ConvertKit, and I started this show because I wanted to dig deep into the processes and principles, and projects of other brand and marketing design teams in tech. And this is a very special episode today, because I'm speaking with Tatiana Van Campenhout, who is a staff designer on the web presence and platform team at Stripe. Stripe is the platform that powers payments for retailers, for SAS companies, for creatives. It's used all over the internet and is known for being really easy to use and reliable. But in the design world, Stripe is also known for their beautiful website design. They really set a high standard with their marketing site. They always do really interesting things with it, they drive a lot of the trends in the design industry. So of course, I'm very excited today to bring you an interview with one of the designers behind that great work. Tatiana has been at Stripe for nearly five years now, and Stripe is globally distributed at the moment, but it has dual headquarters in SF and in Dublin. They're currently around 5,000 people in the company, but that number is probably already outdated, because it was growing really fast to like 6,000 by the end of the year. Tatiana is originally from Belgium, but now based in Seattle, and obviously, having been at Stripe for so long, she's been a part of a lot of projects there and seen a lot of growth over the years. We went into detail specifically about the design process behind Stripe's latest website design, the 2020 version, as well as talking about the design team structure and how it feels to work on designs that end up getting copied all over the internet. Before we get into it, though, I wanna say a huge thanks to Webflow for sponsoring this season of "Inside Marketing Design". If you're like me, and your coding skills don't quite match up to the level of your web design ideas, you absolutely need to try Webflow. It is a no code website building tool, where you can generate production-ready code using a visual editor that, as a designer, you'll feel right at home in. Interaction feature is one of my favorite parts because it's so easy to add movement and life to your designs with it, much easier than figuring out the JavaScript yourself, let's just say that. Try it out for yourself at insidemarketingdesign.co/webflow. But now let's get into the episode and take a look Inside Marketing Design at Stripe. 


Welcome to the show, Tatiana. I'm so excited to have you here because, I mean, Stripe is just such a, it's iconic in the design industry. I feel like every time Stripe releases a new home page or something, I don't know, you're gonna see copies of it a few months later, while everyone else plays catch up of the trends that you're setting. And so I'm excited to hear from you and hear about how those trends happen at Stripe, because for you, they're not following a trend, they're just like your design style, which is super cool.


Tatiana: I'm very excited to be here.


Charli: So you work on the web presence and platform team at Stripe, and that was like not a team name I'd heard before. Could we maybe start by you telling us a little bit about the design team structure at Stripe, and yeah, how your team fits into it?


Tatiana: Yeah, of course, so the design team of Stripe is currently a little bit over 100 people, but that's like with all the sub-teams. So about 50%, maybe a little bit over 50% of that is product design, but then we have other teams, for instance, like our brand team, our editorial team, our design operations and product research team and the web presence and platform team, which I think I'm just gonna start calling a WPP, 'cause that's what we call it internally, and it's a lot easier to pronounce than web presence and platform. Yeah, my team is basically the team that is responsible for the like web presence of Stripe. So like any surface we touch on the internet, but then also the whole infrastructure behind it. So like the CMS that powers it, the like databases, APIs, like everything that goes on in the background. So we're a team that's built out of both designers, front end engineers and backend engineers. So actually within the WPB team, we currently have an experiences team, which is mostly designers and front-end engineers. So those are the people that mostly work on like stripe.com and like the landing pages you often see on Twitter and other places, and then we have a platform team, and they're basically just like the team, like making sure we can do all the work we're doing.


Charli: Hm, I like it. So it's like teams within a team as part of this.


Tatiana: Yes, exactly. 


Charli: And who do you report into? Like who leads your team?


Tatiana: Yeah, so Alex Norcliffe is the head of WPP. So he's basically the manager of both of those sub-teams and actually side note, he always tells me that he needs more Twitter followers. So anyone wants to follow him on Twitter, he would greatly appreciate that.


Charli: Cool, these teams are made up of designers and non-designers, I love, that brings that together. How do you fit into the wider design or do you meet as designers often or does like WPP meet with product? How does that work?


Tatiana: Yeah, we have a couple of different meetings during the week. We actually kick off our Mondays where we meet with the whole design team together. So like right now this is like a Zoom meeting with like over 100 people, where we kind of go over like the highlights and like recruiting updates and just like things that everyone needs to know. And then we spin off into our own like smaller stand-ups. So we have a standup that is like WPP. So still experiences and platform together the stuff that the platform engineers work on, definitely still affects our work as well. So we do that once a week and then we have more stand-ups that are like experiences-specific throughout the week. So that's like the smaller team, I think currently we have six people on that team, and so we meet on like a very regular cadence to just like talk about our work.


Charli: And I would assume the details gets more and more detailed, the like smaller the team, the more focused it is.


Tatiana: Yeah, exactly.


Charli: As you go through these different meetings and stand outs.


Tatiana: Yeah.


Charli: Yeah, that makes a lot of sense. So I think we've already heard a bit about what your team focuses on, focusing on stripe.com and the landing pages, and the platform that where it's built on. Throughout the rest of the design org, what are the main areas of focus or projects that, let's call non-product, I'm using quote marks when you listen to the audio version, non-product designers at Stripe work on?


Tatiana: Yeah, maybe I'll start with the brand team, 'cause that's the team we work with most closely. So they're responsible for like anything from like advertising to like marketing campaigns, to culture, to like 360 events. For instance, we organize this conference every year, which is called Session. So it's a user conference, and we used to organize this as a, like physical event. Like people would go to a place and it'd be like thousands of users meeting in one place, and that team would be responsible for everything from like the keynotes to like, just like the venue design, to like, just like all the little design things that you can imagine. But then last year we actually like took that virtual. So then our team kind of started collaborating with their team, because that was more like a web presence project, so then it became a collaboration. But they also work on other things like, Stripe makes like Stripe cards, like credit cards. So those are like physical cards that need to be shipped within a certain packaging, and same for like our terminal, like that's the Stripe reader that you can use to like scan your card when you pay somewhere. So all of those things need to be designed and packaged. So the brand team is mostly responsible for those types of projects. And then there's the editorial team. Some of you may know this, but Stripe actually has an in-house publishing agency called Stripe Press, so we publish our own books. We also have, yeah, it's actually really cool. I kind of wish I was on that team, but I'm not nearly talented enough to be designing book covers, so I definitely can't do that. But we also publish or used to publish this magazine called "Increments". Unfortunately, that's coming to an end. I think we're gonna ship one more issue of it. We've had like a really good run and we had a whole team focused on that as well. And with that, we worked with freelancers who would make illustrations for the magazine, but we would still make the whole magazine, and then our team, sort of a WPP team, would be responsible for updating the "Increment" magazine website, which is the same for the Stripe Press website. I actually hope that by the time this podcast goes out, the new Stripe Press website will be live, 'cause it is a gem. It's so amazing, there's a lot of 3D stuff going on. Just one of those projects where you're like, "How did they do it?" I didn't work on it, so I actually don't really know how they do it. I just, anytime my team members were sharing progress, I was like, "Oh my God," I can't believe we're doing this, it's really cool.


Charli: I love that you have those moments internally as well. 'Cause you know that's what everyone on Twitter and Dribbble is gonna be saying once it shows too.


Tatiana: Yeah, exactly, exactly.


Charli: That's so fun. When we talked previously, 'cause you were really helpful to me as I was figuring out my own, like a career transition I made last year into a creative director, and figuring out the set up of the team. You told me a bit about the Stripe team. And you mentioned that it actually turns out that the WPP team ends up driving a lot of the brand direction, even though technically, there's a team called the brand team. Can you talk a little bit more about that and how like, I don't know, I guess how would you describe the Stripe brand and who forms it? How do you evolve it and how does that all happen?


Tatiana: Yeah, yeah, that's a really great question. So historically, the WPP team has always been the team that drives the big redesigns. So even the most recent redesign that shipped in 2020 was driven by our team. I'm not sure it's gonna stay that way moving forward, 'cause in the last like even year or so, like we've really built out the teams of, brand teams has, the brand team has grown significantly. So I think moving forward, that will change. But for now, or at least in the past, that's how it's been. It's more like we like start off by like basically redesigning the website, but we don't really think about how all of that will translate to other surfaces. So there is a lot of like collaboration and like cross pollination between teams, but it's basically like we start off with a website and then the brand team kind of takes it from there and thinks about like, okay, how does this translate to print? How does this translate to like more static surfaces? 'Cause we can do so much on the website, 'cause we can like animate things and we have basically an empty canvas to work with, but they don't have that luxury. So yeah, we definitely work very closely together to make sure everything feels like one brand.


Charli: I definitely want to dig in on that 2020 home page, like redesign or site redesign, I guess, 'cause I think that'll be a fascinating like project example to talk through. But before we get into that, I guess, how do you describe the Stripe visual brand as it is right now?


Tatiana: Yeah, so we always say that Stripe is for optimists, and our visual language should convey the same energy, the same type of kind of hope and motivation, and willingness to succeed. So in practice, what that means is that we will always favor bright and vivid colors, conveying our enthusiasm as opposed to dark tones or pale colors. So that's why like when you go to stripe.com, there's like a lot of color going on, a lot of like bold typography, but that's because we wanna convey that like optimism that we have internally, and that we want other people to feel as well.


Charli: That makes total sense. And that's obviously what you want. Stripe is all about payments and things like that, and you want to be optimistic when you're running a business and wanting things to go up into the right...


Tatiana: The amount of times I hear people say up into the right at Stripe, it is, I'm so tired of hearing it, but that's definitely something that people keep saying.


Charli: I'll try not to say it again for the rest of the episode, I promise .

Okay, let's start talking about this 2020 homepage redesign then. Was this what you just read out to us then, what you just said? Was that part of your brief?


Tatiana: The site 2020 redesign was kind of an odd project because it wasn't our typical workflow, 'cause usually, when we work on projects, we like partner very closely with marketing, and they kind of come up with a brief for us and we take it from there. But with site 2020, this was more like design team-driven effort, and obviously, we had been getting feedback from like Patrick, our CEO, for instance, that our previous style had kind of like outgrow and the type of company we were, 'cause Stripe used to be very, very startup-focused and very developer-focused, but at the scale we're at now, we also wanna talk to more, like enterprise-focused companies or like bigger businesses. So we're trying to find that balance between still being the cool, fun, like Stripe that people used to know, but also being taken more seriously, 'cause we're still like dealing with people's money, so we definitely wanna be taken seriously. And then I think like another big factor for just pushing for that redesign was that so many people started copying our previous designs.

So after a while, we just didn't feel like we were standing out enough anymore, that's kind of how the whole project started. Like a combination of the previous style didn't really meet our business needs anymore. But then also within our team, we just got frustrated that like the entire internet looked like Stripe.


Charli: Yes, yes, yes, and you were there first, damn it, I know. Okay. So you, that's where it started. What happens next then when you, once you decided that this was a project you were gonna tackle, what happens? How does it feel?


Tatiana: Yeah, so actually, I feel like, thinking back, is this all kicked off in 2019, like early days 2019, 'cause I remember I was still in the San Francisco office and not in the Seattle office. And I remember we started by just doing like brainstorm exercises. We have this like room next to the design area that we can book for a few weeks, and we would just go there and just work on kind of style frames, and just do a whole variety of like, oh, where could we take this? And at this point, I don't think the WPP team was, like that didn't really exist yet at the time. I think we have a team called the site team, but engineers weren't a part of it yet. So like structurally, like the team definitely looked different, and I know we even brought in people from brand, and a designer who worked on Stripe Press, just to get like a wider variety of styles, just so like get the creativity going. And then once we all started working on these iterations of what it could be. So everyone was kind of working on their own direction. We would print out those direction on like giant like pieces of paper, put them on the wall, and then the executive team would come in. So usually that would be like Patrick and John or sometimes Will, Will Gaybrick, and they would kind of like look at it and just kind of just like start spitting out opinions. But that was super interesting for us to hear, 'cause that's kind of where that optimism came from, 'cause Patrick was like looking at all of these directions, and just like futuristic and optimism were like the two words he kept repeating. So then immediately we knew like, oh, this direction is way too dark or this is way too, like, 'cause we had directions that were very print-focused, could be like, we honestly tried a little bit of everything, but I definitely felt like he was really like holding in on those bright colors and just yeah, things that look like bright and happy, and optimistic. So he definitely helped us a lot in this process to like define where we wanted the brand to go.


Charli: I love that, that shows how important it is to get stakeholder feedback early. So that you didn't go too far down a route that was like perhaps darker or more serious, or like, I dunno, yeah, like you said, more print focus, less futuristic, you had that feedback, and you pulled those words that you kept hearing from him, and you were able to apply that and make design decisions based on it, I think that's super important. Were the designs you were sharing at this stage, how flashed out were they? Are we talking mood boards? Are we talking like drafts of a, like a mid fidelity?


Tatiana: They were kind of like homepage designs, but with fake content, just kind of like, like some of them have like 3D renders of them, that like we wouldn't even know what kind of for the element we would put on the website, but yeah, it was definitely like trying to show a real website, just because I think we've learned that that's the best way to get feedback on something. 'Cause I think if you're trying to get feedback from people that aren't full-time in the creative industry, it's really hard for them to ask to use their imagination. So like showing something that could potentially be real, like even though the content isn't real definitely helps them understand like, oh, I could see how this would look on a website. And I think we even did some like mock ups of like, here's a poster design in the subway, like those typical mock-ups that you can download and just put your little image in...


Charli: Yeah, someone holding it up...


Tatiana: Exactly, definitely, that's some of those as well.


Charli: And how many designers are working on it at this stage? You said you'd put in people from other teams. Is this the focus for every designer on that team or is it like full-time for some, part-time for others, just helping out.


Tatiana: At the time, I think we kind of treated it as a sprint. So for a few weeks, it was everyone's focus. Although I kind of remember it being, maybe like 80% of the focus, 'cause there was other work that still needed to get done as well.


Charli: There's always other work, isn't there?


Tatiana: Yeah, I think when we were working on it, 'cause some people have left, that were on the team back in the day, and then new people have joined, but I think the WPP portion of the people who were involved was four designers, and then I think like maybe three to four other designers from different teams. So maybe a total of eight designers in those like first couple of weeks, and then once we really defined which direction we wanted to go in, then it was mostly the WPP team, even though it didn't exist back then. But the people who were working on Stripe back then. Exactly.


Charli: About like four-ish designers ended up, this being their project, and they took forward, once you settled on the direction. And what did that look like? How did you split up the work between you?


Tatiana: I'm sure a lot of BDC, we all call him BDC. His Twitter handle is BDC. His actual name is actually Benjamin De Cock. He's also from Belgium, which is really fun. We used to have two Belgians on the team, not anymore, 'cause unfortunately, he left after being at Stripe for seven years, but he was tasked with redesigning the homepage. So he took the homepage on, and then Bill, another person who, unfortunately, also left, started trying to define the system more, like trying to come up with components, and then Mikayla and I, who were the two other designers were kind of stress testing the system by redesigning existing product pages, like let's say the payments page, like just take the same content, but see what that would look like if we start applying those new styles, and then by doing that, you immediate identify things that don't work, 'cause I know we tried a bunch of things with like photography, and immediately we were like, oh, I don't know how that's gonna scale. So yeah, it was definitely a team effort, but a lot of that early work was driven by BDC and Bill, who, unfortunately, aren't on the team anymore.


Charli: Oh, that's fascinating, I love that way of splitting things up too, 'cause this is, I'm like taking notes for myself here, we're working on a system right now for the ConvertKit site, which is really not systematized and the code, barely and Figma, either. And I like this way of approaching things, where one person's like creating the system, and another's like stress testing it and seeing how far we can push it and how useful it can really be.


Tatiana: And even by stress testing it, we would come across components that we used to have previously, that we hadn't added to the system yet, so that way everyone could contribute. It's like, oh, this doesn't exist yet, but we have like a general style so we can start designing our own components. And honestly, that's still what we're doing today. Like even though we launched a redesign, I think with every project we work on, we realize there are still pieces missing, so we're constantly like adding to it or improving existing components. So yeah, it never ends.


Charli: Yeah, that's the great and sometimes frustrating thing about the web, right? It's constantly evolving and there's constantly things to do.


Tatiana: Exactly.


Charli: How long did this 2020 site redesign take, do you think? From, 'cause you said you started it in early 2019. When would you say you wrapped up with the design portion of it? Even if it wasn't like fully built yet?


Tatiana: Yeah, I think we have most of it like pretty solid, maybe by summer of 2019, but then we actually wanted to also do a content overhaul of a lot of our pages. So then we started like actually like building or like designing and building out all of these new, or not new product pages, they were existing like product pages, but they just hadn't been touched in so long. So we were like, if we're gonna ship this big redesign, we shouldn't just redesign the homepage, we should like focus on our top products. So we ended up going for the payments product, the connect product and the billing product. So then we kind of divided up the tasks again. So I worked on the connect, like that was like a microsite, I think it had like six sub pages, so that took me a couple of months. And then Ben was still, like BDC, was still focused on the homepage. I think that was the page that went through the most iterations, just because the content kept changing, up until the last moment. But then actually, while we were designing out all of these pages, we were also trying to completely shift our code base, 'cause our code base, like I'm probably not the right person to like talk about the details here, but our main goal was to move everything to a CMS. So but that required a lot of just front end and backend work. So that's actually when we started merging teams as well, just because we realized like the front end engineers and those platform engineers were all working on the same project, like our big site 2020 project. And then, initially, I think we were hoping to launch all of this in April of 2020, but then COVID happened. And I think it was like a combination of us feeling a little bit weird about trying to make a big splash while the world is crumbling around us. But then there were also like certain things that we weren't quite happy with. We have this thing at Stripe where we keep saying that we want things to be surprisingly great. So I feel like a lot of companies settle for good or great, but at Stripe it's always like, it needs to be surprisingly great. So even though we were like at a point where all of the pages looked really good, they maybe felt a little bit too static. So it was like, oh, what if we like start animating the icons on these pages? Or like, what else can we do to just bring this to life, and really add that level of delight to the pages? And that, in combination with a couple of people on the team, including me, having really strong feelings about making this a global launch, 'cause at the time we were ready to launch, it was English only, just because the whole infrastructure was new, and we just like hadn't figured out yet how to do localization in this new system, and that was just like a whole other beast to tackle. But I just feel like Stripe is a global company, we have users all over the world. I just thought it would be a shame to launch a website that then would be like US and UK only. So anyone else who would go to stripe.com would still see the old version. So then we ended up pushing it out by a few months, just to be able to give that full experience to our users, and then we ended up shipping it, I believe, in June or July of 2020. So like almost a year and a half later after we kicked off the initial project, but it became such a large bigger project than we ever thought it was gonna be.


Charli: I think people are gonna be really like interested to hear this, and also when you think about it, it's not surprising to think that, okay, all these little details that we see on the Stripe site and why everyone is inspired by it and why it looks so great is because you took this time. Like if you'd launched after six months, when you were "like, yeah, design probably done," it wouldn't have probably made the impact it did on the design industry, Stripe as a company and for their brand reputation as well. But because you took that extra time, I just feel like it really paid off and that you can see it in the design.


Tatiana: I do want to call out that I feel like we're so privileged as like designers at Stripe that like we're allowed to have this time to work on projects. And it's like, you can see this when like we work with like the executive team, like they really care about like Stripe design, and they care about keeping that bar high. And it's like, it's often Patrick that is like telling us like, oh, this is great, but can it be better? And like, he means this in like the best possible way, but he definitely pushes us to do better, which we then end up doing. But yeah, I feel like a lot of companies just don't have that luxury, so we're lucky.


Charli: Yeah, or like, it's just not part of the strategy on cynicism, as important as it is at Stripe, clearly. Yeah, that makes sense too, that you've got that executive top level buy-in.


Tatiana: Yeah.


Charli: That's usually, I think, usually, the companies that do best with design have that, because if the leader of the company appreciates and values design, it's more easy for us to get the resources, and time we need to do great things.


Tatiana: Exactly.


Charli: And how does the build process work? We sort of talked about the engineers then becoming part of the team. Is there like a handoff that you do to the engineers? Do they sort of start while you're still refining content? What does feedback process look like for the build? 'Cause I imagine, I'm just guessing, that the Stripe, like what we see on the web looks very similar to what was in your design file, it seems pretty fine tuned.


Tatiana: Yeah, that is a great question. So we work in parallel a lot. So our engineers, because we're all part of the same team, are involved in like almost every step of the process. So from the kickoff meeting, where we go over the brief, to the user interviews, even when designers start designing things, oftentimes, we'll have some ideas for animations and then we'll do like a brainstorm that usually includes our marketing partners, the engineers and the designers, and we all start talking about what we think is possible, oftentimes, then when we're still designing things, the engineer's like go off and start prototyping some things, which is really helpful, 'cause then we also immediately know some of the limitations, 'cause maybe we had some crazy ideas and they're like, oh, actually that's not going to be possible. Like oftentimes it's like, it's not possible within the timeline, 'cause I think everything is possible-


Charli: Eventually.


Tatiana: Not always, within the timeline. So yeah, a lot of parallel work. And then I wanna say, usually, when the design is in about like maybe a 60 to 80% stage, where the page structure is really solid, they start scaffolding the pages, so really building out the structure without the visuals. 'Cause usually the visuals are the things that change the most. This is important for us, 'cause that means once we have all the content in code, we also start kicking off the localization process. So then we can send all those text strings to the localization team and, 'cause they need to like, I think, generally, they need about two weeks to send that back. But then before we ship something, we need to do QA for like all languages. So that takes a lot of time as well. So there's like, yeah, there's a lot of work that needs to happen in parallel so we can launch those pages in all languages, with all visuals being translated. So yeah, there's a lot that goes into it.


Charli: Yeah, that is, that's a big process. I didn't even think about that. We just put our site up in English at ConvertKit, and so that's, localization is not something we thought about yet.


Tatiana: Yeah, it's still challenging.


Charli: Yeah, it sounds challenging. But I love that you do it, I love that you focus on it. Like you said, Stripe's very global and it makes sense. What happens after you launch? How close are you to the metrics of the site? Is there anything you're held accountable to or responsible for, when it comes to metrics on the website?


Tatiana: Okay, so I'm hearing two questions. The first, like what happens after launch? Usually after launch, we just watch Twitter and look at how excited people are, even though they keep telling us Twitter is not a real metric, but for us, it is. It's just, it's always really nice to see how people react to our work. But that said, our Twitter audience is probably not our core user audience, so we definitely can't use that as a metric. But usually at the beginning of a project, we collaborate with the marketing team to set some metrics we want to hit. And I think most of the time they are just like the amount of signups or conversion that we're looking for. And those are mostly owned by the marketing team. So after a launch, like Dolby, just following up on that and just keeping track, and making sure that we hit whatever milestones we set for ourselves. But from like a design and engineering point of view, usually after a launch, we have a lot of like what we call fast follows. So little bugs that come up. 'Cause like the one like flip side of having so many eyes on all of these launches on Twitter is that a lot of people also end up reporting little bugs, like on this weird version of Safari, or like on, like an Android phone that we didn't look at, so we keep getting a lot of bug reports. So usually like the week after launch, we just gather all that information into a paper doc or some other document, and kind of start going through, just getting through that feedback and trying to just fix as much as we can.


Charli: How long do you allow for that fast follow period? 'Cause I mean nothing's ever going to be perfect, and I'm sure stuff comes up and then you look at the data and you find, oh, this maybe isn't converting as much as we thought and maybe we should improve this. Like it's a constant thing. How long do you give it before you're like, okay, now we're gonna put a pin in this now and move on to the next.


Tatiana: It's usually like a couple of days to a week before those types of requests just become part of like our normal, like intake of requests. 'Cause we get so many requests on a daily basis, and we have this amazing producer, Lindsay, on the team, that goes through them. 'Cause they all come in through Jira, and I do not wanna like be near Jira in any way, so it's really nice that she does that for us, and then we kind of just like decide which ones we want to prioritize and which ones are just like not a priority at the time, because yeah, we can't do everything, unfortunately.


Charli: Yeah, unfortunately, we wish we could. Okay, well that answers my question about managing projects and project management. It sounds like you have a producer on the team who helps keep things on track in that way. Is there any team collaboration tools that you use to see lists of things yourself? Aside from-


Tatiana: Yeah, we use Productboard a lot, but that's more for like planning, just like see what's in the pipeline and what's coming up. And then we actually use like Dropbox paper a lot, just for our like day to day tasks and like feedback and QA docs and just like anything that we like, we're looking at it on like a daily basis. A lot of that is in paper.


Charli: Nice. And I don't think I asked you as part of the homepage, well, the site redesign process, but what design tool are you working with?


Tatiana: Oh yeah, so when we say 2020 redesign, everything was still in sketch. So I think we only switched to Figma last, like November, December, I wanna say, even though like our product design team had switched like way earlier, before us, it was like, so our team, because we're so small, and we had done the redesign in sketch, so we have built out the library in sketch as well. And then we had so many pages to redesign, So it just felt like a really like daunting task to move over to that library, to think about it, and then start redesigning all of those pages in a tool that we weren't really familiar with. But yeah, now we're fully converted over and we're doing everything in Figma, which is really nice for collaboration.


Charli: That makes a lot of sense. Okay, there's two questions that come as part of this. Also as part of the, when we were talking about the process of the site 2020, you mentioned content and how like the homepage content changed a lot throughout the process, that's happened to me every time I've designed a homepage too, I feel like it's our most important welcome page, we've got to get it right. Who is actually the one working on the content for the page?


Tatiana: So that would be our marketing partners. So most of, like most of the time it's product marketing, when we're talking about product pages. In this case, it was mostly Kritika, who's been on the marketing team for, I don't know, I wanna say like eight years by now. She's done so much work on stripe.com. She really like has that Stripe voice. 'Cause I even remember when I joined Stripe, she interviewed me, and I asked her, I was like, "Oh, who's the copywriting team, like who does this? 'Cause the copy is so amazing." And she was just like, "That would be me." Like very humble, and right now there's more people that do write copy. 'Cause all the product marketers actually write the copy, just because, yeah, it's every product page is so technical and so specific that you really need someone that is like very like knee deep into the subject to be able to write about it. So I think having a more centralized writing team wouldn't really work. I mean, maybe in the future, that's what we'll go for. But I think right now having the people who really know about the subject, write about the subject, is the best way for us to go.


Charli: And how much influence can you have on the content of a page too? Like when you were in your initial sprint and drafting at the homepage, I'm sure you had like, "We want a big section here, probably about this." How much influence do you feel like you have over it?


Tatiana: A lot, actually. So usually when we design wireframes, we design them based on like a story arc, without even having any copy or content, but more like, okay, what's the story we want to tell to our users? And then we ask the marketing team to kind of look at that structure and start filling out copy, but still not even thinking about how that would look like, design-wise, just like, what do you want? Like in each section, what do you want to tell the user? And then it's very much like a collaboration of like, okay, so we have these components that we could use, depending on the content. But I think a lot of it is like design pushing for a certain solution, 'cause I think it's like, and I'm sure a lot of people are familiar with this, we're like, we wanna have as little copy as possible on the page, I'm marketing one site as much as, so it's like, but actually I think at Stripe, the marketing team is really good at understanding that just less is more. No one's gonna read it anyways, if you put a lot of copy on a page, so just don't even bother. We always start with having like a really long page. And then once they see it, they're like, "Oh my God, this is so overwhelming," and we also end up doing a lot of user testing, where we just put like wire frames or like half-ass mock-ups in front of users, and we just ask them to like scroll through it and just kind of think out loud. And usually, like 90% of the case, people are like, "Ooh, this is a lot." And then we're like, "Told you so," and then we can start cutting copy a little bit.


Charli: Oh, that's really interesting, you mentioned that user testing there. How much does testing, whether it's user testing or AB testing come into play in your work?


Tatiana: A whole lot, like user testing gripes like most of our decisions, just because all the product pages we build are just like, even the products we build at Stripe, like as a designer, we are just not the core audience. So I feel like, as a designer, oftentimes you just kind of depend on your gut feeling, to make decisions. But it's really hard to do that, like the last product I shipped was like a revenue recognition product for accounting. Like, I don't know anything about accounting, so I can make as many assumptions as I want, but I won't really know until we talk to users. So yeah, you can learn so much from just talking to a couple of users, and literally, just giving them the page and asking them, browse through this as you normally would, and just give us feedback. Just any thoughts you have, you won't be offensive, just tell us what you're thinking. But that one was actually really funny, because we had a bunch of visuals in there, like accounting related visuals. So with a lot of numbers, and they would be looking at for two seconds and be like, "Yeah, those numbers don't add up." And I'm like, "This is just a mock up. I don't know anything about accounting," but they would notice those types of things, which I loved, 'cause I think generally, we notice details and we care so much about details, and we love to include little Easter eggs and stuff like that. So I love it when our users also notice that.


Charli: Yeah, like the Stripe product imagery. I noticed that it's always, it feels real. And I'm assuming it's not a real company's financials that you're showing on screen, but it feels real, and that's important for imagining and visualizing what the product does.


Tatiana: Yeah, exactly, yeah, you can't show customer's data, unfortunately, that would make my life a lot easier instead of always having to come up with fake data and redesigning the dashboard every time, but yeah.


Charli: How do you run these tests? 'Cause something that I've found difficult is to find the right target audience to get on a call with, or to like show a design to. Can you tell us a little bit about your process for running a user test?


Tatiana: Yeah, that's actually a really big challenge. I think it's much easier for product design, because they can just reach out to existing users. But our target audience is usually users that aren't on Stripe yet. So we usually try, actually, when I say we, it's mostly marketing that does the reach out to users. It's usually through connections or through early sales conversations. Sometimes, I mean, for instance, with the most recent launch, with the Reverek launch, like that's a product that's more like an add on to, like our audience was existing Stripe users that want to start using this, so in this case we were able to, yeah, but I don't think we found a perfect solution yet. Like a lot of it is just like reaching out, but then sometimes it's awkward, 'cause then they're using like a competitor and they don't want to talk to us, or they've tried to use, and for some reason, stopped using us. Yeah, unfortunately, I don't have a great answer for that.


Charli: Well, it's just nice to know that it's not just a challenge that I face, and that like Stripe even has this problem. So it's not surprising that I do too, I'm sure other listeners will be thinking the same thing. We have to talk about, as well, like we've touched on it several times throughout this episode already, but the impact that Stripe has on the design industry, you said that that's one of the main things that you do, once a launch happens, is that you watch for the feedback, and it's sort of that anecdata, is what people are saying about it. Stripe is known for setting trends, and I'm curious to know how conscious you and the team are, of this, when you're designing something. How much does this play on your mind? That in those early phases of the sprint or when you're refining a site and getting ready to ship it, you know, right, that this is gonna be something that people copy? How much do you think about that during the process?


Tatiana: I actually, I don't really think about that part. I think the thing that I focus on the most, and I think I'm speaking for the entire team and even the people that have left by now is it's not the idea of setting new trends, but it's the idea of like having that like really high quality bar and keeping that bar high. So it's not about doing something new or different, but it's about consistently delivering the quality work that is like what I mentioned, like the surprisingly great part. And I think by trying to reach for that, you just get to solutions that maybe other people haven't thought of. But I think another really big part, which we already touched on is the user feedback. I think it's, I, firstly, don't really look at websites like Dribbble or Siteinspire. I definitely used to when I was a design student, 'cause I loved seeing all that inspiration, but the things you see on there aren't necessarily designed for our users. Like we have such a specific user base with such specific needs. So I think for us, it's more valuable to talk to our users and learn from our users, and then just like take that feedback and try to be creative with like the input we get from them versus trying to see what other people are doing. 'Cause like something someone else might doing might work for them, but it will most likely not work for us.


Charli: It's like the design version of keep your eyes on your own pencil, and just focus on what you're doing.


Tatiana: Yeah, but people also often ask me where I get my inspiration, and I always tell them, I honestly just get it from going outside, and people who follow me on Twitter will notice, like I try to head to the mountains as often as I can. Even like, was it yesterday? No, on Monday, I was kind of stuck at work. And I just, like sometimes you just can't be creative. I just left at 3:00, went up to the mountains, and there was this like amazing sunset, and I was just like, these colors are so amazing. It's just such a great opportunity for photography, and just clearing your head, and then Tuesday I got back to work and I was like, cool. I have a clear head again, I can do this again. So I would definitely recommend people, if they're able to go outside, to just really, just get outside.


Charli: And definitely follow Tatiana on Twitter for the mountain photos as well .


Tatiana: That's Mt. Rainier.


Charli: Okay, so there we go then, that's the secret sauce then for Stripe design. Why it's so great. It's like you got to go outside, well, what you know, and then get inspired by nature, I love it. I'm curious to know how it feels though, as a designer, to have your work inspire a trend or like you said, end up being copied across other sites. How does that feel for you?


Tatiana: It's definitely flattering. I do feel like people are kind of giving us too much credit, but maybe that's because I know how messy it is to get to something, like to, or shippable states. So I think they only see the end result, and they're like, "oh my God, this is amazing." But by the time we ship something, I'm like, "Oh my God, I'm so over this," which I'm sure a lot of people can relate to, but it does add some pressure, 'cause I think, especially with the company scaling so much, and so Stripe is in hyper growth right now, and a lot of teams are growing, but they're not growing at equal pace. So a lot of teams around us have been growing. So for instance, marketing has grown a lot over the last couple of years, but my team hasn't. So we've been getting so much more requests, but then we don't have more designers to do it. So I definitely think that pressure of keeping that bar high definitely weighs on me. And I think I also just kind of feel personally responsible for keeping that bar high, especially like after BDC and Bill left, I'm now the oldest person on my team. So I just, I take it way too personal. So yeah, like anytime I see something that's about to ship that isn't quite right yet, I try to fix it or I just have nightmares about it.


Charli: And I'm sure that, with, along with all the praise and the copying, being such a public, I don't know, whenever Stripe launches something new, it's gonna, the whole design community is gonna talk about it, and that comes with negatives as well as positives. How do you handle or feel about the critique that you get? Or like honestly, sometimes it's not critique and it's just downright insults that people will say about designs.


Tatiana: I'm not gonna lie, I definitely take them personally, but sometimes they're also call-outs that are just, they're right, but we made, we just have more context on why we made certain decisions, and sometimes that is just timeframe, that we didn't have time to fix something. Or I know, for instance, when I say 2021 live, there was a lot of feedback on accessibility, and that was something we were hyper aware of, and we experimented with trying to make all of our colors more accessible, but it's really hard to achieve an optimistic, vibrant and futuristic brand if you toned down the colors. And that said, it's also like all of our content that is important to read is still accessible, but there's certain elements on the page that are secondary content or supporting content. And there, we just like to deliberately, to go, like artistic freedom, but we take that kind of stuff a lot more serious within the dashboard, 'cause like the backward is a tool that people use to manage their finances every day. So you'll also see some color differences, like the colors are a little bit darker in dashboard, which is exactly for accessibility reasons. Then I remember when those types of comments came out. I was just like, I don't know, it was an annoying feeling, 'cause I know you're right, and I wish there was a solution. Please tell me if you have a solution to achieve both goals. But we just haven't figured it out yet.


Charli: You said you have more context on the decisions and you knew what was purposeful about it, and I think it's important to keep in mind whenever you receive critique from someone, that you have more context-


Tatiana: Exactly, yeah, I think that's a really good point.


Charli: Yeah, we've talked a lot about this, the site 2020, but I'm curious about the other stuff as well. And you mentioned that you have this producer who helps put things in Jira, and then you prioritize together on what's to be worked on. But what can you tell us about the systems you have in place for getting the work done? Like do you work in quarters or two week sprints or six weeks cycles, or what's your framework for planning the work and getting the work done?


Tatiana: Yeah, so I think our really big experience is kind of get planned out, like on a yearly basis. But then within that, we'll do like quarterly planning, and that's mostly our producer with the managers, with partner teams sitting together, and just figuring out how many projects we can take on, based on head count and based on future head count. And then we kind of settle on okay, these will be the big milestones we'll be working on, okay, but then there's like a whole separate flow of just Jira requests coming in, which are just like smaller updates or little pricing updates or localization updates, or swapping out a user logo. Or we have a lot of UI from our users on the website. And if they changed our UI, we have to change the UI. So we definitely keep part of our time for those types of things. But we don't, we've definitely done some sprints in the past, it's not something we do on a regular basis. Generally, we have one designer for our big project. So it's usually when you see one of those binding pages go live, you can assume that it was the focus of one designer, but we just collaborate so much internally, we're like a really small team, so it's really easy to even, like on Slack, just be chatting about things or do a quick Zoom meeting to talk through things or go through more official critique moments. But yeah, that's kind of how we work on things. And I think, generally, designers have at least one to two, sometimes more projects going on at the same time, just because you can't always continue to work on one project. Sometimes you're waiting for a marketing review, or your waiting for your marketing partner to finish up writing some copy. So it's nice to have a couple of projects, so then you can like switch from one to the other.


Charli: Also sometimes you just get really stuck on a project and you need to be doing something else.


Tatiana: Yeah, then you just go to the mountains.


Charli: Ah yes, that's right, we learned that earlier. I need to remember that. Cool, So what's coming up next then for the WPP team? You've just done this huge redesign. How long will it be till you start the next one, and yeah, what's coming up next for you and your team?


Tatiana: I don't wanna be thinking about the next one yet, but there's actually a lot of things coming up for the team. We are going to grow the team a lot. So if anyone's interested in joining the team, star.com/jobs has all of them listed. I think we're about to hire at least 80 more people through the end of the year or, well, I'm saying this, this is September now, so I don't know when this will be live, but yeah, lots of people to hire, but we're also gonna expand the WPP team. We're about to start an events team, which is kind of coming out of the idea of doing our Sessions user conference virtually this year, we really learn that there's not a lot of good online conference, like ways to do it on the internet, and we just figured that that's an opportunity for us to make that better. We actually had our internal conference virtually this year as well. And we just built this amazing internal way. It's hard to talk about it without seeing it, but it was just a very interactive way of watching a conference. And I think we want to do a lot more of that kind of stuff. So we'll have an events team that sits within WPP, so it's gonna be focused on the online presence of events. We're also spinning up and experimentation team within the experiences team. So within my team, we're gonna hire more people to really focus on experiments, so that can be focusing more on like AB testing, but also just like experimenting in different ways. So yeah, we're gonna grow the team a lot, and we just want to do a lot of more cool stuff in the future, and we need so many more people to help us do that.


Charli: There we go, so if anyone has been listening and thinking like, dang, I want to take part in these sorts of projects and work with Tatiana, stripe.com/jobs, you said, is the place to go? Maybe just to end off, you could share with us something that you're really proud of from your time at Stripe. I'm sure you're proud of many of your design projects, because I mean, everything comes out looking beautiful from Stripe, and surprisingly great, like we said, but yeah, what's a project or an impact that you're most proud of, from your time so far?


Tatiana: Yeah, I mean, I'm honestly just most proud of what we've accomplished as a really small team. Everyone on the team is just like, just a gem, doing such good work, they're all such great collaborators. Talking about everything, like designers, engineers. It's just, yeah, we, yeah, I'm very proud of everyone, and I love working with them.


Charli: It is surprising to hear how relatively small the team is, working on the web platform, considering the size of Stripe as a company and considering the impact that you're designs have. So yeah, I hope this has been inspiring for a lot of people to hear about, what you can get done with a small team, if you allow the time for it and have the right processes in place for it.


Tatiana: Yeah, that's very well said.


Charli: And where should people go to find you online? What's your Twitter handle? Where do you want people to find you and your mountain photos?


Tatiana: Yeah, I post a lot of photos on Twitter. So my Twitter handle is @tatsvc. It's really weird, 'cause like vc is such a common term in the tech industry, but it's really just my last name, it's Van Campenhout, so it's, I don't know, I wish I could change my Twitter handle, but I can't. And then I also post a lot of photos on my Instagram, which is actually linked from my Twitter. I actually don't post that much about design, so I'm sorry about that, I'll try to be better about it, but I definitely find all of the photos on the mountains very inspiring. So if you wanna see those, definitely follow me.


Charli: And like you said, they have been the secret sauce to the design as well.


Tatiana: Exactly.


Charli: So this could be people's way to get them without going to the mountains themselves. Well, thanks so much for everything you shared, Tatiana. This is, like I have been fascinated. I hope the listeners have been as well. I've written down plenty of notes of things I want to try, and change about my process, yeah. Thanks for sharing a little bit of the behind the scenes of the great design we see at Stripe.


Tatiana: Sure, you're very welcome. I hope this was helpful to the listeners as well.


Charli: I hope you found it valuable to hear so much great detail about the process that went into the design of Stripe's 2020 website. What's clear to me is that the Stripe team sets very high standard for themselves, and that high standard of design has a big impact on the feelings of quality and reliability that the Stripe brand has too. As always, I would love to hear your takeaways from the episode, please leave them in the comments or tag me on Twitter or Instagram, I'm @charliprangley on both of those things, and if you need a tool that will help you put together a high quality build for your designs, check out our sponsor, Webflow, at insidemarketingdesign.co/webflow. I really appreciate this part of this show and appreciate yours too. If you're enjoying it, if you've been enjoying season two so far, please head on over to Apple Podcasts and leave us a rating and review, or just pass this episode on to a design friend who you think might benefit from it. I'd really appreciate that. Thanks for listening, and I'll see you in the next one.

Expand full transcript
Collapse transcript

Enjoy the episode?

Rate it on Apple podcasts or tell your friends to listen!

More episodes