Spartacus is a lean, Angular-based JavaScript open source project for SAP Commerce Cloud. Spartacus talks to SAP Commerce Cloud exclusively through the Commerce REST API. It is is part of SAP’s new journey towards a customizable-yet-upgradable technology for SAP Commerce Cloud installations.

As UI/UX manager at FAIR consulting group, I have designed and implemented several Spartacus based websites and the biggest challenge that I have faced was lack of a universal template for Spartacus. Spartacus’s UI (Accessible via this link) is designed to be simple and interchangeable, hence the UI is very simple and not attractive. Below is a galley of sample screenshots of Spartacus’s default UI implementation. 

So I started defining a set of elements inspired by atomic design. To start with, I defined basic elements that are building blocks of bigger elements and cannot be deconstructed to smaller elements. Those are HTML tags, such as a form label, colours, an input or a button.

Next I used the design system that I created for basic Spartacus projects to introduce all necessary components that match default Spartacus components for example buttons. the below image shows a comparison between default Spartacus button and newly created button with several variations. Since newly created button is using global variables it can be updated to fit requirements of any brand guideline. As illustrated in the below screenshot, buttons and variations are using centralised colour variables which makes them versatile and flexible. 

Based on previous projects then I introduced other components. this was to increase reusability of components that were generated from past projects. For example, carousel component was produced for project A that has gone trough user testing and usability testing as part of the project. using reusable components in the design also helps with data integration as a component is produced and unit tested. Below image shows an overview of all components that I have created and used across multiple websites, all indexed in the new template.