Skip to content
WorkLabAboutLet’s Talk →
01 / 03
Side-by-side comparison of the legacy CCS Inventory SKU History desktop interface and the redesigned cloud interface with sales charts and inventory information

SKU History Chart - Before & After

Ability | OMS

COMPANY Ability Commerce

I helped transform Ability Commerce's legacy order management system into a modern, responsive web application. My work ranged from hand-drawn sketches and Adobe XD designs to implementing interface updates with Angular, TypeScript, and Bootstrap. I worked with developers in Agile sprints, using Jira to track tasks and issues.

Problems Solved

  • Modernized outdated screens and complex workflows.
  • Simplified navigation and improved UI consistency across modules.
  • Redesigned interfaces to work across different screen sizes.

DISCIPLINES

UI/UX Design · Responsive Design · Front-End Development

TOOLS & TECHNOLOGIES

  • Adobe corporate symbol © Adobe. Source: https://main--cc--adobecom.aem.live/cc-shared/assets/img/adobe-corp-logo.svg. Original geometry; monochrome display and trimmed padding.Adobe XD
  • Visual Studio product symbol © Microsoft. Source: https://visualstudio.microsoft.com/wp-content/uploads/2021/10/Product-Icon.svg. Original path geometry; monochrome display.Visual Studio
  • Font Awesome Free by Fonticons, Inc. — https://fontawesome.com — Icons licensed CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ — SVG paths unchanged.Angular
  • Font Awesome Free by Fonticons, Inc. — https://fontawesome.com — Icons licensed CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ — SVG paths unchanged.TypeScript
  • PrimeNG symbol © PrimeTek. Shield with original mascot paths used as negative space. Source: https://www.primefaces.org/presskit/primeng-logo-black.svg. Original path geometry; monochrome display.PrimeNG
  • Font Awesome Free by Fonticons, Inc. — https://fontawesome.com — Icons licensed CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ — SVG paths unchanged.Bootstrap
  • Font Awesome Free by Fonticons, Inc. — https://fontawesome.com — Icons licensed CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ — SVG paths unchanged.HTML
  • Font Awesome Free by Fonticons, Inc. — https://fontawesome.com — Icons licensed CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ — SVG paths unchanged.CSS
  • Font Awesome Free by Fonticons, Inc. — https://fontawesome.com — Icons licensed CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ — SVG paths unchanged.Jira
Font Awesome Pro © Fonticons, Inc. — https://fontawesome.com/licensePreviousAbility | RimmerFont Awesome Pro © Fonticons, Inc. — https://fontawesome.com/licenseAll WorkFont Awesome Pro © Fonticons, Inc. — https://fontawesome.com/licenseNextAbility | Web Store
© 2026 Roy Vella
All work ↗Changelog · v0.001