CPM ERP Cloud

CPM ERP Cloud

CPM ERP Cloud

Aug 1, 2025

0 views

Discover how I led the UX and design system for CPM ERP Cloud, a web-based enterprise platform. This case study covers data-heavy workflows, scalable components, and measurable outcomes that improved usability and sped up development.

CPM ERP Cloud
#
Project
CPM ERP Cloud
#
Client
CPM Software (Palamut Group)
#
Industry
Enterprise Resource Planning (ERP)
#
Year
2021 – 2022
#
Platforms
Web (Desktop)
#
Role
Product Designer (UI/UX)
#
Location
On-Site
#
Services
UX Research, Design System, UI Design, Low-Code Builder Design, ERP Workflow Optimization, Handoff
#
Tools & Stack
Figma, Visual Studio, SQL Server, React/TypeScript, DevExtreme, Bootstrap, SaSS
#
Project
CPM ERP Cloud
#
Client
CPM Software (Palamut Group)
#
Industry
Enterprise Resource Planning (ERP)
#
Year
2021 – 2022
#
Platforms
Web (Desktop)
#
Role
Product Designer (UI/UX)
#
Location
On-Site
#
Services
UX Research, Design System, UI Design, Low-Code Builder Design, ERP Workflow Optimization, Handoff
#
Tools & Stack
Figma, Visual Studio, SQL Server, React/TypeScript, DevExtreme, Bootstrap, SaSS
#
Project
CPM ERP Cloud
#
Client
CPM Software (Palamut Group)
#
Industry
Enterprise Resource Planning (ERP)
#
Year
2021 – 2022
#
Platforms
Web (Desktop)
#
Role
Product Designer (UI/UX)
#
Location
On-Site
#
Services
UX Research, Design System, UI Design, Low-Code Builder Design, ERP Workflow Optimization, Handoff
#
Tools & Stack
Figma, Visual Studio, SQL Server, React/TypeScript, DevExtreme, Bootstrap, SaSS

CPM ERP Cloud is a web-based ERP platform combined with a low-code module creator tool, built to modernize a legacy enterprise system. I led the design system, UX research, and UI design, ensuring the platform could handle 400+ workflows across 12 modules with both dark and light modes.

ERP systems are notorious for complexity and poor usability. This project aimed to:

  • Bring clarity and consistency into daily enterprise workflows.

  • Provide a low-code environment for non-developers to create new ERP modules.

  • Deliver a modern design system flexible enough for finance, HR, sales, and inventory operations.

  • Simplify dense ERP forms and tables without losing detail.

  • Introduce a unified design language with tokens (typography, color, spacing).

  • Build light and dark themes for accessibility and comfort.

  • Deliver a low-code builder to empower business teams.

  • Reduce dev/design misalignment with clear tokens + component specs.

  • End-to-end ERP screens (Sales, Invoices, Orders, Finance, HR, etc.)

  • Low-code module creator UI (drag & drop, property side panels).

  • Design system tokens (color, typography, spacing, components)

  • Dark/Light mode UI themes

  • SC Icon Pack + Fluent Icons (custom 300+ line icons designed manually for ERP needs).

  • Design documentation for handoff to devs (Figma → VS/React/SQL team).

  • UX flows, wireframes, and prototypes

The concept followed enterprise familiarity + modern clarity:

  • Adopted elements of Microsoft Fluent design language.

  • Balanced data density with legibility via type scales & spacing.

  • Used empty state illustrations for onboarding and clarity.

  • Dark & Light themes built with consistent token mapping for seamless switching.

  • Modular side panels allowed both customization and consistency.

->
Research
heuristic evaluation of legacy systems + competitor analysis
->
Information architecture
mapped 12 modules, 400+ flows
->
Wireframing
low–mid fidelity in Figma, validated with PMs
->
Visual design
set type scale, color tokens, and responsive grid
->
Testing
ran pilot with finance & HR users, iterated on table density and form flows
->
Research
heuristic evaluation of legacy systems + competitor analysis
->
Information architecture
mapped 12 modules, 400+ flows
->
Wireframing
low–mid fidelity in Figma, validated with PMs
->
Visual design
set type scale, color tokens, and responsive grid
->
Testing
ran pilot with finance & HR users, iterated on table density and form flows
->
Research
heuristic evaluation of legacy systems + competitor analysis
->
Information architecture
mapped 12 modules, 400+ flows
->
Wireframing
low–mid fidelity in Figma, validated with PMs
->
Visual design
set type scale, color tokens, and responsive grid
->
Testing
ran pilot with finance & HR users, iterated on table density and form flows
  • Built a component-based system (forms, tables, side panels, toolbars).

  • Designed low-code builder panels (Properties, Layout, Interactions).

  • Documented dark/light token maps for dev teams  .

  • Delivered interactive prototypes for user validation.

  • Reduced form-filling fatigue by streamlining repetitive fields.

  • Improved workflow speed with sticky headers, collapsible sections.

  • Created theme parity (light/dark) with no loss of contrast/accessibility.

  • Delivered handoff-ready UI kits in Figma, synced with dev system.

->
~40%
faster screen delivery after design system adoption
->
~22%
reduction in reported usability issues during pilot
->
90%
of modules implemented with new system within 6 months
->
~40%
faster screen delivery after design system adoption
->
~22%
reduction in reported usability issues during pilot
->
90%
of modules implemented with new system within 6 months
->
~40%
faster screen delivery after design system adoption
->
~22%
reduction in reported usability issues during pilot
->
90%
of modules implemented with new system within 6 months
->
~40%
faster screen delivery after design system adoption
->
~22%
reduction in reported usability issues during pilot
->
90%
of modules implemented with new system within 6 months
->
~40%
faster screen delivery after design system adoption
->
~22%
reduction in reported usability issues during pilot
->
90%
of modules implemented with new system within 6 months
->
~40%
faster screen delivery after design system adoption
->
~22%
reduction in reported usability issues during pilot
->
90%
of modules implemented with new system within 6 months

[TYPE/FACE:Primary]

Roboto

Thin

Weight: 100
Hairline

Thin Italic

Weight: 100Italic
Hairline

Light

Weight: 300
Light

Light Italic

Weight: 300Italic
Light

Regular

Weight: 400
Regular

Italic

Weight: 400Italic
Regular

Medium

Weight: 500
Medium

Medium Italic

Weight: 500Italic
Medium

Bold

Weight: 700
Bold

Bold Italic

Weight: 700Italic
Bold

Black

Weight: 900
Black

Black Italic

Weight: 900Italic
Black

[TYPE/FACE:Primary]

Roboto

Thin

Weight: 100
Hairline

Thin Italic

Weight: 100Italic
Hairline

Light

Weight: 300
Light

Light Italic

Weight: 300Italic
Light

Regular

Weight: 400
Regular

Italic

Weight: 400Italic
Regular

Medium

Weight: 500
Medium

Medium Italic

Weight: 500Italic
Medium

Bold

Weight: 700
Bold

Bold Italic

Weight: 700Italic
Bold

Black

Weight: 900
Black

Black Italic

Weight: 900Italic
Black

[TYPE/FACE:Primary]

Roboto

Thin

Weight: 100
Hairline

Thin Italic

Weight: 100Italic
Hairline

Light

Weight: 300
Light

Light Italic

Weight: 300Italic
Light

Regular

Weight: 400
Regular

Italic

Weight: 400Italic
Regular

Medium

Weight: 500
Medium

Medium Italic

Weight: 500Italic
Medium

Bold

Weight: 700
Bold

Bold Italic

Weight: 700Italic
Bold

Black

Weight: 900
Black

Black Italic

Weight: 900Italic
Black

[TYPE/FACE:Primary]

Roboto

Thin

Weight: 100
Hairline

Thin Italic

Weight: 100Italic
Hairline

Light

Weight: 300
Light

Light Italic

Weight: 300Italic
Light

Regular

Weight: 400
Regular

Italic

Weight: 400Italic
Regular

Medium

Weight: 500
Medium

Medium Italic

Weight: 500Italic
Medium

Bold

Weight: 700
Bold

Bold Italic

Weight: 700Italic
Bold

Black

Weight: 900
Black

Black Italic

Weight: 900Italic
Black
BORDER.ULTRALIGHT
--color-border-ultralight--light
BORDER.LIGHT
--color-border-light--light
BORDER
--color-border-default--light
TEXT.TEXT30
--color-text-text30--light
TEXT.TEXT40
--color-text-text40--light
TEXT.TEXT50
--color-text-text50--light
TEXT.SUBTEXT
--color-text-subtext--light
TEXT.DEFAULT
--color-text-default--light
TEXT.TITLE
--color-text-title--light
BG.3
--color-background-bg3--light
BG.2
--color-background-bg2--light
BG.DEFAULT
--color-background-default--light
SHADOW
--color-shadow-default--light
BG.CARD
--color-background-bgcard--light
PURE.WHITE
--color-white-pure--light
SUCCESS.LIGHT
--color-success-light--light
SUCCESS.DARK
--color-success-dark--light
SUCCESS
--color-success-default--light
ERROR.LIGHT
--color-error-light--light
ERROR.DARK
--color-error-dark--light
ERROR
--color-error-default--light
WARNING.LIGHT
--color-warning-light--light
WARNING.DARK
--color-warning-dark--light
WARNING
--color-warning-default--light
SECONDARY.LIGHT
--color-secondary-light--light
SECONDARY.DARK
--color-secondary-dark--light
SECONDARY
--color-secondary-default--light
PRIMARY.LIGHT
--color-primary-light--light
PRIMARY.DARK
--color-primary-dark--light
PRIMARY
--color-primary-default--light
BORDER.ULTRALIGHT
--color-border-ultralight--light
BORDER.LIGHT
--color-border-light--light
BORDER
--color-border-default--light
TEXT.TEXT30
--color-text-text30--light
TEXT.TEXT40
--color-text-text40--light
TEXT.TEXT50
--color-text-text50--light
TEXT.SUBTEXT
--color-text-subtext--light
TEXT.DEFAULT
--color-text-default--light
TEXT.TITLE
--color-text-title--light
BG.3
--color-background-bg3--light
BG.2
--color-background-bg2--light
BG.DEFAULT
--color-background-default--light
SHADOW
--color-shadow-default--light
BG.CARD
--color-background-bgcard--light
PURE.WHITE
--color-white-pure--light
SUCCESS.LIGHT
--color-success-light--light
SUCCESS.DARK
--color-success-dark--light
SUCCESS
--color-success-default--light
ERROR.LIGHT
--color-error-light--light
ERROR.DARK
--color-error-dark--light
ERROR
--color-error-default--light
WARNING.LIGHT
--color-warning-light--light
WARNING.DARK
--color-warning-dark--light
WARNING
--color-warning-default--light
SECONDARY.LIGHT
--color-secondary-light--light
SECONDARY.DARK
--color-secondary-dark--light
SECONDARY
--color-secondary-default--light
PRIMARY.LIGHT
--color-primary-light--light
PRIMARY.DARK
--color-primary-dark--light
PRIMARY
--color-primary-default--light
BORDER.ULTRALIGHT
--color-border-ultralight--light
BORDER.LIGHT
--color-border-light--light
BORDER
--color-border-default--light
TEXT.TEXT30
--color-text-text30--light
TEXT.TEXT40
--color-text-text40--light
TEXT.TEXT50
--color-text-text50--light
TEXT.SUBTEXT
--color-text-subtext--light
TEXT.DEFAULT
--color-text-default--light
TEXT.TITLE
--color-text-title--light
BG.3
--color-background-bg3--light
BG.2
--color-background-bg2--light
BG.DEFAULT
--color-background-default--light
SHADOW
--color-shadow-default--light
BG.CARD
--color-background-bgcard--light
PURE.WHITE
--color-white-pure--light
SUCCESS.LIGHT
--color-success-light--light
SUCCESS.DARK
--color-success-dark--light
SUCCESS
--color-success-default--light
ERROR.LIGHT
--color-error-light--light
ERROR.DARK
--color-error-dark--light
ERROR
--color-error-default--light
WARNING.LIGHT
--color-warning-light--light
WARNING.DARK
--color-warning-dark--light
WARNING
--color-warning-default--light
SECONDARY.LIGHT
--color-secondary-light--light
SECONDARY.DARK
--color-secondary-dark--light
SECONDARY
--color-secondary-default--light
PRIMARY.LIGHT
--color-primary-light--light
PRIMARY.DARK
--color-primary-dark--light
PRIMARY
--color-primary-default--light
BORDER.ULTRALIGHT
--color-border-ultralight--light
BORDER.LIGHT
--color-border-light--light
BORDER
--color-border-default--light
TEXT.TEXT30
--color-text-text30--light
TEXT.TEXT40
--color-text-text40--light
TEXT.TEXT50
--color-text-text50--light
TEXT.SUBTEXT
--color-text-subtext--light
TEXT.DEFAULT
--color-text-default--light
TEXT.TITLE
--color-text-title--light
BG.3
--color-background-bg3--light
BG.2
--color-background-bg2--light
BG.DEFAULT
--color-background-default--light
SHADOW
--color-shadow-default--light
BG.CARD
--color-background-bgcard--light
PURE.WHITE
--color-white-pure--light
SUCCESS.LIGHT
--color-success-light--light
SUCCESS.DARK
--color-success-dark--light
SUCCESS
--color-success-default--light
ERROR.LIGHT
--color-error-light--light
ERROR.DARK
--color-error-dark--light
ERROR
--color-error-default--light
WARNING.LIGHT
--color-warning-light--light
WARNING.DARK
--color-warning-dark--light
WARNING
--color-warning-default--light
SECONDARY.LIGHT
--color-secondary-light--light
SECONDARY.DARK
--color-secondary-dark--light
SECONDARY
--color-secondary-default--light
PRIMARY.LIGHT
--color-primary-light--light
PRIMARY.DARK
--color-primary-dark--light
PRIMARY
--color-primary-default--light

[ICON:Primary]

[ICON:Primary]

SecretoCho Icons V0.3

SecretoCho Icons V0.3

This was a full-spectrum design role: I touched everything from IA to iconography, from system tokens to ERP forms. The result was not just a product redesign but the foundation of a sustainable design system for CPM.

->
Hakkı Kılınç
CEO — CPM Software
->
Süleyman Kıvrak
CTO — CPM Software
->
Sevil Yılmaz
Full Stack Developer — CPM Software
->
Abdullah Kahvecioglu
Product Designer — CPM Software
->
Hakkı Kılınç
CEO — CPM Software
->
Süleyman Kıvrak
CTO — CPM Software
->
Sevil Yılmaz
Full Stack Developer — CPM Software
->
Abdullah Kahvecioglu
Product Designer — CPM Software
->
Hakkı Kılınç
CEO — CPM Software
->
Süleyman Kıvrak
CTO — CPM Software
->
Sevil Yılmaz
Full Stack Developer — CPM Software
->
Abdullah Kahvecioglu
Product Designer — CPM Software

SecretoCho Design 2025

© 2022 CPM Software. Case study represents design work completed during my employment. Screens and assets shown for portfolio purposes only.

#

#

#

#