01 · The problem
A visitor wants to know what's in it for him.
Various questions are intertwined with a technical product. What is the hub? How do you connect it? What accessories do you need? And where do you go if you have already progressed and have a technical question?
Putting everything on one long sales page does not automatically clarify those questions. The website had to support both an initial orientation and targeted deepening.
02 · Inventory
Organize the questions behind the product material.
The inventory revolves around product information, connections, images, manual and frequently asked questions. The distinction between the hardware, Home Assistant and the additional Buddy console also determines the explanation.
Added to this is multilingualism. Not only the homepage, but also navigation, explanations and forms must be usable in Dutch, English and German.
03 · Plan of action
A clear start and separate pages for in-depth reading.
The structure separates the product presentation from the explanation about connections, specifications, accessories, Buddy and knowledge articles. From a short introduction, the visitor can proceed specifically to the question he has.
Contact will have its own route. A product question requires different information than technical support or a request from a dealer or installer.
04 · Construction and further development
Your own design, down to the small interactions.
The website is built directly in HTML, CSS and JavaScript. The product gallery provides space for different views, while the navigation remains usable on a phone.
The further development includes knowledge articles, internal references and forms that show the right questions after subject selection. A visitor therefore does not have to first go through all the topics on the contact page.
From insight to the next step
What the visitor can do next
| Reason | What you see | The next action |
|---|---|---|
| Visitors first want to understand what the hub is | A brief introduction, product images and core specifications. | Click through to the details that match the question. |
| Visitor wants to start or figure something out | Separate connection explanation, knowledge articles and manual. | Follow the instruction or ask a specific follow-up question. |
| Visitor needs contact | Topic selection with an appropriate form. | Submit a product question, support question or business request. |
05 · Implementation
From separate pages to a coherent website.
The three language versions have their own pages with mutual language references. Page titles, meta descriptions, canonical URLs and the sitemap correspond to that layout.
JavaScript provides the interaction; PHP processes the contact requests. The page structure connects the product information with explanation and contact, so that a visitor can continue within the same website.
06 · Testing and checking
The entire route must work.
Relevant control points are the mobile navigation, the product gallery, the links between in-depth pages and the transition between the language versions. Forms must match the chosen subject, language and associated questions.
The information must also be in the right place: a specification on a product page and detailed instructions on an explanation page. That division is part of the usability, in addition to the technology itself.
07 · Delivery
A published website that can continue to grow.
The website created can be viewed at homeassistanthub.nl. The result includes the product presentation, multilingual explanation, knowledge base and routes to contact and dealers.
New explanations can be added as their own page and linked from the relevant topics. This way, the homepage does not have to keep getting longer as the content grows.
08 · Time savings and insight
Where the profit is in this project
Here the benefit lies in clear product explanations, a shorter route to the right information and better prepared questions. Less support time or more conversion has not been determined as a measured result and is therefore not claimed as a figure.
Less repetitive explanations
The same product and connection information can be accessed and shared at a fixed location.
More targeted requests
The choice of form requires the context that suits the subject.
More space for depth
Knowledge articles support the explanation without overloading the product introduction.
