Designing and building the digital foundation for an AI construction startup.
Transforming a complex AI infrastructure platform into a credible, scalable digital brand and production website.
Overview
From complex proposition to clear digital experience.
Constructer.ai is an AI construction intelligence platform designed to help project teams identify emerging risks and understand their potential impact before they become costly delays or claims.
My role covered the project across strategy, branding, UX/UI design, visual design, design systems and frontend development.
I translated the business proposition into a coherent visual identity and then carried that system through to a bespoke WordPress implementation.
01 — The challenge
How do you make an AI platform for the construction industry feel both technically advanced and immediately trustworthy?
Construction is a complex, high-value industry where project information is often distributed across schedules, documents, emails and reporting systems.
Constructer.ai needed to communicate how its AI technology could continuously analyse this information, surface emerging risks and help teams make better decisions earlier.
The challenge was therefore bigger than designing a website. It was about creating a digital identity that could make a technically complex proposition understandable, credible and commercially compelling.
02 — Understanding the business
Connecting AI, construction and project intelligence.
Understanding the business model and different audiences helped establish what the website needed to communicate and how information should be structured.
Buyers
- General contractors
- EPCs
- Infrastructure owners
- Client teams
Daily users
- Project managers
- Planners
- Contract managers
- Project controls engineers
03 — Competitive landscape
Finding space between futuristic AI and traditional construction technology.
I reviewed competitors across brand positioning, digital experience and product communication to understand how the category presented itself.
Brand
Visual identity, logos, colour, typography and positioning.
Experience
Information architecture, navigation, content hierarchy and conversion paths.
Technology
Website platforms, CMS approaches and interaction patterns.
Many AI companies relied on abstract, futuristic visual language, while construction technology companies tended towards industrial and utilitarian aesthetics.
The opportunity was to position Constructer.ai between these worlds: technologically intelligent, but structurally grounded.
04 — Brand strategy
Turning the product proposition into a simple communication system.
Continuously analyses project information.
Emerging risks and issues.
Schedule, cost and contractual impact.
Earlier, better-informed decisions.
05 — Visual identity
A visual language grounded in structure, systems and intelligence.
The identity combines architectural geometry, modular structures and connected systems to represent the relationship between construction and AI.
06 — Colour system
Structural foundations with a signal layer.
The colour system balances enterprise credibility with a distinctive technology signal.
07 — Typography
Clear hierarchy for complex information.
AI-powered intelligence
for construction.
Constructer continuously analyses project information to identify risk and help teams act before problems become claims.
08 — UX & information architecture
Structuring the experience around understanding, trust and action.
The information architecture was designed to take visitors from understanding the problem through to understanding the platform and ultimately starting a conversation.
Visitor arrives
Understand the problem
Understand Constructer's approach
Explore the platform
See business impact
Build trust
Request a conversation
Structuring the experience before adding visual detail.
Low-fidelity wireframes were used to explore the structure, hierarchy and key user flows before moving into high-fidelity UI design.
10 — UI design system
Translating the brand into a scalable interface.
The visual identity was translated into reusable interface patterns, components and responsive layouts that could scale across the website.
Structured
Architectural grid and consistent spacing.
Clear
Complex information presented progressively.
Signal-driven
Cyan highlights important actions and information.
Controlled density
Enough information to communicate sophistication without overwhelming users.
11 — From Figma to production
Bridging the gap between design and development.
Rather than handing the designs to a separate development team, I translated the design system directly into a bespoke WordPress implementation.
Figma
Design system and visual language
Components
Reusable interface patterns
Responsive layouts
Desktop and mobile implementation
Code
HTML · SCSS · PHP · JavaScript
12 — Custom WordPress development
A bespoke theme built around the design system.
Constructer needed a CMS that would allow its team to manage and evolve marketing content without requiring developer intervention.
I built a custom WordPress theme to maintain close control over the relationship between the design system and the production website.
Design fidelity
Precisely reproduce the Figma design system.
Performance
Avoid unnecessary framework and plugin overhead.
Scalability
Create reusable components and templates.
Control
Maintain ownership of HTML, SCSS, PHP and JavaScript.
13 — Technical implementation
Building a maintainable frontend architecture.
The implementation used a modular SCSS architecture alongside PHP templates, JavaScript interactions and WordPress's CMS functionality.
15 — Internationalisation
Designing for an international audience.
The website needed to support English and Portuguese while maintaining a consistent visual system and responsive experience.
The language-switching functionality was incorporated into the website architecture rather than treated as an afterthought.
16 — Production considerations
Designing beyond the mockup.
Responsive
Interfaces designed and implemented across desktop, tablet and mobile breakpoints.
Accessibility
Semantic structure, interaction states, readable typography and accessible colour contrast.
Performance
Lightweight implementation and considered use of assets and dependencies.
SEO
Structured content, metadata and internationalised website architecture.
17 — Outcome
A digital foundation for Constructer.ai's next stage.
The final website established a visual and technical foundation for Constructer.ai's launch, combining a new brand identity with a scalable digital design system and bespoke WordPress implementation.
Brand
A distinctive identity connecting construction and AI.
Product communication
A clearer way of explaining a technically complex proposition.
Design system
Reusable visual and UI foundations for future experiences.
Development
A bespoke WordPress implementation providing control, performance and scalability.
18 — Reflection
Designing for trust is different from designing for novelty.
AI products can easily lean towards futuristic visual language. For Constructer.ai, the challenge was creating a sense of technological intelligence while remaining credible to an industry responsible for complex, high-value projects.
Working across design and development also changed how I approached the system. Understanding how the website would actually be built influenced decisions around components, responsiveness, CMS flexibility and maintainability.