Design with dynamic data, Intuit case study, sticky/fixed position
Intuit ships in half the time with Plasmic
Intuit's Marketing Technology team is responsible for driving conversions on the marketing website, which includes the conversion pages for Intuit's flagship TurboTax product, seen by millions every day. In order to get experiments to market quickly, the team uses a homegrown CMS platform to deliver these experiments. However, this faced a number of challenges, since implementing CMS blocks is ultimately bottlenecked by engineering velocity.
With Plasmic, Intuit was able to enable teams outside of engineering to create and iterate on more A/B tests in weeks, not months. The resulting Plasmic content has been used in experiments across the marketing website and ultimately drive significant increased conversion.
"We only have a window of 6-8 weeks leading up to a tax season peak to launch experiments, where we launch, get confidence in results, and roll it into the baseline. With everything from small tweaks to big swings, Plasmic helps us more than double what we can do within this short window. We were able to find significant conversion rate lift with Plasmic." —Nate Winn, Senior Product Manager
Design with dynamic data
Code components have changed the game for Plasmic. By bringing your own components or off-the-shelf components from npm, you can visually build with any design system, display dynamic data, and extend Plasmic with any interactions and effects you want.
Code components have just received a significant upgrade. You can now design arbitrary dynamic data displays using code components. Plasmic Studio users can drag and drop data fields (whether text or rich media), arrange them in any layout, and style them however they’d like. By adopting a standard technique of adding (1) container components that provide the data to their slot contents (children prop), and (2) components to consume and display parts of that data, you can enable this degree of flexibility via composition.
This extends to displaying collections of data. Whether you’re displaying a list of blog posts from your CMS or a grid of products from your ecommerce backend, you’ll now be able to design exactly what each item looks like, and let your component render the children in a loop over the data. With a special repeatedElement() annotation in loop over children, you can ensure Plasmic Studio smoothly handles selection/edits, so that they’re redirected to just the first occurrence of the children.
Learn more in our docs. We’ve updated all the data-driven parts of our code components expo, so you can see exactly how it’s built, clone it, and change up the design! Or check out exactly how the code components work.
Bonus tip (thanks to our users for the nudge!): you can ensure these data components work well with SSG/SSR frameworks without needing to up-front declare the required data. Today, there exist approaches like react-ssr-prepass or Apollo getDataFromTree for enabling component-level fetches on the server. This enables your editors to design with any data and without developer involvement. We’re especially excited for forthcoming server-side Suspense features in React 18!
And more
Plasmic Teams and Workspaces are now live. See our prior update for the details.
Fixed and sticky positioning is here!
You can now specify arbitrary HTML attributes.
You can now specify different horizontal and vertical overflow settings.
If you use @plasmicapp/loader-nextjs and it hasn’t been rendering your latest changes from Plasmic, please update the package with npm install @plasmicapp/loader-nextjs (or yarn add @plasmicapp/loader-nextjs).
We’ve set up a Discourse forum, where community questions and answers are made more discoverable and searchable, and includes answers from the Slack community. (Our Slack chat community is not going anywhere!)