O
Ochtarcus
Tools
0

Stripe Head of Design Katie Dill Reviews Startup Websites

Stripe Head of Design Katie Dill reviews startup landing pages with a focus on creating sites that build trust, converts customers and brings joy to the user experience.

Transcript

Speaker 0:

I'm Aaron Epstein, and welcome to another episode of design review. Today, I'm gonna be joined by Katie Dill, who is the head of design at Stripe, and we're gonna 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 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. I'm excited. This is be fun. Let's jump into it. Okay.

We got our first one here. This is MITO, predict your future health.

Speaker 1:

One of the things that I immediately react to this is you think about what is your first impression? Yeah. And how is this, you know, brand communicating how they think you should feel? I would say that this has a vibe that is a little bit more reboding about my future health. Yeah, yeah. As opposed to uplifting.

And I don't know if that's intentional because I don't know enough about this brand yet, but that's like just acknowledging my first reaction. Yeah. I guess the other thing I I resonate.

Speaker 0:

with is, like, there actually isn't a lot of information here. Yeah. And they're telling you 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.

Speaker 1:

sites hijack the scroll. Yeah. I think there's a couple of things there. So one, when you're looking at, like, web design, you you kind of have to think about it as that they want to leave. Like TikTok is calling. They've got other things to do. And so what your job is is to like show them why they should be there and help keeping them from every step of the way.

A lot of scrolls like that, you know, it's just like, I don't got time for that, right? And they're moving on. It also felt like there was just like not enough reaction happening. I think that was just like way too much of that video. Mhmm. And then never a good sign if you have to tell them how to use it. Right. Scroll to go like that.

You should scroll. Yeah. Exactly. Like, that should be more intuitive.

Speaker 0:

And it's a website, so, like, people should know what to do. Yeah. But it was not clear there. Yeah. 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, like, helps me understand a little bit about why I want this thing. Very.

Speaker 1:

good. Is this a carousel? It is not scrolling when I size 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.

Speaker 0:

And then how it works. Schedule test, receive results and action plan, take action, and test again. Is schedule tests.

Speaker 1:

a thing, or is it take the test?

Speaker 0:

Yeah.

Speaker 1:

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 have to consider is that there's a couple different reads in the website, right? It's just like, 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 personalized insights to help you live healthier and longer,.

Speaker 0:

how it works, schedule tests, receive results and action plan, take action, and test again,.

Speaker 1:

Go beyond your traditional physical with in-depth health insights and more scroll projects. So this is great. So like love product shots. That's kind of small. Can I really understand what's going on here? And also it was great that they did show the steps of how this works. I think people do internalize, like, well, what does this work? 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. Is that like, am I portraying, you know, 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, you know, I don't think was intentional.

Speaker 0:

and something to consider there. 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.

Speaker 1:

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 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 that I probably wouldn't have made it past, you know, scroll or And so there was just too much of that storytelling at first. And I think it wasn't for any value. Like, 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. Alright. MitoHealth, thank you for sharing. Okay. Next up, we've got Cygnos.

Speaker 0:

So let's see here. OpenTelemetry native logs, metrics, and traces in a single pane.

Speaker 1:

Okay. All right. As a you know, in relation to the one we just talked about, they're getting a lot more descriptive 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. So am I getting any value out of thumbnail? Yep. Alright.

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 and credibility.

Speaker 0:

The one stop observability tool. These are kind of small. I feel like maybe this is important, like the, like, core features of what they do that they'd wanna show people, but it's kind of hard to read that. I probably would have skipped over it. Yeah, I agree. There also was a lot of different typesizes.

Speaker 1:

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? Like, did they need that line, these are the trusted companies? Like, I already I get that just seeing it. Right? Like, 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 this diagram. Ingest data from 50 plus sources. Send your data and start monitoring.

Speaker 0:

I mean, there's a lot going on here once we start getting down here that feels a little overwhelming.

Speaker 1:

and makes it harder to dig in and understand exactly what I'm looking at. Yep. I mean, 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, well, what's the main like, what are the key points? Like, 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.

Speaker 0:

is code and logs Mhmm. Which have a lot of text in them. Mhmm. And when you try to show that in screenshots Yeah. It competes with the actual text that you're trying to communicate what's happening. That's fair. And and, yeah, so potentially, like, can you make that smaller? Or can you.

Speaker 1:

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. Built for developers crafted by humans. Are developers not humans?

Speaker 0:

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. Yeah. We actually have a question from the Signos 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.

Speaker 1:

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 would do, right? And then so it's not just like, just start. It tells you like, okay, you can try it. Yep. What I have seen some do is that they, you know, they say like, try for free. Get going with a trial.

It can get a little noisy. Also, you have to think about, like, well, what is the relationship with 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 for the first time, and then just like, hear a user, have a user talk out loud and what their reactions are. And you know, maybe this sentence doesn't make sense for them. Right.

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

Speaker 0:

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, and copy,.

Speaker 1:

or the targeting of the people that are landing on the page to make sure that they're actually the right targeted users. And, you know, that actually brings up another point is they should think about the journey of how did somebody even get here? What was the wording of the thing they saw that caught them here? Right. And then, yeah, 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? Yeah. And then just improve it all. 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.

Speaker 0:

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 was like Exactly. Exactly. Cool. Well, thank you, Signas.

This was great. Alright. Next up, we have Taiv. I think that's how you say it. Give your TVs superpowers. Taiv enhances live TV in restaurants to increase revenue and save time. K? Our average partner makes 2 k a location a year.

No cost. Cancel every time. Okay. We've got some glow we got a glowing button here that got my attention.

Speaker 1:

Yes. There there is a lot going on here. You 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 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 assets there.

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. They've got glow on the buttons. These arrows, you know, why does this one go up? Why does this one go down? I think 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? Nope. I also go down. So that, like, I don't think those are adding any value, kind of coming back to every pixel should add value. Similarly, up here in the nav, these color boxes around, I think you're trying to show that 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? Should always be thinking about when you're assessing It's like, what if I'm looking at it on a tablet? What if I'm looking at it on my mobile phone? Does it also condense well.

Speaker 0:

and tell that story well? Because your users oftentimes are on the go when they're coming to this kind of environment. Yep. And it 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. That group.

And I think a great way to figure out what should be your headline is to just ask your users. Yeah. Like, 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, you know, enhance live TV in restaurants to increase revenue. Yeah.

Now it's very clear to me, like, oh, I own a restaurant. This product is for me. Yeah. But I have to read that subline in order to get there. It is nice their logos kinda communicate this too, like Ferg's sports bar and, you know, so they most cantina, like, feels like restaurants. You know? So it feels like, oh, your customers are.

Speaker 1:

restaurant owners like me. Yeah. Yep. And once again, as we were talking about earlier, like, look at, like, those headlines. Like, is trusted by the best helping you right now? No. It's kind of just, adding a little noise to the page. And then one personal pet peeve, know, be super careful about, you know, the details in your grammar and 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. So get started, for example, is title case. Learn more is sentence case. You should always be consistent. Every one of those little things, know, it might just think 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, 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 and 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 then that also kind of like feels unbalanced. So I think there's some iteration that you could do on the logo. Yep. It's probably.

Speaker 0:

literally centered vertically, but because of the small stand at the bottom, the weight feels Exactly. Alright. Next up, we have Metroport, universal API for health care data. Okay. That's pretty clear. Get comprehensive patient medical data in seconds, not weeks. I'm curious your take on some of these, like, amorphous blob animations that that are relatively common on sites these days. Yes.

Yes. Indeed. I think it is a good thing to introduce some visual interest.

Speaker 1:

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 want 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 the same thing here. Like, what is the value of this thing? Is it communicating any attribute of which you are trying to relay? Does.

Speaker 0:

it communicate anything to you? No.

Speaker 1:

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 I would not say that is kind of communicating there.

No. Yep. Okay. We got clear call to action, book demo. Two of those, view docs.

Speaker 0:

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 health care. 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.

Speaker 1:

It's getting kind of busy here, right? So we're bringing that same line thing in. There's a lot going on in these cards plus those Learn More buttons. 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 the most important thing?

Or for example, 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 see customer results. Yeah, that's a great point. And we got the diagonal arrows are back again. Oh, That's a hot trend these days. Yeah. This is an example of using a video on the site, and I think in a less effective way.

So here, the screenshot is just what we just saw. So that's no new value added.

Speaker 0:

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 so I think they nailed that. Yeah.

Okay. Great. Thank you, Metroport. Alright. And one last site here we'll take a look at from Aminoanalytica. So let's see here. Adaptation accelerated protein design just as nature intended. Mhmm.

Alright. We got some things growing in the background, maybe, colorful things.

Speaker 1:

What what was their question?

Speaker 0:

Okay. Let's see. Does a b two c style website, one that looks fun, personable, flashy, work for a traditional corporate B2B engineering company, or does it come across as unserious?

Speaker 1:

Okay. 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, absolutely you can be fun in a B2B world or solving these kinds of problems. Like, why not?

We're designing for humans, and humans want to have a little joy in their day. So I really, really appreciate that. I think there's like a lot of fun here. I think the color is energetic, I think 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. Yep.

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. Yeah. And, like, who is it for, and what is the problem that it's solving. Yeah. 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 I have the same reaction, which is I'm.

Speaker 0:

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 an AI company working in protein design. Yeah. I guess if you do protein design, then maybe.

Speaker 1:

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 like, how do you know what you're talking about?

Yep. And people are less likely to click something than they are to scroll. Yeah. And so I would definitely consider bringing that insight here and helping people understand, like, why should I trust Aminoanalytica.

Speaker 0:

for all of my protein needs? Yep. And it also stands out to me there's no call to action here. They could launch YC. That's Yeah. They launched you know, they've hosted their company on launch YC, and so they're directing people to that. And then there's a learn more button down here Yeah. Which I guess we can see where that goes.

Okay.

Speaker 1:

So we've got another very creative page here. Mhmm. You know, what's also interesting is that, you know, as we were talking about when you skim Mhmm. And people are just looking for the bolded things, they're looking for the headlines, don't bold the negative things. Yeah. Right?

Like, so now I'm just skimming, I'm reading trial and error, random mutations, and I 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, Aminoanalytica.

Speaker 0:

This was a very interesting site. Alright. 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'd love 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 and loved getting Katie's feedback, and we'll see you on the next design review.

✨ This content is provided for educational purposes. All rights reserved by the original authors. ✨

Related Videos

You might also be interested in these related videos

Explore More Content

Discover more videos in our library

Browse All Content