Revamping Liatrio’s Website Helped Increase User Engagement Threefold
Project
Client
Industry
My role
- Web Designer
- Web Developer
What I delivered
- Website
- Design System
Summary
Liatrio is a DevOps consultancy that helps enterprise-level companies rethink their technology practices, IT culture, and ways of working. In late 2023, the company shifted its brand strategy to reflect major changes in the industry, especially around AI adoption. A new brand identity and website were key parts of that transition.
Within just four months, I worked with a colleague to concept and design the new brand and website [view the brand identity showcase], and then led development and launch in Webflow.
Step-by-step Breakdown
Challenges
Liatrio’s leadership tasked us to deliver a minimum viable website by the end of Q1 2024 so they could use it as part of an upcoming marketing blitz. To hit this aggressive deadline, we worked with them to identify the critical brand elements and webpages that would form the MVP, and then set a launch and post-launch roadmap.
At the same time, the sales team was using the existing website for customer outreach, so ensuring continuity with links, services, content, and downloadables was a critical project component.
With scope and timelines set, I jumped straight into research and ideation.
First Iterations
After competitor research and moodboarding, I designed the first round of pages. I leaned on elements of the existing identity to gain project momentum and to maintain some continuity between the old and new look. While parts of this design worked, our combined teams ultimately decided this didn't capture the new business direction Liatrio was shifting to.
Second Iterations
After regrouping, we pushed creative direction into a bolder, more assertive direction from the old website. A site that would be reflective of technology transformation.
- Dark-mode as the primary color scheme
- Large and intense sans-serif display type
- Leadership approved this visual direction and I immediately started building the design system elements.
Leadership approved this visual direction and I immediately started building the design system elements.
Design System Primitives and Components
After approval I built out the design system: global styles, typography scale, forms, buttons, and secondary patterns like gradients, rounded corner proportions, and iconography.
From past experiences with design / development conflicts, I structured the components to mirror their code counterparts as close as possible. This revealed design issues early, reduced troubleshooting later, and kept us on track for the tight launch timeline.
From Figma to Webflow
With design complete, I migrated components and sections into Webflow using the Figma–Webflow plugin. Because I had already structured and tagged much of the HTML hierarchy in Figma, the transfer was fast. From there, I fine-tuned each page, resolved errors, and balanced design fidelity with development realities.
My hardest challenge was creating the carousels for case studies and blog posts. It was my first time integrating third party libraries and I had to learn Javascript on the fly to customize splide.js correctly.
Post-Launch Engagement Results
We launched the website internally in early March, and one week later went live publicly. During launch week a few teammates helped me document bugs, which I marked by severity and fixed the critical ones. By mid March I was publishing site-wide feature updates and starting work on phase 2 pages.
Two months post-launch, Liatrio saw a 300% average increase in new form submissions and content downloads compared to the same period the previous year. By modernizing the website and aligning it with the new brand, my work—alongside the content and sales teams—contributed directly to stronger customer engagement and acquisition.
