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.

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.

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.

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.

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.