O
Ochtarcus
Tools
0

Does Your Startup Website Pass The First Impression Test?

When someone visits your website you only have a few seconds to convince them it’s worth their time. So how do you do that?

Transcript

Speaker 0:

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 gonna be focusing on how well your websites make that killer first impression. Welcome to another episode of Design Review. So today, we are very lucky to be joined by Zach Anusco. 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 gonna 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. Alright. So first up, 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. Alright. That was a few seconds. What do you take what's your takeaway? What do you remember from that?

Purple. That's exactly the word I was gonna say. I think there was a lot going on. I didn't really know.

Speaker 1:

the hierarchy. I didn't know where to focus on. Yeah. Two headlines. Right? Yes. I know it's an AI assistant, but it didn't say that. Yep.

And I wanted it to say that. Yeah. Talked about digital workers, 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, like, what are they trying to tell me. Yeah.

There was a video. We didn't play the video, so I there's probably some important stuff in the video that we didn't learn about. I think they could probably summarize the entire top of fold into one headline,.

Speaker 0:

one byline, and one call to action. I think that's a great point because actually you look above the fold here Yeah. And we have two equal weight columns. And I think what that tells the the user here is that both are equally important and that you should weight both the same. Look at this. If you scroll down, like Yeah. That should be the headline and it's below the fold. Yep.

Everything else above the fold is kinda 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 Yeah. The hero. And there's a bunch of different call to actions Exactly. Here too, which I think sometimes when people are designing websites they're like, well, let's put a bunch on here because Yeah.

Certainly we'll get the user with one of Yeah. But instead what happens is you end up kind of creating the paradox of choice a lot of times where Yeah. People just don't click on any of them. Totally. Okay. Next up, we have bottom lists. Your dog food peanut butter tea always in stock. Repeat deliveries at the perfect time based on your Great domain.

Right? Bottomless. com. Oh, yeah. Dotcom. Not even . co. Okay.

We had a few seconds. What's the takeaway? What do you remember?

Speaker 1:

It was pretty.

Speaker 0:

Yeah. It was clean. Mhmm. Packaging.

Speaker 1:

Yeah. I saw physical products there. Right? I was very focused on the URL, and then he took it away before I saw what it does. But it was like protein for dogs or something? Peanut.

Speaker 0:

butter for dogs, I think. Okay. Yes. Alright. Well, let's let's pull it back up here. Okay. Yeah. So I actually remember Bottomless from in the batch.

I didn't wanna bias you 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 I thought it was.

Speaker 1:

I saw dog food. I thought it was dog food. I mean, I had a split second, but my my initial intuitive take was that it was clean. I think it would look like a trustworthy brand. Now that you're explaining it, I wanna click on how it works, so it says scan the barcode to, like, how does it reorder? Like, how does it like, that's I'm intrigued now. So Yep. Yeah.

So it seems like the takeaway here is, like, we both got that there was physical products happening here,.

Speaker 0:

and then it's always in stock. So, like, that's a little bit of a marketing y thing rather than, like, we automatically reorder for you. I think that's fine though, because it Yep. It's like clean enough that it gets your attention and you kinda wanna like, learn more. Yep. It's not confusing. Yep. And they they have actually the right phrase in there, is repeat deliveries at the perfect time.

Yeah. Maybe 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 five 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.

Speaker 1:

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 and just even that rotating those words where I said dog food, like, that drew my eye in and I knew that's where I was supposed to look. You know?

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

Speaker 0:

movement draws your eye. Totally. And so if there's things that you really wanna make sure that people pay attention to 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.

Because I think we remember the different tea, kombucha, bananas, peanut butter that's animating, and that's what stuck with us even after just a few seconds. Awesome product though. Very cool. Thank you, Bottomless. Okay. Next up, we have Cloud Thread. Let's check it out. Okay.

Speaker 1:

I think I know what it does.

Speaker 0:

I have no clue, so please tell me. So it says something about, like like,.

Speaker 1:

it's monitoring usage across, like, multiple tools Okay. Infrastructure stack, I think, and it's gonna save money. But Yeah. There was a lot. So the the I think the last one we talked about motion, this one had motion, but the motion distracted me from the main message. Yes. So I didn't really.

Speaker 0:

catch what it 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 Yeah. And the problem was.

Speaker 1:

the motion had too much text and it was moving too quickly and like I just couldn't process it. Didn't know the words either. Like the phrases were like jargon that weren't familiar to me. Yeah. So like, I think this is like DevOps infrastructure stuff. Yeah. 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. So here here's these two things. Like, these are, like, sentences that rap. So when something's moving, you kinda want each phrase to be really short and easy to digest.

Speaker 0:

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.

Speaker 1:

So I think about it. Still don't know what it does. What does it do? Your usage optimization pipeline is wasting you time and money. Again, like,.

Speaker 0:

the the entire above the fold is explaining to us a problem. 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 the Finance and engineering aren't talking to each other. We need to get them Yeah. Get them in a room.

Okay. Oh, we got the CEO. We got FinOps. We got engineers.

Speaker 1:

And then you see the tools. Right? You see the tool icons. There's, like, there's a stack of tools Yeah. Connecting them somehow.

Speaker 0:

Fix it. Okay. So now you can fix it with them, but we don't know exactly what we're fixing, and we don't know what they do to fix it. So here's more okay. 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 and a black background is hard to read.

Yeah. Old man eyes over here. Yep. I think I would have given up and hit the back button by this point. Yeah.

So I think the takeaway for Cloud Thread 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 and I still don't know that we actually got the answer to those questions. Yeah. Cool. Well, thank you, Cloud Thread. Okay. Next up, we have integrated reasoning. So let's check this one out. Integrated reasoning and then okay.

One of a kind 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.

Speaker 1:

No. I 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 a URL that you can remember. So it's like reason. ing,likereasoning. I could probably remember that and come back and find it if I need to.

But Yeah. Above the fold, hero. I think the jargon,.

Speaker 0:

I think we'd have to scroll some more to find out Yeah. What these guys do. Yeah. It's possible that the language that they're using there is actually the right language for their customer. Yeah. 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. Yeah.

And we are not the target audience. And so for us, we're just like, I don't know what that is. Yep. But 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 wanna learn more.

I think there was, like, a preloader too, and they waited for the preloader to load that thing,.

Speaker 1:

and so the wavy thing wasn't worth waiting for it to load. Yes. Yeah. So, yeah. Definitely,.

Speaker 0:

there could be a better use of space up there. And then the text was really small too. Yeah. So, like, it was kinda hard. Like, I had to strain my eyes to get in there and read the the light gray very small text. Their their company name was very big, like that was Like, was like, okay, I'm on integrated reasoning's homepage right now. So if we do scroll, Here we go. More animation.

Okay. But it's hard to read because it's all sideways.

Speaker 1:

Yeah.

Speaker 0:

And it was funny, I just spent so much time trying to read the sideways moving.

Speaker 1:

text that I didn't even read the, like, really big letters that were out of read 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. At last, hardware and algorithms and harmony. So if you scroll all the 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 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.

Speaker 0:

of telling the story. Yep. It seems like the best animations are the ones that guide you to a very specific thing Yeah. That, like, 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. It seems like these don't really do either of those use cases. Yeah. Cool. Thank you, integrated reasoning.

Alright. Next up, we have capacity. Let's check it out here. Make your heat pump smart.

Speaker 1:

Alright. Okay.

Speaker 0:

Alright. What do you remember? I think I know what this product does. It seems like a smart heat pump. I think it's gonna save me money on my electric electricity bill. Yeah. It seemed pretty straightforward, and there's that little house thing over on the side. Yeah.

And it was pretty clean. Yeah. Alright. Let's go back to it then since that 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 five seconds we easily read that and we're 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.

Speaker 1:

I I'd say like the illustration is a little bit just kind of plain, kind of basic. It'd be cool to kind of see like what's the product. Right? Because I got the messaging, the I think everything was kind of spot on, very clean design, but I kind of wanna see what the product looks like. Yeah. There's the one thing missing. Yeah. That's a great point.

Speaker 0:

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. Yeah. Is it hardware? Is there software involved here? That's not super clear to me, but, you know, I think the other thing is I think the sub headline and the text on the buttons could probably be larger. Mhmm.

Because they have the space and there's not a lot of words and Yep. 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 I think they definitely went through some cycles with copywriting here because this feels distilled and it Mhmm. Definitely feels concise.

So Yep. Good job. Awesome. Cool. Well, thank you, Capacity. Next up, we have Rollstack. K. Automate your slide decks and documents for client QBR, client MBR, pitch decks, board presentations.

Okay.

Speaker 1:

What do we remember? I think I know what it does. Right? I think that's that's 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.

Speaker 0:

Let's jump back in here and and take a look. Yeah. So there's the blue, they got the yellow. I spent a long time on the animation here, which kinda took me away from some of the other stuff. There's 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 it makes you go, like, well, what should I focus on right now? And kinda pulls you all over the place. Yeah. I think it's just that, you know,.

Speaker 1:

design rule number one of of Don't Make Me Think. It was a classic book, Steve Krug, or I think Mhmm. Who's the author? These diagrams are technical. There's icons. You try to have to understand, like, what are the references of the icons. There's multiple browser windows. What's actually Rolstack rolling into these different browser windows?

So it's a lot to digest. It's kinda technical. I think if you're gonna use the illustrations and and the animations, just make it really simple, so it's just a no brainer, and quickly just explains like what what does the product do. But I think we did pick it up, you know. I think we it it is telling that story. Yep. But it's a little complex, and I don't know.

I think the the white text on this color blue, from my aesthetic, was was a little hard to read. Yeah.

Speaker 0:

Yeah. I think also, there's a lot of stuff moving really fast. Yeah. 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, can see they kinda have these like pencil outlined, like browser windows that they're trying to show, or a presentation window or something like that. And because it's this little white border on a blue background, it's harder to tell like what that actually is unless you really focus in on it. We got small icons.

Speaker 1:

Just too much small stuff here. Of too where you're you need to try to digest, like, what each of these little pieces Yeah. There's like a percentage that floats down from the roll stack. Like, what does that mean? So there's a lot of detail they're trying to.

Speaker 0:

push into the illustrations that it's just it's just hard to digest as easier. Yep. And then we have little icons at the bottom of it. So, okay. I see that's a Notion icon, but that was kinda hard to tell. So I assume that's like different formats that they support, but But what does that represent? Right? Like, does that actually mean?

Yeah. And if that's the point you wanna 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 of fast moving animation to try to pull that important piece of context out. Yeah. I do kinda wanna check out the product. It looks looks interesting. Yeah. There you go. Maybe you got a customer.

Yeah. So thank you, Role Stack. Next, let's check out some non YC user submissions that come from the YouTube audience here. So first up, we have AMPstem. Alright. Delivering excellence in every step, providing cleaning services that prioritize excellence because how we serve matters. Something cleaning services.

Speaker 1:

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 added, and, like, something that visualized visualizes cleaning services.

Speaker 0:

would would nail that delivery. But Maybe it's outdoor cleaning services, cause they didn't specify. We'd have to scroll to find out. Clean garbage, litter? I don't know. Okay. Well, let's let's go back and check it out here. So 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's 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 gonna be the thing that's gonna get somebody to choose them over something. The the 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. Yeah. 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, Amstem. Okay. Next up, we have BERT Labs. So 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.

Speaker 1:

I don't know. The images were heavy. I think that's just, you know, a big red flag there just for for BERT Labs is that, you know, that's gonna be Google's not gonna favor that in in search results, just being a very heavy loading website. So to optimize that, the image itself was was visually interesting, but I I don't think it picked up on on what it did out of the gate. Why does Google.

Speaker 0:

deprioritize sites that have a lot of images or or heavy load? The world has moved to mobile, and so if you have a really heavy website on desktop, on a fast.

Speaker 1:

broadband like we do here, it's definitely gonna be super slow on a cellular network and on a on a mobile phone. So Google has, you know, a series of criteria it looks at when it's ranking websites, and and page speed is one of those. So you wanna you want your website to always load really really fast and snappy. And then in the context of only having a few seconds.

Speaker 0:

Yeah. You know, if we got five seconds to make a decision on if we're gonna stick around, if the page hasn't even loaded in at that point Totally. We're probably gone. Alright. That does it for this episode. Zach, thank you for joining us. Thanks for having me. Yeah.

Was great to do this with you. And thank you to all the founders that volunteered their websites review. Really appreciate it. So 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.

✨ 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