Revamping Liatrio’s Website Helped Increase User Engagement Threefold
Project
Client
My Role
- Product Designer
- Front End Developer
What I delivered
- Website
- Design System
Overview and Context
Liatrio is a DevOps consultancy that helps large enterprise-level companies to overhaul their technology stack, cultural practices, and ways of working. In late 2023, the company started a brand repositioning to shift from an engineering-specific focus to one that addresses the broader enterprise and leadership transformation market.
For my part in the brand pivot, I refreshed Liatrio’s website, while simultaneously revamping the company’s visual identity (read more about that project in my separate showcase.)
Collaborating with my marketing colleague, I helped plan, concept, and design the new website and design system simultaneously, and then I implemented the new design site-wide with Webflow, the company’s hosting and development platform.
Liatrio.com
Documenting the Process
Challenges
The company sales team needed to begin outreach campaigns immediately in the new year, while the new site was still being developed, meaning a rapid brand and website overhaul. I identified the critical brand elements and essential site pages required for the new launch, with a mid-February to early March deadline. Additional updates would roll out post-launch.
Ensuring link consistency across existing pages was another major challenge. The sales team was actively using the current website for outreach, so a smooth transition between services, content downloads, and blogs, from the old and new site was essential.
Design Iterations
I created the first round of new page designs after researching competitors and meeting with company leadership to discuss requirements and goals. The initial designs incorporated elements of the existing identity and site structure, but our team decided they didn't go far enough in a fresh direction.
The Winning Look
After further discussions with stakeholders and my colleague, we pushed creative direction in a technology forward direction — large, bold display type, a dark-mode design, and establishing bright green from the logo as the main counter color.
Design system primitives and components
After these page designs were approved, I created the website design system in Figma, and all the component elements that would be ported over to Webflow for implementation. Figma’s Webflow plugin allows for a fairly seamless transfer from design to development, which cut down development time significantly.
From Figma to Webflow
Next, I migrated the Figma designs section-by-section into Webflow and made display adjustments to components and pieces as needed. The process was a balancing act between adhering to the page designs but making changes to the flow of elements after observing how they function on the real website. Luckily I was able to anticipate most implementation issues based off of previous web development projects and I accounted for them during the design phase.Webflow has 4 built-in breakpoints to take advantage of, and so the Liatrio website is responsive across desktop, tablet, mobile landscape, and mobile phone.
Post-Launch Engagement Results
My team and I launched the website and brand refresh internally in early March, and then publicly a few days later, meeting our deadline. I followed up launch by fixing critical and medium site errors and creating new content pages for case studies, eBooks, and other marketing content.
Throughout April and May, marketing maintained a consistent blog posting cadence and targeted social media outreach, all linked back to the website. Combined with the refresh, this strategy resulted in an average 300% monthly increase in real contact submissions and content downloads compared to the same period in the previous year.
From a development standpoint, the framework and best practices I implemented now allow marketers and other non-developers to make rapid content changes or even expand the site with new pages themselves, all while remaining SEO-friendly.
