Skip to content
WorkLabAboutLet’s Talk →
01 / 13

Web Store Administration

Storefront & Checkout UX

Storefront Examples

  • Ability Commerce QA ↗
  • Ability Commerce | Rimmer ↗
  • Abbeon ↗
Original Adobe XD export showing theme selection

Theme Selection · XD design

Ability | Web Store

COMPANY Ability Commerce

I designed web store management interfaces and customer-facing shopping experiences, covering theme customization, product categories, merchandising, cart, and checkout.

Problems Solved

  • Simplified store setup and theme customization.
  • Improved product organization and checkout flows.
  • Designed responsive storefronts for desktop and mobile.
  • Evaluated storefront accessibility using Google Lighthouse and WAVE.

DISCIPLINES

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

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.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.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.Angular
  • 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
  • Google Lighthouse
  • WAVE
  • 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 | OMSFont Awesome Pro © Fonticons, Inc. — https://fontawesome.com/licenseAll WorkFont Awesome Pro © Fonticons, Inc. — https://fontawesome.com/licenseNextAbility | POS
© 2026 Roy Vella
All work ↗Changelog · v0.001