EPIC: New Site --> App-focussed! 📱

[nelsonic]

Warning: This is an Epic ⚠️

There is at least a month worth of work in this Epic. ⏳
It needs to be broken down in to sub-issues/tasks to be "ready for dev".
Right now I'm just trying to answer a quick question: Why is the dwyl website so out-of-date? 🤷‍♂️

The fast/short answer is: we haven't been focussed on the website for the last year because:
a. Nelson was working full-time doing FinTech Consulting to get funds to re-start the App work. 💰 ✅
b. Nelson didn't have time to build the App and do the full-time consulting + parenting. 👶 ⌛

Now Nelson does have time. and is "all-in" on building the App. 👨‍💻

Context ⏳

In our quest to be revenue-funded we got massively side-tracked from our original plan of building an App. 😕
We built many Web/Mobile Apps for great clients and gave good career experience to lots of people. ❤️
... but ultimately it was a distraction and it means the App is still not built! 🤦‍♂️

The current website #143 (comment) reflects the "services" business model. It will be archived/replaced very soon. 📁
We haven't focussed on the website because we want to build the App first. see: dwyl/mvp#140
There's zero point updating the website until at least the "core" functionality is available in the App.

Almost none of the current site will remain. ✂️ Except the color scheme. 🌈 But even that has been lost along the way. 🤷‍♂️

So everything on the current site should be considered "legacy" including the copy, images, layout, links, etc.

New Site: App-focussed Landing Page

The new site will be a single HTML file landing page with all the info necessary
for someone to make an on-the-spot decision to try our App.

• VIDEO of a generic use for the App: Feat: Feature Tour 🪄  app#307

Performance Focussed 🏎️

• The site should load as fast as possible. Target: 0.5 sec to interactive. 🏁

We should do everything we can to make it load faster than any other SaaS landing page.

• Setup CI tools to test load times of the deployed site.

How You Can Help?! 🙏

Design / Layout 🧑‍🎨

We're going to need a slick fast & responsive design/layout.

• 1. Research the best SaaS landing pages, e.g: https://dribbble.com/tags/saas_landing_page
  • Click into the designs on Dribble and follow through to the respective websites.
  • 1.a Take full-page screenshots using Firefox. e.g: Superhuman
    Catalog the best layout, copy, color schemes, open issues on: https://github.com/dwyl/product-ux-research/issues

Really like what @sohilpandya & Team have done with the tranch.com site/landing page. 😍 product-ux-research#36

Technical 👩‍💻

Our focus is on raw performance. We definitely don't want anything client-side rendered it's way too slow.
Server rendered and cached preferably on the fastest available cache service.
We are currently using Cloudflare and it's OK. We can switch if needed; please open an issue!
If we can get compact/compress our page, optimise any images (which are loaded after the HTML so that's OK)
and get it below 50kb for everything i.e. inline the CSS and any JS on the page,
then we have a much better chance of "wow-ing" the reader with the speed.
That means zero trackers or Google Analytics. We're going to have to hand-write our own.
Don't worry this isn't as complicated as it sounds. See: dwyl/technology-stack#127

Once we decide how we're going to build/deploy the site, update the docs!

• comprehensively update the README.md of this repo to reflect the new setup.

Accessibility + SEO 🙈

The current website scores "OK" on web.dev/measure:
https://web.dev/measure/?url=https%3A%2F%2Fdwyl.com

But we've managed to get the MVP up to 100 in everything (_except "Best Practices" which is limited by our use of LiveView ... 🙄) see: dwyl/mvp#129 (comment)
We could easily score 100 in all areas and get Time to Interactive below 0.5 sec if we focus on performance and cache everything we can.

• Automate checking page quality on CI before a PR updating the site can be merged.
  That way our Accesibility, SEO & Perf never slip below 100. (sub-task/side-quest required!)

More to come! ➕

More to come! this is just off the top of my head.
But the main point is this: we're focussing on building the App before building the "marketing" site to "pitch" the App to people as the solution to their personal effectiveness woes.

So if you haven't already used and provided feedback on our "scrappy" feature-poor MVP: dwyl/mvp#140
Please do that before even thinking about "fixing" the dwyl.com website.
We need "all hands on deck" to focus on the App. There's a lot of work to do. 🙏

[LuchoTurtle]

Looks like a great idea. I've been eyeing https://www.solidjs.com/ for a while (instead of doing vanilla JS + HTML, which might take a much more considerable amount of time) and it might be a good fit for this job.

I've previously done a proof-of-concept site at https://github.com/LuchoTurtle/dwyl-site just for fun, as I wanted to try out Spline3D and learn how to do a scrolling experience. It's just a reference of what a landing page could look like (obviously not the same, as it doesn't meet the performance requirements detailed on this issue).