Home > Product Work > SGPV Product Evolution
SGPV Product Evolution
Product Designer & UX Lead
Led the modernization of a multi-client field app used by 15 FMCG brands. Unified fragmented versions into a single responsive platform and later migrated to Flutter, introducing AI-based data capture.
The evolution cut hardware costs by 20%, improved deployment efficiency by 80%, and raised user satisfaction by 30%.
From Client Forks to a Unified, Scalable Platform
SGPV is a field operations app used by merchandisers and sales representatives from 15 leading FMCG companies, including national and international brands across Spain, Portugal, and Italy. These field teams visit retail locations to audit shelf placement, negotiate product visibility, track promotional compliance, and secure better in-store positioning.
Over time, versions 5 and 6 had split into multiple client-specific forks to meet unique branding and workflow needs. This fragmentation increased maintenance costs and created inconsistent user experiences. I led a 18 months effort to modernize and consolidate SGPV while maintaining uninterrupted service for all 15 active clients.
Phase 1 introduced a responsive redesign and centralized assets, restoring delivery speed and removing the tablet-only limitation.
Phase 2 unified all clients under a single Flutter app and redesigned critical workflows such as AI-based photo data capture, which reduced task time and improved user satisfaction.
The Challenge
15 FMCG clients, each with its own branded SGPV version. Fragmented code, inconsistent UX, and tablet-only usage slowed delivery and increased costs.
My Role
Product Designer · UX Lead · Front-End Developer
Led research, UX strategy, and product consolidation.
Defined responsive patterns, unified assets, and collaborated on the Flutter rebuild to enable a single scalable app.
Scope
- • 15 FMCG clients across Spain, Portugal, and Italy
- • Multi-phase product evolution (PhoneGap → Flutter)
- • Research, usability testing, and rollout alignment
- • Unified UI kit, AI-assisted workflows, and faster releases
Project Impact Snapshot
Phase 1 (v5→v6): Responsive Redesign
Context
SGPV began as a cross-platform B2B field app for tablets. Over time, client-specific customizations created many divergent versions that were hard to update and maintain. As smartphone adoption grew among field merchandisers, the tablet-only constraint became costly and inconvenient for clients. Approach
Approach
I led the responsive redesign of the app, making it fully usable on both tablets and smartphones. We centralized the CSS, icon system, and shared assets so that updates and fixes could be deployed once and applied across all client builds. This effort unified fifteen client versions without interrupting ongoing operations, laying the technical and visual foundation for future releases.
Approach
I led the responsive redesign of the app, making it fully usable on both tablets and smartphones. We centralized the CSS, icon system, and shared assets so that updates and fixes could be deployed once and applied across all client builds. This effort unified fifteen client versions without interrupting ongoing operations, laying the technical and visual foundation for future releases.
Results
- •-20 % hardware cost: Clients no longer needed tablets for field teams.
- •+80% development efficiency: Centralized styling enabled instant rollouts across all clients.
- •+15% user satisfaction: The responsive interface improved clarity and reduced friction in daily use
- •25% faster future updates: "Simplified front-end structure accelerated deployment.
Results
- •-20 % hardware cost: Clients no longer needed tablets for field teams.
- •+80% development efficiency: Centralized styling enabled instant rollouts across all clients.
- •+15% user satisfaction: The responsive interface improved clarity and reduced friction in daily use
- •25% faster future updates: "Simplified front-end structure accelerated deployment.
Reflection
SGPV began as a cross-platform B2B field app for tablets. Over time, client-specific customizations created many divergent versions that were hard to update and maintain. As smartphone adoption grew among field merchandisers, the tablet-only constraint became costly and inconvenient for clients. Approach
P1: Saved 15 Apps · From Legacy to Responsive Design
Phase 2 (v6→v7): Research & Flutter Migration Strategy
Technology Research
After Phase 1, we still faced performance bottlenecks on iOS and structural limits in the PhoneGap framework.
I led a comparative study of React Native, Ionic, and Flutter to identify a cross-platform solution that could deliver native performance from a single codebase.
Although React Native had the larger ecosystem, Flutter's coherent widget architecture, faster rendering engine, and shorter learning curve provided a more scalable foundation for our needs.
I mapped all major SGPV v6 components to Flutter's widget library and built prototypes to test parity and performance.
This validation proved that Flutter could reduce build complexity and accelerate releases across all client implementations.
Technology Research
After Phase 1, we still faced performance bottlenecks on iOS and structural limits in the PhoneGap framework.
I led a comparative study of React Native, Ionic, and Flutter to identify a cross-platform solution that could deliver native performance from a single codebase.
Although React Native had the larger ecosystem, Flutter's coherent widget architecture, faster rendering engine, and shorter learning curve provided a more scalable foundation for our needs.
I mapped all major SGPV v6 components to Flutter's widget library and built prototypes to test parity and performance.
This validation proved that Flutter could reduce build complexity and accelerate releases across all client implementations.
Research Workflow
The research program combined desk research with in-context field studies to understand merchandiser workflows and validate design decisions before development.
| Phase | Methods | Purpose | Key Outputs |
|---|---|---|---|
| Discover | Desk research, competitive analysis | Identify technical risks, market baselines, and modernization opportunities | Landscape scan, risk assessment, success metrics |
| Define | 1 contextual inquiry, 10 user interviews | Understand field workflows across client types and identify friction points | Personas, empathy maps, journey maps, problem statements |
| Design | Wireframes, low mockups, modern UI patterns | Simplify critical paths and prepare flows for AI-powered features | Interaction models, clickable prototypes |
| Systemize | Figma design system (components, tokens, specs) | Ensure visual and functional consistency across unified app | Component library, design tokens, usage guidelines |
| Validate | 10 usability tests | Verify task time reductions and error rate improvements | Task completion benchmarks, issue log, refinements |
| Deliver | Flutter development, rollout coordination | Ship performant unified app and manage staged client migration | Production Flutter app, training materials, rollout plan |
Discover
Define
Design
Systemize
Validate
Deliver
AI-Powered Data Capture
Transforming Field Data Collection
Before migration, merchandisers visiting retail stores had to manually type product codes, shelf data, and promotion details.
It was a repetitive, error-prone process that slowed each store visit and reduced data reliability. A single audit could involve dozens of entries, making productivity and consistency difficult to sustain.
Transforming Field Data Collection
Before migration, merchandisers visiting retail stores had to manually type product codes, shelf data, and promotion details.
It was a repetitive, error-prone process that slowed each store visit and reduced data reliability. A single audit could involve dozens of entries, making productivity and consistency difficult to sustain.
The AI Solution
I designed a new workflow enabling one-tap capture through image recognition. Users simply photograph shelf labels, barcodes, or displays; the AI automatically identifies products, prices, quantities, and placement details — removing the need for manual entry.
- •One-tap capture: Reduced data entry time by 25% through photo-based input
- •Error reduction: Automated extraction eliminated transcription mistakes
- •Instant validation: Real-time feedback confirmed successful data capture before leaving the store
- •Offline reliability: "Images processed locally and synced once online
The AI Solution
I designed a new workflow enabling one-tap capture through image recognition. Users simply photograph shelf labels, barcodes, or displays; the AI automatically identifies products, prices, quantities, and placement details — removing the need for manual entry.
- •One-tap capture: Reduced data entry time by 25% through photo-based input
- •Error reduction: Automated extraction eliminated transcription mistakes
- •Instant validation: Real-time feedback confirmed successful data capture before leaving the store
- •Offline reliability: "Images processed locally and synced once online
P2: From Hybrid to AI-Driven Workflows
Key Decisions & Trade-offs
| Decision Point | Options Considered | Why We Chose | Impact |
|---|---|---|---|
| Platform Strategy | 1. Keep per-client forks 2. Native rewrites 3. Unify on Flutter | We evaluated React Native, Ionic, and Flutter. React Native had the larger ecosystem, but Flutter's coherent widget model, fast rendering, and shorter learning curve fit our design system goals and team capacity. One shared codebase would serve all 15 clients with native-level performance. | Unified codebase, lower latency, faster delivery |
| Customization Governance | 1. Maintain forks 2. Hardcoded flags 3. Theming and config | We replaced per-client forks with a configuration and theming system. Branding and workflows stayed flexible while updates remained centralized. | 80% deployment efficiency, fewer regressions |
| Migration Rollout Strategy | 1. Free migration for all 2. Individual opt-in pilots 3. Paid staged adoption | Each client ran its own instance, so migration required a new commercial agreement. We started with early adopters who funded the move, used their feedback to refine training and rollout, then scaled to others. | Self-financed path, validated ROI, repeatable rollout |
| UX Research Approach | 1. Heuristics only 2. One-off user testing 3. Continuous research operations | We combined contextual inquiry, interviews, and iterative usability tests to shape information architecture, responsive patterns, and the AI photo-capture workflow. | 25% task time reduction, 30% higher satisfaction |
Platform Strategy
Customization Governance
Migration Rollout Strategy
UX Research Approach
Business Impact & Results
The two-phase evolution improved performance, cost efficiency, and user satisfaction while establishing a sustainable multi-client platform.
Product Performance
- Unified Flutter codebase: Reduced latency and improved responsiveness across iOS and Android.
- 25% faster task completion: AI-based image recognition removed manual entry and reduced user effort.
- 30% higher satisfaction: Field workers reported smoother, faster daily workflows.
- Seamless adoption: Early pilot clients funded the migration, validating ROI before full rollout.
Operational & Financial Outcomes
- 20% lower hardware cost: Mobile-first design removed the need for tablets.
- 80% deployment efficiency: Centralized styling and shared assets simplified updates for 15 clients.
- Faster delivery cycles: One-to-many rollout process shortened release time.
- Self-financed migration model: Demonstrated commercial viability and created a scalable adoption framework.
Long-Term Platform Value
Beyond short-term metrics, the transformation positioned SGPV as a modern, competitive platform capable of rapid innovation.
- →Scalable growth: New clients can be onboarded through configuration instead of new code forks.
- →AI-ready architecture: The image-recognition module established a foundation for future machine-learning features.
- →Reduced technical debt: Legacy hybrid layers were replaced with a sustainable native stack.
- →Competitive differentiation: Native performance and AI automation positioned SGPV ahead of competing field solutions.
Key Learnings
Scaling SGPV taught us that sustainable impact comes from structure, empathy, and clarity—not just code.
1. Governance Beats Heroics
Efficiency came from governance, not heroics. Replacing code forks with a theming and configuration system brought 80% faster rollouts through shared structure and clear ownership.
2. User Research Drives Executive Buy-In
Field studies and user videos proved pain points better than any slide deck. Real stories convinced leadership to invest in AI automation and UX upgrades.
3. Standardization with Client Freedom
Instead of enforcing uniformity, we moved customization into configuration. Clients kept their identity while the platform stayed unified and maintainable.
4. Change Management Is Part of Design
Migrating to Flutter meant retraining 15 client teams. Success came from onboarding tools, training materials, and empathy for field users adapting to new workflows.
Want to see more work?
This project shows how I lead multi-client product evolution—turning research insights and governance into scalable design systems.