Does Your Startup Website Pass The First Impression Test? | Design Review

When someone clicks over to your website, this is how long you have to make a great first impression. What's your takeaway? What do you remember from that? It was pretty something in cleaning services I think. I know what it does; I have no clue, so please tell me.

If you can't capture their attention in that time, it doesn't matter how good the rest of your website is. So today we're going to be focusing on how well your website can make that killer first impression. Welcome to another episode of design review.

[Music]

So today we are very lucky to be joined by Zach Aniso. He's the former CEO of Dribbble, which is a community for designers to share their work and get hired. Thank you for being here, Zach.

Thanks for having me! We're going to spend a few seconds getting our initial impressions on a bunch of different websites, and then we'll turn off the site and we'll just talk about what our main takeaways are from those initial impressions, and hopefully have some really useful feedback for our audience here on what they can do to improve their sites.

Perfect! All right, so first up we have Artisan AI. Let's start the clock on this one. Digital workers called Artisans, and world-class software meet the first Artisan, Ava, the sales rep.

Okay, all right, that was a few seconds. What's your takeaway? What do you remember from that?

Purple! That's exactly the word I was going to say. I think there was a lot going on. I didn't really know the hierarchy; I didn't know where to focus.

Two headlines, right? Yes, I know it's an AI assistant, but it didn't say that. I wanted it to say that. It talked about digital workers. I think Artisans, and I'm like, what's an artisan? So, like, that first rule of like, don't make me think—I'm like having to think about what are they trying to tell me.

There was a video; we didn't play the video, so there's probably some important stuff in the video that we didn't learn about. I think they could probably summarize the above the fold into one headline, one byline, and one call to action.

I think that's a great point, 'cause actually you look above the fold here and we have two equal weight columns, and I think what that tells the user here is that both are equally important, and that you should weigh both the same. Look at this, if you scroll down, like that should be the headline and it's below the fold. Everything else above the fold is kind of just noise, and it's super busy and I didn't know where to look.

Yep, but this one's like super clean and really just kill all that and just make this the hero. And there's a bunch of different call-to-actions here too, which I think sometimes when people are designing websites, they're like, let's put a bunch on here because certainly we'll get the user with one of them. But instead, what happens is you end up kind of creating the paradox of choice a lot of times where people just don't click on any of them.

Totally!

Okay, next up we have Bottomless. Your dog food, peanut butter tea, always in stock, repeat deliveries at the perfect time. Based on your—great domain—right? bottom.com.

Oh yeah! Not even... okay, we got a few seconds. What's the takeaway? What do you remember?

Uh, it was pretty... yeah, it was clean. Uh, packaging. Yeah, I saw physical products there, right? I was very focused on the URL, and then you took it away before I saw what it does, but it was like protein for dogs or something? Peanut butter for dogs, I think.

Okay, yes! All right, well let's pull it back up here.

Okay, um, yeah. So I actually remember Bottomless from in the batch. I didn't want to bias through there, but they have a smart scale, okay, that originally it was coffee, sat on, and it would automatically reorder for you when you were about to run out based on the weight of the package that was left.

Oh, that's awesome!

Yeah, so it's like the Amazon, you know, auto subscribe and save kind of thing.

Oh yeah! Except it does it intelligently based on how much you have, but I missed the smart scale. I didn't see the scale; I thought it was— I saw dog food. I thought it was dog food. I mean, I had a split second, but my initial intuitive take was that it was clean. I think it looked like a trustworthy brand.

Now that you're explaining it, I want to click on how it works. So does it scan the barcode to like how does it reorder? Like how does it—like that's—I'm intrigued now.

Yep!

Yeah, so it seems like the takeaway here is like we both got that there were physical products happening here and then it's always in stock. So like that's a little bit of a marketing thing rather than like we automatically reorder for you.

I think it's fine, though, 'cause it's like clean enough that it gets your attention and you kind of want to learn more. It's not confusing.

Yep, and they have actually the right phrase in there which is repeat deliveries at the perfect time. Yeah, that could be a little bigger; maybe talk about that a little bit more.

Like how can designers use animation to draw attention or become more memorable in the first 5 seconds when somebody's viewing their site?

Yeah, I mean like we are in an animated world, right? And so the traditional web has always been static text and static images. The original internet had no images, so that's even new in the last, you know, two decades.

So I think, you know, leveraging animation and bringing motion in and just even that rotating those words where it said dog food, like that drew my eye in and I knew that's where I was supposed to look. So if they had a really nice clean headline and then the illustration had motion to kind of show me the product in an intuitive way, then it's kind of like a no-brainer and you kind of right away know what it is.

And I think the key of what you said is, like, movement draws your eye. Totally! And so if there's things that you really want to make sure that people pay attention to and right out of the gate, put some motion around it, have it animate in, do something, and that will draw the viewer's eye and that'll actually probably become the memorable piece of this, 'cause I think we remembered the different tea, kombucha, bananas, peanut butter, and that's with us even after just a few.

A cool product, though! Very cool, thank you Bottomless!

Okay, next up we have CloudThread. Let's check it out.

Okay, I think I know what it does. Um, I have no clue, so please tell me.

So it says something about like, it's monitoring usage across like multiple tools? Okay, infrastructure stack I think? And it's going to save money, but yeah, there was a lot.

So I think the last one we talked about motion; this one had motion, but the motion distracted me from the main message.

Yes! Um, so I didn't really catch what it did.

Yeah, I think my takeaway was like something equals broken. But like, I don't know, I saw broken.

Yeah, something equals broken was my takeaway, and the problem was the motion had too much text and it was moving too quickly, and like I just couldn't process. I didn't know; I didn't know the words either. Like the phrases were like jargon that weren't familiar to me. Like, I think this is like devops infrastructure stuff, not really for me, but maybe someone on my team would like this.

Yeah, and so I still can't figure out what is broken here. Here's these two things; like these are like sentences that rap. So when something's moving, you kind of want each phrase to be really short and easy to digest. If you have to read each of those sentences, you're—it’s moving too fast, so you kind of just skip over it.

Yep, like activate finops, bridge the gap between—like these are all just kind of like very vague, fluffy kind of things that don't give me clarity in what they actually do.

So, okay, take it back. I still don't know what it does. What does it do?

Um, your usage optimization pipeline is wasting you time and money. Again, like the entire above the fold is explaining to us, it’s not telling us like what they do to fix it.

I don't—I don't know the problem either, though.

Yeah, I still don't understand what the problem is. But something about a usage optimization pipeline? I don't know what finance and engineering aren't talking to each other. We need to get them in a room!

Okay, oh, we got the CEO! We got finops! We got engineers! And then you see the tools, right? You see the tool icons—there's like a stack of tools connecting them somehow.

Um, fix it!

Okay, so now you can fix it with them. We don't know exactly what we're fixing, and we don't know what they do to fix it, so here's more.

So many diagrams on this—delivers the first dedicated distributed cloud cost ownership fee. Too much jargon.

Now we're getting into like smaller text that's really light gray color on a gray text in a black background that is hard to read.

Yeah, old man eyes over here!

Yeah, I think I would have given up and hit the back button by this point.

Yeah, so I think the takeaway for CloudThread here is simple language. Communicate very clearly what is the problem that you're solving and how do you solve it. What is the benefit for your users here? Because you want people to hit this page and right off the bat understand what you do and then understand, is it for me? And we had to go pretty deep and I still don't know that we actually got the answer to those questions.

Yeah, cool! Well, thank you CloudThread!

Okay, next up we have Integrated Reasoning, so let's check this one out.

Uh, Integrated Reasoning. Okay, one of AInd high throughput processors designed for combinatorial optimization.

Okay, do you know what those words are?

I like the animation, yeah, but it's probably not needed.

Yeah, no, I don't—I don’t know what this company does.

Yeah, I do like the domain, though. I think that just the branding is really important and having a URL that you can remember, so it's like reason. Like reasoning, I could probably remember that and come back and find.

Above the fold? Uh, hero? I think the jargon, um, I think we have to scroll some more to find out what these guys do.

Yeah, it's possible that the language that they're using there is actually the right language for their customer, and that the type of people that need this product would instantly understand that and go like, oh, that is my problem! Like, I need this.

And we are not the target audience, and so for us, we're just like, I don't know what that is.

Yup! But, um, that’s what I would test if I were them.

I think one of my takeaways was probably 80% of the page was just that like wavy background thing; there was empty space that could have been used to like communicate more about what they do or get somebody excited to want to learn more.

I think there was like a preloader too, and it waited for the preloader to load that wavy thing, and so the wavy thing wasn't worth waiting for it to load.

Yep! So yeah, definitely there could be a better use of space up there, and then the text was really small too.

Yeah, so like it was kind of hard—like I had to strain my eyes to get in there and read the light gray, very small text. Their company name was very big; like that was good. Like I was like, okay, I'm on Integrated Reasoning’s homepage right now.

Um, so if we do scroll, uh, we got more animation.

Okay, but it’s hard to read because it's all sideways.

Yeah, and it was funny; I just spent so much time trying to read the sideways moving text that I didn't even read the like really big letters—what we on the big letters—your best work doesn't deserve a speed limit.

So it's still, I think, just marketing without saying what it is.

Um, at last hardware and algorithms and harmony. So if you scroll all the way to the bottom, there's these amazing animations, right? They, somebody really enjoyed making these, but the animations really kind of distract from telling the story of what this company does.

Like I still don't really understand what they do, even getting to the bottom of it. But really cool animations, but the animations aren't really doing a job of telling the story.

Yeah, it seems like the best animations are the ones that guide you to a very specific thing that you want the user to take away or that helps to better illustrate a concept that is hard to do with static text or images or something like that.

And it seems like these don't really do either of those use cases.

Yeah, cool! Thank you Integrated Reasoning!

All right, next up we have Capacity. Let's check it out here.

Make your heat pump smart!

All right, okay, all right! What do you remember?

I think I know what this product does. It seems like a smart heat pump. I think it's going to save me money on my electric bill.

Yeah, it seemed pretty straightforward, and there’s a little house thing over on the side, and yeah, and it's pretty clean.

Yeah, all right, let's go back to it then.

Um, since I was pretty straightforward, it seems like what they do well here is they don't throw too much at us.

Yeah, like there was one, two, three, four, five words in the headline and like six words in the sub-headline, and so within 5 seconds we easily read that and were able to, you know, digest the illustration that was over on the side and not have a bunch of other information bombarding us and distracting us from the main things that they wanted us to take away.

Yeah, absolutely! I say like the illustration is a little bit just kind of plain, kind of basic.

Um, it'd be cool to kind of see like what's the product, right? 'Cause I got the messaging—everything was kind of spot-on, very clean design. But I kind of want to see what the product looks like.

Yeah, that's the one thing missing.

Yeah, that's a great point! Um, like is this a new heat pump I have to buy and replace my existing one? Is this an add-on? It says make your heat pump smart, so it makes me think there's some kind of add-on.

Is it hardware? Is there software involved here? Um, that's not super clear to me, but um, you know, I think the other thing is I think the sub-headline and the text on the buttons could probably be larger, um, because they have the space and there's not a lot of words, and I wouldn't have to strain as much through that.

I don't know; maybe we're just getting old or something?

No, good point! I think they definitely went through some cycles with copywriting here because this feels distilled and it definitely feels concise.

So yep, good job! Awesome! Cool, well thank you Capacity!

Next up we have Rollstack.

Okay, automate your slide decks and documents for client QBR, client MBR, pitch decks, board presentations.

Okay, what do we remember?

I think I know what it does, right? I think that's—that checks that box of like I think it's some kind of automation that pulls in multiple resources and automates some pitch decks for you or presentations.

Uh, let's jump back in here and take a look.

Yeah, so there's the blue; they got the yellow. I spent a long time on the animation here, which kind of took me away from some of the other stuff.

Um, there is a lot that's moving here, and you know we have a theme going here, I think, around animations. But this is another interesting case where there's lots of animations going on at the same time, and when there's lots of animations going on at the same time, then it makes you go like what should I focus on right now? And kind of pulls you all over the place.

Yeah, I think it's just that, you know, design rule number one of, don't make me think!

Um, was it a classic book? Steve Krug, I think, was the author.

These diagrams are technical; there's icons—you try to have to understand like what are the references of the icons? Um, there's multiple browser windows. What's actually Rollstack rolling into these different browser windows?

Um, so it’s a lot to digest; it's kind of technical. I think if you're going to use the illustrations in the animations just make it really simple so it's just a no-brainer and quickly explains like what the product does.

But I think we did pick it up—you know, I think we—it is telling that story.

Yeah, but it's a little complex, and I don't know, I think the white text on this color blue, from my aesthetic, was a little hard to read.

Yeah, yeah, I think also there's a lot of stuff moving really fast and if I'm not watching it the entire way through, then I feel like I've missed something, and I'm starting halfway through and I don't have the context for like what's actually happening.

You know, it's always tricky to figure out like should you show screenshots?

Yeah, or as they're doing here, you can see they kind of have these like pencil outlined, um, like browser windows that they're trying to show, um, or a presentation window or something like that.

And because it's this little white border on the blue background, it's harder to tell like what that actually is unless you really focus in on it.

We got small icons, there's just too much small stuff here—lots of details too where you're trying to digest like what each of these little pieces—like there's like a percentage that floats down from the Rollstack—like what does that mean?

There's a lot of detail they're trying to push into the illustrations that it's just hard to digest.

Yeah, and then we have little icons at the bottom. So okay, I see that's a Notion icon, but that was kind of hard to tell.

Um, so I assume that's like different formats that they support, but what does it represent, right? Like what does that actually mean?

Yeah, and if that's the point you want to make, like just show really big icons and say we support these formats. Be very explicit about it rather than having users try to read between the lines of fast moving animation to try to pull that important piece of context out.

Yeah, I do kind of want to check out the product; it looks interesting!

There you go, maybe you got a customer!

So thank you Rollstack!

Next, let's check out some non-YC user submissions that come from the YouTube audience here.

So first up we have AmpStem.

All right—delivering excellence in every step, providing cleaning services that prioritize excellence because how we serve matters.

Something cleaning services, so I'm a sucker for like hero backgrounds, and that was like this beautiful nature scenery, but nothing about the background or the headline said cleaning services.

I only saw cleaning services like in the top of the browser!

Yeah, but I think the concept with cleaning services at it and like something that visualizes cleaning services would nail that delivery.

But, um, maybe it's outdoor cleaning services because they didn't specify; we'd have to scroll to find out. Clean garbage out, a litter—I don't know.

Okay, well, let’s go back and check it out here.

So, um, it's a value-driven tech firm dedicated to delivering tailored cleaning services.

I don't know; I mean I think my takeaway here is like there are so many different cleaning services and cleaning companies, like why should anybody use this one versus any others?

And just continuing to say we do cleaning services is not going to be the thing that's going to get somebody to choose them over—I mean the outdoors are just—I think like allergy medication, I think like everything but cleaning service!

Okay, and then I see at the bottom they're in Nigeria!

Okay, that might be good information to put at the top—because maybe somebody in the US or another country is interested in cleaning services and they're not actually a potential customer here. So maybe being explicit about that would be good.

Yeah, okay, thank you AmpStem!

Okay, next up we have Bert Labs. Let's see here—welcome to Bert Labs!

Innovation at the intersection of AI and IoT. Request a demo; creepy hand thing!

Okay, something IoT... yeah, uh, I don't know. The images were heavy.

Um, I think that's just, you know, big red flag there just for Bert Labs is that, um, you know, that's going to be, um, Google's not going to favor that, um, in search results just being a very heavy loading website.

Um, so optimize that. The image itself was visually interesting, but I don't think I picked up on on what it did out of the gate.

Why does Google deprioritize sites that have a lot of images or heavy load?

The world has moved to mobile, and so if you have a really heavy website on desktop—on a fast broadband like we do here—it's definitely going to be super slow on a cellular network and on a mobile phone.

Um, so Google has a series of criteria it looks at when it's ranking websites, and page speed is one of those. So you want your website to always load really, really fast and snappy, and then in the context of only having a few seconds—yeah, you know if we got 5 seconds to make a decision on if we're going to stick around if the page hasn't even loaded in at that point, totally, we're probably gone.

All right, that does it for this episode! Zach, thank you for joining us!

Thanks for having me!

Yeah, it's great to do this with you, and thank you to all the founders that volunteered their websites for review. Really appreciate it!

So, uh, if you have any feedback for us, any other topics you'd like to see us cover in a future episode, go ahead and drop it in the comments down below. We love reading your feedback, and until then, we'll see you on the next design review.

[Music]