Amedeo

I am a UI/UX manager with over 10 years of experience in web design and development, and an excellent track record of designing, building and delivering online systems with strong background in transforming data heavy interfaces into intuitive and user-friendly applications. I have led teams of local and off-shore designers and developers.

Follow me @

Search

An Ecommerce template for SAP Spartacus
  -    -    -  An Ecommerce template for SAP Spartacus

An Ecommerce template for SAP Spartacus

  • Project name: POC  
  • Project start: Sep 2021 
  • Project duration: 3 months

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. 

Atomic design at the core

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. 

Colour pallet, Figma
Typography, Figma

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. 

Example comparison between default Spartacus and atomic design inspired components

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. 

Figma prototype

Here is the link to Figma prototype 

Play Video

Category:

Date: