Rethinking digital marketing using a UX/UI approach
In the digital marketing arena, efficiency and consistency are the fuel that drives success, especially when tackling large-scale campaigns with a high volume of digital assets. When we partnered with a global advertising agency to assist with their digital marketing collateral design, we were excited to collaborate, consult, and share our insights for efficiency and optimisation.
As we explored their overall design process, it became clear that outdated tools and processes were hindering their potential. At Refresh Studio, we prioritise thoughtful UX/UI design as a means to drive impactful, data-driven results. Recognising the need for improvement, we used our expertise in UX/UI design and design thinking to forge a fresh approach to delivering large-scale campaign assets swiftly. Adopting Atomic Design principles and leveraging Figma, our goal was not only to boost our efficiency in delivering campaign assets, but also to inspire our advertising agency client — and their clients — to reimagine their design process. Here’s how we achieved this.
The challenge
When we began our partnership, we observed that the agency’s workflow was unproductive, primarily due to their reliance on outdated design tools. Unnecessarily large file sizes, cumbersome collaboration, and an overall lack of efficiency contributed to a process that felt like an uphill battle.
We know the world of digital marketing needs to move at lightning speed. Marketing campaigns need to be designed, refined, and launched in days (sometimes hours), but our client’s setup was making every step of their projects feel like a tedious, uphill climb.
Again, our mission was twofold: speeding up collateral delivery, but also to rethink the way our client’s team worked. We wanted to create a workflow that felt like a breath of fresh air: efficient, collaborative, and enjoyable. By making their lives easier and their processes more cost-effective, we knew we were investing in a long-term partnership that would benefit everyone involved.
The Renaissance begins: Atomic Design and Figma
We started by challenging their approach and asking the big question: “How can we make this easier, faster, and more collaborative?” To address the inefficiencies, we turned to Brad Frost’s Atomic Design methodology. This approach allowed us to build a design system from the ground up, using smaller, reusable components that could be combined in various ways to create consistent, scalable designs. By integrating UX/UI strategies into the marketing sphere, we were able to create a system that was more organised. Here’s how Atomic Design works:
- Atoms: The simplest, core elements like buttons or icons.
- Molecules: Groups of atoms coming together — like a search bar that combines input fields with a button.
- Organisms: Larger, complex structures like headers, which define layouts.
- Templates: Complete layouts that are ready to be tailored for specific needs.
- Pages: The finished, polished design that users see.
Using this modular system, we didn’t just create a design system for ourselves; we created a full ecosystem for the brand’s design assets — one that was flexible, efficient, and allowed for rapid scaling. But the real magic happened when we combined Atomic Design with Figma, our go-to platform for smart, seamless design collaboration.
Why Figma? A playground for designers
Figma is the ideal modern platform for bringing Atomic Design to life. For this project, we built a robust design system that housed all the brand’s assets, from logos and colour palettes to button styling, in one easy-to-access hub. This centralised everything that the agency, and we,needed to design campaign assets, so that every component that they would need for their campaigns was just a few clicks away. No more wasting time hunting through massive file directories!
We took it a step further by building a library of pre-designed templates that covered the brand’s entire marketing landscape. From social media posts and Google ad banners, all the way to homepage banners and complete campaign pages; we had it all pre-prototyped and ready to go. This not only reduced time spent on early design stages but also ensured every asset remained on-brand and ready to customise at lightning speed.
Figma didn’t just make us faster: it made us smarter. Designers, developers, copywriters, project managers and clients could jump into the same design file simultaneously, allowing for real-time feedback and adjustments. No more waiting days for revisions or getting stuck in endless email threads — we were able to gather feedback instantly, tweak designs on the fly, and keep everyone aligned on the project’s vision. This shortened our revision cycles and sped up the entire process.
What really set Figma apart was the ability to edit multiple assets at the same time. Imagine being able to update dozens of assets at once with just a few clicks. Whether we needed to change a colour scheme, adjust text, or swap out images, we could make sweeping changes across multiple designs in seconds. This feature alone saved us hours of work, enabling us to respond to shifting campaign needs in real-time.
The transformation
The results were game-changing. With Figma and our newly developed design system, our speed to market skyrocketed. What used to take days to design could now be done in under 48 hours. We were able to launch multiple campaigns simultaneously, all while maintaining consistency across every asset.
Here’s the kicker: our process was so efficient that the client no longer needed large teams to execute campaigns. With smaller teams making a bigger impact, we unlocked valuable time and resources, enabling us to handle larger campaigns with just two team members across multiple campaigns.
The agency was impressed by the results:the innovative system we’d created for our team made delivering campaign assets a breeze.This led to an invitation to train their team and run workshops on harnessing the potential of the tools, processes and thinking behind the approach. Before long, they were fully on board, embracing our methods and continuing the journey to transform their design process across the agency.
Conclusion
UX/UI best practices can cause a Renaissance for digital marketing. By embracing a design system that’s faster, more efficient, and infinitely scalable, we’ve turned tedious tasks into something more collaborative and efficient. Design doesn’t have to be a laborious, time-sinking process; it can be a fluid, innovative playground that adapts to everyone’s needs.
At Refresh Studio, we wish to see this as a way for digital marketing and advertising as a whole to implement a more efficient approach, one where creativity and efficiency work hand in hand. It is our hope that the adoption of UX/UI methodologies will be a Renaissance for digital marketing, bringing a smoother, smarter, more cost-effective, and more user-friendly environment.
Refresh is a Johannesburg-based UX UI design studio. We believe exceptional product design comes from the intersection of creativity, technology, and human-centricity. Our team brings a unique and holistic approach to every project, delivering innovative interfaces that enhance user experiences and drive business success.
Contact us at hello@ctrlr.studio
Stay up to date with everything at Refresh:
Website │ Instagram │ Linkedin
