Capability 01
Websites and digital platforms
Public sites, portals and product surfaces built for people first and readable by search engines and AI agents second.
Illustrative example
Cold-chain logistics across the island
Collection, storage and delivery with the temperature record attached to every job.
Refrigerated transport
Scope, coverage, next step
Cold storage
Scope, coverage, next step
Last-mile delivery
Scope, coverage, next step
Home. Explains the offer and points to the right service.
Text version of this diagram
- Home. Explains the offer and points to the right service.
- Service page. Answers scope questions where the decision happens.
- Enquiry. Collects useful context and names the next step.
Problem and opportunity
Most business websites stop at presentation
A brochure site describes a company. A digital platform does work: it qualifies enquiries, routes them into operations, records evidence and stays legible to the systems that now read the web on a visitor's behalf.
- Enquiries arrive without context and are re-typed into other tools.
- Content is trapped in components that crawlers and assistants cannot extract.
- Nobody can say which pages produce qualified conversations.
Customer journey
Follow the enquiry all the way through
A website is the start of a customer journey. Each step below has a job: explain the offer, answer the scope question, collect useful context and hand the enquiry to a named destination.
Illustrative journey
01 / Relevance
Is this relevant to me?
The opening has to explain your offer in terms your audience recognises. Clear positioning, useful service pages and a sensible content structure help people find the part that matters to them.
- Positioning
- Service pages
- Content structure
Text version of this diagram
- 01 Relevance. Is this relevant to me? The opening has to explain your offer in terms your audience recognises. Clear positioning, useful service pages and a sensible content structure help people find the part that matters to them.
- 02 Evidence. Can you do what I need? Visitors look for scope, evidence and answers to practical questions. We put those answers where the decision happens, using approved project material and factual explanations rather than repeating the same sales section on every page.
- 03 Enquiry. What happens if I contact you? The next step should ask for useful context and explain the handoff. Forms, briefs and enquiries can connect to email, CRM, WhatsApp or scheduling tools, according to the agreed scope.
- 04 Follow-up. Who takes it from here? We define where an enquiry lands, what information travels with it and which person or process is responsible. Where a portal is needed, an authenticated area can hold documents, project status and approvals, with access defined around the users.
Decision
Improve what exists, or rebuild with a reason
A rebuild should be a recommendation you can question, not a default. We assess the current site before proposing the wider scope.
Keep and improve
When the underlying setup supports the work. The priority might be clearer copy, a stronger service structure, better mobile usability or an enquiry handoff that currently loses context.
- The structure still matches how you sell
- Editing works for the people who need it
- The problem is content, clarity or a single journey
Plan a rebuild
When the current structure or technology prevents the change you need. We assess the site, existing assets and editing needs before recommending that wider scope.
- Pages cannot carry the content the decision needs
- Performance or accessibility problems are structural
- Nobody can safely change the site without a developer
Your approved brand stays the starting point. Reusable assets and tools that still work should earn their place in the new build rather than be discarded automatically.
What Hapis delivers
Scope of delivery
Positioning and content structure
We work out who the page is for, the decision it supports and the proof it needs, then write copy that survives review by a technical buyer.
Design system and front end
A tokenised design system, typed components and accessible interaction patterns, built in React and TypeScript for long-term maintenance.
Operational wiring
Forms, briefs and enquiries connect to the tools your team already uses, with clear states for loading, empty, error and success.
Search, answer and agent readiness
Semantic markup, route-level metadata, structured data and crawlable body copy so search engines and AI assistants can quote you accurately.
How the system works
The layers behind the interface
Each layer has a defined responsibility, so the system can be extended without rewriting what already works.
- 01
Content model
Pages, entities and relationships defined before layout, so structure drives the design.
- 02
Interface layer
Reusable sections and primitives, responsive from small screens upward.
- 03
Service layer
Typed contracts between the interface and any backend, keeping page components thin.
- 04
Evidence layer
Analytics, enquiry tracking and quality checks that show what the site is actually doing.
Integration and architecture
Where it connects
- Static and server-rendered delivery on modern hosting.
- CMS or database-backed content when editing frequency justifies it.
- CRM, email, WhatsApp and scheduling handoffs for enquiries.
- Clean handover to GitHub for review and future development.
Use cases
Typical applications
Company and service sites
Multi-page sites where each service has a real page, its own metadata and its own conversion path.
Client portals
Authenticated areas for documents, project status and approvals, added once the public layer is stable.
Product and campaign surfaces
Focused pages for a launch, tender response or specific market segment.
These describe the shape of the work. Named client references are published only with written approval.
Delivery process
How a project runs
- 01
Discover
Objectives, audience, offer, constraints and existing assets.
- 02
Design
Structure, design system and key page compositions.
- 03
Build
Component build, content integration and accessibility work.
- 04
Integrate
Forms, analytics, metadata and any operational connections.
- 05
Improve
Measure, refine copy and structure, extend page by page.
Questions
Answered directly
- Can you work with our existing brand?
- Yes. We apply your identity within a technical design system rather than replacing it with a template.
- Do we own the code?
- Yes. Projects are structured for handover to your own GitHub organisation with typed, documented components.
- How long does a first phase take?
- It depends on page count and content readiness. We scope a first phase that can launch on its own, then extend.
Next