TJ Kohli: Enterprise-grade composable commerce with Next.js

(bright music) (upbeat music)

Hello again, from Atlanta. For 2023, we predict composable commerce will take center stage in the retail sector. Our experience has shown that the outcome of building digital products

using composable architecture is highly dependent on choosing the right technologies. Such as Next.js and headless eCommerce providers. (upbeat music) Due to the inherent psychology of online shoppers and their short attention span, the benefits of composable architecture have a direct correlation with key performance metrics such as increased sales, retention, and customer satisfaction.

Faster stores keep shoppers engaged longer, more secure platforms increase trust and brand loyalty. Smart integrations and tooling ensure a seamless experience for all users, new and returning. Last but not least, improved Core Web Vitals have a direct impact on getting your store in front of more viewers, leading to increased sales.

Salesforce research found that over half of shoppers stopped buying from a company simply because a competitor provided a better experience. We've had an incredible year here at Monogram, and we wanted to shed light on an amazing project that we worked on this year, Birchbox. We've learned a lot from it as a team and we want to share some of our knowledge with you today. (upbeat music)

Hey, I'm Brandon Garcia, VP of product at Birchbox, a FemTech Health company. We came to Monogram with a monumental task, migrating a legacy eCommerce platform to Next.js, Shopify Plus, Prismic and Vercel. Not only did we have to migrate millions of customers onto a new platform, we simultaneously needed to rebuild the eCommerce infrastructure for the internal processes of a massive retail business. That includes product catalog management, a content management system, warehouse integrations,

and so much more. (upbeat music) Building digital experiences for composable architecture needs to start at the drawing board, which means design. We'll save the design details for another conference, but it's worth mentioning that every successful development project starts with a solid design. To build a solid design, designing with components is key. Modern headless CMSws and e-commerce providers rely on the idea of blocks, slices, or modules,

all different labels for the same thing. To give editors flexible tools to create content. When designing using Figma for composable, these modules need to map one to one with Figma components. Any Configuration options like left or right orientation, color themes and optional content should be predefined in Figma components as component variants and component properties. This allows a much tighter handoff to development teams and ensures one to one mapping of design to end user experience.