SaaS Conversion Marketing Platform
used by leading B2B e-commerce brands
Unifying legacy tools into a single SaaS workflow builder - creating a scalable product, breaking down silos and improving collaboration between design & development
Role & methods
Product Design, UX/UI, User Research, Usability Testing, User Flows
Cross-functional team:
Product Designer, Product Owner, Frontend & Backend Developers
Tools used:
Figma, Miro, Productboard, Confluence, Notion, Jira, Google Meet
Projects:
Design system, new features design, Iterations & enhancements of existing UI
Overview
About the company
The company is a B2B behavioural marketing company helping 500+ e-commerce brands optimise user journeys on a website to reach, retain & re-engage visitors to increase conversions.
I joined at a pivotal time: the company was preparing to migrate 3 legacy platforms into a single, scalable SaaS product - built around a new, workflow-based product.
The migration was a long-overdue and complex process that involved moving over 800 client sites to the new platform I was designing. It was a massive milestone for the company and a collective achievement made possible by tight collaboration across product, design, and engineering.
Since joining, I've improved the Ease of Use and Visual Appeal of the product by 51%
Before & After
From complex, separate legacy tools
to a simplified workflow builder
Before
After
Common problems identified with the old products:
- Users found the product difficult to use, it was complicated & confusing
- Users didn't trust the product; they were worried their changes wouldn’t be saved
- The product wasn't competitive; it was outdated, slow and patchy
- It took a long time to onboard new users; they had to get used to using the product
- Users struggled to set filters (conditions determining who would see the message)
- The product wasn't accessible, it was inconsistent, wasn't using reusable UI components
- Users found it difficult to see and understand the flow of the campaign; weren't sure what would happen on the client’s website
Problems solved with the new product (solutions):
- A product that is user find intuitive, visually pleasing and easy-to-use
- This resulted in users trusting the new product, being delighted & confident with using it
- The new product was competitive, SaaS, future-proofed and robust allowing to iterate further
- New users were onboarded much quicker & first-time users had no difficulties getting used to the new platform
- A new way of setting filters was robust, easy to understand
- A new product is more accessible, and consistent, using reusable UI components
- With the Workflow approach, users can easily see the flow of the campaign & understand exactly what visitors experience
The solution
Designing a more intuitive, consistent,
and scalable product
I joined the team early in the development of a new workflow-based SaaS platform that would replace multiple legacy tools.
My goal was to help users manage client campaigns more intuitively and efficiently by designing new capabilities and making the interface more accessible and consistent.
I worked in a cross-functional Agile teams with another Product Designer, Product Owner, and Frontend & Backend Developers.
Soon after joining, I identified areas that needed improvement beyond the UI - including the Design System & Ways of Working between Designers & Developers. I proactively introduced reusable components, aligned Figma with Storybook, and supported dev handoff through design QA and workshops.
UX Process
+ Improving the Ways of Working
between Designers & Developers
My work spanned the full product design process - from discovery and competitor research to user flows, usability testing, and ongoing iteration. Everything I designed was grounded in user feedback, technical feasibility, and long-term scalability.
- Discover - user research, stakeholder, technical discovery, competitor analysis, identifying problems, opportunities, empathising with users
- Design - sketches, lo-fi wireframes, hi-fi designs, assessing technical feasibility with PM & Developers, deciding on MVP direction
- Prototype - creating prototypes in Figma to validate designs with users (lo-fi or hi-fi depending on needs)
- Test - using prototypes, validate designs by conducting usability testing and then iterating according to user feedback & insights
- Implement - finalising hi-fidelity designs, handing off designs to Developers, ongoing, hand-in-hand collaboration with Developers, Design QA
- Launch - after thorough end-to-end testing, launching new features, actively collecting user feedback
- Iterate - continuously improving the product, making iterative updates and enhancements to improve user experience further (going back to the design stage)
I cultivated a culture of collaboration & communication by improving the Ways of Working between Designers & Developers.
I broke down silos between different Agile teams
I led weekly workshops with Frontend Developers, as well as actively bridging the gap between cross-functional teams, reducing re-work & tech debt. In a team with limited design and frontend resources, I used my technical knowledge to guide implementation, advise on best usability and accessibility practices and which UI components & Design Tokens to use.
I introduced the Design QA into the ongoing delivery process; which raised the overall quality of the product. This resulted in a decreased number of bugs appearing to users and fewer incidents occurring.
Simplifying complexity
Strategic design decisions for
a future-proof, intuitive product
Designing for this platform meant navigating complexity at every level - from legacy systems and technical constraints to tight deadlines and shifting priorities. Every new feature or enhancement had ripple effects across the entire product, affecting interactions, logic, and validation.
Working in this environment pushed me to think holistically - balancing short-term usability wins with long-term product scalability. Even small changes required a system-wide view to ensure the platform remained intuitive, robust, and future-ready.
Designing the New Platform
Shaping key workflows, rebuilding the design system,
and improving usability across the product
Across the platform, I worked on a range of critical improvements - from empowering users to create more flexible campaign logic to rebuilding the design system foundations.
Below are some of the key contributions I made to improve clarity, flexibility, and consistency across the product.
Scalable design system
Rebuilding a legacy design system to improve consistency, accessibility, and team workflows - reducing design-to-dev time by 3x and elevating UX/UI maturity across the product
Workflow Branching
Enabling users to manage complex campaign logic within one flow - reducing duplication and cutting the number of campaigns per user by 67%
Split testing
Adding built-in A/B testing gave users flexibility to experiment with message variations - resulting in improved conversion rates and higher-performing campaigns
Drag & Drop Enhancements
Improving the drag-and-drop interface with clearer interactions and drop zone - making campaign building more intuitive and increasing user satisfaction by 32%
Key results:
Improved by
51%
Ease of Use and Visual Appeal of the product
Reduced by
67%
The number of campaigns managed per user
Improved by
32%
User satisfaction rate with Workflow Campaign Editor
Next Product Design PROJECT
