How Sem Parar gained autonomy with Croct

NewsBy Mariana Bonanomi

Knowing your personas is essential for successful marketing strategies. To build customer loyalty, you must first learn about your audience's preferences and connect with each of them. A well-built design system with tailored communication might just do the trick.

That's why the marketing and design teams at Sem Parar joined forces to create unique browsing experiences. Since we wrote their first personalization use case, a lot has changed in the company's objectives. In this post, we will discuss the solutions Sem Parar found to communication and workflow challenges.

You can also have the autonomy you needCheck out our interactive demos and understand how Croct can offer you independence from developers.
A few lines of code for the developer to edit and a page for the market to edit.

About Sem Parar personalization challenges

Retaining a customer is about seven times less expensive than acquiring a new one. At first, Sem Parar's content strategy focused on lead acquisition campaigns. That's why there wasn't a communication distinction between customers and users who visited the website to know more about their product. Both audiences had the same experience.

Additionally, ensuring that new implementations wouldn’t violate the defined design system or break the website’s code was always challenging.

Sem Parar created a new design system using Croct to address this issue. The goal was to give flexibility to the marketing team while still keeping loyal to their design and development guidelines.

What is a design system?

It is a collection of website design and development guidelines, patterns, components, and styles. It establishes a standard for different teams to follow when editing graphical interfaces, digital products, or platforms.

A design system typically includes:

  • Design guidelines: Document that establishes the organization's design standards for font sizes, colors, spacing, visual hierarchy, micro-interactions, etc.

  • Reusable components: A set of UI elements cohesively combined to create pages, screens, and user flows. These elements may include buttons, forms, cards, navigation bars, icons, etc.

  • Styles and themes: Graphic styles such as color palettes and typography. The themes can be used in different contexts, such as light and dark.

  • Documentation and training: A document that describes how to use and implement the components of the design system, including code snippets, usage guidelines, tutorials, and resources to help teams apply it effectively.

Sem Parar simplified website content management workflows by creating a design system that enables website personalization, eliminating the need for design team reviews. The website elements available for improvement are predefined, which offers flexibility to marketing teams conducting tests and daily optimizations.

To understand how Sem Parar uses Croct for website personalization, we spoke with Bruna Bazan, Senior Design Analyst responsible for their design system.

Example of Sem Parar's design system describing which components can be altered with Croct.
Example of Sem Parar's design system

Using Croct to reinvent product positioning

Sem Parar's marketing team built their current communication strategy by segmenting customers from visitors. They also created audiences on their website based on the user's location. New and returning users would visualize content tailored to their current buying funnel stage.

Until then, content variations were still limited. That’s why Croct gave autonomy and productivity to the marketing team to communicate, as they no longer depended on other groups for daily changes.

We needed to make a last-minute banner change. Thanks to Croct, we could do it quickly and without involving a large staff.

Bruna Bazan

Analyzing results became more manageable as teams can access personalized experiences data directly on Croct’s dashboard. They currently find all the necessary information to drive their decision-making process for ongoing and future projects.

Without Croct, tests would require dev-help in the early days. The freedom to conduct experiments autonomously has helped me optimize workflows and unleash creativity.

Bruna Bazan

Using Croct, Bruna created a new design system for critical sections of Sem Parar's website. First, she learned how personalized experiences could be managed. Then, she crafted a document with detailed information on how to make website content adjustments while still sticking to Sem Parar’s visual identity.

Descriptive document with all dynamic and static elements of Sem Parar's banner using Croct.
Sem Parar' design system document

This made the information easy to understand, even for those without a design background, explicitly stating what the marketing team should or shouldn’t change.

The personalized content changes according to the audiences created in Croct, without impacting the website’s design or source code. All banner details, for example, can be edited directly in the platform, from button colors and backgrounds to typography fonts. As a result, content teams can edit the website with no major concerns.

Sem Parar banner
Sem Parar personalized banner

This project became a reference for collaboration among different teams at Sem Parar. The possibilities provided by Croct contributed to optimizing results and brought new insights to their marketing strategy.

Want to optimize your website and improve workflows, just like Sem Parar did? Create your free account and build personalization autonomy today.

Explore:
Let's grow together!

Learn practical tactics our customers use to grow by 20% or more.