Datto Commerce

B2B Commerce Platform

Introduced design into an engineer-built platform and got it ready for a North American launch.

Senior Product Designer · B2B SaaS / E-commerce

THE SITUATION
Datto Commerce was built by a team of principal engineers with zero design input. It worked — it just hadn't been built for the people using it. No design system, a heavy backlog, a dev team used to calling their own shots, and a North American market launch on the horizon.

WHAT I DID
I pulled the Bootstrap Figma kit, stress tested it against the actual product, and had a working design system base within the first week. I got into the team's Jira workflow properly rather than bolting on a separate process, and built a tone of voice guide to reduce instructional overload across the platform. The biggest UX challenge was onboarding users through complex Xero and Lenovo integration setups, I designed a guided flow with education and progress checkpoints built in.

OUTCOMES

  • Platform launched in North America, followed by a company acquisition

  • Guided onboarding flow reduced setup friction for complex integrations

  • Dev velocity accelerated by 60% through a structured design-to-dev pipeline

"They'd been doing this without a designer for a long time. The pushback was fair. The job was to make the value obvious fast."

Logo_Datto_Dark.png
Clean and modern UI/UX design for the Datto Commerce Onboarding flow, specifically the 'Theme' step for setting Primary Color, Secondary Color, and uploading Logo and Favicon for online store branding.
User Interface (UI) design for the Datto Commerce Onboarding Checklist, showing progress on 'Company and themes' and expandable sections for 'Quickstart with Commerce' actions like 'Enabling payments'.
Dashboard view of the Datto Commerce Quotes management screen, displaying key metrics like 'All', 'Draft', 'Sent', 'Overdue', and 'Won' quotes, demonstrating a clear sales and quoting workflow interface.
UI/UX design of the Datto Commerce Supplier detail page for Lenovo, showing fields for Product feeds, Electronic ordering, and Shipping information for efficient IT procurement.
UI/UX design of the Datto Commerce Purchase Order (PO) creation and detail screen, showing line items for products (TSXML3), order dates, and fields for Supplier and Recipient details.

“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

Appen: AI Gig Economy