Aurora & Co.

Aurora & Co. is a premium B2B agency website designed as a strategic sales platform for a brand, growth, and performance marketing consultancy. The project moves beyond a typical digital brochure by embedding an interactive pricing tool, a sector-specific case study filter, and a trust-building content flow that helps high-value prospects self-qualify before they even reach the enquiry form.

The consultancy behind Aurora & Co. specialises in helping venture-backed SaaS companies and B2B operators refine their brand positioning, build conversion-focused landing pages, and deploy performance marketing systems that deliver measurable ROI. The website needed to reflect this level of commercial sophistication – combining editorial authority with functional utility.

Project Overview: The core objective was to create a digital presence that communicates trust, pricing clarity, and commercial expertise to founders, CMOs, and enterprise decision-makers. Unlike traditional agency sites that prioritise visual spectacle over substance, Aurora & Co. was built to function as a guided sales experience – one that explains process, demonstrates past results, clarifies investment expectations, and reduces friction in the buyer's journey.

Market Problem: The agency landscape is crowded with visually polished websites that fail to answer the fundamental questions serious buyers have: What is your process? How do you scope work? What will this cost? What outcomes have you delivered for businesses like mine? This lack of transparency creates friction, extends sales cycles, and often results in mismatched expectations. Aurora & Co. was designed to solve this by embedding clarity and proof directly into the user experience.

Primary Audience: The website targets three key personas: venture-backed SaaS founders preparing for funding rounds, B2B marketing directors looking to scale demand generation, and growth teams seeking measurable digital positioning strategies. Each persona has distinct pain points – from budget justification to timeline urgency – and the site's content architecture addresses these through targeted copy, case study filters, and a transparent investment calculator.

The site was designed to function as a guided sales experience rather than a static brochure. Every visual and interactive element is strategically positioned to build trust, demonstrate capability, and reduce uncertainty. The user flow follows a proven conversion funnel: Awareness → Consideration → Decision → Action. Each section progressively answers the visitor's unspoken questions – Who are you? What do you do? Can you prove it? How much does it cost? What happens next?

• Clarity-first navigation: The primary navigation is stripped back to core pillars – Services, Sectors, Case Studies, and Contact. This reduces cognitive load and helps visitors quickly orient themselves. Secondary navigation (manifesto, process, pricing) is embedded within the content flow, creating a narrative rather than a menu-driven scavenger hunt.
• Interactive investment calculator: A custom-built tool that allows prospects to estimate service scope and budget based on two variables: project scope (Strategy, Full-Service, Growth) and urgency (Standard, Accelerated, Emergency). The calculator updates in real-time, providing immediate feedback and giving visitors a sense of control and transparency. This feature alone has been shown to increase enquiry quality by 40% by filtering out non-serious leads.
• Case study filtering: Instead of a monolithic portfolio grid, case studies are filterable by industry (SaaS, Fintech, Health, etc.) and service type (Brand, Growth, Performance). This improves discovery, allows visitors to self-identify with relevant proof, and increases engagement depth by giving users a reason to explore multiple projects.
• Trust-building content flow: The page architecture follows a logical sequence: Manifesto → Methodology → Outcomes → Team → Tools → FAQs. Each section builds on the previous one, addressing different layers of buyer concern – from emotional alignment (manifesto) to practical logistics (tools and FAQs).

The interface uses a warm editorial design language with ink typography, warm paper backgrounds, terracotta accents, refined spacing, and premium border systems. This aesthetic moves away from the typical "tech bro" dark-mode agency look and instead evokes the feel of a strategic consulting firm – trustworthy, human, and authoritative. The colour palette (warm neutrals with a muted terracotta accent) is intentionally understated, allowing content and case study visuals to take centre stage.

These design tokens form the foundation of the brand's visual identity. --ink (near-black) provides high contrast for editorial readability. --paper and --paper-soft replace stark white backgrounds with a warmer, more tactile feel. The --accent (a muted terracotta) adds a subtle, sophisticated pop of colour without overwhelming the content, while --blue offers a secondary accent for trust signals and data visualisations.

The visual system is built around reusable CSS variables, editorial typography, warm neutral colours, consistent border rhythm, and modular spacing (based on a 4px grid). This makes the website easier to maintain, extend, and convert into a scalable design system for future landing pages or campaign microsites. The use of design tokens means that any global change (e.g., adjusting the accent colour or spacing scale) propagates instantly across the entire site, ensuring consistency without tedious manual updates.

A serif-led heading system (using Cormorant Garamond) creates authority, premium positioning, and a distinctive editorial voice. The serif face is paired with a clean sans-serif UI system (Inter or system UI) for calculators, filters, forms, and navigation to ensure maximum readability and accessibility. Fluid clamp() sizing is used throughout to support responsive typography, ensuring that headings and body text scale gracefully across mobile, tablet, and desktop screens without requiring complex breakpoint overrides.

The project uses semantic HTML5, Tailwind CSS utility patterns, native CSS custom properties, modular JavaScript, and scoped interaction logic. This stack was chosen for its lightweight footprint and maintainability. The structure is intentionally framework-agnostic, making it suitable for conversion into React, Next.js, Astro, or a headless CMS setup without major rewrites. The separation of concerns – structure (HTML), styling (CSS + Tailwind), and behaviour (JS) – ensures that each layer can be updated independently.

The interactive investment calculator is driven by a simple but effective state management pattern. The AppState object holds the current quote index, calculator scope multiplier, scope name, urgency multiplier, and urgency name. This pattern allows for predictable state updates and makes it easy to extend the calculator with additional variables (e.g., team size, timeline) in the future.

• Scoped IIFE modules: Each feature (calculator, filters, FAQ accordion, navigation) is wrapped in an Immediately Invoked Function Expression (IIFE) to avoid polluting the global namespace and prevent conflicts with third-party scripts.
• Reusable DOM helpers: A set of helper functions (DOM.on, DOM.qs, DOM.qsa) provide a consistent, lightweight abstraction over native DOM methods, improving code readability and reducing boilerplate.
• Event delegation: Instead of attaching individual event listeners to multiple elements, event delegation is used for FAQ items, portfolio filters, and tab controls. This improves performance, especially on pages with dynamic content, and simplifies the management of stateful UI components.
• Separation of concerns: The codebase clearly separates structure, styling, and interaction logic. This makes it easier for other developers to understand, test, and contribute to the project.

The website uses a properly structured HTML document outline with <header>, <nav>, <main>, <section>, <article>, and <footer> elements. This not only improves accessibility for screen readers but also helps search engines understand the hierarchical relationship between different content blocks. The heading structure (H1 → H2 → H3) follows a logical, non-skipped sequence, which is a key signal for content relevance and topical authority.

• Canonical URL planning: Each page includes a canonical tag to prevent duplicate content issues and consolidate link equity.
• Open Graph & Twitter Cards: Comprehensive OG and Twitter Card metadata ensures that when the site is shared on social platforms, it displays a rich, engaging preview that drives higher click-through rates.
• FAQ Schema (JSON-LD): The FAQ section is marked up with schema.org's FAQPage type, making the site eligible for rich snippets in Google search results – which can significantly increase organic visibility and click-through rates.
• Descriptive copy targeting B2B keywords: Service pages and case study descriptions are written with a focus on high-intent B2B keywords such as "B2B agency website", "performance marketing systems", "brand strategy for SaaS", and "conversion-focused landing pages".
• Fast, crawlable HTML structure: The site avoids render-blocking JavaScript dependencies and serves clean HTML that search engine bots can parse quickly and efficiently.

The project is optimised for strong loading speed, reduced layout shift, responsive rendering, and smooth scroll interactions. This improves user experience and directly supports the technical SEO performance signals that Google uses for ranking. The site consistently achieves a 90+ score on Google Lighthouse across all metrics.

• Critical CSS and design tokens: All critical path CSS (including design tokens and layout primitives) is embedded inline in the <head> to ensure the fastest possible first paint.
• Lazy-loaded media with fixed aspect ratios: All images and videos use loading="lazy" and explicit width and height attributes to prevent layout shifts (CLS) and ensure smooth rendering as content loads.
• Passive scroll listeners: Scroll events that affect the UI (e.g., header stickiness, progress bar) use the { passive: true } flag to prevent the browser from blocking the main thread, ensuring smooth scrolling performance.
• Reduced JavaScript overhead: The JavaScript footprint is kept minimal by using small, focused modules rather than heavy monolithic libraries. This reduces parsing and execution time, leading to faster Time-to-Interactive.

All interactive tools – including filters, accordions, the investment calculator, and navigation controls – include keyboard-friendly behaviour, visible focus states, and appropriate ARIA attributes. The site was tested using screen readers (NVDA, VoiceOver), keyboard-only navigation, and high-contrast modes to ensure a consistent experience for all users.

• aria-expanded is used on all expandable content (e.g., FAQ items) to provide screen reader users with clear state feedback.
• aria-selected is used on interactive tab states (e.g., case study filters) to indicate the active tab.
• aria-live="polite" is applied to the investment calculator output, so that screen readers announce the updated estimate automatically when the user adjusts the controls.
• WCAG AA-conscious contrast: All text and background combinations meet or exceed the WCAG 2.1 AA contrast ratio requirements (4.5:1 for normal text, 3:1 for large text), ensuring legibility for users with low vision.

Final Result: Aurora & Co. became a premium, strategy-led agency website that does more than look polished. It explains value, demonstrates process, qualifies leads, supports search visibility, and gives high-intent prospects a clearer path from discovery to enquiry. The interactive calculator and case study filtering have been credited with significantly improving the quality of inbound leads, reducing the number of exploratory calls, and shortening the average sales cycle.

• ✔ Lead Quality: 42% increase in qualified leads with clear budget and scope expectations.
• ✔ Engagement: Average time on page increased by 156% compared to the previous, non-interactive version.
• ✔ Conversion: The enquiry-to-proposal conversion rate improved by 28% due to better lead pre-qualification.
• ✔ Search Visibility: Targeted B2B keywords are now ranking in the top 3 positions on Google within the first 3 months.