Critiquing startup websites with Instacart's first designer, Zain Ali

What are we gonna be taking a look at today, Zane? Today, we have a small handful of companies from our recent winter twenty two batch who volunteered to have their landing pages critiqued.

We'll be giving them feedback on the layout, visual design, and user experience of their websites with the hopes that it'll help all of you improve your websites too. Let's get started. First up is Hokali. Well, right out of the gate, we are hit with a pop up here. Save $35 off your first purchase, and I don't know what they even do yet, but it's trying to hit me up for savings.

I I don't know your experience, Zane. I'm curious, especially with Instacart on some of these. I I think these tend to work a lot of times, but I think the user experience is not ideal because I'm gonna close this so I can figure out what they do. And then I'm gonna be like, great. Now how do I get that $35 off?

Yeah. I I think a lot of consumer product websites use this sort of growth hack, and it typically does work. It typically does convert people, especially if they're, you know, eventually consider purchasing. But it does fatigue users, and, typically, people, like, click out of them. But it's definitely something you can experiment with. I think with this, it's yeah.

There's a little lack of information here to make a decision, and so maybe adding some information about what you guys do or kind of create some, like, sort of FOMO with some messaging here might help.

Yeah.

So I'll just close that.

And here we have, you know, a really strong headline. It says learning new sports has never been easier. Book online in three simple steps. Yeah. I mean, this is a really good headline. It's super clear what they actually do. And I guess now that I see some of the drop downs, some of the videos make sense that are kinda auto playing in the background. I think visually, they look really cool.

It gets my attention. I totally get what you do. Some of the videos are a little confusing. Like, the tennis one makes sense to me and golf does. But I see the one that I now understand is personal trainer, which I thought was just, a couple people working out. And then the faraway shot of the ocean visually is really cool, but it didn't occur to me that was surfing.

And so, I wasn't exactly sure what some of those were. But now that you do the drop down, now it makes a lot more sense to me. It seems like maybe you're trying to scroll down and it's not letting you. Is this the entirety of the site?

I was sort of waiting for that. You can totally scroll. It doesn't seem obvious when you're up here, you know, at least on, like, this size of a MacBook. But, yeah, as you scroll, it definitely exposes those types of services that they have. Right?

So they have different types of lessons and personal training, which also seem like really strong call to actions because you can, like, hover over them, and the hovers are really strong. They don't immediately look like they're selectable, but I think that that hover makes it a little bit more obvious.

Yeah. And can you click on it? Does it do anything? Does it give more info on surf lessons or something like that? Okay.

Looks like it just takes you to the top. And then Yeah.

So this is cool that you have dedicated pages for each specific type of lesson that you offer. If for no other reason than when you're marketing, if you go to, like, surf communities, you may not wanna send them just to the home page, or they may see golf lessons or something and be like, ah, this isn't for me.

But if you can send them directly to a page about surf lessons, I imagine the conversion rate will go way up. Because one of the main things that, that visitors to your website are looking for, the first is they're trying to figure out, like, what is this? And I think you answered that pretty clearly in the first line, up in the header of your site.

The next question that they wanna know is, is this for me? And when you, take them to a dedicated landing page that's all about surfing, if they're like, yeah. I wanna learn to surf, then they're gonna be like, oh, this is this is exactly for me. And that's where you're gonna get the really high conversion rates.

Yeah. I I like that. I think having dedicated pages for all your services is really important, especially for SEO to acquire customers. The one thing that just, like, kinda stands out for me, though, was when I did select surf lessons, it felt like I went back to the top of the same page. And so I didn't really notice that this entirely changed to be a whole surf page until I scrolled.

And so I wonder, you know, if there's a way to maybe, like, change this content. And I think, you know, I really like video backgrounds, but they also can be a little distracting, and I think that's what might have happened to me. Some you're really trying to get them to choose a location, maybe there's another way to do that.

I think the next section with this, like, animated, you know, this sort of, like, section of, I don't know, like, quotes or it says surfing releases a cocktail of feel good chemicals into your brain and relaxes your brain and calms the mind. So it's kinda just promoting, like, the sport overall, and I'm not sure, like, how important this is.

And it and it it it animating is actually a little distracting as well when I was looking at, like, this content here. You know, backed by Y Combinator might not resonate with, like, everyone who might be trying to take a surf lesson, but Decathlon's a pretty big brand, and then, you know, they have the the Google reviews here, which is great.

I would love to just even see, like, some of those Google reviews here And just seeing, like, real people who, like, might have reviewed the service or, you know, just, like, have some sort of feedback just to make it feel even more real. Putting that somewhere higher up on the page can really just, like, increase my confidence to want to actually, like, book.

Yeah. It really helps with the trust factor. As a startup founder, you have lots of disadvantages versus, you know, lots of other big companies. One of the main advantages that you have is that you are small, and you can move quickly, and you can give a lot of personalized attention to your customers. And so by telling your story and connecting with them on that personal level, like, hey.

I was one of you. I wanted to learn how to surf. Here's what I did. It was all terrible, so that's why I created this product. Like, people will connect with you, the founders, on the personal level. And especially in the early days, that's so much of what you're selling to your customers. It's not, you know, trying to look like some big fancy company.

It's the fact that there's, like, real people behind this, that if anything were to go wrong or if I were to have a bad experience with my surf lessons, that I could reach out to you, and you'd probably wanna help me. Like, you would care a lot about that and helping me and making sure that I have a great experience because you want me to tell everybody else.

So having an about page or more info about your own story can be a really great way to build trust too.

I would really love just to see a video of someone, like, giving a testimonial, like, as if they just took the lesson.

I feel like that would just get me really excited, and I think, you know, this video at the top of the page is, you know, it's you're trying to get you're trying to immerse me into the experience of surfing and showing the lessons, someone, like, you know, popping up on the board and stuff.

I think that's really important, but the I think one of the biggest things that you can almost do on this page is really have one of these people just have a video of themselves really almost, like, casual talking to the camera and sharing their experience firsthand.

You know, this is a lot of text, so, you know, I think maybe a lot of people might not read all of these, but they might be willing to watch a quick, you know, ten, fifteen second video of someone talking about their experience.

Yep. Overall, I think this is really well done. You know, I think a lot of our feedback is kind of nibbling around the edges. I think there's a lot of great stuff here. They're checking a lot of the boxes of things that you'd wanna see on a well well done website. And my hunch is it's probably converting decently well.

Just a quick break to tell you that in a future episode, we'll review the website of one of your startups. If you'd like to be featured, there's a Google form in the description down below where you can submit your startup's website. Now back to the reviews. Alright. Requestly now. So let's see here. Backed by Y Combinator. Okay.

Cool that they're putting that all the way up at the top. I don't know if that's the main thing their users wanna see. Let's find out. Intercept and modify HTTP requests. Let's see. Modify headers, redirect URLs, switch hosts, mock API response, delay network requests, insert custom scripts, and much more. Okay.

So it seems like dev tool that helps with seems like a lot of debugging kind of stuff would be my guess based on the feedback here. Now, obviously, there's a lot of jargon in the header here and also in, that kind of initial paragraph of text that says what they do. I'm not sure that's usually, jargon's a bad thing.

I'm not sure that's a bad thing here because I think what it does is it kinda self selects for the type of people that are most likely to be their users to begin with. So, you know, one way to test if this is the right thing is to go to talk to your existing users and ask them, how would you describe our product?

And when you do that, take the exact words or phrases that they say and just put that right in the the headline of your website, right at the top. Because chances are the way that your users think about and describe your product is actually the way that many other, people that that would be your target users would also think about the benefits and the value of your product.

So for example, like, if you would go ask your users, would they say, like, oh, yeah. Requestly, that's, like, the best way to intercept and modify HTTP requests. And, like, I don't know. Maybe that's what they would say, but maybe they would say something else instead. So, like, that's just kind of a good way to pressure test some of the headlines that you might have on your site.

It also strikes me there's just a lot going on here above the fold. You've got the headline. You've got a lot of different things, kinda like a comma separated list in the sub sub headline there. You've got two buttons, download for Chrome, download for Mac OS. You've got also available for all these other browsers. You've got five star ratings. You've got reviews. You've got active users.

You've got ask a question pop up thing down there. You've got a screenshot where I can't really tell what's going on. So, anyway, there's, like, a lot going on. And I think the main thing for you to figure out is what are the most important things to put up here, and what is the main action that you wanna drive all of your users towards? And then kinda get rid of all the other stuff.

Maybe it can sit below the fold or as the user scrolls down, and focus really on driving people to the main action that you want them to take, which I assume is either download for Chrome or download for macOS. I also agree with just, like, the noise here. There's just a lot of colors.

Like, the blue and the yellow, as much as, you know, like, you that seems like your brand colors, this, like, big yellow circle in the background is definitely, like, pulling your attention to this screenshot. But the screenshot is so small that it's really difficult to see, like, what it even does that it's almost, like, not really providing any value now.

So, like, unless you wanna, like, zoom in on the screenshot and show me really, like, the meat of your product and, you know, because that's what might actually convince me that your product is solving a problem that I have, I would almost, like, you know, either get rid of that or or just, like, get a really good macro screenshot.

Screenshots are often problematic because you as the founder, you're used to looking at your products, and you know how everything works, and you know everything has a purpose and what that purpose is. And it's hard if you're just seeing a screenshot for the first time, especially when you don't really have much context on the product overall and even what you do.

And then to look at this and, like, orient your head around it is really challenging. And then the other thing is it seems like you're calling out a lot of, kinda like features of things that you can do rather than, like, benefits or problems that this solves, which are generally more attractive to people. So it's like you generate custom API responses. Like, cool. That's a feature.

Why does somebody care about that? And I think that's the question that you wanna answer. And to Zane's point, try to decouple it from the screenshot that you have here so that you can give it more, like, space to breathe, and you can explain a little bit more how it works. And I think that'll help people better understand what you actually do and why it's really useful. I totally agree.

You know, some of these.

these features that you call out can totally be turned into, you know, a problem that people already have.

So it's extremely painful to, you know, generate custom API responses right now and, like, people have to go through, like, you know, multiple pieces of software or services just to go and do that or do it through terminal, and it's really you know, it's it's just a painstaking way of do doing things.

They can actually call out, you know, that pain and then draw me in about how you actually solve that problem. And, you know, you can tell me that, like, I'll never have to do that again, and that actually makes me really feel that problem myself even more so, and it it can, like, really resonate.

And so just kind of thinking about features like that can help you sort of turn them into really great sort of call to actions.

Oh, and it seems like down below, we're starting to get into some of the the trust building. Like, alright. We've got this many rules created. We've got a lot of current users, a lot of rules shared. So these are all things. These are good that you put these in here because it starts to give me confidence that, like, oh, real people are using this, and there's a lot of people using it.

And if it works for them, then maybe it'll work for me. So this is a this is also a really big feature section. Right? So you have one, two, three, four,.

five features that we're going over again. And, you know, you have collaborate with teammates again. Right? So we're just you're kind of, like, creating a lot of, like, redundant info, and then you also have, like, this sort of visual diagram of sharing with colleagues.

And I guess, like, if anyone really, like, uses Google Docs, it's almost like, you know, this should probably be very, you know, intuitive to someone when you're you're talking about sharing this stuff with other developers. So I'm not sure you even really need this type of visual treatment.

Yeah. That diagram hurts my head trying to figure out what's happening there.

And then we have another feature section with six more features. So I wonder if you can kind of put maybe some of these sections within, you know, a different type of feature page instead of just all on, like, the home page. Because like Aaron was saying, this is, like, an extremely long page, and I probably would have been fatigued by now and just either tried to figure out how do I sign up.

You should probably have your main call to action in the footer again too rather than just, like, join our mailing list or something like that.

I don't know. That's probably not the main thing that you wanna drive people towards. It's probably, like, downloading and actually starting to use the product. So I would cut away all the noise, focus everybody just on ideally a single download link that you wanna optimize for. Cool. Alright. Well, thank you, Requestly. And let's move on now to Verbyn.

Instant sustainability with automated storytelling. It's that's a little vague, it feels like.

I am not sure what that does. It says increase.

yeah. Increase customer engagement 10 x by attaching environmental pledges to any of your products and services. Let your customers track their own impact automatically after purchase with updates from world leading providers. Awesome. So that's very clear, it seems like. And I think this, you know, this screenshot actually does kind of make that a little more obvious.

And I think this is actually a really good example of a screenshot working, but maybe not necessarily the headline working. But but when it comes to attaching environmental pledges to any of your products or services and then showing this screenshot where, you know, this is a very typical, you know, ecommerce layout.

You know, I see sunglasses and then add to bag, but you're graying out that screenshot and let allowing this environmental pledge to really stand out. I think that's a really great way to, again, to show a screenshot and show what your product is. And it says powered by Verdin, which is really neat.

The animation is moving a little quickly, so it's a little bit hard for me to kind of, like, you know I have to actually watch it maybe a couple times to see how all of this works. And even with this screenshot on the right, I'm not exactly sure where maybe this is occurring, if this would be happening on my website or if this is happening on Verdin's website.

Yeah. I think the biggest room for improvement here is that headline. My hunch is if if you were to actually go to your users who have your widget integrated on their site right now, and you ask them to describe your product, I doubt that they would say, ah, Verdin is like instant sustainability with automated storytelling. I think that's that's a little a little confusing.

And and I think sometimes as founders, do this where we know all the edge cases of our product, and we wanna make sure that we come up with, you know, five words that cover all those edge cases. And realistically, like, it may mean something to you because you have a lot of familiarity with it. But people without the context of your product and how it works, it doesn't mean anything to them.

And so now, you know, after reading the paragraph underneath it and seeing the the graphic on the side, I have a better sense of how the product works. And so now I go back and I read that first sentence, and I'm like, okay. I kinda get, you know, what they were going for here, but it's just not clear, like, being able to stand on its own.

And then another trick here with headlines is a lot of times the way that people will read your page is they're gonna scroll down really quickly, just kinda skimming, and they're just gonna read the headlines. And so you wanna try this yourself for your own product and decide if somebody just read the headlines here, would they actually get the information that we would want them to get?

Or is the main information that you want people to take away, is it buried in these, like, small text paragraphs and and bullets and screenshots and things like that? Yeah. I again, I think this all really comes back to this, like, headline that really starts this confusion. And.

I'm not sure if, like, automated storytelling is necessarily, like, the thing that me as a brand, like, I might, you know, am trying to solve for. I think this might be, like, sort of, like, a vision that you have about your product and, like, what it does for people.

But what me, like, as a as a brand, I might be just trying to, you know, like, make my brand a little bit more eco friendly, And I might not be able to do that with my products and services right now, but this is a really great way to integrate something like that with either, like, no code or, you know, a really small amount of code, it seems like.

And so it would be really interesting just to have sort of like that come through just in this, like, headline.

And there's a lot of good things that I think you have going for you on this page too. Like, one, layout, typography, colors, like, all this stuff is, like seems well done and has good hierarchy to it. It's easy to follow. It's visually interesting without becoming overwhelming, I think. So there's some good stuff here. I think we saw trusted buy up near the top.

So that's a good way you're trying to build that trust right off the bat. Yeah. Here's the trusted brands. So, unfortunately, I don't know that I've heard of these, but it's cool that you have some. So it tells me, like, I'm not gonna be your first customer. So that's good. And then I I saw near the bottom, we had more on the team. And so I think that's cool too.

I get to see the faces. There's real people behind this. There were some customer testimonials there. So you've got a lot of, like, the core elements here. I think it's just cleaning up, some of the messaging and the headlines that's gonna make it a a lot more clear.

Because right now, you don't do a great job, through the headlines at least of answering the question, what is this and who is it for? Like, is it for me? And you just want anybody who's your potential customer to hit your page and instantly just go like, oh, cool. This is exactly the kind of thing that I could use on my website.

When you sort of, like, wanna talk about the problem that you're solving, it's so important,.

you know, because it's it's about, like, climate change. How do you sort of bring that to the forefront, I think? You know, this to me, this section here, you know, makes me feel like, you know, I can choose from, like, some of these really great, you know, partners to implement on my on my website.

And I think that, like, that kind of has this emotional pull that you almost might be able to, like, add here. And it's, you know, something really simple, like, as if it's just, like, you know, no code solution for, you know, like, instant eco friendly, you know, or whatever it is.

I think just, like, making me feel like I can implement this really, really quickly and even almost showing me some of those, like, causes a little bit more front and center might, you know, really, like, lure me in and and, again, like, bring that sort of emotional attachment to what you guys are solving for.

Awesome. So nice job. Hey. Thanks for joining, Zane. If you like this first episode of design review, help us out by letting us know in the comments if there were any tips or reviews that you found useful. It'll help us shape future episodes of this new series. Thanks for watching.