Getting started pages - #5710
Conversation
This file contains the initial implementation of the Getting Started page for FlowFuse, including SEO metadata, sections for product guidance, and user interaction elements.
This file serves as a single source of truth for the /getting-started page, organizing sections around product lanes and providing a structured guide for users.
Updated the Application Guide routes to use .yml files instead of .md files. Removed unnecessary comments and adjusted route handling accordingly.
Updated listClasses for Overview column and added 'Getting Started' links.
Added a DIFFERENTIATORS section to highlight key features of the product, including vendor-free open source, flexibility, security, and collaboration.
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@KristopherLeads there's no description on this PR, would you mind sharing the rationale behind these changes? |
Yndira-E
left a comment
Yndira-E
left a comment
There was a problem hiding this comment.
Thanks for putting this together. A couple of things before I can review this properly:
No PR description / rationale. I don't have context on why this page needs to exist, who it's for, or what problem it solves that /docs or the existing product pages don't already.
On the design: going through the code, a lot of visual patterns here don't match anything else on the site: colored left-borders on cards, six different pill/badge treatments, custom eyebrow styling, a teal accent that isn't in our brand palette (handbook/design/branding), and bold weights heavier than our fonts guidance allows. None of it reuses the CTA button system, the pill pattern, or the cards component from other pages. With this many new patterns stacked on one page it ends up feeling crowded — at this point it feels easier to start the design from scratch than to fix what's here.
Could you share the doc this was built from? With the rationale and that copy, I could put together a design that's aligned with the rest of the site and its visual language.
As shared in the original Asana this was meant to be Drew's guide refactored. Since the guide morphed into "getting started" as discussed in a meeting between Product and Sales, this is the outcome of that. The entire problem being solved here is influencing customers who are getting started to find their path quicker and execute on that path. The design issues - as I said during yesterday's meeting, well aware those elements need to be updated, as I am not the design person. I will take a run at aligning it here, but this should not have to be completely started over again. Let me refactor some design basics and then you can take a run at it. This has already gone through several rounds of reviews, so going entirely back to the drawing board is a step in the wrong direction. |
So this and Drew's guide are for customers, kind of like the docs. How come this doesn't live under /docs? I'll be doing an architecture/IA review of the site, and this page's placement and structure will be part of that, so we may leave it here for now, but I'd expect it to move or restructure once that review happens. On the design, I'd rather handle that myself, I didn't mean to hand you design work. Could you share a Google Doc with the copy and section structure? I'll start from that with a Figma design, so I won't touch your PR until we've aligned on that. |
Entirely different audiences. Docs is for people who have decided they understand their problem and the value prop from FlowFuse and want to get started, but lack an understanding. Getting Started is for people who don't understand their problem or how FlowFuse could help. Drew's guide is MOFU, Getting Started is TOFU. |
|
Here's the file in Google Doc. https://docs.google.com/document/d/16FwsZx6djFIoeNxzZW2HGoE0cGA7BCULS6zv-kQCj54/edit?usp=sharing Please note the product selector quiz needs to be part of this but is just separated into markdown right now, the code itself is not represented in the doc because it's not easy to put in a doc. It's a nuxt module right now that you can interact with in this PR. |
|
Thanks for sharing the doc. If there’s also an original brief or outline that was created before this PR, I’d be interested in seeing that as well. And thanks for clarifying the intended audiences. I think the fit-finder in section 01 works well for a TOFU audience, as it helps someone figure out which solution might be right for them. The step-by-step onboarding for each product, though, installing the Device Agent, connecting via OPC-UA/Modbus, creating a Hub instance, etc. feels closer to MOFU and to the kind of how-to content we’d should usually have in the docs. The language for Hub, for example, even seems to assume that visitors already have a FlowFuse team, and the CTA is for logging in rather than creating an account. If you and Joyce have already gone through this and you’re happy with this approach, that’s totally fine. I’ll work on the design based on this doc. |
We already walked through this approach and we're fine with it. |
|
Talked with Kristopher about this. My understanding of the actual goal: this page is a stopgap for a product problem. Users create an account or their first instance/app and don't know how to move forward. That will be addressed on the product side, but it'll take a few months, so this page is meant to cover the gap in the interim. Given that goal, I don't think it's realistic to expect someone to leave the product and come back to the website mid-trial if they get stuck. So I'd propose flipping the section order: lead with the "how it all works" context, then close with "find your product" + "get started." Theory-first-then-action makes it one continuous progression instead. Two more things flagging for the Get Started section specifically:
|
2 participants
Description
Related Issue(s)
Checklist