High-impact design systems require strategic resource management, adaptive processes, and the ability to balance innovation with practical constraints.
I sat down with Chloe Gunter, a Designer at Webstacks, to discuss how we tackle complex design challenges for B2B SaaS companies. Chloe has worked on some of our most ambitious projects, including LogicMonitor's massive website redesign and the strategic rebrand of Mentor Click. Here's what we covered about building design systems that actually scale.
1. Start with the Right Foundation: Understand Constraints and Product Representation
The biggest mistake designers make is diving into creative work without understanding technical and strategic constraints. Chloe shared her experience with LogicMonitor, which became the largest site she'd ever worked on at Webstacks.
"It's a huge site which has a lot of aspects to it," Chloe explained. "We put in hundreds of hours for illustration and animation. So that's very large."
The scale created unique challenges that required strategic planning from the start. Understanding project scope upfront determines whether your design system will support or constrain the team. For large-scale websites, this means anticipating component variations, considering content migration complexity, and planning for future scalability before creating a single design file.
LogicMonitor's needs reinforced an important lesson: the biggest sites need the most flexible design systems. When you have dozens of pages requiring similar but not identical components, your system needs built-in adaptability.
Balancing Abstract and Literal Product Representation
One of the most critical decisions in SaaS design is how to represent your product visually. Too literal, and you overwhelm users with technical detail. Too abstract, and prospects can't visualize what they're buying.
LogicMonitor needed to showcase its software's technical capabilities while maintaining an engaging user experience—a challenge that led to innovative product storytelling solutions.
"Sometimes [the best approach] is having something more abstract and showing a more visual representation of what the product is or the features that it has," Chloe said. "That was a huge aspect of [our strategy for LogicMonitor]."
For B2B SaaS companies, this balance between abstract and literal becomes even more critical when you're explaining complex technical products. Your design system needs to accommodate both educational content that explains capabilities and detailed product demonstrations that prove functionality.
The most successful design systems build in this flexibility from the start. Create illustration guidelines that work across multiple use cases, establish clear rules for when to use literal versus abstract representations, and document these decisions so future designers understand the strategic reasoning.
2. Understand When or When Not to Leverage New Technology Mid-Project
Design tools evolve rapidly, and knowing when to adopt new features can dramatically improve efficiency. Chloe's experience with Figma variables during the LogicMonitor project demonstrates this perfectly.
"Figma came out with a huge update of new ways to use variables," Chloe explained. "So that was also the first instance of Webstacks trying to update mid-project. But I knew Figma's new updates would make my process easier."
The specific improvement that excited Chloe was typography variables. Previously, changing a font family across an entire design system meant manually updating every text style. With variables, the entire system updates from a single change.
"Instead of going into every single one and typing in the font family to change it," Chloe said. "Now all you would have to do is go under display fonts, type in the font family, and it updates all of the areas [where that font appears]."
The lesson here isn't "always adopt the latest features immediately." It's about strategic evaluation. When LogicMonitor was mid-project, Chloe assessed whether implementing variables would create more work or save time downstream. She determined the upfront investment was worth it.
For design teams managing multiple clients, this decision-making framework matters. Every new tool adoption creates a learning curve, but the right timing turns that investment into compounding efficiency gains across projects.
3. Organize Large Content Libraries with Strategic Architecture
Resource hubs present a unique design challenge: how do you organize hundreds or thousands of content pieces without overwhelming users? Chloe's work on LogicMonitor's resource hub demonstrates the strategic thinking required.
LogicMonitor came to the table with ambitious goals for their resource hub. They had extensive content and wanted to ensure users could access everything easily. The challenge was finding the right balance between comprehensiveness and usability.
"One thing that was really refreshing about this client is that they had a lot of suggestions of what they wanted and what they thought they needed," Chloe said. "But they were still open to what the best user experience was."
This collaborative approach led to strategic consolidation—the final design balanced comprehensiveness with usability. "The resource hub page was developed from narrowing down what was actually needed for the page to be helpful to the user," Chloe said.
Featured resources sit at the top, giving LogicMonitor editorial control over what prospects see first. Below that, category filtering allows users to narrow by content type: blogs, webinars, case studies, events, and learning resources.
But the real sophistication is in the filtering system. "The user could use it however they wanted," said Chloe. "There were categories for filtering the types of resources, then ways to go to those resources."
Chloe also had to solve a technical challenge: creating listing page templates flexible enough to handle different filtering needs without creating unique layouts for every scenario.
"That was a huge thing that I had to really narrow down for the developers so that we could hit our launch deadline and still have a wide variety," she said.
The solution was conditional layouts. "For example, one layout for if there is a listing template with only one category to choose from. And then another layout if LogicMonitor had multiple drop-down categories for a user to filter by."
For B2B SaaS companies with extensive content libraries, this architectural approach prevents the common mistake of creating a separate page layout for each content type. Strategic templates that adapt to different filtering needs give you consistency without sacrificing functionality.
4. Navigate Brand Constraints Without Sacrificing Quality
Not every client wants a radical transformation. Sometimes the challenge is improving design quality while respecting established brand guidelines and audience expectations. Chloe's work on MentorcliQ demonstrates this balancing act.
MentorcliQ had a clear understanding of their audience and brand positioning. They were serving an established demographic and wanted to evolve their design without alienating their core users. This created an interesting design challenge: how do you modernize while maintaining familiarity?
"MentorcliQ was definitely an older style brand that wanted to still cater to an older demographic," Chloe explained. "We didn't want it to be too out of the box where it would scare clients away with how friendly and playful it was."
The project became an exercise in strategic evolution rather than revolution. Certain brand elements were non-negotiable, which meant the design team needed to find opportunities for improvement within those constraints.
This constraint-based approach led to important conversations about design fundamentals. The team identified opportunities to improve accessibility and usability while respecting brand guidelines.
When discussing accessibility improvements, the team could point to concrete standards and user benefits. "That type of expertise really won them over in terms of their trust to try and update their brand to be a bit more in style or eye-catching," Chloe said.
MentorcliQ also had specific preferences around imagery that aligned with their audience's expectations. They understood their demographic and chose a more polished, professional aesthetic that resonated with their users. Rather than pushing against these preferences, Chloe worked within them to create a design that felt authentic to the brand.
Design teams will often encounter clients who want improvement, but within strict boundaries. The key is identifying which constraints are negotiable (aesthetic preferences) versus non-negotiable (accessibility standards), then educating stakeholders on the difference. Constraints can actually drive innovation by forcing you to find creative solutions within defined parameters.
5. Solve the Mobile Design Challenge Before It Becomes a Problem
Mobile design remains one of the most persistent challenges in web design. The issue isn't technical skill—it's the fundamental tension between desktop-first thinking and mobile-first realities.
Logic Monitor's bento box layout exemplified this challenge. The component worked beautifully on desktop, but translating it to mobile revealed an oversight. "One of my challenges with this was moving it over to mobile and thinking about whether it would look weird if each card's image ratio was different," Chloe explained.
The solution came late in the process—triggering last-minute revisions. "I didn't account for the fact that changing the image ratio for mobile would cut off the image," Chloe said. “So that ended up requiring a last-minute update that we had to make.”
This experience reinforced an important principle: anticipate mobile constraints during desktop design, not after. The challenge extends beyond layout into interaction patterns. Mobile users need visible navigation indicators for horizontal scrolling. Touch targets require different sizing than hover states. Multi-column desktop layouts often need complete reorganization for single-column mobile views.
Chloe's candid reflection captures the designer's dilemma: "It's just the fight of trying to keep that custom and new unique bento box layout idea." Some innovative desktop layouts simply don't translate to mobile. Accepting this reality early prevents costly revision cycles.
"At some point, we can't keep reinventing the wheel," Chloe acknowledged. The answer isn't to abandon creative desktop layouts—it's to bake mobile considerations into the ideation phase. Before approving a complex desktop component, sketch the mobile version. If it doesn't translate cleanly to a 375px screen, rethink the desktop approach before moving forward.
6. Build Internal Resources and Processes That Scale
The best design systems include not just visual components, but also internal resources and documented processes that prevent recurring problems. Strategic investments in both tools and workflows compound efficiency across multiple projects.
Some of the most impactful design work happens behind the scenes. Chloe's creation of a custom solid icon library exemplifies how strategic internal resources multiply team efficiency.
The need emerged during the Materialize project. "In our vignettes, the client really wanted to move towards a more solid icon library instead of outlined," Chloe explained. "But this icon library was limited. It was a Figma resource library that someone else created, and it did not have the range that we would need in the future."
The challenge was that the existing library had a limited scope. This constraint became an opportunity to create a comprehensive resource that would serve multiple projects. Chloe could have chosen the easy path: use what was available and supplement when needed. Instead, she saw an opportunity to create a scalable solution for the entire team.
Chloe evaluated existing solutions before building from scratch: "I really tried to find one that already existed because obviously that would save a lot of time and energy," she said. "It just wasn't a wide enough selection."
The effort culminated in a comprehensive, consistent icon library that complements Webstacks’ outline set and supports designers across every project.
7. Build Your Design Systems on Strategy, Not Just Aesthetics
Strategic design foundations determine how fast your team can execute. For B2B SaaS companies treating websites as products rather than projects, clear systems reduce decision friction, accelerate production, and create consistency across every touchpoint.
The cost of weak design systems compounds over time. Without strategic clarity, every new page becomes a negotiation. Every component variation triggers a design review. Website updates introduce inconsistencies that dilute brand recognition and erode user trust.
Companies that invest in strategic design systems see measurable returns: faster campaign launches, fewer revision cycles, and design teams that execute independently without constant creative review. That autonomy only works when the underlying system is solid.
Chloe's work demonstrates what this looks like in practice. From creating reusable illustration systems that work across hundreds of pages, to building internal icon libraries that serve multiple projects, to developing new workflows that prevent recurring problems—each decision was strategic, not just aesthetic.
"At some point we can't keep redesigning the wheels," Chloe said, acknowledging the reality that scalable design requires repeatable systems.
The best design systems get built by teams who think beyond individual projects. They identify patterns across clients, create resources that solve recurring problems, and document processes that prevent issues from emerging in the first place.
For B2B SaaS companies, that strategic foundation becomes the system that enables continuous improvement, faster launches, and design autonomy at scale.
Talk to Webstacks about our design process and approach that scales with your business.
