BigCommerce gives brands a lot of flexibility—but with that freedom comes (read: great responsibility) the pressure to build smart. Design can’t be siloed. Development can’t be an afterthought. And handoffs? Ideally, they don’t even feel like handoffs.
That’s why, when we redesign websites, like Sunnyland Farms, we think about systems. Not just beautiful mockups. Not just code that works. A true, collaborative design system—one that shortened the gap between UX, UI, and front-end development.
Here’s how we use tools like Tailwind and Fractal to create a seamless design-to-build pipeline—and how it makes the BigCommerce experience better from every angle.
Tailwind: Utility-First Meets Brand-First
When you’re designing for BigCommerce, you’re often working within a flexible theme framework. Instead of forcing fully custom code into a rigid mold—or worse, redesigning the wheel every time—we use Tailwind CSS to set the foundation.
Tailwind gives us utility-first classes, meaning we can build directly with the rules of our design system baked into the markup. For a recent BigCommerce migration for Sunnyland Farms, this allowed us to:
- Keep consistency across components without slowing down iteration
- Create a responsive framework that actually felt like the brand (not just a bootstrap knockoff)
- Make design decisions that could be translated into production-ready code with minimal interpretation
This helped us stay out of the weeds and focus on the structure, spacing, and rhythm of the site—without getting distracted by the polish too early.
Fractal: One Source of Truth for Everyone
If Tailwind is the language, Fractal is the library.
Fractal gives our team a way to view UI components in isolation—outside of page templates, platform quirks, or staging environments. It is our shared playground: a place where designers, developers, and stakeholders can see how components work and interact.
We use Fractal to:
- Document how elements like buttons, forms, and product cards should behave
- Preview responsive behavior before it hits the live site
- Quickly prototype and QA tricky features without pushing half-baked code to BigCommerce
For our client Sunnyland Farms, that meant less time waiting on buildouts and more time refining how each piece actually served the customer. A price filter that feels instant. A mega menu that is as functional as it is aesthetically pleasing and on-brand.
Low-Fidelity First, Always
Before any of that happens, we start with the basics: wireframes. Low-fi, grayscale, structure-first mockups that let us work through navigation, product detail hierarchy, and checkout flow without obsessing over colors or typography.
Wireframes keep us focused on what mattered most—how a user moves through the site. And because our Tailwind setup is already in motion, those wireframes aren’t throwaway artifacts. They are a blueprint for both design and dev.
A Note on Collaboration: It’s Still the Secret Sauce
Sure, this blog is about systems and tools—but the truth is, people make them work.
Even with Tailwind and Fractal humming along, the real magic comes from how our UX and UI designers collaborate. We aren’t guarding lanes. We aren’t filing tickets for each other. We are in Figma together, on Zoom, in Slack, refining the same problems at the same time.
By the time a component lands in Fractal or BigCommerce, it has already been touched by both structure and style. It isn’t “UX-approved” or “UI-polished”—it is built by both, for the user.
Final Thoughts: The System Is the Shortcut
The real benefit of a systemized approach? It’s not just about efficiency. It’s about building things right the first time—with fewer surprises, fewer revisions, and better outcomes across the board.
For BigCommerce brands, that means your storefront works harder. It’s easier to manage. It’s easier to scale. And it still feels unmistakably you.
If you’re planning a migration, redesign, or just want to clean up your current site—we’re ready to help build a system that’s both beautiful and bulletproof.
