arXtect
A design-to-code renovation — bridging brand identity and frontend delivery for an AI-powered LaTeX editor built for researchers.
arXtect is a next-generation LaTeX editor powered by AI and WebAssembly, built to solve the slow compilation speeds of tools like Overleaf. The technology was compelling — but the branding wasn't keeping up. Dense, technical, and hard to approach, the product's initial identity failed to communicate its core value: simplicity and speed for researchers.
Dianne stepped in to bridge a gap the core engineering team didn't have bandwidth to cross. Rather than producing static mockups and handing off redlines, she adopted a "Design-as-Code" workflow — architecting the responsive landing page in Base44 and committing production-ready code directly to the team's GitHub repository. One designer. Zero translation layer. Clean launch.
LaTeX is notorious for its learning curve. arXtect's strength was removing that friction — but its branding told a different story. The existing site leaned into syntax-heavy aesthetics typical of academic tools: dense layouts, abstract diagrams, and feature-first copy that buried the actual benefit.
At the same time, the engineering team was deep in optimising the real-time compilation engine. They needed a polished frontend — but they didn't have cycles to build one.
Before opening Figma, Dianne spent a day mapping the landscape. The founder shared the existing site alongside key competitors — primarily Overleaf and LivingText. Rather than jumping straight to visual references, she screenshotted and annotated each product to identify the patterns they shared and the gaps arXtect could own.
The analysis surfaced a consistent pattern: tools in this space defaulted to dense, feature-heavy layouts that treated researchers like developers. The opportunity was clear — position arXtect not as another code editor, but as an intelligent writing environment. That shift informed every subsequent design decision, from copy hierarchy to colour system.
Traditional design handoffs — redlines, spec sheets, translation meetings — cost time teams don't have. Dianne bypassed the standard process entirely.
She architected the responsive landing page logic directly in Base44, then committed production-ready frontend code to the team's GitHub repository. The engineering team's role was simple: pull and build. No reinterpretation. No implementation gaps. 100% design fidelity with zero engineering overhead on their side.
LaTeX is powerful but intimidating. The design strategy was "visual de-noising" — stripping away the noise that made the product feel harder than it was.
Dianne moved the brand away from the code-heavy academic aesthetic and toward a clean, modern product identity. The goal wasn't to hide the complexity — it was to reframe arXtect not as a coding environment, but as an intelligent writing assistant that gets out of the researcher's way.
A robust component library in Figma mirrored Base44's logic exactly, enabling rapid iteration between static concepts and live, interactive states — closing the gap between "how it looks" and "how it works."
The editor interface itself also received a full design pass — restructuring the workspace layout, component hierarchy, and interaction patterns for the writing environment researchers use every day.
Watch the editor design walkthrough →The original site buried the product's value under technical specifications. Dianne led a content audit to flip the hierarchy — from features to workflow, from backend capabilities to researcher outcomes.
The revised copy centred on three tangible benefits: 2× Faster Compilation, Zero Config Setup, and Context-Aware AI Assistance. Each spoke directly to the friction researchers experience with legacy tools like Overleaf — and positioned arXtect as the obvious next step.
Distracting gradients and abstract diagrams were replaced with a clean grid system and data-driven benefit statements. The result: visitors understand why they should switch within the first scroll — not after reading a whitepaper.
arXtect launched with a cohesive brand identity — from logo to software interface — and a production-ready marketing site that communicates its value proposition without asking engineers to context-switch. The Design-as-Code workflow eliminated the translation gap entirely: what Dianne designed was exactly what shipped. The design system built during the sprint gives the team a foundation to build on as the product matures.