Roast my landing page for Simple OTP
Let me know if it's understandable and what you might suggest changing if it's not. Happy to review your landing page in return. Thanks!
Trending on Indie Hackers
Let me know if it's understandable and what you might suggest changing if it's not. Happy to review your landing page in return. Thanks!
As @petedavis has called out, adding "One Time Password" somewhere would be a huge help. Could you perhaps make all mentions of OTP <abbr> HTML tags which explain the abbreviation? Wouldn't help on mobile devices but it's a start.
The colour scheme is very bold - I'm sure that was intentional, but on a big screen that big blue background is a bit overwhelming!
A picture speaks a thousand words: I'm sure it's a hard architecture to explain, but as a potential customer with a technical head, I'm struggling to see how and where SimpleOTP might fit in some of my existing services.
Nitpick: you refer to the product as both SimpleOTP (in this post, and in the explanatory text on the page) and Simple OTP (in the main heading).
Obviously focussing on the actionable things here - overall it looks great!
@makeusabrew Update: I reworked the landing page and added a "Get started in 5 steps" section that hopefully helps clarify how the product would be used on the frontend side of things anyway. Let me know if this helps/hurts! Really trying to make sure the landing page is understandable and appreciate your insight.
Get started is a massive help - especially that crucial 6th step you've just added which is where it finally clicked for me 💡
Only nitpicks really are very small:
six steps is quite a few for a homepage 'getting started' guide - might be worth really challenging yourself to see if you can slim it down (even if you just merge some steps together? 6 just feels a bit intimidating)
the <code> blocks are visually pretty jarring, especially where you've got two separate blocks in step 3 and/or each block wraps onto two lines (on small screens) - would paste a screenshot to illustrate but I can't
it might not be practical but IMO squishing 6 steps into fewer and then having fully formed code samples (not the npm bit, that can stay as a quick start step) below the quick start might be more impactful, especially if highlighted with e.g. Prism (wow, I'm not even allowed to post links yet! search Prism JS) or similar. If you can't fit all the relevant code snippets into one made-up example, could perhaps have separate tabs showing setup, invocation and how to pass the token along, but I bet you could squeeze them into one!
Update: Based on your feedback I've simplified this to 3 steps and combined most everything into one code block with syntax highlighting. How does it look?
Much better - looking awesome!
Great to hear that!
Thanks for the feedback!
@makeusabrew Thank you for this! I've added One Time Password to the top. For the rest of the feedback:
Haha yep, somewhat intentional to make this very bold and stand out on a newsfeed etc. Agreed it may be too much on desktop - I did have a previous version with less bold colors but I thought it wasn't appealing enough frankly. Let me play around with some different colors and see what looks good.
Abbr tags - will take a look and see how it renders.
Good point. I'll look at adding a simple system diagram, or maybe even a video to explain how this works. Hoping some of the code examples other people called out (I'll add a proposed code snippet for how to integrate) will help too.
Just fixed the SimpleOTP vs. Simple OTP thing - I added a space everywhere for clarity. Let me know if that's better.
I'll reply again once I have some of the other concerns addressed (value prop, code examples, some kind of system diagram or picture or video explaining the product)
Thanks again for your feedback!
It's unclear how this differentiates from the competitors. Is it easier to use and implement? Is it cheaper? Why should I use this instead of something else?
Oh man, I was hoping the bullet points I listed were clear enough in this regard. Maybe some of the bullet points can be improved? When I was doing research I noticed a few things:
I'm also considering offering integration services i.e. if you sign up and pay, I'll personally integrate Simple OTP into your app for you. Stripe did something similar when they were getting started and it might be a good way of "doing things that don't scale" to make sure my first 100 customers or so are exceptionally happy. What do you think?
I'm very curious: is what I'm describing above not clear enough on the website, or do you think the above is not unique enough to get people to switch?
Either way, thanks very much for your feedback, it's helpful!
These advantages are not clear from the landing page alone.
The fact that you can self-host is the 3rd bullet point in the 2nd list, the others have to be inferred and are not written anywhere.
Maybe it's fine because your customer already know what to look for? But in general I'd add a bullet points list with the cool feature you have at the beginning of the page.
@lorenzotenti Thanks to this feedback, I actually decided to just get the landing page updates out of the way, so I updated the landing page to include a "why simple otp?" section and cleaned up the style a lot. Let me know if it looks better now: https://simpleotp.com
Cheers!
Good idea, I'll implement this - focusing on the code and getting the initial version of the product working as I promised myself I'd get it done by end of month but I'll go back to the landing page shortly after!
Hey Ben, great kickstart!
@ashna Added a simple screen recording and ended up reworking the style somewhat significantly to make it easier to read. Haven't done the 2 column setup yet, but let me know if it looks better now overall: https://simpleotp.com - Thanks!
@ashna Thank you! For 3) Good idea - I actually just recorded a loom video last night. I'll drop that in soon. 4) Interesting, will consider this. I've seen something like that before with the video on the right and company name + email sign up on the left 5) No websites use it just yet! I'm building the backend to return auth tokens and handle payment as we speak
If it would contain more authentication flows from which I can choose then it would more enticing to sign up for it (eg. two factor auth, oauth logins with popular providers, etc)
Got it, thanks for the feedback:
1: Yes, big font indeed. Got a few comments about the site being too bold. I'll experiment with different styles to make it less huge and will need to A/B test since I've started getting some signups
2/3/5 (these are all similar points about value add/why is this product useful): This product is marketed at developers and startups who don't need all of the features offered by bigger auth providers (I noticed many startups skipped integrating with companies like Clerk/Auth0/etc presumably because of the high cost at scale/too many unneeded features/worries of selling user data to a 3rd party like FB/Google for social auth -- and just did their own email login as a result) so this is all somewhat by design. I'm attempting to add enough of a useful javascript library to satisfy ease-of-integration concerns while also allowing for a lot more customization than an Auth0 type company lets people have (they let you change the logo on the auth page and so on, but it never quite looks like the rest of the site). Also meant to add some selling points about user privacy/not selling data to the landing page, will have to do that. Ultimately, If no one else wants it because it's too much of a nice to have/not enough features, I'll be using it for my sites so it's not the end of the world -- but it is a fair point.
Thanks again for the input, I really appreciate it
@vladcalin Updating here, based on your feedback I added a "why simple otp" section to hopefully address some of these "why is this useful" questions. Also changed the pricing and user caps to something a bit more manageable.
I would add some sort of a graphic at the top to show how a product works in 3 simple steps. I get that you have a howto/description right below that but I don't feel like a user would read that, I glazed over initially myself and I'm a developer. I really like the pricing table on the front page, I'm going to steal that for my landing page too. One takeaway I got from my visitors is that they can't find my pricing quickly enough.
@atsepkov Thanks for the feedback! I've simplified the "getting started" section a lot based on your feedback and moved the email image to the top to hopefully provide a quick explanation of how this will work; let me know if it's easier to read now. Also, feel free to steal the pricing section :)
Hey Ben. I’m new here on Indie Hackers but am a developer and entrepreneur. My immediate takeaway was that you’ve too many steps on the landing page. Seems like you might be better served to create a command line onboarding sequence in the library itself that does most of the setup pieces and wouldn’t be super hard to add (I think? Depending on your architecture?). That way you can have a 1-2-3 of 1. Install. 2. Run mysetup and follow the prompts 3. Take the code and add it to your product. Just my two cents. YMMV.
Great idea. Getting lots of feedback that there are too many steps, this could be a great way to reduce friction. Working on changing the landing page wording today. Thanks!
I feel like the 6 steps could be displayed in a better way, it seems a little like too much text with too small a font right now. But love the idea
@jf93 based on your feedback, simplified the getting started section to 3 steps instead of 6 and included code examples. Let me know if this looks better. Thanks again for your feedback!
Looks much better 👍
Awesome, thanks so much. If you're interested in the idea feel free to sign up on the website - I should have a working version up soon for at least the Essentials plan!
@jf93 I've gotten a lot of feedback about this so I'm working on fixing the steps today. Agree it's probably too much text. Thanks for your feedback!
I think some white space between the different aspect/elements.
The pricing table could be wider too.
Font size a touch bigger?
Also depends who you're aiming at but you could simplify:
"The simplest way to add One Time Password (OTP) and "magic sign-in link" authentication to your website."
To:
"Are your users always forgetting their passwords? Let them sign in with ease with a One time Password"
Love the concept.
@InDepartures I just made the pricing table wider. Does it look better to you now? Also, for font size - do you mean across the board or just on the pricing table?
Hey! Looks better to me now!
Just a slight increase in font size, and on the table pricing details too.
Only my opinion though! :)
@InDepartures Just increased the font size everywhere - better?
Yeh looks good. Make sure the sign up buttons are vertically aligned.
I'd like to see the sections with more space between. These are just personal preferences though. :)
Interesting, they appear to be vertically aligned to me - are you seeing something different? Which browser are you on?
Chrome.
Very odd - would you mind taking a screenshot of what you're seeing? I'm on Chrome as well and tried several different screen sizes to reproduce, but couldn't observe anything that looked off. Thanks for reporting.
https://ibb.co/rGT7kP7
Sure!
@InDepartures got it, may be an OS thing in terms of how it treats spacing. I'll keep messing with this and I think I'm close to a platform agnostic way of doing this, will let you know when it's fixed
Looks better now here.
@InDepartures how does it look now? I ended up changing the layout to make it work better on mobile which I think also fixed your issue, but hard for me to confirm w/o a Mac at home. Let me know if it's better! If not, I'm going to borrow a Mac from a friend of mine and keep messing with it.
P.S. I'm using an old windows laptop and I've been meaning to upgrade to a Macbook Air - this might be the excuse to do it finally!
Yeh still happening on chrome on a mac, and on Brave browser.
@InDepartures still struggling to reproduce this. Tried multiple devices and they look vertically aligned to me. Are you on Windows, MacOS, or something else? Your original screenshot disappeared btw. Does it still show up when you clear your cache and load the page? I was editing the pricing table a lot yesterday and I'm wondering if you just have a cached copy of the older version of the page.
Ok, that definitely doesn't look right - will play around with this when I wake up and see if I can reproduce it. It's likely because I'm using nonbreaking spaces as opposed to CSS properties
Great idea on the simplified wording and making certain elements more readable, let me see what I can do here.
Maybe move the SignUp section below pricing? When reading first time, it feels like you are asking me to signup before even explaining the product :)
I thought about that and it's definitely more logical, that said anecdotally it seems like I've had pretty good luck with conversion when just making sure the signup button is above the fold and not worrying too much about the explanation of the product.
I like the simplicity of it.
But there's too much text below the CTA.
Either you should reduce the text to half or use some graphics and designs to make it more intersting.
CTA button is not standing out. Use a contrast color.
Yellow goes well with blue if you want to stick with the blue.
@Nareshmeetei thanks for the feedback here. Just reworked the landing page and changed the button to green which I think stands out better. Hopefully it's a bit more compelling now. Let me know what you think!
You're welcome.
Try this color palatte
#0C4E8C
#0C81E4
#11C4D4
#4FE7AF
@Nareshmeetei Tried playing around with that color palette but it just didn't look very good to my eyes, not enough contrast or just hard to read. Which colors did you have in mind for which part of the website? I.e. which hex color on the bg and which for the buttons? I might have just picked some bad combinations.
https://www.figma.com/file/QMtGP4cLAav7ZISWc6Qgd8/Somple-OTP?type=design&node-id=0%3A3&mode=design&t=WTOLzUHcDcEVAetQ-1
@Nareshmeetei this is really awesome. Thanks for taking the time to create a figma with what you had in mind! I really like the font you used as well. I'm still getting some signups with my current design, but I plan to A/B test this design with the one I have now to see what happens.
You're welcome. Good luck Ben.
This comment was deleted 2 years ago.
PS im being lighthearted so dont take it to seriously:
Well, well, well, look who thinks they're "simple." This page is emptier than my bank account on payday. Where's the beef, bud? 🌭
All I see is a logo floating in an ocean of whitespace. It's giving more minimalism than a zen retreat. Throw me a bone with some images or screenshots! 📷
And what's with the world's smallest features list squeezed into the corner? You call those details? I need a microscope to read that font size.
"Email-based, passwordless..." Zzzzz I'm falling asleep just reading this. Give me something juicy to get excited about! 😴
Don't get me wrong, simple can be great. But this is simple to a fault. I'm more confused than your logo after landing here.
Maybe the product rocks but this page is duller than a 2-hour insurance seminar. Wake me up when there's a spark of personality! ⚡️
Overall this vibe is emptier than the cookies jar after I've raided it. I get what you're going for but the execution needs some flair. Less zen, more zing! 🍪
Lose the stock imagery and inject some life into this thing. Give me a reason to care beyond buzzwords. Then we'll talk!
Your starting out but overall not too bad fix up it up a bit but you've got a gift
Added screenshots, more details, code examples, and tried to make it more appealing. Let me know what you think!
Haha, enjoyed reading this post. Thanks for the feedback - already working on changing some of these things (adding screenshots, more details, proof). Will update once the new version is ready
So IMO most of the people who are going to decide what OTP service to provide will be technical in nature, so we're aware of what services are out there. So if this is the audience your speaking to, you need to tell me why I should use yours vs firebase or aws or twillio or auth0 etc...
If you are looking to target developers who are intimidated by bigger services, you'll want to talk about your ease of integration but you gotta show them how easy it is.
You are providing a solution to simplify someone's stack, so I feel right now the messaging is too general.
@rulian I've significantly reworked the landing page to show the ease of integration with a code example among other things. Would you mind taking a look and letting me know if it's any better? I think I could still stand to add a FAQ to help sell the value a bit more, but hopefully there's a major improvement as it is. Thanks again for your feedback and let me know!
Thanks for the feedback here. I'm adjusting the wording today and adding some clear examples of how this would be used in a real application - indeed, trying to focus on ease of use.
super simple and straight to the point, I'd definitely use it for a side project. Personally prefer to easily spot the pricing options, I would maybe recommend having a dedicated "pricing" section if possible. On my first view of the site I thought it was free until I noticed the last bullet point.
Thanks! I was thinking the same when I put the pricing on the homepage (I like to see pricing upfront) - that said, I'm reorganizing the page and will think about how to display the pricing properly.
Sounds awesome! Feel free to reach out or update me once it is reorganized, would love to check it out again
@MattDoesTech just reorganized and decided to go into a lot more detail on the pricing. Let me know how the new version looks, hopefully it's a lot clearer!
Nice! Yes this is much clearer, it looks awesome!
Awesome, glad it's looking better for you! Hope to have you as a user for some of your side projects once I commit actual dev effort to this product and get the first version online.
100% would love to be a customer once the product is ready and once my product is ready as well. Bookmarking this post so I don’t forget.
Hey @MattDoesTech - exciting news, Simple OTP is ready for customers! I'm doing a soft launch right now and will be doing a full launch next week once I've prepared some better documentation. Here's the link to sign up: https://app.simpleotp.com
Would love your early feedback - each plan has a 7 day free trial so you're welcome to sign up and if you don't like it, you are welcome to cancel at any time by emailing support [at] simpleotp.com.
At this point, I have client libraries built for Vue.js and plain JS. There's also an untested React lib which I have less confidence in but will be verifying soon. Note that none of this is listed on the website yet - if you sign up and want to integrate with your website, I'll personally send you the example code and help you with the integration. These client libs will be shipped to NPM early next week, and proper documentation will be added so that everyone can more easily get onboard - but I want to handle the first few integrations myself to learn if the product is working well for people.
Hope to see you onboard as a user soon!
Thank you
The emojis make it look a bit spammy.
I'd also refrain from talking about actual pricing at this moment. I like to focus on value first. But that's just me.
@karanarjun just reorganized and decided to go into a lot more detail on the pricing. Let me know how the new version looks, hopefully it's a lot clearer!
@karanarjun Also, removed the emojis everywhere. I left the lock icon in the logo but all other emojis are removed. Let me know if it looks less spammy now.
Thanks, makes sense RE: pricing. I'll see if I can focus more on value instead of naming a specific price, or alternatively reorganizing the pricing into a separate section. Making some adjustments today.
Great work! Would you consider a freemium model? Like giving away basic features for free. It will greatly help to increase the number of adopters and people who truly find value in your product will be happy to upgrade.
I'm offering a free trial which will hopefully give people enough confidence that it's useful.
I might consider adding a free tier later for growth (with a required attribution link in the email or similar), but my aim right now is to see if people will pay me for this product - otherwise I don't have product-market-fit :)
Also please validate for duplicate emails. Not a big deal but you'll get a more realistic number that way and your users will have more confidence in a product that is about security.
What do you mean by duplicate emails? Like people signing up for the waitlist twice on the same email?
EDIT: I looked and there are indeed a couple of dupes. I'm not going to worry about this too much since emails are anyway getting funneled into a deduped database for me to review later. It's unfortunately a limitation of the forms software I'm using.
Makes sense! Thanks for receiving the feedback well.
I got inspired by you to share my landing page here:
https://www.indiehackers.com/post/roast-my-landing-page-for-getkudos-389c8ab02c
No worries! Just reviewed your landing page in return.
Super simple and straight to the point with a clearest Call-to-Action. Wonder if "free signup" may give you better conversion.
The last 4 checkmark bullet-points may be ignored cause visually it all looks like a big chunk of text. Maybe try a 4 column layout.
However, the 4th bullet-point logically is actually pricing related, so it should be treated differently than the first 3.
Hope it helps.
@ShakirHelloRobo I just took your advice on the CTA and switched it to "Try for Free" - thanks for this tip, I think after some consideration it's a lot nicer for the user to see that vs. just "sign up"
Great improvement overall!
Good idea wrt 4 column layout. I'll give it a try, working on this change and some others today. Any suggestions for what to do with the pricing bulletpoint?
Someone mentioned this earlier. Maybe you don't talk about pricing and just mention discounts and benefits as a value prop.
Ah ok, maybe something general like this? "Pricing that scales with your business. Volume and annual discounts available." I'll play around with wording and see what works best.
Yeah, that works! Good luck!
@ShakirHelloRobo made some adjustments to the landing page to show pricing in a 3 column layout and inlined features there. Let me know if this helps or hurts things! Thanks again for your feedback
Nice! That's awesome!
I'd add social proof if you have it. Add it to the top of the fold with a quote or a numbers based thing "100+ folks love it."
@Benthecopywriter First of all, excellent first name you have there. Second, I've always struggled with this for brand new projects like this one - no social proof yet as I haven't launched. I'll definitely add it once I have paying users, but until then not sure what I can do in this regard. Thanks for the input!
I like it generally. On my standard laptop screen at full size, it almost fits on one screen but is ~20% too tall so I need to scroll. Since it's almost there, could be a good choice to always have it fit on one screen, no scroll necessary.
Thank you! I thought about that and noticed the same thing on my desktop screen - but I plan on adding a bit more content to the landing page at which point the height of the page will continue to expand. If I can find a way to do it while still showing all of the value adds above the fold I definitely will.
I would recommend adding a code snippet to convey how simple your product is to use. And a link to documentation once you have docs. As a developer, that is 100% something I would want to be able to find on the home page.
@spencerchubb proposed code snippet added! Let me know what you think. Note: this code doesn't do anything yet because the npm package is empty and launch hasn't happened :) I figured adding the proposed code snippet would be better than nothing and lead to more signups even if it's slightly sneaky to add code snippets that don't exist yet. Figure I can always change/add more docs later.
Thanks for the input here! I totally agree, this is something I like to see as a developer (and it's why everyone loves Stripe so much). I'll work on adding it today.
"The simplest way to add OTP and "magic sign-in link" passwordless authentication to your website ✨"
I guess in the main first sentence line we could remove passwordless authentication seems confusing to me atleast.
Thanks for the input here. Removed, let me know if that helps. Agree that extra word was a bit much :)
You need to get the words "One Time Password" on the page somewhere, preferably in the first sentence.
You may need to explain what the problem is that you're trying to solve. There are more established OTP services out there, so what is wrong with them and why would I use yours instead?
Showing a mockup of an email that SimpleOTP would send, with an example one time password in it, would also be good.
Thanks, I've added "one time password" to the top of the page - let me know if that looks better!
Also, fair point about the value prop - let me work a bit on that. Making some adjustments today and will reply once I have a better version of the landing page.
Thanks again for your input, very valuable.
@petedavis Reworked the landing page significantly at this point and there's now a mockup at the top of the page. Let me know if it's any clearer. I think I could still stand to add a FAQ to help sell the value add a bit more, working on that today and tomorrow. Thanks for your feedback!
i like it , its simple and delivers the message. Not fan of fonts though
@consinet updated the font to Nunito Sans. I think it looks cleaner now. Thoughts on the new font?
Thanks for the feedback, I'll try playing around with a different font and see if it helps. Any suggestions for which font to use?
Yup looks much better
Awesome, glad you like the new font - I think it looks way better too. Thanks again for the feedback!
This comment was deleted 2 years ago.