Bring your own React components!
This header will be substituted in nwww code
Multiplying headless commerce velocity with Plasmic
Problem: Enable design team to ship to production without blocking on engineering support
5x
Faster to ship new designs
Designers can design and deploy new content in hours, compared to previous workflows where changes would take 1-2 weeks to plan into engineering sprints.
4x
Reduced eng time
Engineers were able to reduce time implementing design/marketing changes from 41% to 10% of weekly sprint tasks, enabling them to focus on higher-value features.
124%
Revenue growth lift
Over the last 7 months using Plasmic, their sales growth rates improved by 124%, compared to the 7 months before using Plasmic.
0.5%
Improved conversion rates
With faster and cheaper experimentation, Plasmic significantly helped Turbotax improve conversions to paid products.
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.
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
Rapidly expand velocity of the company: Reduce the cost of implementation to drastically increase the speed of deploying new products and features to their customers.
3
Incremental adoption: Work within the existing tech stack, including services like Shopify and Contentful, and allow teammates to start with limited surfaces first.
4
Leverage production data in designs: Designing with real product data puts everything in context, making it easier to preview exactly what a user would see when deployed.
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 builder 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.
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.
Seamless integration: Plasmic flexibly integrates with existing production code. By importing your code components into the Studio, you can easily design with real data.
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.
About The Beard Struggle
2014
Founded
Vancouver, BC
Headquarters
60+
Employees (as of Sept 2021)
The Beard Struggle is a customer-focused men's grooming company that takes pride in charity, brotherhood and promoting healthy masculine ideals.
The Beard Struggle chooses Plasmic to accelerate their go-to-market.
Want to accelerate your team's velocity like The Beard Struggle?
Try Plasmic for free
The Footer component will be substituted in nwww code