Landing page improvements
Color contrast, tech stack logos, and use-case sections
Alright, after a nice weekend out in the nature to celerabte a friend’s birthday, I’m back at building LaunchFast fully recharged 💪
To recap, here’s where we left off:
Define your market around the Job-to-be-done ✅
Uncover desired outcomes/customer needs ✅
Quantify which outcomes are unmet ✅
Discover hidden segments of opportunity ⏳
Deploy one of the 4 market strategies ⏳
Steps 4. and 5. will take a while. I’m guessing that once LaunchFast starts to be a little more well known, more customers will “pay the price” of filling out the Jobs-to-be-done survey in order to get free access to the stack.
The next steps are:
Improve the landing page according to the feedback I’ve received ✅
Improve the product according to an interview I’ve done
Iterate on the landing page and product until I consistently get 10/10 reviews
Capture reviews and testimonials for the landing page
Create a support group to help me launch on ProductHunt
Launch on ProductHunt to reach a global audience
Today was all about improvements to the landing page. Here’s what changed:
Improved color contrast ✅
Added tech logos for a more colorful page ✅
Added use-case section to make it clear for whom my product is ✅
Improved the copy a little bit ✅
Added Fathom Analytics (I’d use Google Analytics, but I already paid for a year of Fathom, so I’m sticking to it until the subscription ends) ✅
And lastly, fixed an annoying ESLint bug ✅
Color Contrast
As it turns out, there doesn’t seem to be any good solutions for color contrast checkers for developers. I did not find a tool that I could integrate with my current testing pipeline (I’m using Playwright) and give me an easy to use output. The only tool I’ve found was Axe, but its output is horrendous!
Axe gives me an entire JSON array I have to scan through in order to figure out which rules were broken and where.
What I would love to have is the excellent UI/UX experience that the WCAG Color Contrast Checker Chrome extension gives me. Check this out 👇
You get a nice list, showing you which rules failed and if you click a failed rule, it will highlight the components on the page that failed that test. Excellent! And it also gives you a color picker if you want to manually check for contrast yourself.
The only thing this extension fails to do is correctly assessing color contrast on text that has a gradient background effect when using ‘bg-gradient-to-b from-muted-500 to-muted-900 bg-clip-text text-transparent’. The TailwindCSS class the extension has trouble with (or more accurately, the CSS rule) is the ‘text-transparent’ one.
Marketing
I’ve also decided to completely stop promoting my product and actively look for people to help on 𝕏. Check out the post here. I’ll share the results next week.
That’s it folks! Overall a great productive day. I’m pretty happy with today’s results!
Thanks for reading, let me know if you have anything I might be able to help with and have an amazing day 🙌