ChallengeA Munich-area precision engineering company (EUR 180M annual revenue, 850 employees, manufacturing precision components for automotive, aerospace, and medical technology customers, exporting 72% of production to 34 countries) needed to redesign their corporate website. The existing site, built in 2016 on Typo3 (a German CMS popular in the 2010s): (1) had received two Abmahnungen — one for an incomplete Impressum (missing the Handelsregister Amtsgericht — the specific court of commercial registration, which is a required element) and one for a Datenschutzerklaerung that had not been updated for DSGVO/TTDSG (still referencing the pre-DSGVO Bundesdatenschutzgesetz framework). Total Abmahnung cost: EUR 6,800. The company's legal counsel warned that additional compliance deficiencies existed and further Abmahnungen were likely, (2) did not reflect the company's market position — the website looked like a small workshop, not a EUR 180M precision engineering leader. Competitors (Schaeffler, Brose, MAHLE — larger companies but competing in overlapping product categories) had modern, technically impressive websites. The company's sales director reported that international prospects (particularly US and Asian automotive OEMs) reacted negatively to the dated website during pre-meeting research — one Japanese OEM representative noted diplomatically that "the website does not seem to match the factory we visited," (3) product catalogue was a PDF library — the company manufactured 4,200 precision components across 12 product families. On the existing website, the product catalogue was a collection of 48 downloadable PDFs — not searchable, not filterable, not mobile-accessible. International procurement managers who needed to find a specific precision bearing with particular specifications had to download and search through PDFs, (4) was German-only — despite 72% of revenue from exports, the website existed only in German. International customers (US 18%, China 12%, Japan 8%, France 6%, UK 5%) could not access product or company information in their language. The company's international sales team used separate PDF presentations in English, Chinese, and Japanese — none of which matched the website content, (5) was not accessible — with BFSG approaching (June 2025), the company needed to prepare for private-sector accessibility requirements. An accessibility audit revealed 92 WCAG 2.1 AA non-conformities. The company's HR director also noted that accessibility would support the company's Inklusionsvereinbarung (inclusion agreement) with the Schwerbehindertenvertretung (disabled employees' representative), and (6) mobile was non-functional — the Typo3 installation was not responsive. 38% of website visitors were on mobile devices, but the desktop-only layout was unusable on phones. German B2B mobile usage is increasing rapidly — procurement managers and engineers research suppliers on tablets and phones during trade shows (and Munich hosts many: Bauma, Electronica, Productronica).
SolutionWe redesigned on Next.js with Storyblok CMS over 12 weeks: (1) Complete German legal compliance: Impressum: fully compliant (company name, Rechtsform GmbH, Sitz der Gesellschaft, Amtsgericht Muenchen HRB number, Geschaeftsfuehrer by name, USt-IdNr, contact with phone and email, Verantwortlicher im Sinne des Presserechts). Accessible from every page via footer link and dedicated /impressum URL. Datenschutzerklaerung: customized for the website's specific processing activities — each analytics tool, form, and third-party integration documented with processing purpose, legal basis (DSGVO Article 6 reference), retention period, and third-party recipients. Not a template — a website-specific privacy policy. Cookie consent: Usercentrics implementation — BayLDA-compliant granular consent, equally prominent accept/reject, TTDSG-compliant (cookie consent obtained before any non-essential cookies fire), consent logging with documentation export for regulatory inquiry. Legal review: pre-launch review by German e-commerce legal counsel — documented compliance verification covering Impressum, Datenschutzerklaerung, Cookie-Consent, and all other TMG/TTDSG/DSGVO requirements. Compliance certificate: the legal review produced a compliance certificate that the company can present in the event of an Abmahnung (demonstrating proactive compliance effort). (2) Digital product catalogue: 4,200 precision components digitized from PDF to a searchable, filterable online catalogue. Each product with: technical specifications (dimensions, tolerances, materials, surface treatments, hardness values — the data that procurement engineers need), 3D product viewer (CAD models viewable in browser — rotating, zooming, and inspecting component geometry without downloading files), certification and compliance information (DIN/ISO standards, material certifications, automotive IATF 16949, aerospace AS9100, medical ISO 13485 — displayed per product based on applicable certifications), and downloadable CAD files (STEP, IGES — engineers can download 3D models for integration into their own CAD assemblies). Product search: parametric search allowing engineers to find components by: dimension ranges, material type, tolerance class, application (automotive, aerospace, medical), and certification standard. Product comparison: up to 4 components compared side-by-side on all specifications. (3) Multilingual architecture: German (primary), English, Chinese (Simplified), Japanese, and French — five languages covering 93% of the company's revenue markets. Each language: professionally translated by technical translators (precision engineering terminology requires specialist translation — "Rundlaufgenauigkeit" has specific equivalents in each language that general translators miss), SEO-optimized for each market (Google.de, google.com, Baidu, Google.co.jp, google.fr), and culturally adapted (Japanese technical content follows Japanese B2B communication conventions — different from German directness). Storyblok CMS: multilingual content management with translation workflow and technical terminology glossary (ensuring consistent translation of specialized terms across all content). (4) BFSG-ready accessibility: all 92 non-conformities remediated. WCAG 2.1 AA throughout: semantic HTML, keyboard navigation, focus indicators, screen reader compatibility (tested with NVDA in German, VoiceOver in English and Japanese), colour contrast (4.5:1 minimum), accessible data tables for product specifications, accessible 3D viewer (keyboard-navigable with text descriptions for screen readers), and accessible forms (German-language labels, validation, and error descriptions). Erklaerung zur Barrierefreiheit: accessibility statement published with conformity level, feedback mechanism, and remediation commitment — preparing for BFSG enforcement. (5) B2B design language: visual design communicating Mittelstand Qualitaet. Photography: professional factory photography (clean rooms, precision measurement equipment, CNC machining centres — showing the technology and precision that defines the company), product macro photography (extreme close-ups of precision components showing surface quality and manufacturing precision), and team photography in workshop environment (engineers and technicians — not stock imagery). Typography: Fakt Pro (German-designed grotesque — clean, technical, appropriate for engineering content) for headings, IBM Plex Serif for body text (technical authority). Colour: deep blue and steel gray (German industrial palette — communicating precision and reliability). Layout: systematic grid with generous technical content space — no visual decoration competing with technical information. (6) Mobile and trade show optimization: responsive design with B2B mobile use cases in mind. Product catalogue: fully mobile-accessible — procurement managers can search, filter, and compare products during Messe visits. Product pages: key specifications visible without scrolling, detailed specifications on tap. QR codes: each product page has a QR code linking to physical sample request — scannable from trade show booth materials. Offline capability: product catalogue accessible offline (service worker caching) for trade show environments with poor WiFi.
OutcomeLegal compliance: zero Abmahnungen in 12 months post-launch (from 2 in 18 months pre-redesign). Compliance certificate on file for Abmahnung defence. Estimated annual risk reduction: EUR 10,000-25,000 (based on industry Abmahnung frequency for non-compliant websites). Product catalogue impact: product catalogue page views: 340,000 per month (from zero — previously PDF-only). 3D viewer engagement: 28% of product page visitors used the 3D viewer (average session: 2:15 of 3D interaction). CAD file downloads: 4,800 per month (indicating active engineering evaluation). Product comparison tool: 12,000 comparisons per month (engineers evaluating the company's components against alternatives). Parametric search: 85% of product catalogue visitors used search (versus the previous PDF download approach — demonstrating dramatically improved product discoverability). International traffic: English traffic: increased 420% (the company was previously invisible to English-language search). Chinese traffic: increased from zero to 8,400 monthly sessions. Japanese traffic: increased from zero to 5,200 monthly sessions. International leads: from 4 per month (via the sales team's personal networks) to 28 per month (via the website). The company's largest new customer acquisition in year one (a Japanese medical device manufacturer, EUR 2.4M annual contract) originated from a Japanese-language Google search. International sales team reported that pre-meeting prospect engagement improved dramatically — international prospects now arrive at meetings having already reviewed the product catalogue, specifications, and company capabilities. Mobile: mobile bounce rate from 78% (non-responsive Typo3) to 28%. Mobile session duration from 0:22 to 3:45. Messe utility: the sales team used the mobile product catalogue during Productronica and Medica trade shows — replacing printed catalogues and enabling real-time specification discussions with prospects on tablets. Brand perception: the Japanese OEM representative who had previously noted the website quality gap revisited after the redesign and increased their order volume — the procurement team specifically cited the improved digital presence as a factor in their supplier evaluation score. Development cost: EUR 168,000. The Japanese medical device contract alone (EUR 2.4M annually) justified the investment within the first month. Overall: website-sourced pipeline increased from EUR 3.2M to EUR 18.4M annually. Manufacturing capacity utilization improved from 78% to 91% partly driven by improved sales pipeline.