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 had been built by a talented team of principal engineers who'd gotten a lot done without a designer, and it showed. The product worked, but it hadn't been shaped around the people using it. There was no design system, a growing backlog, and a North American launch on the horizon. My job was to add design value without disrupting a team that had its own rhythm.

WHAT I DID
Rather than coming in with a redesign agenda, I started by listening and moving quickly on things that would make everyone's lives easier. I pulled the Bootstrap Figma kit, stress-tested it against the real product, and had a working design system base ready within the first week, something the team could actually use straight away. I joined their Jira workflow rather than layering on a separate process, and put together a tone of voice guide to cut down on the instructional overload that had crept in across the platform. The meatiest UX challenge was onboarding, walking users through complex Xero and Lenovo integrations, so I designed a guided flow with built-in education and progress checkpoints to make that journey feel manageable.

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