Stripe Head of Design Katie Dill Reviews Startup Websites

I'm Ain Epstein and welcome to another episode of Design Review. Today, I'm going to be joined by Katie Dill, who is the Head of Design at Stripe, and we're going to be taking a look at a bunch of user-submitted websites to give them feedback on how they can improve their designs. I'm super happy to be here at the Stripe offices with Katie Dill. Katie is the Head of Design at Stripe, and before that, was Head of Design at Lyft and Head of Experience Design at Airbnb. So Katie, thank you for having us today.

Well, thanks for being here at Stripe and thanks for having me on! I'm excited to jump in and get Katie's feedback on these sites. So I'm excited; it's going to be fun. Let's jump into it.

Okay, we got our first one here. This is Meo Predict Your Future Health. One of the things that I immediately react to is you think about what your first impression is and how is this brand communicating how they think you should feel. I would say that this has a vibe that is a little bit more daunting about my future health, as opposed to uplifting. I don't know if that's intentional because I don't know enough about this brand yet, but that's just acknowledging my first reaction.

Yeah, I guess the other thing I resonate with is like there actually isn't a lot of information here, and they're telling you to scroll to explore, and they're not really giving you much above the fold here. So, oh, okay, the weird image got bigger: "Change Your Health." Okay, and that's a lot of scrolls. Yeah, and they've taken over the screen. I hate when sites hijack the scroll.

Yeah, I think there's a couple of things there. So one, when you look at web design, you kind of have to think about it as they want to leave: TikTok is calling, they've got other things to do. So your job is to show them why they should be there and help keep them with every step of the way. A lot of scrolls like that, you know, it's just like, "I don't got time for that." It also felt like there was just like not enough reaction happening. I think that was just like way too much of that video. And then it's never a good sign if you have to tell them how to use it, like "scroll to."

You should scroll! Yeah, exactly! That should be more intuitive, and it's a website, so like people should know what to do, but it was not clear there.

Yeah, so okay, here we go: "Blood work and personalized insights to help you live healthier and longer." Like, I don't know why they didn't just start the site here. Yeah, that's very descriptive. It helps me understand a little bit about why I want this thing. Very good.

Is this a carousel? It is not scrolling when I say, "Oh, okay, there's like a hand thing there." Yeah, so that's interesting. Like your first reaction was like, "This should scroll," which like it was communicating well, right? It was like hanging off the edge. Like I thought that, but yeah, I would have as well thought to scroll.

And then how it works: "Schedule test, receive results, an action plan, take action, and test again." Is "schedule test" the thing or is it "take the test"? I guess you need to take the test; that's kind of missing in the steps here. And it's just like, "Well, what is the key value?" I think the other thing, you know you have to consider is that like there's a couple of different reads in the website, right? It's just like, you know, what's your hierarchy of information? A lot of people just scan, and so if I was just scanning—if I just read the headlines, would I understand it? Yep! And so that's where I would just like kind of question that.

Yep, so if we're reading the headlines: "Blood work and personalize insights to help you live healthier and longer. How it works: Schedule tests, receive results, and action plan, take action, and test again. Go beyond your traditional physical with in-depth health insights." And more scroll hijacks. See, this is great! So like, love product shots; that's kind of small. Can I really understand what's going on here? And it also was great that they did show the steps of how this works. I think people do want to internalize like, "Well, what does this work and how is that going to make me work?"

It's interesting; so they're showing an example that this person is 21 years old. Is that their customer? So you should think about every one of those details: "Am I portraying who I'm actually talking to?" It does appear there's also a little funky drop shadow under that "measure" button: "Tracks ladder." So that's just like a tiny little detail, but that I don't think was intentional, and something to consider.

Yep, and there's actually the founders submitted this site with a question, which is, "We'd love to increase conversions while telling a story with compelling visuals and animations. How do we balance both?" Well, yeah, this is so perfect with, you know, what you and I are reacting to. I mean, I think one of the things they've done well is that the CTA is there; it comes as I go down the page. And, you know, I don't know about the bottom, but like, you know, making sure that it's never hard to find the next action. But I think our both reaction was just like, "I probably wouldn't have made it best, you know, a scroll too."

And so there was just too much of that storytelling at first, and I think it wasn't for any value. Like I didn't necessarily take away from that video, "I get it," and like "This is for me." Again, there was like a picture of an older man and then yet it's telling me I'm a 21-year-old, so I'm not really, you know, understanding: "Is this for me, and what do I go and do about it?" Yep, but it sounds like starting with something more concrete around what is this and who is it for is probably a better place to start than where they're starting right now.

I think so, something to work with here for sure. Great! All right, Meo Health, thank you for sharing. Okay, next up we've got Signas, so let's see here: "Open Telemetry, native logs, metrics, and traces in a single pane." Okay, all right, as a, you know, in relation to the one we just talked about. They're getting a lot more descript up front; they're like, "What this is, what's it for, a little bit about, you know, kind of relaying a bit about who it's for."

I think that that is strong. I also really love the product shot right off the bat. I get a sense of like, "This is a thing I can buy; this is what it would be like." Also, what's pretty great here is that it's a video. I can tell by the little video thing, but the screenshot is useful. It's not great when people include a video, and it's just like, you know, nothing—it's like no value whatsoever—because I might not always click on the video getting any value out of the thumbnail.

Yep, all right, and then we get a bunch of logos here, and I recognize a bunch of these logos, which is good, so that helps build trust and credibility: "The One-Stop Observability Tool." These are kind of small. I feel like maybe this is important—like the core features of what they do that they'd want to show people—but it's kind of hard to read that, and I probably would have skipped over it.

Yeah, I agree. There also was a lot of different type sizes going on here. There's a lot to take in. I think one question you could always ask yourself is like, "Is every one of those pixels adding value? Did they need that line: 'These are the trusted companies'? I already get that just seeing it, right? I don't know if I need that information there too, so that you can focus on more of the core things you're trying to explain.

Yep, okay, now we've got a diagram and... justest data from 50 plus sources, send your data, and start monitoring. I mean, there's a lot going on here once we start getting down here. That feels a little overwhelming and makes it harder to dig in and understand exactly what I'm looking at.

Yeah, I mean, I think it's really nice that each of these value propositions are complemented with an image. It helps me get a sense of the product, and it helps me better understand what I would be getting. But I do agree with you that there is just like a lot going on, and you know, I'm kind of trying to wonder like, "What's the main—like what are the key points? Is it all of this or like what are the three things I need to know?"

Yeah, I think one of the tricky things is it seems like part of the product here is code and logs, which have a lot of text in them. When you try to show that in screenshots, it competes with the actual text that you're trying to communicate what's happening. That's fair, and yeah, so potentially, like, can you make that smaller or can you abstract it a little bit to give some of the sense of it, but without being too busy?

Yep, all right, and we've got a... oh go ahead: "Build for developers crafted by humans." Our developers, not humans? Sounds like maybe they don't think so? I don't know; I get what they're trying to do there, but yeah, I don't know.

Yeah, we actually have a question from the Signas founders. They say, "How can we improve the landing design to improve click-through rate, i.e., the percent of people who click 'Try Signas Cloud' from our landing page?" Okay, so let's see. We've got a button up here; we've got a button down here. Any advice for them to improve that conversion rate?

I mean, what I will say that they're doing really well is that I think, you know, the CTAs—they're clear what they do, right? And then so it's not just like just start; it tells you like, "Okay, you can try it." What I have seen some do is that they say like, "Try for free; get going with a trial." It can get a little noisy. It also—you have to think about like, "What is the relationship with the value exchange in your product?" And so, you know, is a free trial the right thing, or is that the right thing to communicate?

So I don't know if that's the right answer. Honestly, I think they're really doing a great job by showing the product right off the bat. My guess is that the key thing for them to do if they haven't done it already is to listen to users—doing what we do; sitting down, looking at it for the first time and then just like hear users talk out loud and what their reactions are. Maybe this sentence doesn't make sense for them; it doesn't make that much sense for me, but that's because I'm not their user. I would be more curious what the user thinks.

Yeah, from a pure visual perspective, like it's clear there are buttons and clear call to action. So my hunch is the best way to improve conversion rates is one in how you are communicating the value of the product and showing it off—whether it's screenshots, videos, or the people that are on the page—to make sure that they're actually the right Ted users. And you know, that actually brings up another point: they should think about the journey of how did somebody even get here? What was the wording of the thing they saw that got them here? Right, and then what happens when they hit that button? How easy is it for them to sign up and get going?

One really great thing for any organization to do is just like map out the user journey—like each point, what is happening, and how good is that point? Is it actually working or not? And then just improve it because sometimes it's misleading—like this thing is great, but the thing right before it tells a totally different story and that's where your problem is.

Yes, that's such a great point! People, I think, start from here and try to evaluate and figure out what to do, but it actually starts with what got you here. Yeah, was it an ad that said the promise was different than what you're hitting here? And then you're like, "Wait, this was not the thing that I..."

Exactly! Cool, well thank you Signas. This was great! All right, next up, we have Taive. I think that's how you say it: "Give your TVs superpowers." TI enhances live TV in restaurants to increase revenue and save time. Okay, our average partner makes 2K location a year, no cost—cancel every time!

Okay, we've got some glow. We got a glowing button here that got my attention! Yes, there is a lot going on here. As we were talking about like how well does it communicate what this thing is, who's it's for, and what the value is? I think, you know, they are trying to direct that like right on. It's a lot to take in, but I do think that it's powerful that they are kind of communicating some of these aspects there.

I think they could clean up the design of it and how it's shown. I don't know if it's really adding value to have so much going on—there's a moving image behind it, for example. There've got glow on the buttons, these arrows. You know, why does this one go up when does this one go down?

You know, I think, you know, what this would communicate to me is that I go down when I push this, but like do I go off to somewhere else with that? No, I also go down. So that like I don't think those are adding any value.

You know, kind of coming back to every pixel should add value. Similarly, up here in the nav, you know, these color boxes around, you know, I think you're trying to show that like there's different users and that's why these different things are a part of it, but I'm not sure that's necessarily an advantage.

One other thing—we haven't done this yet. Make your window smaller. How does it work on a mobile device? We should always be thinking about when you're assessing it--it's like what if I'm looking at it on a tablet? What if I'm looking at it on my mobile phone? Like does it, you know, also condense well and, and tell that story well?

Because your users oftentimes are on the go when they're coming to this kind of environment. Yep, and seems like it performed well here.

Yeah, one of the other things that stands out to me is like "Give your TV superpowers." I don't know that that's how their users think about this product. And I think a great way to figure out what should be your headline is to just ask your users: "How would you describe our product?" Because chances are the way your users think about your product and would describe it is the way that other users potentially would too.

But that next line: "Enhance live TV in restaurants to increase revenue," now it's very clear to me: "Oh, I own a restaurant; this product is for me." But I have to read that subline in order to get there. It is nice their logos kind of communicate this too, like Ferg Sports Bar and, you know, So Most Cantina—like feels like restaurants, you know, so it feels like, "Oh, your customers are restaurant owners like me."

Yep! And once again, as we were talking about earlier, like look at like those headlines: is "trusted by the best" helping you right now? No, it's kind of just like adding a little noise to the page. And then one personal pet peeve: you know, be super careful about, you know, the details in your grammar and your casing. So "Give your TV superpowers"? I don't know why "superpowers" is capitalized.

It's like a kind of hybrid between title case and sentence case, so sticking to that consistently is important. So "Get started," for example, is title case. "Learn more" is sentence case. You should always be consistent. Every one of those little things, you know, it might just feel like, "Oh, that's not a big deal; the user could still read it," but it's a little point of friction. And again, it's something that erodes trust—like if you're not on top of that detail, what other detail are you not on top of?

Absolutely! Other things I would maybe take a look at. So in the logo, what we have here is it looks like it's a TV that is cut in half. Yeah, is that the communication that you want to have? Like you're breaking TVs? You know, you're ripping them apart? You're slashing them? Seems like it doesn't correlate as much with what they're trying to accomplish with the actual brand.

Agreed that the name is hard to understand or read, and then how the two sit together—it looks like the word is sitting kind of below the actual icon, and that also kind of feels unbalanced. So I think there's some iteration that you could do on the logo.

Yep! It's probably literally centered vertically, but because of the small stand at the bottom, the weight is off.

All right, next up we have Metroport: "Universal API for healthcare data." Okay, that's pretty clear! Get comprehensive patient medical data in seconds, not weeks. I'm curious your take on some of these amorphous blob animations that are relatively common on sites these days.

Yes, yes indeed! I think it is a good thing to introduce some visual interest. It's a good thing to bring dynamic attributes into the site; it makes it feel a little bit more alive. And sure, like, you know, beauty is engaging. People want to be among beautiful things, so I don't think that's ever wrong.

But what I do think they have to also think about is like, "Well, what is it actually communicating? Is this aligned with who we are and what we wanted to do?" I think a really great practice is like write down on a piece of paper as you're going into your website design: "What adjectives do we want people to feel? What is our brand? What is that energy we have?" Like so for example at Stripe, like we purposely are, you know, about exuberant color because we're about positivity and we're about progress, and we want to look optimistically at the world—and so that hopefully communicates through what we do.

And I would ask, you know, the same thing here: "What is the value of this thing? Is it communicating any attribute of which you are trying to relay?" Does it communicate anything to you?

No! It also really bothers me that it's kind of cut off there at the end—like those lines really want to go outside the frame, and they do not. Yeah, they stop over here too! Yeah, exactly! So it's like, you know, do you want to show your technical prowess with this? I would not say that is kind of communicating there.

No, yeah. Okay, we got "clear call to action: book demo, two of those, view docs." I can't tell what these are under here, so not really adding a lot of value.

Okay, we've got some more logos to build trust: "Trusted by leaders building the future of healthcare." So I assume these are customers and links to more customer results? Okay, these must be their specific products: "They have a medical API and a dashboard."

It's getting kind of busy here, right? Like so we're like bringing that same line thing in; there's a lot going on in these cards plus those learn more buttons—like it's a good idea to make your CTAs clear, but those are really overpowering. And I also think you should think about the hierarchy of your CTAs. So are those, you know, the most important thing? Or for example, that, you know, that book demo CTA up here is probably more important, so you might want to think about making these more like secondary links—like your customer results.

Yeah, that's a great point! And we got the diagonal arrows are back again, so that's a hot trend these days.

Yeah, this is an example of, you know, using a video on the site, and I think in a less effective way. So, you know, here the screenshot is just what we just saw, so that's no new value added. I think if you're going to include a video, make sure that screenshot is adding value, even if I don't tap on it.

Yep, yep, I think that's great. And then, you know, the question from the founders is, "Is our value prop clear enough?" And I think, yeah, I understand what they do from this right out of the gate, so I think they nailed that.

Yeah, yeah. Great! Thank you Metroport. All right, and one last site here we'll take a look at from Amino Analytica.

So let's see here: "Adaptation Accelerated Protein Design just as nature intended." All right, we got some things growing in the background—maybe colorful things. What was their question?

Okay, let's see. "Does a B2C style website—one that looks fun, personable, flashy—work for a traditional corporate B2B engineering company, or does it come across as unserious?" Ah, okay, okay.

This is a great question! I love this! I love what they're trying to do here, because number one, I would say like absolutely you can be fun in a B2B world. You are solving these kinds of problems—like why not? We're designing for humans, and humans want to have a little joy in their day!

Yeah, so I really, really appreciate that. I think there's like a lot of fun here, I think the color is energetic, and I think that there's some value in that. What I think you have to be super careful about is that at what point does it start eroding usability? And you know, the logo is difficult to read. There's a lot going on here—like for example, why does "adaptation" have to be bigger than "accelerated"?

As I go down here, these are, you know, there's just a lot going on with the—it moves. There’s a lot going on—like this actually is kind of like radiating in some way. And the different typefaces that are used, I don't know if we’re actually making it useful; it's like actually kind of harder to read, and in that way, I'm not actually learning what the product is and like who is it for and what is the problem that it's solving. So I would say don't lose the fun, but definitely go back to making it more effective in how well it communicates, because you don't want to lose that.

Yep, yeah! I have the same reaction, which is I'm a little confused who this is for—like who the user is and who they're trying to attract—and maybe that means I'm not the user. But I also don't see it being communicated here.

Maybe this is the part where they would say that it's a company working in protein design... Uh, yeah, I guess if you do protein design, then maybe, and I will you scroll to the bottom? Okay!

Yeah, so there's not a lot here, and so they're making me have to hit a button to go and actually get that insight and like is this for me? And like why should I trust this company? Like what is it—like how do you know what you're talking about? And people are less likely to click something than they are to scroll, and so I would definitely consider bringing that insight here and helping people understand like why should I trust Amino Analytica for all of my protein needs?

Yep! And it also stands out to me there's no call to action here. They posted their company on launch YC, and so they're directing people to that, and there's a learn more button down here, which I guess we can see where that goes.

Okay, so we've got another very creative page here. No—what's also interesting is, you know, as we were talking about when you skim and people are just looking for the bolded things, they're looking for the headlines—don't bold the negative things, right? Like so now I'm just skimming, and I'm reading "trial and error, random mutations," and I don't know if that's what you want me to take away. You want me to take away the value.

Yep, yep, that's a great point. Awesome! Thank you Amino Analytica; this was a very interesting site!

All right, and that does it for another episode of Design Review. Katie, thank you so much for joining us; that was awesome!

That was so fun! We could do this every day.

Yes, I would love to! We should do it again!

And thank you to Stripe also for hosting us here, and thank you all for watching. Hope this was helpful in getting Katie's feedback, and we'll see you on the next Design Review.