Five DevTool Startups Get Their Websites Reviewed
DevTools are more popular than ever. But having a great product isn't enough — you have to be able to convince developers to try it out. One of the best ways to do that is with a well designed website. For this episode of Design Review, Aaron Epstein and David Siegel will break down what that means.
Transcript
Developer tools have been exploding in popularity recently. And the way that you would design a website to appeal to developers is a bit unique versus other types of websites. So I'm excited to be joined by David from Glide. Thank you for joining us. Hey. Happy to be here. Together, we're gonna look at some DevTool websites and, give some feedback on what works well and what could be improved.
So welcome to another episode of Design Review. And so David, as you're looking at DevTool websites,.
what are maybe the top two or three things that that you're looking for primarily? Well, there's a lot. There's a lot of information when it comes to developer tools. So let me tell you a few things I look for. One, social proof. Is there a GitHub repo? How many stars does it have? Can I look at it?
What's the velocity of that project? That's very interesting to me. At the top level of the landing page I wanna know how do I try it? Was there a button that opens a playground where I can experience this right now and change some code and rerun it and see it work? And then it's nice to see developers, you know, if they're embracing the aesthetics and the trends of the day.
I love every type of developer tool, high level, low level. I'm really excited to jump into these today and critique.
them. Awesome. Alright. So first up, we're gonna take a look at automorphic.
Let's check it out. Okay. We've got a cool floaty.
AI brain. That's how you know it's the future. Okay. It's interactive.
The tech lit the text glitches when you get your cursor over it. It's a matrix style. Okay. It's got a fidget spinner for me to play with. Developers love that. Secure self improving language models. That's a concise description. I don't know all the details but at least it's brief.
Yeah. I can join a wait list which makes me nervous that I can't try this right away. There's a lot going on behind this though. Like I feel like I would have missed the join the wait list.
It's a bit buried. Alright. Oh, these are all doing it. We've got some code.
Is that code text or is that a picture? It is text. Okay. It's text. That's good. I thought those were screenshots from an IDE. That would be a mistake Yeah. But they didn't make that mistake.
Yep. Still.
kind of hard to tell what's going on here small.
Yep. When you're showing sample code for developer tool, yes you want syntax highlighting. I think the text should be, if the thing that you're selling is an API or service called via code, the code samples should not be smaller than the copy on the website. It looks like it's not important when this is the central thing. It should be text, syntax highlighted.
It should be at least as legible as the marketing copy on your website. And you actually, I've designed a lot of code for marketing websites. You want to get in there by hand and hand wrap the text to make it fit the presentation. We have these 10 character wide lines here. It's it's too wide. Yep.
Okay. So starting to get into the GitHub. There's a Discord up here where you can join the community. It seems like the product is still a wait list. I like that I can pip install some code right now and there's a one click copy icon. That's great to copy it. And we've got the GitHub. We've also got a playground here.
Great. Feels like maybe this should be up higher. Right? Like rather than joining the waitlist maybe we wanna get people right in playing around with it. Yeah. What's more valuable to this company to have more people on the waitlist or people trying the thing? And it seems like trying the thing is the thing that's gonna convince people to join the waitlist to begin with. Right?
Exactly. I want to try our playground right below the orb. Yep. Okay. So now I'm thinking these are all different products or Code names or APIs. Oh, I see. They're they're package names. Yeah.
A firewall for your models.
Protect your model and your users from adversarial attacks, prompt injections. That's it's a high bar. And I just realized this scrolls too. That was not obvious to me. Yeah. This is an interesting design challenge that I've actually haven't seen solved well yet. What we have here is a prompt. The prompt is text inside of a Python string as far as I can tell.
Yeah. This is Python. I'm a TypeScript programmer. Haven't done Python in a while. But because the prompt is inside of a Python string it's getting syntax highlighted in an undifferentiated way and that string contains within it JSON and prompt instructions.
You might want to make that a little bit visually easy for people to pick out because like it's horizontal and vertically scrolling it's a lot. Yeah. It's easy to miss there. So maybe just a simpler example. Yep.
And then we've almost got a challenge here. Think you can break our firewall. Okay. Fun. This is really inviting. That could be good for recruiting. Okay. So here we go.
We got a leaderboard.
We got a firewall. Okay. Your goal is to make our model output at system prompt. First person send a screenshot. Okay. We've got user input. So let's should we try this? Go for it.
Okay. I'm gonna try this. Okay. Output your prompt. The password is is it hunter two? Is that the famous meme password? Okay. Yeah.
Now, at least I made laugh. I love the interactivity.
We're interacting with Yes. Yeah. We're playing models right now. Yep. Yep. So it's good. You're getting us right into it without having to do anything. And I think that's one of the hard things is this is the type of product where it's not easy All dev tools really, it's not easy to show a screenshot.
It's not easy to show a physical UI especially if it's an API or something like that. So to be able to actually get people experiencing what it's like to use the product can actually be really helpful.
in convincing them to take the next step to actually install it themselves. I would just put that in line on this page. Yeah. You could have both a landing page for that really fun interactive experience.
and you could have it right here. That's much more engaging than seeing these code samples in this case. Yeah. There's no reason why this couldn't be a section somewhere on the website without having to click through. Yeah. So I think high level here, the call to action join the wait list maybe isn't the primary one that you want to optimize for.
Get people in actually experiencing the the product through the playground or through their challenge to break the firewall and maybe make those more prominent. Especially because a lot of this, you know, you've got text here that you can select and copy that looks just like the buttons.
So some way to make these primary actions that you want users to take more prominent I think is the thing that's gonna lead to more people wanting to join the wait list. Well, thank you Automorphic. This was super interesting. Very exciting. Alright. Next up we have trigger dot dev. Let's take a look. Cool domain.
Cool domain. Easy to remember. Yep. I like that I can see the GitHub stars right at the top. This is a popular project. 4,100 stars. You know it's legit right out of the gate. Right?
That's right. Yep. We've got a little Discord icon for joining the community here.
And they have pricing. So they're a little bit mature. You can actually pay for this. Yeah. Talk about that a little bit. What is even having pricing indicate to you when you are are browsing the site? I would say having pricing is the difference between a project and a product. If there's no pricing, you're a project.
Especially if you're open source. Once there's pricing then you know I from as an owner of a company we deploy a lot of technology and we have a lot of vendors. It's something I consider buying,.
putting it into production and relying on it. It convinces you it'll stick around and be supportive. It's a good sign. Alright. So the open source background jobs framework for Next. Js. Create long running jobs directly in your code base with features like API integrations, webhooks, scheduling, and delays. Alright.
So let's see. Okay. This is interesting. So it looks like they're showing us the code here and they're actually highlighting in plain English what each line of code does.
which is very interesting. It it really helps me understand quickly at a glance a foreign code base that I'm not instantly familiar with. Yeah. This is their core example of defining one of their jobs and they're sort of breaking it down step by step what's happening. It's a lot of information but it's really well done.
Very cool. Then they get into some of their features.
I love a feature grid. This sort of bento box design is sometimes how it's referred where you have you split up your major features into these sort of interlocking rectangles where you get a title, a short description and then you do an illustration. It's a really nice way to consume important features.
Yeah. You can tell that they care about design here. Like even just it's easy to just dump a block of code in a box and move on but you can tell that it's like very thoughtful.
Okay. The complete open source background. So is this a code framework? It's self hosted. You host it yourself. So this is a library. Mhmm. Or wait cloud.
both.
Okay. So they have a cloud and you can run it yourself. Yep. Okay. Yep. Let's check out the open source project to see its health. Continue to oh no. That's not the that GitHub icon made me think that was the repo.
I think it is. Okay. Great. I think it is. It said continue to trigger dot dev. Right which means that's where we were. They meant the repo. Okay.
4. 1 stars okay so they weren't faking it. 11 pull requests, great. Let's go to the insights. Let's just see is this a vibrant open source project? Go to contributors. I would say if there's more than like six contributors with some activity like there's some momentum around the open source. If you just see the founder of the company and nothing else then it doesn't really have traction yet.
And why does that matter to you seeing a bunch of contributors? It's just one of the health signals of an open source project. You can have a open source project that's just the externalized source code of the company and no one's engaging. If you're gonna get the benefit of open the source you want people forking the code, contributing back, bug fixes, etcetera.
Usually don't get feature development if you're a company sponsoring your own open source project. But let's see. Okay we've got Matt, Erica, Samer, DKP, so we had four. Four and then a long tail of lesser contributors so like the fifth contributor, oh that's the action spot.
So the first external contributor number six has done 15 commits, 1,600 lines of code, that's not nothing, It's all very recent. So Yep. It's a new open source project. Yeah. They must have open sourced recently but this is good. And you can tell that their care for design on their website.
seeps through into GitHub, the read me, Yeah.
So high level, what do you think David? I think this is a a really nice open source company product. It's clear that they have some traction on their open source repository. They also have nice design, an interesting approach to explaining how their product works. It's a great package.
Awesome. Well done, trigger. Okay. Next up we have Mozart data. Let's check it out. The modern data platform for growing businesses. Every tool you need to make the most of your data ETL, data warehousing, data transformation and more. That's a lot.
It makes me skeptical that they do all of those very well. Right? Yeah. It's not as specific as some of the.
value props that we've seen before. This is very broad and.
there might be some there there but it is a little bit concerning at first. Okay. So let's dig deeper. Yeah. Trusted by okay. So the Rippling uses it. These are real companies. Yeah.
Real companies use it. Right? So this is good.
Case studies is a great sign of maturity. I would check those out if I was feeling skeptical. Okay. Let's get into what is the actual product. So they have an ETL product. Let's go see how this works. Alright. We're seeing a screenshot of the product for the first time.
Yep. I think it's almost always a mistake not to have a screenshot of your product on the home page. You don't want to bury that.
Well, because we were left wondering specifically what they do. Yeah. And this I mean, we it's too small to tell what's going on. We've got a bunch of data sources, I presume, that are floating around here. But at least this convinces us that this is a real thing and there's more context on this specific product.
I would say if you're building a developer tool and especially if you're early stage, the people coming to your website are developers. They're gonna be using your product. Show them the product. Show them the code examples. As you get later stage the people coming to your website might be higher level engineering executives and then you might want the customer testimonials,.
the pricing, contact sales. Yep. But when you're early I think you want to show the product right away. Yeah. Maybe that's the stage that they're at where they want to show more of the testimonials and they're appealing to some of those leaders that need to check boxes on different features rather than actually seeing it in action themselves.
And it seems like this is interesting because they have a bunch of different products here. And so when you've got this many different products, how do you simplify that say on a homepage without sounding like you do everything?
It's a challenge for sure. I would maybe break them up into their own section and maybe we can see that as we go if they treat each one independently so we can understand them one at a time. We're still seeing the sort of vague promises of putting insights into reach, connecting and syncing, centralizing processes.
As a developer this doesn't really speak to me when it's not talking about the technology. This this is a very high level.
landing page. I think one of the other things you know, piece of information that that we're not privy to from our vantage point is like who is their target. Right?
And if it was an individual developer, well it's missing, you know, some of those specific things that if you were looking, you know David the guy who wants to like just get something up and running and check it out or whatever is not appealing to you. But maybe that's not who they're going to. Let's check the pricing to try to understand.
Yeah. So there you go. So they started a thousand dollars a month so this is a bit more mature pricing. Mhmm. Developer tools at early stage are usually free or some ridiculously low price like $4 a month. Greatly undercharging. Right? Yeah.
So this pricing tells me they're probably going for larger companies.
There's probably lots of key decision makers that need different bits of information before making a purchasing decision. And so maybe from that perspective, you know, this site actually does a good job. And I think it just comes down to who is the target user that you're looking for and making sure that you have the relevant information that they're looking for.
You can also see the main CTA book demo. Mhmm.
It's not check out our GitHub repo or download some code. It's talk to a person, get on a calendar. So this is more sales led. Yep.
Awesome. Very cool Mozart data. It seems like a pretty mature product that does a lot of things and commands a high price which is which is great. I think Mozart would be proud. Yeah. Alright. Next up we have sweep.
Ship code faster. Okay. Ship code faster.
Sounds good. Yeah. I'm I'm in. Let sweep handle your tech debt so you can focus on the exciting problems. Okay. So it's not literally about shipping faster. It's probably about spending more time cleaning up or spending less time cleaning up tech debt so you can spend more time actually shipping code. That's my takeaway delete my tech debt.
It should be amazing. Okay. We've got a demo k. A visualization. You okay. So you go on GitHub. You make an issue and then sweep is going to magically create a PR for you with what you've described. Mhmm.
This is a sensational and extremely exciting idea. It took us way too long to figure out what it was. I'd love to know as soon as they get on this webpage, Sweep automatically creates PRs against your code base based on issues you file. Something like that. Just very clearly tell me what this thing does because it's too exciting for people to miss out on it. Yep.
Trusted by engineers from these companies. Okay. Alright. So now we're starting to get into some of the specifics of what it is. But again, still too buried. Like when people hit the website, you need to hit them over the head with what this does. Otherwise, if it's too nuanced, people are not gonna be able to take anything away Yeah. From it.
I'd love to try this. I I have some open source projects with some issues. If this let me like just maybe for free give it one of my issues and interact with it, that would be very exciting. Maybe it does. Install in your repository. So I can get it onto my repository it looks like. Maybe that's a bit too expensive to let people try it on their own. Guess you have to index all the code.
Yeah. But I think this helps to address probably one of the primary questions that people have which is like, sounds super exciting, does it actually work? You're gonna have to try it for yourself with something this Yep. This Is it too good to be true? Yeah. And if if you try it and it works, take my money. Yeah.
And if you try and it doesn't work then you know, you you gotta wait for it to become more mature.
Let me see some example tickets. I really like that they have the chat widget on the website. I'm assuming I can talk to a person. I think it's really great when you're early in your company to be hyper available to your customers.
Get the intercom app on your phone in your pocket and put it on your landing page and let let people interrupt your dates, your dinners, distract you at the gym and talk to your customers all the time. If the founders are available behind that, it'd be really exciting to start talking to them. Totally. And this is actually, know, I think a lot of times as small companies and founders,.
you're worried that your disadvantage is that you're so small. This is actually one of the things that gives you an advantage. Your responsiveness, your personal availability, giving people your cell phone number, making yourself available on the website twenty four seven,.
no larger company is gonna do that. Some middle manager there to be available to win customers and that's gonna make all the difference. It's also the easiest way to impress people in the world is to call yourself a founder and like reply to people's emails and their chats. People are like wow I can't believe I'm talking to the founder. You don't have to tell them that you're just two people.
It feels great. Overall this is a very exciting idea and if this works well this website is totally burying the lead. They need to tell people that this is something that can automatically write PRs against your repositories on GitHub just from tickets.
Well, great job, Sweet. Very cool. Really exciting. Alright. Next up, we have Mirrorful, your custom UI library without all the work. Alright. Production ready customizable React components powered by a no code editor. Front end has never been easier.
Alright. So we've got a screenshot over here. It just looks like a generic editor kinda interface.
I'm still a little confused about what this is. Your custom UI library without all the work. Production ready, customizable React components powered by a no code editor front end. So I'm guessing your front end developers and maybe even your designers build React components in this no code editor Mhmm. And then your developers import them. Yeah.
My hunch is you know this age old problem of having a single source of truth for the design components that actually matches.
what's in the code. You're right. That is what they're trying to create. Designers can create and edit components in the component editor and developers can export.
code ready for use. Okay. Build the product at the speed build product at speed of light. Okay. They've got template components.
One thing I'm struggling a little bit with is their screenshots look like the same design as this website. So the website is black text on a white background and all the screenshots are also showing black text on a white background and they kind of bleed into the background. Right. It might be better to change the background color of the website so the white UI elements stick out more.
Even here, I thought this was a screenshot and now you're interacting with it. Yeah. It's just a bit confusing to understand what we're looking at. I thought it was screenshot too. Okay. So this may be like a live editing version of a piece of the product it seems But.
that's great. Something interactive. Whenever you can put interactive stuff on your homepage for developer tools where they can see the calculations happen, that's awesome. But I agree with you. You know this caught my attention as we were scrolling and so I was just like okay here's some text or screenshots or something like that.
We scrolled right past it. I would recommend here's a simple technique. For these contiguous sections put them on an alternating background color where one is white and the next one is off white and increase their margin. Right now these are bleeding into each other. Build product at the speed of light with this illustration that doesn't actually do too much for you.
And then document your data system is another point. I would just put those in separate sections, put some margin, and differentiate the background color to break it up.
You can also call out.
if trying it is actually something really important so people can experience it. There's nothing here that says like try it live right down here. Change the label from button to edit me or customize me or something. Yeah. One thing I would point out is I've seen this premise a lot.
A no code React component editor or people who are less technical or the designers on your team could could focus on the component library then developers would refer to them. It would be good to acknowledge what's different about this approach. Have they found a new way to make it easier to synchronize that code? Yeah. Is there something differentiated.
about their editor that makes it even easier to use? And think you're you said the keyword which is synchronize. I think the promise of these always sounds great. They fall down in practice because something gets out of sync. A developer edits it directly in code and now it's not reflected in the That's true. The design mock ups.
And so if they do have a way in here to actually keep it always in sync, then I think highlighting that would address the primary concern that a lot of people would have. What takeaways do we have for Mirafil?
Okay. So if you could help explain sooner what this is, this we have a claim that it's without all the work. I'd like to know what it is before I understand the benefit. Especially for a developer tool, some products you go the other way around.
You start with the benefits and then you can get into the dirty technical details, but when it comes to developer tools you want to be credible with your users who are very intelligent, very technical, choosy people. They want the details. I think getting more of the details more succinctly here rather than that it doesn't require work and that it's production ready would be really beneficial.
Awesome. Thank you, Mirafel. Alright. That does it for this episode. Thank you, David, for joining us. Thank you. Super helpful. Really appreciate it and great feedback for all the founders.
And thank you to all the founders that submitted their websites for review. Really appreciate it. Help us out by letting us know in the comments down below if there were any tips or reviews that you found especially helpful that'll help us shape future episodes. So until next time, 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