The web, brand design, and content teams are feelin’ themselves a bit this week — in case you haven’t heard, we made the Webflow nerds go crazy with our digital drop of a content library that looks brand-spankin’ new — and feels great for users.
Why’d We Do All This?
Lattice’s treasure trove of HR content was hidden under layers of complex navigation on the site and wasn’t optimized for organic search. When users finally reached valuable content, painful Marketo gating experiences often meant they couldn’t even access it without redirects and new tabs.
These issues were compounded by frequent bugs and site outages, and weren’t helped by the fact that the entire library was living in a different Webflow project first created in 2016. I’ll let you imagine the layers and layers and layers of tech debt.
And yes, you read that right: Behind the scenes, Lattice.com was actually two websites.
The user experience didn’t reflect our quality standards. Imagine: You want to send a customer an article about employee development. It takes you four clicks to get from the library landing page to a dedicated page about employee growth — never mind that “growth” is a different search term entirely. You filter by topic > new page > long load time. Then you filter by content type > new page > long load time. You click the first result > new page> long load time, and it’s an article from 2019. Ugh. There were a lot of problems to solve.
What’s New in the Library
The newly designed library includes an editorial home page, hub pages for all content types and topics, and reformatted pages for individual pieces of content. The look and feel of the library is editorial, gorgeous, delightful, and highly searchable — giving our users the experience they truly deserve.
“Have you ever seen such a beautiful site?” — Lizzie McGuire, if she worked in HR.The homepage of the lattice library, featuring the latest articles, ebooks, and templates.
It’s simply not enough to be imaginative about how a UI could change a reader’s journey. Creating a site where a run-of-the-mill search for an article about employee feedback turns into a dynamic, responsive, functional experience with a reasonable load time requires a commitment to tedium, excellence, and innovation.
We’re committed to providing our web visitors with a seamless experience. That’s why I’m thrilled with how this redesign makes it easier to discover the topics you care about and faster to access helpful resources for your everyday work. - Jared Erondu, SVP, Brand
Now, you can filter by multiple topics and types on the library page and immediately get the most recent articles thanks to our dynamic search function. So if you want an article about, say, growth and performance, you can find it without ever leaving the landing page. After you’ve read that content, we also welcome you onto a journey with Lattice, by recommending associated “What’s Next” content and (importantly) relevant templates that help you put your learnings into practice.
To make that journey even better, if you want to keep looking at gated content, new progressive cookie tracking means you won’t have to fill out forms repeatedly. Voila, as we say because our lead web developer is French.
Reader and User Experience
Library Landing Page: The new experience is way more sophisticated than simply a list of what’s been most recently published. We’ve created a thoughtful editorial experience that surfaces content we want to spotlight while balancing users’ inherent desire for recency. Consider it the opposite of doomscrolling — it can be HR’s favorite place to peruse when they have precious free time.
“It’s easy to focus just on technical optimization within a technical migration. What made this migration something which I’m particularly proud of was the way it made our end user central to all decisions. This library isn’t just a sales play, or an SEO driver — it’s a space HR professionals can use to grow.” - Josephine Cahill, Senior Website Growth Manager
Bylines and Headshots: Peep that lil photo tilt! We have HD photos of each contributor, their title, and a repository of authors for articles and customer stories built into Webflow.
with over 500 speakers, authors, and contributors - we couldn't be proud of the many brilliant voices that have contributed to the Lattice Library
Long-form Descriptions for Gated Content: We added space for significantly more text on gated pages like ebooks and templates. This helps users better understand the point of the resource before downloading it, and helps our content rank better for queries like “When should you schedule a wellbeing check-in?”
Updated Topics and Classifications: We had too many redundant or similar topics, so we consolidated and retagged all 1,252 items in the library. For example, we used “managing people” for articles and “manager tools” for templates — now they have one label (managing people), which makes it simpler to find multiple content types about the same topic.
manual retagging of topics, audiences, and authors involved hours of work
Content Journeys: All library content now includes a “What’s Next” section which recommendssome text
Three pieces of content that go deeper into the topic our user is learning about
An associated template (where relevant) so users can try and put their learning into practice for their HR goals
A spotlight on our content email newsletter, so users can learn at their own pace over time
an article on performance management models, which recommends a relevant template (righthand), as well as 3 related resources (below)
Technical Improvements
One Site to Rule Them All: We used to have two Webflow sites (one housed our entire library, and the other contained everything else). Migrating them into one was a behemoth of a task. But now, there’s just one back end, so Latticians don’t risk uploading a library article to the company newsroom. The biggest benefit of this consolidation? Our library now sits under the protection of Webflow Enterprise, which means advanced DDOS protection, custom SSL certificates, and less risk of outages or bugs as a result.
Loading Speed: Compressed images and better formatting (bye, JPEG—hello, .webp!) make pages load much faster. This helps with UX and is monumentally better for SEO. When Google notices that our pages (and contained images) load quickly, we’ve got a much better chance at ranking on the first page of search results.
Instant Unlock: Our gated content unlocks right on the page, instead of coming to your email. That means users will be more likely to use, read, and download the assets they’re interested in, instead of forgetting or losing them in their inbox. Fill out the form only once, and we’ll give you a little cookie to remember you with! 🍪 The content you want to read, watch, or download is now stays ungated, so you can revisit it at any time.
Global Search Functionality: Users can type in keywords or filter by topic or type. The results are pulled from all across our resources, including articles, ebooks, templates, webinars, events, podcasts, and interviews. All of these used to be categorized separately.
Can we build an omnibox search in Webflow?” Well, no. But also yes!? Using Finsweet’s CMS attributes (namely, Filter, Load, and Combine), we were able to create a mega collection list of 1,000+ items and tie it to a search field that — with a custom little snippet of JS — instantly displays a suggested search results dropdown. And if the preview isn’t enough for your query, you’re one click away from our overpowered search page that will carry over your keywords and pre-filter the results for you!
Search engine optimization: Scaling our library’s ability to act as an organic traffic driver was critical. In collaboration with the amazing SEO agency Growth Plays, we resolved any technical items that popped throughout the migration process. Their team ensured every link led exactly where it should, and they identified opportunities to create new pages, helping us ensure you’ll always find what you’re looking for. The partnership helped us navigate the complexities of such a significant migration, setting the foundation for long-term search visibility while keeping your needs front and center.
Operational Improvements
Self-serve everything: With 18 seats in Webflow, Latticians across the marketing and communications teams can create, update, and remove content with ease. This increases speed to publishing (and as a startup, we’re always moving fast!) and empowers Latticians to update pages or fix errors instead of going through the process of submitting tickets. We’ve unlocked more time for our web team to focus on high-impact work, and improved operational efficiency in the process.
Team training: It’s easy to say we’re making the library self-serve, it’s harder to put that into practice - particularly with a constantly evolving team. To future-proof this model, we create a notion training repository with step-by-step instructions and video walkthroughs on how to build content in Webflow.
93 authors and 416 speakers contributing to the library
500+ headshots were carefully curated, upscaled, outpainted, reframed, optimized and organized in a brand new collection
6 months of planning, team alignment, and work
$15.75 spent at coffeeshops and bars for wifi to enable late-night final tweaks
14 amazing people dedicated to making this happen
Our Favorite Details
We definitely pick favorites here. Each of us found a sense of joy and delight from specific features in the library, and we’d love to hear yours, too.
Thomas Bosc, Lead Web Developer: Instant ungating, no more redirects or “thank you” pages that break your flow!
Andy Przystanski, Senior Manager, Content Marketing: Author headshots! Our writers differentiate us from the competition, and they deserve to have their names (and faces) in the spotlight.
Josephine Cahill, Senior Website Growth Manager:The floating state of the search bar on /library
Halah Flynn, Senior Content Marketing Manager: The soft gradient that disappears as you scroll past article key takeaways. Chef’s kiss. 🤌😘
.webp)
.webp)
