The context
Human Made Logic is an independent creative partner working across brand strategy, identity, digital experiences, campaigns and performance marketing. The business needed a website that could communicate that breadth without feeling like another generic full-service agency.
The previous WordPress experience contained the right categories of information, but its visual language, messaging and structure did not match the level of creative ambition the brand wanted to project. The website functioned as a presence, but not yet as a competitive positioning asset.
The problem
The challenge was larger than making the interface look more modern. Human Made Logic needed a clearer point of view, a stronger service hierarchy, better project storytelling and a technical foundation capable of supporting a richer digital experience.
The old implementation also constrained how far the design could be pushed. We wanted the new website to support precise responsive compositions, stronger motion, WebGL interactions, better media handling and more direct control over performance and metadata.
Make the positioning clear before asking visitors to understand the service list.
Build a recognisable visual system instead of relying on familiar agency patterns.
Treat performance, search visibility and maintainability as part of the design system.
Reframing the brand online
We started with positioning rather than components. The website needed one clear idea that could carry the homepage, service architecture and visual language.
The new experience leads with the statement “We make brands impossible to ignore.” Supporting copy then connects that confidence to the actual commercial proposition: identities, digital experiences and campaigns designed to turn attention into measurable growth.
Clearer service architecture
We reorganised the offering into Brand Strategy, Identity Systems, Web & Digital, Campaigns, Performance Marketing and Content Systems. Presenting these as one connected creative system makes the breadth easier to understand and creates natural cross-service discovery.
A stronger conversion path
The homepage gives visitors two immediate routes: start a project or explore the work. Those calls to action return after credibility, capabilities, selected projects and process have been established, creating a calmer conversion journey rather than repeating aggressive lead forms.
The design approach
We deliberately avoided the visual conventions of generic marketing-agency websites. The design system was built around restraint: black, warm off-white, a controlled yellow accent, oversized typography, editorial imagery and strong negative space.
Instead of treating every section as a card or every image as an illustration, we used varied editorial composition to create rhythm across the page. Some sections are typography-led, others are image-led, and several deliberately leave more empty space so the interface can breathe.
Typography as identity
Large, tightly controlled typography establishes confidence and hierarchy before imagery or animation is introduced. The headline system was designed to make key statements memorable while preserving readable supporting copy and disciplined line lengths.
Photography as interface material
Imagery was selected and cropped for geometry, tone and texture rather than literal subject matter. Architecture, terrain, optical surfaces and human motion could then become part of the interaction system instead of behaving like conventional stock photography.
Motion with purpose
WebGL and micro-interactions were used selectively to add depth and physicality. Effects respond to pointer movement, scroll velocity and viewport entry, but the page is intentionally designed to look complete even when nothing is moving.
WordPress to Next.js
The redesign became an opportunity to modernise the frontend architecture rather than continue adapting the existing WordPress theme around increasingly ambitious interaction requirements.
We moved the experience to Next.js so the implementation could follow the design rather than the other way around. This created direct control over component architecture, responsive behaviour, metadata, routing, media delivery and interactive rendering.
A component-driven frontend
Reusable page sections and interaction patterns make the website easier to maintain and extend as Human Made Logic adds services, work and editorial content.
Better control of media
Images and visual assets can be prioritised according to their role on the page instead of loading every asset with the same strategy. That is particularly important on an image-led site with richer motion.
A stronger base for experimentation
Next.js gives the team room to introduce richer front-end experiences without continually fighting the assumptions of a pre-existing theme.
Performance as part of the experience
A design-led website loses credibility immediately if it feels heavy or unstable. Performance therefore influenced the implementation from the start rather than being treated as a post-launch optimisation exercise.
We focused on media prioritisation, viewport-aware interaction, controlled shader rendering, stable layouts and mobile-specific behaviour. Expensive visual effects are reserved for places where they meaningfully improve the experience.
Before
- Theme-led frontend constraints
- Less control over asset loading and interaction
- Visual ambition limited by implementation
- Performance optimisation treated separately from design
After
- Purpose-built Next.js frontend
- Controlled media and rendering strategy
- WebGL and motion integrated deliberately
- Performance considered inside the design system
Designing for reach and discoverability
The rebuild also created a cleaner foundation for search visibility. The new architecture makes the relationship between Human Made Logic, its services, its work and its methodology more explicit to both users and search systems.
Instead of relying on vague creative language everywhere, the site now establishes clear entities and capabilities: what the agency is, what it does, how it works and what evidence supports those claims. That improves the foundation for traditional SEO and emerging AI-driven discovery.
Technical SEO control
Moving to Next.js gives direct control over page metadata, canonicalisation, indexability, sitemap structure, internal linking and structured content as the site expands.
Content architecture for future growth
Services, case studies and future editorial content can now be developed as deliberate search-entry points rather than being forced into a single generalist homepage.
Better page experience
Cleaner implementation, intentional media loading and responsive behaviour improve the quality of the experience users reach from search and paid traffic.
The outcome
The redesign changed the role of the website. Human Made Logic moved from a conventional agency presence toward a much more differentiated digital identity with clearer positioning, stronger work storytelling, a better conversion journey and a technical foundation built for continued growth.
The most important result is alignment: the brand strategy, interface, imagery, interaction model and technology now communicate the same level of ambition.
Stronger first impression
The new visual system and positioning communicate a more distinctive, premium creative identity from the first viewport.
Clearer commercial proposition
Visitors can understand the agency’s capabilities, process and project value without decoding a broad list of services.
Modern technical foundation
The move from WordPress to Next.js provides greater control over performance, responsive behaviour, content architecture and future front-end development.
Better foundation for organic reach
Clearer information architecture, metadata control and scalable service and case-study routes create a stronger base for long-term search visibility.