apidays Paris 2022 - How GraphQL accelerates B2B Composable Commerce, Marco Egli, Intelliact AG

apidays Paris 2022 - APIs the next 10 years: Software, Society, Sovereignty, Sustainability
December 14, 15 & 16, 2022

How GraphQL accelerates B2B Composable Commerce
Marco Egli, Senior Consultant and Solution Architect at Intelliact AG
------

Check out our conferences at https://www.apidays.global/

Do you want to sponsor or talk at one of our conferences?
https://apidays.typeform.com/to/ILJeAaV8

Learn more on APIscene, the global media made by the community for the community:
https://www.apiscene.io

Explore the API ecosystem with the API Landscape:
https://apilandscape.apiscene.io/

Deep dive into the API industry with our reports:
https://www.apidays.global/industry-reports/

Subscribe to our global newsletter:
https://apidays.typeform.com/to/i1MPEW

Transcript

1. Intelliact AG Siewerdtstrasse 8 CH-8050 Zürich T. +41 (44) 315 67 40 mail@intelliact.ch www.intelliact.ch How GraphQL accelerates B2B Composable Commerce Marco Egli, Intelliact AG, 16.12.2022 https://www.linkedin.com/in/marco-egli-intelliact/ APIDAYS PARIS 2022
2. https://www.linkedin.com/in/marco-egli-intelliact/ APIDAYS PARIS 2022 2
3. 2023 SERIES OF EVENT New York May 16&17 Australia October 11&12 Singapore April 12&13 Helsinki & North June 5&6 Paris SEPTEMBER London November 15&16 June 28-30 SILICON VALLEY March 14&15 Dubai & Middle East February 22&23
4. 3 Photo by Kenny Eliason on Unsplash
5. 4 Photo by Alexander Grey on Unsplash
6. 5 Photo by Robert Anasch on Unsplash Quantity
7. Products our B2B commerce customers sell APIDAYS PARIS 2022 6
8. For B2B products, other attributes are important APIDAYS PARIS 2022 7 Length Connector B Connector A Implant System Platform Platform Drills Torque Ratchet The sum of the parts results in the functional product 1 NC + 1 NO 1 NC + 1 NO Screw Terminal Gold Contacts
9. For B2B products, other attributes are important APIDAYS PARIS 2022 8 Length Connector B Connector A Implant System Platform Platform Drills Torque Ratchet The sum of the parts results in the functional product 1 NC + 1 NO 1 NC + 1 NO Screw Terminal Gold Contacts Configurable Products
10. https://shop.thommenmedical.com APIDAYS PARIS 2022 UX and visual design by Eyekon https://eyekon.ch/
11. THOMMEN MEDICAL E-SHOP From Customer Journey to Architecture: Many ways to find the needed product 10
12. Customer Journey: many ways to find the needed product APIDAYS PARIS 2022 11 Navigation in den Kategorien User Journeys durch die Ansichten und Funktionen 4 Favoriten Produktfilter Bundle Promo Gutschein einlösen Bezahl- möglichkeiten Verfügbarkeit Verfügbarkeit Kons.lager Zusatz- produkte Konfigurator Produktdetails Bundle Promo Produktpreise (Brutto) Land (Währung) / Sprache Katalog- ansicht Kategorien Suche Produktlisten Produkt- detail Check-Out Adressen Bezahlung myThommen Favoriten Meine Daten Produktpreise (Brutto) Warenkorb Adressen Produktpreise (Brutto) Kunde Warenkörbe/ Offene Bestellungen Spezial Angebote Kundenlisten Kundenerfas- sung/ -Freigaben Bundles Gutscheine «agiere als Kunde» Katalogbereich Konto-Verwaltung Intern / Sales Agent Zusatz- produkte Scan Planungs- ergebnis Excel-Import Scan to Warenkorb Helper Tools Bestellung Staffelung der Lieferung Produktlisten Produktlisten Versand Order Tracking Produktliste Bundle Promo Dashboard Bestellliste Gutscheine Produktlisten (häufig gekauft) In Kategorien Einstieg Landing Page Favoriten Suche Produktlisten (Featured) News Commerce-Bereich Search Engine (Google) Echtzeit- Zusammenarbeit mit AD, SA Echtzeit- Zusammenarbeit mit SA, AD Staffelung der Lieferung Bestellliste Gutscheine Meine Mitarbeiter Legende: 1. Generalistin: Klassische Suche 2. Expertin: Digitaler Workflow 3. Praxis Assistentin: Bestellung 4. Sales Agent/AD/(ID): Beratung 5. Distributor: Grossbestellung Each user group searches for products individually
13. Navigating through the categories to the product APIDAYS PARIS 2022 12 Navigating in the categories
14. Scan-to-Cart APIDAYS PARIS 2022 13 Scan-to-Cart
15. Search on Google APIDAYS PARIS 2022 14 Search on Google
16. Matching products, tools, accessories APIDAYS PARIS 2022 15 Suche bei Google Matching products, tools, accessories
17. «A standard shop solution solves 80% of use cases with normal effort. The individual 20% and all future, new features cost many times more.» 16
18. «A standard shop solution solves 80% of use cases with normal effort. The individual 20% and all future, new features cost many times more.» 17 The product model must match the business model
19. The frontend for the customers is tailor- made to the customers' use case and to the uniqueness of the product sold. The building blocks used are standard building blocks and guarantee high robustness and scalability. Multi-Markets Multi-Languages Almost infinite parallel users The interfaces are powered by GraphQL (wherever possible) and JSON-APIs Architecture: Composable Commerce APIDAYS PARIS 2022 18 OMS PWA CMS API, GraphQL Search Payment Analytics ERP MAM
20. The frontend for the customers is tailor- made to the customers' use case and to the uniqueness of the product sold. The building blocks used are standard building blocks and guarantee high robustness and scalability. Multi-Markets Multi-Languages Almost infinite parallel users The interfaces are powered by GraphQL (wherever possible) and JSON-APIs Architecture: Composable Commerce APIDAYS PARIS 2022 19 OMS PWA CMS Search
21. A headless CMS with integrated media management and a GraphQL interface provides the category structure and additional products content: Hygraph (GraphCMS) A headless commerce and distributed order management enables a globally uniform user experience: CommerceLayer A lightning fast search finds products and categories even with inaccurate entries: Algolia The ERP is the backbone for master data and order processing. The event driven interface enables agile development: SAP + CAS The Stack APIDAYS PARIS 2022 20 1) Intelliact AG is an independent service agency. The software used was selected for this specific use case. Each situation is evaluated individually. 2) All logos used are under copyright protection
22. «In the composable enterprise architecture, the tech stack is built on cloud services and capabilities, which can be well described with the MACH definition, focusing on flexibility, scalability and APIs.» 21
23. «In the composable enterprise architecture, the tech stack is built on cloud services and capabilities, which can be well described with the MACH definition, focusing on flexibility, scalability and APIs.» 22 And this is where it gets handy with GraphQL
24. Navigating through the categories to the product APIDAYS PARIS 2022 23
25. Scan-to-Cart APIDAYS PARIS 2022 24 Scan-to-Cart
26. Search on Google APIDAYS PARIS 2022 25 Search on Google
27. Matching products, tools, accessories APIDAYS PARIS 2022 26 Suche bei Google Matching products, tools, accessories
28. «With GraphQL, different views on the same data are possible. In the frontend, the relevant data can be retrieved according to the situation without having to make any changes in the backend. This enables flexible, independent and fast development.» 27
29. «With GraphQL, different views on the same data are possible. In the frontend, the relevant data can be retrieved according to the situation without having to make any changes in the backend. This enables flexible, independent and fast development.» 28 Fewer requests with no overfetching increase performance
30. From zero to feature complete in 6 months App package size on initial load: 250 kB Add item to cart in Zurich: 100 ms Add item to cart in Singapore: 100 ms Navigating the categories: instant, everywhere Performance matters APIDAYS PARIS 2022 29 Lighthouse Report in December 2022 https://webpagetest.org/ Report in August, Europe
31. Verdict of the Jury for the 5 Awards at Best of Swiss Web 2022 „The Thommen Medical B2B webshop is a lightning-fast solution with a very wide range of functions. The jury particularly liked how the complexity of the application scope was handled. The shop is mature and can be used easily. The implementation is flawless and has a modern integrated architecture all the way to the ERP backend.“
32. With GraphQL, the following goals were easily achieved Short time to market To underline Thommen Medicals claim: “Driven by science, not trends.” Low Risk for vendor lock-in No redundant data management Easy Integration with existing content High developer productivity with interfaces for complex B2B functions Photo by Anders Jildén on Unsplash
33. https://hmi.eao.com APIDAYS PARIS 2022 UX and visual design by Eyekon https://eyekon.ch/ Gold in «Productivity» Silver in «Digital Commerce» and «Business» Bronze in «Usability»
34. Products in hundreds of thousands of variants 33 Series: 82 Series: 45 Show new product variants on what pages?
35. Products: Multiple Classification 34 Function: Emergency stop switch Market: Rail transport Application: Crane vehicles Series: 82 Function: lluminated pushbutton Series: 45 Function: Stop switch Market: Heavy Duty Market: Machinery Market: Heavy Duty Application: Crane vehicles Application: Construction Machinery Application: Toilet facilities Application: Passenger convenience
36. Products: Multiple Classification 35 Function: Emergency stop switch Market: Rail transport Application: Crane vehicles Series: 82 Function: lluminated pushbutton Series: 45 Function: Stop switch Market: Heavy Duty Market: Machinery Market: Heavy Duty Application: Crane vehicles Application: Construction Machinery Application: Toilet facilities Application: Passenger convenience GraphQL allows nested queries
37. B2B Commerce that scales Typed product model that supports the customer journey Stable API for all transactional business logic Flexible GraphQL for all product content to the frontend Short Lifecycles Long Lifecycles Forward compatibility for SPAs and mobile apps Photo by Mario Dobelmann on Unsplash
38. Keep Playing! Photo by Robert Collins on Unsplash
40. 39 Abstract: Thommen Medical's award-winning B2B webshop was developed from the first workshop to feature complete within 6 months. This speed was made possible by Composable Commerce and a MACH architecture. GraphQL made it possible to satisfy the diverse needs of the end customers flexibly and precisely on the track from customer journey to success.
41. Senior Consultant & Solution Architect at Intelliact since 2001 Studied mechanical engineering at the ETH Zurich Immense wealth of experience with successful product lifecycle management projects Designed and developed innovative applications using current internet technologies and methodology for companies operating worldwide Marco Egli APIDAYS PARIS 2022 40 www.intelliact.ch/en/marco-egli https://www.linkedin.com/in/marco-egli-intelliact/