SMITH COMMERCE // Platform Design System / Design and Strategy Leadership
Coefficient eCommerce Design System
The Challenge
Prior to my arrival at Smith, the design team started from scratch. Furthermore, they worked in disparate tools: Sketch, Adobe XD, Adobe Photoshop, Zeplin, and InVision. Most important of all, there was no consideration for the primary technology platform Smith implemented most often: SAP Commerce.
The vision was to craft a design system using modern tools and provide a headless design solution that had foundational compatibility with SAP Commerce.
I completed version 1.0 in just one week in Figma.
What is Coefficient?
Coefficient is a design system and design catalyst that Smith uses on all ecommerce projects.
We constructed Coefficient as a set of connected, modular elements that allow for faster and more powerful design & production of sites. Alter a component in the library and see it automatically propagate throughout your design.
It features the key components and page templates along the purchase path for any ecommerce project but worked best for SAP Commerce. The page templates feature research-backed best practices for superior customer experiences.
-
Went from five tools to one thereby saving on license fees, training, and process improvements.
-
The components and templates were built to accommodate everything from home and landing pages, to shopping and product pages, and to cart / checkout.
Version 1.0 was built specifically for SAP Commerce.
Version 2.0 was built as a headless design system.
-
Project delivery times were cut in half on average.
-
Coefficient became a unifying source for design best practices as our research and data led to incremental improvements to the experience over time.
-
Because Smith only had technical project managers, we built tools inside Coefficient to allow PMs to track progress and communicate design details to functional and technical leads.
Iterative releases allowed for the team to take over the tactical improvements to Coefficient.
They revised the guts of the design system as Figma released more powerful tools. Furthermore, the team added tracking tools to make it easier for project members to understand status and scope of design.
