Design System
/
eCommerce
/
UX
Coefficient
(
9
)
/ About the project
Coefficient is the only design system built for SAP Commerce Cloud, streamlining UX and design workflows for complex B2B commerce environments. Designed for efficiency, it enables teams to rapidly prototype, customize, and scale consumer-grade buying experiences while maintaining consistency with SAP’s platform.
Developed in Figma, Coefficient organizes design assets into foundations, components, and pages—each optimized for responsive layouts across multiple breakpoints. A master component system ensures seamless updates across devices, significantly reducing redundant work. By integrating real-time theming and reusable prototypes, Coefficient accelerates project timelines, fosters collaboration, and enhances the scalability of SAP Commerce Cloud implementations.
/ An opportunity for efficiency
Coefficient, a design system built for SAP’s enterprise-ready commerce solution, was engineered with the idea of being as efficient and scalable as the SAP platform itself. The SAP Commerce Cloud platform allows organizations to spin up a new commerce environment easily and efficiently; however, from the UX and design side, development of flows and prototyping can become redundant from client to client. This problem led to the opportunity to create a product that can be reused and allows clients to not only see changes to theming in real-time, but also allows them to see progress sooner, encouraging for more collaboration and feedback cycles.
/ Focus on expediency
Before beginning on the development of the design system, research was needed to see what user flows were typically presented and what pages were focused on the most by clients. Pouring through a number of SAP Commerce Cloud projects revealed a handful of consumer facing and B2B specific pages that were used across most integrations.
With this information in hand brainstorming a plan of action for what UX and design teams needed most became easier.
/ How it works
Utilizing Figma, the pages identified during research were plotted out into four device sizes: mobile, tablet, laptop and extra-large desktop. This ensured that any components made would scale responsively across major breakpoints. The design system itself was then seperated into three categories: foundations, components and pages.
In each page section lives a master component, an area that houses the main body of the page. UX teams were then able to add, remove or swap out components as necessary. Modifying the master component ensured that the changes translated to each one of the device sizes that were positioned next to it, meaning that one modification was reflected across all devices, therefore reducing work by 4x.
Since the master component was kept separate from the device layouts, the global page animations and prototypes could be used from project to project. This meant setting it up once, further reducing the time spent setting up prototypes for presentations.
/ A ripple effect of updates
Once UX is completed and the project is handed off to the design team, another reduction in time is achieved by updating the foundations with the client's brand colours and fonts. This update has a ripple effect across all components, allowing the design team to focus on the larger visual changes that make the project unique for the client.
Other
Projects
Get in touch