Mijn Fonky 2.0 - Custom ERP System

Overview

Fonky is a leading telecommunications provider in the Netherlands, and their internal operations required a robust, custom-built ERP system to manage complex workflows across multiple modules. I joined the project as a consultant in 2022 to lead the product design and assit with front-end development of Mijn Fonky 2.0.

The Challenge

The existing system was outdated and couldn't scale to meet the needs of a growing organization. Sales teams, field employees, branch managers, and call agents all needed access to different modules with varying levels of complexity—from lead management to shift planning and data visualization.

The primary challenges were:

• Rethinking an existing platform module per module with step by step user transfer
• Supporting diverse user profiles with different workflows, permissions and goals
• Handling complex data relationships across modules (leads, orders, shifts, calendar events)
• Creating a consistent experience across 6+ interconnected modules
• Balancing powerful functionality with ease of use

My Role

Interface Design:

• Created user flows for key workflows
• Designed modern, data-driven interfaces optimized for daily operational use
• Built a comprehensive design system in Figma with 50+ reusable components
• Iteratively refined designs based on continuous user feedback

Frontend Development:

• Converted all design files into production-ready Vue 3 components
• Implemented the design system with Tailwind CSS for consistency and maintainability
• Integrated frontend components with Laravel backend APIs
• Maintained component library ensuring consistency across all modules

Key Findings

Through user interviews and workflow analysis, I identified:

• 60% of users reported the old system slowed down their daily tasks
• Multiple departments were using spreadsheets as workarounds
• Data entry was duplicated across different modules
• No unified design language made the system feel disjointed

Interface design

One of my primary contributions was creating a comprehensive design system in Figma that would:

• Ensure visual and functional consistency across all modules
• Speed up both design iteration and development
• Provide clear guidelines for future feature development
• Maintain accessibility standards (WCAG 2.1 AA)

The design system included:

• TailwindUI library as foundation
• Brand color palette with semantic color tokens
• Component library (buttons, inputs, tables, cards, modals, etc.)
• Data visualization components (charts, graphs, KPI cards)
• Custom layouts for dashboards, calendar planning
• Layout templates for common page types

Key modules

• Lead management interface
• Messaging module
• Shift planning calendar
• Order management
• Contract management
• User profile and settings

Design-to-Code Workflow

To ensure pixel-perfect implementation, I established a streamlined workflow:

1. Design in Figma with developer handoff specs
2. Extract design tokens (colors, spacing, typography) to Tailwind config
3. Build components in isolation
4. Integrate with backend APIs
5. User testing and iteration based on feedback

This process ensured consistency between design and implementation while allowing for rapid iteration.

Results & Impact

After 2+ years of continuous development and refinement, Mijn Fonky 2.0 has become the central hub for all internal operations.

Things I've learned

This project taught me valuable lessons about building complex enterprise applications:

1. Working in a very small team: Mijn Fonky 2.0 is the work of a very small internal team working to transfer 50+ users module per module from a legacy system to a modern new platform built custom for its users and their flows.
2. Front-end UI library: I wish I had been using a more in-depth and pre-built UI library like shadcn
3. Incremental rollout reduces risk: We launched module by module, allowing users to adapt gradually and providing early feedback opportunities.
4. Close collaboration prevents misalignment: Regular communication with backend developers prevented costly rework and ensured smooth integration.
5. Design and development: Doing both interface design and front-end development I've learned to adopt certain shortcuts while not jeopardizing my workflows and processes.

Technologies Used

Design Tools:

• Figma
• Miro

Frontend Stack:

• Vue 3 (Composition API)
• TypeScript
• Tailwind CSS
• Chart.js (data visualization)

Interested in discussing how I can help with your product? Get in touch