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

A B2B/B2C SAP Spartacus E-commerce system using atomic design and style guide
  -    -    -  A B2B/B2C SAP Spartacus E-commerce system using atomic design and style guide

A B2B/B2C SAP Spartacus E-commerce system using atomic design and style guide

  • Project name: Essity Australia (https://connect.asaleocare.com/au/)
  • Project start: Sep 2020 
  • Project duration: 3 months
  • Technologies: SAP Spartacus 3, AdobeXD 

Essity Australasia (previously Asaleo Care) is a one of the biggest personal care and hygiene companies. It manufactures, sells and distributes consumer goods across categories such as feminine, incontinence, baby care, consumer tissue and skilled hygiene.  Essity products are widely used by households and companies in Australia, New Zealand and the Pacific Islands. With over 15 manufacturing and distribution sites, Essity Australasia works with some of Australia’s most iconic pharmacies and retailers.

Coding style-guide for SAP Spartacus

While working on the Spartacus-based project, I realized that even though our team did implement the Angular style guide, there was no overarching coding standard that covered both coding language (Angular) and the system (Spartacus). Therefore, I believe there is a need for a coding standard that covers both Angular and Spartacus to ensure consistency is maintained. Hence, I wrote a coding style guide that shows best practice examples, common mistakes and tips and tricks to read and write Spartacus code successfully.

UI design kit

I also took the challenge to produce a UI design kit so that elements and overall look and feel of the website is consistently aligned with the brand guidelines. I used atomic design methodology as it complies with centralized style approach of Spartacus. the UI design kit includes:

  • Grid sizes, columns and gutters for desktop, tablet and mobile views.
  • Color palette with variable names that later used in front-end development
  • Typography
  • Atoms, molecules, organism, templates and pages.
Spartacus style guide using Adobe XD

SAP Spartacus development

Development with SAP Spartacus was a challenging task as I was not exposed to SAP ecosystem and I had to learn so many things on the fly. one of the things that helped a lot with learning Spartacus was engaging with the community at SAP Spartacus community channel. Many answers to common beginner’s questions are available at Stackoverflow using [spartacus-storefront] tag. Overall application’s architecture is very lean and heavy dependent on api calls which makes very abstract, lightweight and flexible. I also published a blog post about the latest version of Spartacus at FAIR consulting group’s website.

Using centralised variables in coding

Overall from UX research to UI design and front-end development, I have had a good experience where I could see how problems that we discovered translated into a beautiful solution that helps many retailers.

Here is a link to the profile at FAIR consulting group’s website.