work collection #2
Redefining Research Tools: A Design-to-Code Renovation for an AI LaTeX Editor
OUTCOMES
0 Friction
Eliminated the "translation gap" between design and development by delivering production-ready code directly via GitHub.
Visual Clarity
Transformed an intimidating, syntax-heavy technical tool into a modern, accessible product brand for researchers.
Unified Identity
Established a cohesive design guide—from the logo to the software interface—that communicates precision and speed.
OVERVIEW
The Challenges
arXtect is a next-generation LaTeX editor powered by AI and WebAssembly, designed to solve the slow compilation speeds of traditional tools like Overleaf. However, its initial branding was overly technical and dense, failing to communicate its core value: simplicity. Furthermore, the core engineering team needed to focus on the complex backend logic, leaving them with little bandwidth for frontend web development.
The Solution
I bridged the gap between brand designer and frontend contributor. Beyond refining the logo and simplifying the information architecture, I implemented a "Design-as-Code" workflow. Using Base44, I architected the responsive website and pushed clean code directly to the team's GitHub repository, ensuring a polished launch without distracting the core engineers.
3 BIG TAKEAWAYS
Bridging Design & Engineering
Visual De-noising for Complex Tools
Strategic Content Reframing
01.
Bridging Design & Engineering
Beyond Static Mockups
Traditional design handoffs often lead to implementation errors and wasted cycles. To accelerate arXtect's launch, I bypassed the standard "redlining" phase.
I built the responsive landing page logic directly within Base44 and committed the production-ready frontend code to GitHub.
This allowed the engineering team to simply "pull and build," letting them dedicate 100% of their effort to optimizing the editor's real-time compilation engine.
Visual development in Base44.
Seamless Handoff: From Visual Builder to Repository
Instead of static redlines, I utilized Base44 to architect the responsive frontend and committed production-ready code directly to GitHub. This allowed the engineering team to focus on logic, not layout.
Automated code delivery via GitHub integration, ensuring 100% design fidelity with zero engineering overhead.
02.
Visual De-noising for Complex Tools
Simplifying the LaTeX Experience
LaTeX is powerful but notoriously difficult to approach. My design strategy was "visual de-noising."
I rebranded the identity to move away from the "code-heavy" aesthetic typical of academic tools.
By designing a clean, distraction-free visual system, I positioned arXtect not just as a tool for coding documents, but as an intelligent writing assistant that empowers the "flow state" of researchers.
From Canvas to Code
Bridging the gap between design and functionality. I established a robust component library in Figma (top) that mirrored Base44's logic, allowing for rapid iteration and a seamless transition from static mockups to a live, interactive prototype.
03.
Strategic Content Reframing
From "Features" to "Workflow"
The original site was weighed down by technical specifications. I led a content audit to pivot the narrative toward user benefits.
Instead of listing backend technologies, the new copy focuses on tangible outcomes: 2x Faster Compilation, Zero Config Setup, and Context-Aware AI Assistance.
This shift in hierarchy ensures that visitors immediately understand why they should switch from their legacy tools.
Swipe to explore the full page journey →
Visual De-noising & Content Strategy
I transformed the chaotic, academic-style layout into a focused SaaS experience. By removing distracting gradients and emojis, and replacing abstract diagrams with a clean grid system and data-driven benefits, the new design immediately communicates speed, precision, and professional reliability.
