FMTC runs on speed. Their business depends on high-volume affiliate “deals” (offers/coupons with tracked links) being standardized and published quickly.
Over four months, I led a redesign of the internal deal-processing flow and queues, then carried the same clarity to the customer-facing portal.
Header
In affiliate marketing, merchants run programs with tracked links; publishers promote those links to earn commission. FMTC aggregates and cleans those deals so publishers can use them. Internally, Data Processors (DPs) work through large queues under timer-based KPIs; DP Managers triage and assign work to keep queues light. Our team was me (lead designer), our PM, FMTC stakeholders, and their developers.
Header
Actions on the deal form lived above, below, and beside the work area, so DPs hunted for controls and scrolled back to submit. Queues varied by status, producing inconsistent tables and forms. Rows could include twenty tags and tables up to ten columns; nothing critical could be hidden. Lost seconds at DP scale meant fewer processed deals and missed KPIs.
Header
Speed rules were explicit: no introducing new dropdowns for primary actions; tooltips weren’t a substitute for labels where clarity mattered. Some legacy dropdowns remained. Columns with decisive data couldn’t be truncated. We designed to the smallest desktop and respected per-queue differences without fragmenting patterns. On the portal, time/budget required a UI-first uplift with minimal net new UX.
Approach & Strategy
Keep the storyline attached to the work: make the deal form fast and predictable, then make the queues fast to scan and act on, then carry that clarity to external pages. We paired tightly with developers, sharing wireframes and lightweight proposals, testing sentiment before we invested in polish, and iterating quickly as constraints surfaced. The north star was throughput: fewer decisions per screen, fewer context shifts, and less back-and-forth.
Key Design Decisions
We rebuilt the deal header into a fixed band that carries summary metadata, program instructions, and a unified action bar that stays visible as you scroll. “Do-something” actions are grouped; state markings live together; the submission cluster sits at the far right to match left-to-right completion. Split and Tier are true toggles with clear selected states. Inputs were modernized and tightened; text-insertion macros remained visible for speed. For selection, large sets use searchable dropdowns with selected pills; small sets use fast multi-select pills.
In queues, predictable fields (e.g., date/time) get fixed widths while priority fields (e.g., label) flex; action affordances mix icon-only and short labels to preserve scan speed. Across the product we standardized components, filters, and a calmer palette. On the customer-facing portal, we made two systemic calls: introduce a side panel so details/forms open in place, and consolidate the multi-page Directory into one tabbed surface that drills through in-panel without losing context.
Iterations & Experiments
We validated the unified actions concept in grayscale first. Stakeholders reacted to the structure rather than the color, which let us refine iconography where comprehension lagged. We tuned hover tooltips and toggle states until recognition felt instant. On selects, we tested the tipping point between pills and dropdown, and we found search-in-dropdown plus visible selected pills was the right mix for large sets.
On queues, we went through multiple column width passes to avoid truncation while preserving priority fields. On the portal, we tested the side panel pattern in lower-risk contexts before applying it to the Directory. Throughout, we kept to places where speed wins were clear and dev lift was reasonable.
Final Experience
Processing a deal now starts with a stable, informative header and a unified action bar that stays with you. You move down the form once; you don’t scroll back up to submit. Selections are faster because the control matches the data set: pills for short lists, searchable dropdowns for long lists, and visible selections as pills where it helps.
In queues, the table is dense but readable, with mixed action affordances that respect scan speed and a column strategy that prioritizes what DPs actually use to decide. The UI tone is calmer, the components are consistent, and the portal carries the same system—tabs where it simplifies navigation and a side panel where in-place detail helps exploration.
Outcomes
DPs spend less time hunting actions and less time scrolling to finish. The sticky header collapses context switching; the control patterns reduce mis-clicks; and the column strategy keeps decision-making fields visible even in worst-case density. Managers can trust that queues read the same way across statuses, so triage is quicker. On the customer-facing side, pages are consistent, easier to extend, and ready for scale with a shared component library and style guide.
Learnings & Final Thoughts
We built this shoulder-to-shoulder with FMTC’s developers, adapting the action IA, sticky behavior, and column strategies as constraints surfaced. The result fits FMTC’s reality: high-pressure queues, dense tables, and operators who value throughput over theatrics. The four-month project is complete; spacing and affordance passes were applied across key surfaces, and the new system is in place. No further work is planned at this time.
Other work
Header