Multiplying headless commerce velocity with Plasmic
The Beard Struggle is making waves in the men's grooming industry. Their small team needs to handle everything from marketing and acquiring new customers, to building a seamless experience for their customers.
Problem
The Beard Struggle is making waves in the men's grooming industry. Their small team needs to handle everything from marketing and acquiring new customers, to building a seamless experience for their customers. Any tool that can reduce cross-functional dependencies and accelerate go-to-market makes an outsized impact on their company's ability to grow.
The team leverages a variety of headless services, from commerce to CMS, to rapidly build their shopping experience and digital marketing content.
Prior to Plasmic, The Beard Struggle faced the following challenges:
- With so many high-value features to work on, like a better mobile shopping experience, their few engineers were constantly being pulled away to implement and deploy urgent pages for marketing campaigns.
- Designers typically had to wait at least a sprint to get their changes deployed.
- The team had to hire and manage additional staff of web developers primarily for translating Figma designs into React.
"You guys are doing some incredible work. Plasmic is going to be a necessity for any enterprise-scale React site. I've spent the past year trying to find ways to give our design & creatives team the ability to quickly create landing pages by themselves, because it takes too much dev time and makes sprints hard to plan. The only thing is that it's so much of a shock to our workflow that it's keeping our designers from working on product labels and packaging because they're distracted by our shiny new toy.
Deniz Gunay
Goals
To accelerate experimentation, the team is focusing on the following key areas:
1
Democratize implementation
Enable non-developers, such as designers and marketers, to implement new content and variations quickly without requiring engineering support.
2
Speed up velocity of the marketing team
Reduce the cost of implementation to drastically increase the speed of deploying new products and features to their customers.
3
Integrate with existing tech stack
Work within the existing tech stack, including services like Shopify and Contentful, and allow teammates to start with limited surfaces first.
4
A scalable approach
Designing with real product data puts everything in context, making it easier to preview exactly what a user would see when deployed.
"Once I established some conventions for my Figma designs, like using autolayout and element hierarchy, importing straight to Plasmic and deploying myself takes much less time than even handing it off to a developer. With a developer, I would have to iterate on visual tests, collaborate across time zones, and wait to be prioritize in the engineering sprint plan. Plasmic takes at least a week or two off ship time."
James Darling
The Plasmic approach
Deniz Gunay, the engineering lead defining a new process of rapid experimentation and innovation, evaluated a number of options — from evolving their existing CMS platform, to other page-building solutions. He needed something that could easily plug into their existing tech stack, while enabling non-engineers users to create rich visual content quickly.
With Plasmic, they found a solution that helps with:
- WYSIWYG page that works with Figma: Plasmic Studio can import from Figma, helping designers quickly bring existing designs to production in a Studio editor that is easy for anyone to use.
- Accelerate A/B testing: Plasmic projects can be easily cloned, tweaked, and immediately deployed to a user segment with minimal developer involvement.
- Seamless integration: Plasmic flexibly integrates with existing production code. By importing your code components into the Studio, you can easily design with real data.
- Team empowerment: Plasmic enables teams outside of engineering (e.g. in marketing and design) to implement and own their experiments, without requiring a developer in the critical path. This allowed them to quickly scale their experimentation efforts.
Use cases
Plasmic makes it easy for anyone on the team to create and update rich experiences, giving teams outside of engineering the ability to ship high-impact pages, like those used for product selection. The Beard Struggle has quickly expanded their use of Plasmic to include most visual surfaces on their webpages and application.
Plasmic variants have made A/B testing incredibly easy. By creating a variant of a page that can be triggered by a prop, Plasmic can easily integrate into any existing A/B testing framework. The team started with a client-side approach, where client-side scripts would determine a user's segment and specify the variant to show the user. However, this came with the downside of requiring all users to wait until the client-side scripts finish running before seeing anything on the screen, resulting in worse web vitals scores. They are now exploring Next.js for server-side rendering and caching using Vercel edge to effectively eliminate any web performance impact from A/B testing. Whichever approach and platforms they wanted to use, Plasmic easily integrates into their solution.
Plasmic code components also provide a powerful way to visually design with real production data. They use a variety of React context provider code components, that will store state, such as the current product ID and the country that the user is from. From there, they can also use code components that will dynamically fetch pricing data from Shopify and display it in the correct currency. This way, the designer is designing with real production data, with confidence knowing exactly what the page will look like to the user.
Everyone, from designers to marketers to developers, is empowered to create a new experience. Plasmic also plugs into existing deployment and QA processes, so you can move fast with the guardrails you need. This increased velocity helps make The Beard Struggle even more agile in this dynamic market.