1. The Situation
Webgains is a global affiliate marketing network connecting advertisers with thousands of active publishers. The existing web platform was functionally essential but visually outdated, causing friction for affiliates managing daily campaign performance, grabbing tracking links, and reviewing payout reports.
I was brought in to lead the complete UX and UI redesign of the desktop and tablet web application, modernising the user experience for publishers while ensuring high responsiveness across desktop and tablet viewports.
2. What Made It Difficult?
Legacy UI Friction & Outdated Tech: Translating years of legacy features into a streamlined, modern browser interface without disrupting existing power-user workflows.
Tight Budget & Testing Constraints: The project operated under strict budget limits, excluding formal interactive prototyping or secondary usability testing rounds – requiring high initial accuracy in design decisions.
Limited Access to Affiliates: Affiliates are busy external stakeholders whose time is difficult to secure, requiring creative proxy requirement-gathering techniques to cover diverse enterprise use cases.
- Project Continuity & Leadership Shifts: Navigating operational friction across a lengthy timeline that saw two successive changes in Product Owners and Project Managers.
3. My Role
As sole UX/UI Designer, I took end-to-end ownership of the redesign. Balancing both UX architecture and visual design, I conducted user research, defined the information architecture, sketched modular dashboard widgets, created high-fidelity wireframes, and built the frontend CSS style guide for engineering delivery.
4. What I Noticed
When budget and time constraints prevent repeated interactive prototyping, rigorous upfront discovery and smart framework choices are vital.
- I recognised that trying to design custom visual components from scratch for every edge case would stall development. By leveraging an enterprise design framework (Bootstrap UI), we could shift maximum focus toward solving complex Information Architecture (IA) and site-wide navigation challenges.
5. How We Moved Forward
Software Audit & Competitor Benchmarking: Initiated the project with a comprehensive software audit of the legacy system paired with competitive analysis to define baseline features, identify navigation bottlenecks, and establish market parity goals.
Contextual Inquiry & User Research: Arranged lab research sessions with 8 affiliates across companies of varying sizes. Observed participants completing key tasks, recorded sessions for findings analysis, and administered post-task questionnaires to prioritize core user needs.
Personas & Proxy Requirement Sessions: Developed detailed user personas from research data and co-facilitated internal proxy sessions with client-facing support teams to map edge-case scenarios and functional requirements.
Site-Wide Filter UI & Modular Widgets: Conceptualised a persistent, contextually adaptive filter bar that adjusted available data views across different app sections. Sketched modular dashboard widgets (such as Program Performance and Social Feeds) for user customisation.
Bootstrap Framework & Design System: Produced high-fidelity wireframes and a standardised CSS framework style guide built on Bootstrap, enabling rapid visual design delivery for core templates and co-branded client portals.
6. The Design Work
Flexible Affiliate Dashboard: Modular widget layouts featuring custom performance feeds, quick-access promo codes, and real-time revenue stats.
Contextual Filtering & Navigation: Persistent site-wide filter UI allowing publishers to isolate campaign data by date, merchant, or media channel.
Co-Branded Client Templates: Responsive desktop and tablet layouts designed for major enterprise partner portals and high-volume publishers.
Comparison between existing Webgains platform and that of competitors.
User questionnaire and requirements prioritisation documentation.
Example of a persona for Webgains
Sitemap
Dashboard idea sketches
Example wireframe specification for developers
7. Outcome & Professional Learnings
High Internal & External Satisfaction: Beta testing with internal account managers met overwhelmingly positive feedback. The public rollout gave affiliates a modern, efficient workspace.
Catalyst for Brand Overhaul: The success of the redesigned web platform served as the primary catalyst for Webgains’ subsequent company-wide rebranding, logo refresh, and market re-positioning.
Key Senior Learning: When resources and time are constrained, pragmatic design leadership means knowing where to compromise. Leveraging established UI frameworks allows you to focus critical energy on high-value architecture, user research, and systemic navigation logic.
Example of co-branded sites