City Furniture
Migrating from legacy to a living system.
From a rigid legacy system to a platform that thinks like its users.
City Furniture is a leading retail chain with strong operations and a large product portfolio. Its internal workflows were deeply tied to a legacy SAP system that had become restrictive over time. The goal was to transition to a custom-built system that supported evolving business goals, enhanced productivity, and improved user experience across teams.
A system built for data management, not for people.
“The real problem was not the software. It was that nobody had ever designed the experience of using it.”
Insight from discovery researchCognitive Overload
Multiple nested fields and navigation layers increased decision fatigue and introduced errors. Users had developed informal shortcuts that no longer worked reliably.
Inflexible Architecture
The rigid SAP interface limited optimisation around changing business requirements. Every new process required workarounds rather than systemic solutions.
Lack of Visual Hierarchy
Dense screens, inconsistent labelling, and redundant tables slowed task completion. Users spent more time parsing the interface than doing their actual work.
No Design System Integration
A partial visual language with low adoption meant constant rework, inconsistency across modules, and growing technical debt in the UI layer.
Three months. Six departments. One clear picture.
Three months conducting stakeholder interviews across sales, order management, inventory, logistics, finance, and operations. The goal was not to document features, but to understand the real shape of daily work, mapping what the system did and what it failed to do.
Task Redundancy
Duplicate data entry across modules due to limited synchronisation. The same information was entered two to three times by different teams.
Inconsistent Data Flow
Validation errors from unclear field dependencies caused downstream issues only caught late in workflows.
Fragmented Navigation
Users switched between dashboards and sub-menus to complete a single operation. A typical order approval required touching four separate screens.
Low Discoverability
Critical features buried under unintuitive labels, raising training overhead and creating a culture where institutional knowledge was the only navigation system.
Don't replicate the old system. Redesign the logic behind it.
The IA was redesigned from scratch, a role-based navigation model where users only see modules relevant to their responsibilities. Documented in a master flow diagram mapping every module, sub-module, and interaction path.
Structure before aesthetics. Always.
Reduce Cognitive Load
Group related actions together. Surface primary tasks without requiring users to search. Eliminate screens that exist only for historical technical reasons.
Logical Module Pathways
Map how users move between modules in real workflows. Design transitions that feel natural rather than forcing users to navigate from scratch each time.
High-Frequency Task Access
Identify the top five actions each role performs daily and make those accessible within one or two interactions, not buried in menus.
Scalable for New Modules
Wireframe not just the current scope but the extensible system. Every layout pattern needed to accommodate future features without requiring a redesign.
“In the order management module, four separate screens became one unified view with tabs and inline editable tables. Task time dropped by nearly 30%.”
Key wireframe outcomeA partial language evolved into an enterprise system.
The project required extending a minimal existing design language into a fully documented enterprise design system. This was not a cosmetic upgrade, it was a structural one that would determine whether the platform could scale beyond this project.
Typography Scale
Display, heading, body, caption, and label scales with line-height and tracking specs. The system that replaced the flat type hierarchy the audit identified.
Colour Tokens
Semantic colour roles (primary, surface, status, feedback) mapped from the design language. Tokens, not raw values, ensuring consistency across all contexts.
Component Library
Buttons, inputs, cards, modals, tables, navigation, badges, and status indicators. Every component documented with states, default, hover, active, disabled, error.
Patterns & Documentation
Dashboard layouts, data table patterns, form modules, and chart patterns. Figma library synced with code spec documentation, reusable across all 6 modules.
Operational density. Without visual noise.
Readable Typography
Optimal contrast ratios at all sizes. Hierarchy maintained through weight and size, not colour. Every text style documented and locked in the system.
State-Driven Colour
Simplified colour scheme emphasising task state: active, pending, completed. Colour used as a signal, not decoration, to reduce cognitive effort.
Modular Card Structure
Modular cards for quick scanning of information across modules. Consistent padding, border radius, and elevation created a predictable visual rhythm.
Sticky Toolbars
Sticky toolbars for high-frequency actions ensured users never lost access to the most common tasks, regardless of scroll position within a module.
Design is only as good as how accurately it gets built.
Weeks 1–2 per module
Figma-to-Code Review, shared component specs, spacing tokens, and state definitions. Established naming conventions aligning Figma layers with code components.
Week 3 per module
Visual Consistency Audit, reviewed implemented screens against Figma designs. Tracked deviations and resolved them before moving to the next module.
Week 4 per module
Accessibility & Edge State Review, verified focus states, keyboard navigation, screen reader labels, and error states.
Ongoing
Handoff Documentation, living document covering component specifications, layout grids, padding rules, and usage examples for future modules.
Measurable improvement across every critical metric.
“The system feels more logical, lighter, and faster. Teams that previously needed constant IT support can now handle tasks independently.”
Stakeholder feedback post-launchWhat this project taught us about enterprise design.
Stakeholder empathy drives system clarity
The design reflected how teams actually worked, not the legacy structures imposed by a tool. That shift required listening before designing.
Design systems are living entities
Documentation and flexibility are critical to adoption. A system that cannot evolve will be worked around, not with.
Collaboration is the real accelerator
Regular syncs across design, dev, PM, and QA sustained alignment and speed. Async communication alone would have doubled the timeline.
Migration is a redesign opportunity
Rethinking workflows from the ground up, rather than replicating them digitally, unlocked a more human-centred experience that SAP replacement alone could never have delivered.
City Furniture's SAP-based operations had outgrown their system. Over 8 months, we led the end-to-end redesign: restructuring information architecture, extending a design system, and delivering a scalable platform that now powers hundreds of employees daily.