Datto Commerce

Responsive Web Design System built from Bootstrap and customised to Shopify.

“We need a design system based on Bootstrap origins with a sprinkle of Shopify that needs to cater for our existing engineered and built platform.”

I worked with Datto to build a comprehensive, responsive web design system from the ground up. Leveraging the best practices of Shopify's Polaris framework, we engineered a scalable component library that ensures a cohesive visual language and streamlined workflows across all of Datto’s web products.

Key Focus: Responsive Design, Scalable Components, Streamlined Workflows, Unified Experience.
Logo_Datto_Dark.png
The Datto Commerce Quotes management screen, featuring status Badges (e.g., 'Won,' 'Sent') to visually track sales progression, alongside key metrics like Overdue and Won quote totals for MSPs.
UI/UX specification for Datto Commerce Buttons, displaying size and state variations for Primary, Secondary, Outline, and Disabled button types as a core part of the platform's Design System.
Design System specification for Datto Commerce Input Fields, illustrating Default, Error (red), and Success (green) states for consistent data entry and form validation within the IT commerce platform.
Design System documentation of the Datto Commerce Headers/Main UI components, showcasing aggregated data cards for Sales, Purchases, Suppliers, and Quotes dashboards for MSP efficiency.
Design System documentation of the Datto Commerce Spacing and Elevation system, providing visual rules for margins, padding, and drop shadows to ensure visual hierarchy and consistency.
Previous

vintrace: native mobile systems