Home > Product Work > Back Office Unification
Back Office Unification
Product Designer & Platform Strategist
Consolidated 15 fragmented client portals into a unified back-office platform.
Built a shared CSS architecture, centralized assets, and Git-based rollout model achieving 99% code reuse, 80% faster deployments, and consistent UX across 15+ FMCG clients.
From Client Forks to a Unified Back Office System
XpuntoCero’s Back Office portals serve as dashboards for the SGPV field app, used by merchandisers and sales reps for 15 FMCG clients across Spain, Portugal, and Italy.
They visualize field data, manage promotions, and track retail execution. Over time, each portal evolved separately with custom branding and one-off requests. Updates became slow, inconsistent, and difficult to align with the SGPV app.
My goal was to preserve each client’s identity while building a single, scalable foundation that simplified maintenance and accelerated delivery.
I redesigned the UI kit, consolidated CSS, and introduced a Git-based release workflow, ensuring improvements shipped once and reached all client portals instantly. The result kept the freedom of customization while removing redundant work and bringing long-term consistency to the system.
The Challenge
My Role
Product Designer & Platform Strategist
- • Diagnosed fragmented client forks and unsustainable update cycles.
- • Led the back-office unification, built one shared core applied across 15+ client portals.
- • Reverse-engineered legacy CSS to identify patterns and enable bulk front-end updates.
- • Created the Git-based release model to propagate improvements from a single source.
- • Established the roadmap and process that made the unified approach maintainable at scale.
Impact
- • 99% core code reuse across all client portals
- • 80% faster rollout of visual and UI updates
- • Consistent UX and brand alignment for 15+ clients
Program Outcomes
Design Evolution
Business Context
These dashboards visualize field data such as sales, promotions, and store audits. These dashboards visualize field data such as sales, promotions, and store audits.
Over time, client portals drifted apart with custom branding, duplicated assets, and manual updates. This fragmentation slowed releases and caused inconsistencies with the SGPV mobile app.
The goal was to create one shared core that keeps each client’s identity while centralizing maintenance and accelerating updates.
- • Duplicated assets and inconsistent portals
- • Manual updates breaking alignment with SGPV app data
- • High QA and maintenance costs across 15+ clients
- • Shared core with CSS-based theming
- • Git-powered centralized release workflow
- • Faster iteration aligned with SGPV product cycles
Problem & Hypothesis
The Problem
• Inconsistent UI across portals due to heavy per-client customization
• Increased development time and QA overhead
• Updates could not be applied uniformly
Hypothesis
By concentrating changes in a single CSS file and a shared image/icon folder, we can roll out UI updates to all portals at once via Git, maintain client customization via themes, and dramatically reduce duplicated work.
Key Decisions & Trade‑offs
| Decision Point | Options Considered | Why We Chose | Impact |
|---|---|---|---|
| Architecture Strategy | 1. Maintain per-client codebases 2. Monorepo with themed builds 3. Single shared core + client themes | Created a single shared core style CSS and a shared asset folder. Client-specific tokens/themes override variables without touching core markup. | 99% code reuse across portals |
| Asset Management | 1. Duplicate assets per client 2. CDN per client 3. Shared assets with client overrides | Icons and images were centralized. Only logo and color tokens vary per client. This reduced duplication and guaranteed consistency. | 80% faster deployment of visual updates |
| Delivery Pipeline | 1. Manual FTP per client 2. Per-repo Git flow 3. Git-based propagation to all clients | Git-driven releases: update once in core, propagate to 15+ client portals via branches. Rollbacks and hotfixes became trivial. | Minutes to roll out changes (vs days) |
Architecture Strategy
Asset Management
Delivery Pipeline
The Unified Solution
Single CSS + Shared Assets
Consolidated all client styles into one maintainable CSS architecture with variables and mixins.
Reverse-engineered legacy files to find reusable patterns and moved icons and images into a shared library.
Each client’s theme now overrides only color tokens and logos, keeping 90% of the codebase identical.
Git‑Based Propagation
Updates are committed to the shared core, merged through dedicated client branches, and deployed to all portals using Git-based scripts.
This workflow replaced manual uploads, reduced release errors, and made rollbacks fully traceable and fast to execute.
Operational Improvements
Apply a visual fix to a component
Add a new icon to all portals
Release a hotfix
Outcomes & Deliverables
Front‑End
- • Unified CSS architecture with tokens
- • Shared iconography & image library
- • Bootstrap‑based responsive components
Process & Governance
- • Git release workflow for multi‑client rollouts
- • Branching model for hotfixes and theming
- • QA checklist and A/B testing framework
Results
- → Scalability: Re‑styled and deployed across 15+ clients with centralized updates.
- → Development Efficiency: Focusing on core CSS + icons enabled 80% faster updates across portals.
- → Development Speed: Centralized design and development enabled future updates to be implemented 25% faster.
Want to see more work?
This project shows how a design‑led front‑end refactor can unlock scale and lower costs across a legacy estate.