Werdum Preamium Meats

Werdum Preamium Meats

Werdum Preamium Meats

Year

2025

2025

2025

Industry

Premium Meats

Premium Meats

Premium Meats

Services

Branding

Branding

Branding

About the project

We started from one strong belief: that in today's world, new and memorable experiences constitute our true personal luxury. We are convinced that these unique moments are what enrich our lives and leave a lasting impact. So here's to the memories in the making, to those extraordinary experiences that become the stories we cherish and share.

Branding as the Starting Point

Branding as the Starting Point

Branding as the Starting Point

Before designing screens or flows, it was necessary to create an identity that could sustain the entire experience. The name Ombrelone already carried the concept of shelter, something that protects and organizes under its cover. From this foundation, the symbol was created using shapes that resemble a stylized umbrella, without being literal, representing a space that brings together and supports multiple functionalities.

The result was a simple, geometric and memorable icon that works both on its own and alongside the typography. This choice reflects the essence of the platform: strength, stability and centralization. The bluish-lilac tone added modernity, sophistication and freshness, helping Ombrelone stand out in a market saturated with traditional technology palettes.

Before designing screens or flows, it was necessary to create an identity that could sustain the entire experience. The name Ombrelone already carried the concept of shelter, something that protects and organizes under its cover. From this foundation, the symbol was created using shapes that resemble a stylized umbrella, without being literal, representing a space that brings together and supports multiple functionalities.

The result was a simple, geometric and memorable icon that works both on its own and alongside the typography. This choice reflects the essence of the platform: strength, stability and centralization. The bluish-lilac tone added modernity, sophistication and freshness, helping Ombrelone stand out in a market saturated with traditional technology palettes.

Before designing screens or flows, it was necessary to create an identity that could sustain the entire experience. The name Ombrelone already carried the concept of shelter, something that protects and organizes under its cover. From this foundation, the symbol was created using shapes that resemble a stylized umbrella, without being literal, representing a space that brings together and supports multiple functionalities.

The result was a simple, geometric and memorable icon that works both on its own and alongside the typography. This choice reflects the essence of the platform: strength, stability and centralization. The bluish-lilac tone added modernity, sophistication and freshness, helping Ombrelone stand out in a market saturated with traditional technology palettes.

Expanding the Identity

Expanding the Identity

Expanding the Identity

The visual identity was designed to expand naturally across different contexts. In digital environments, it works at reduced scale, such as an icon, favicon or app button. In institutional materials, the logo takes center stage, reinforcing the brand’s presence and authority. In campaigns and marketing assets, the vibrant palette and the symbol in its “mandala-like” form help build consistency and immediate recognition.

The visual identity was designed to expand naturally across different contexts. In digital environments, it works at reduced scale, such as an icon, favicon or app button. In institutional materials, the logo takes center stage, reinforcing the brand’s presence and authority. In campaigns and marketing assets, the vibrant palette and the symbol in its “mandala-like” form help build consistency and immediate recognition.

The visual identity was designed to expand naturally across different contexts. In digital environments, it works at reduced scale, such as an icon, favicon or app button. In institutional materials, the logo takes center stage, reinforcing the brand’s presence and authority. In campaigns and marketing assets, the vibrant palette and the symbol in its “mandala-like” form help build consistency and immediate recognition.

Meaning of the Brand

Meaning of the Brand

Meaning of the Brand

The symbol is not merely aesthetic; it carries the metaphor behind the platform’s value proposition. Just as an umbrella creates a protected space beneath it, the brand communicates that all the essential resources for selling and connecting with an audience are brought together in one place. This visual clarity builds trust and reinforces coherence between the brand’s promise and the user experience.

The symbol is not merely aesthetic; it carries the metaphor behind the platform’s value proposition. Just as an umbrella creates a protected space beneath it, the brand communicates that all the essential resources for selling and connecting with an audience are brought together in one place. This visual clarity builds trust and reinforces coherence between the brand’s promise and the user experience.

The symbol is not merely aesthetic; it carries the metaphor behind the platform’s value proposition. Just as an umbrella creates a protected space beneath it, the brand communicates that all the essential resources for selling and connecting with an audience are brought together in one place. This visual clarity builds trust and reinforces coherence between the brand’s promise and the user experience.

Visual Application in the Platform

Visual Application in the Platform

Visual Application in the Platform

Color Palette

Color Palette

Color Palette

The Ombrelone identity was extended into the platform through a palette that combines sophistication and energy. The vibrant purple, already present in the symbol, became the primary highlight color, used in buttons, indicators and calls to action. To balance its intensity, a secondary salmon tone was introduced for use in charts and contrast points. This combination brought dynamism to the interface while reinforcing legibility and visual hierarchy.

The Ombrelone identity was extended into the platform through a palette that combines sophistication and energy. The vibrant purple, already present in the symbol, became the primary highlight color, used in buttons, indicators and calls to action. To balance its intensity, a secondary salmon tone was introduced for use in charts and contrast points. This combination brought dynamism to the interface while reinforcing legibility and visual hierarchy.

The Ombrelone identity was extended into the platform through a palette that combines sophistication and energy. The vibrant purple, already present in the symbol, became the primary highlight color, used in buttons, indicators and calls to action. To balance its intensity, a secondary salmon tone was introduced for use in charts and contrast points. This combination brought dynamism to the interface while reinforcing legibility and visual hierarchy.

Typography and Consistency

Typography and Consistency

Typography and Consistency

Typography aligned with the logotype was applied consistently across titles, menus and indicators. The goal was to ensure clarity throughout the platform while maintaining the sense of trust and solidity the brand conveys. This uniformity gave the platform a professional, cohesive and recognizable tone.

Typography aligned with the logotype was applied consistently across titles, menus and indicators. The goal was to ensure clarity throughout the platform while maintaining the sense of trust and solidity the brand conveys. This uniformity gave the platform a professional, cohesive and recognizable tone.

Typography aligned with the logotype was applied consistently across titles, menus and indicators. The goal was to ensure clarity throughout the platform while maintaining the sense of trust and solidity the brand conveys. This uniformity gave the platform a professional, cohesive and recognizable tone.

Logo Usage

Logo Usage

Logo Usage

The logo has a constant presence within the platform, reinforcing brand identity throughout the navigation experience. Its primary placement is in the lateral menu, which acts as the main guide to all system areas. This subtle yet consistent presence creates a visual anchor that increases the user’s familiarity with the brand.

The logo has a constant presence within the platform, reinforcing brand identity throughout the navigation experience. Its primary placement is in the lateral menu, which acts as the main guide to all system areas. This subtle yet consistent presence creates a visual anchor that increases the user’s familiarity with the brand.

The logo has a constant presence within the platform, reinforcing brand identity throughout the navigation experience. Its primary placement is in the lateral menu, which acts as the main guide to all system areas. This subtle yet consistent presence creates a visual anchor that increases the user’s familiarity with the brand.

Dashboards and Data Visualization

Dashboards and Data Visualization

Dashboards and Data Visualization

Dashboards were designed to strike a balance between functionality and visual appeal. Charts, tables and key metrics were organized with clarity, using the purple and salmon contrast to highlight essential data points. The result is a system where information is not only accurate but also accessible and visually engaging.

Dashboards were designed to strike a balance between functionality and visual appeal. Charts, tables and key metrics were organized with clarity, using the purple and salmon contrast to highlight essential data points. The result is a system where information is not only accurate but also accessible and visually engaging.

Dashboards were designed to strike a balance between functionality and visual appeal. Charts, tables and key metrics were organized with clarity, using the purple and salmon contrast to highlight essential data points. The result is a system where information is not only accurate but also accessible and visually engaging.

Product Design Process

Product Design Process

Product Design Process

001

001

001

Login and Onboarding

Login and Onboarding

Login and Onboarding

The first step was to structure the user’s initial experience. The login and onboarding flow needed to convey clarity and trust, since it would be the creator’s first contact with the platform. The design was kept straightforward and welcoming, avoiding unnecessary friction and guiding the user smoothly toward the core features. This stage was essential to create a strong first impression and ensure new users felt comfortable exploring the system.

The first step was to structure the user’s initial experience. The login and onboarding flow needed to convey clarity and trust, since it would be the creator’s first contact with the platform. The design was kept straightforward and welcoming, avoiding unnecessary friction and guiding the user smoothly toward the core features. This stage was essential to create a strong first impression and ensure new users felt comfortable exploring the system.

The first step was to structure the user’s initial experience. The login and onboarding flow needed to convey clarity and trust, since it would be the creator’s first contact with the platform. The design was kept straightforward and welcoming, avoiding unnecessary friction and guiding the user smoothly toward the core features. This stage was essential to create a strong first impression and ensure new users felt comfortable exploring the system.

002

002

002

Product and Sales Plan Creation

Product and Sales Plan Creation

Product and Sales Plan Creation

Next came the product creation and sales plan configuration screens. This part of the platform required tables, forms and editing flows that balanced practicality and flexibility. The challenge was to organize complex information such as pricing, descriptions, plan types and additional configurations within an interface that remained clear and scalable. The result was a system where creators can register and manage products in an organized way, with legible tables and well-structured forms that make editing quick and intuitive.

Next came the product creation and sales plan configuration screens. This part of the platform required tables, forms and editing flows that balanced practicality and flexibility. The challenge was to organize complex information such as pricing, descriptions, plan types and additional configurations within an interface that remained clear and scalable. The result was a system where creators can register and manage products in an organized way, with legible tables and well-structured forms that make editing quick and intuitive.

Next came the product creation and sales plan configuration screens. This part of the platform required tables, forms and editing flows that balanced practicality and flexibility. The challenge was to organize complex information such as pricing, descriptions, plan types and additional configurations within an interface that remained clear and scalable. The result was a system where creators can register and manage products in an organized way, with legible tables and well-structured forms that make editing quick and intuitive.

003

003

003

Checkouts for Physical and Digital Products

Checkouts for Physical and Digital Products

Checkouts for Physical and Digital Products

The next focus was the checkout design. For physical products, the flow was divided into three progressive steps: personal information, shipping address and payment. Each step only opens after the previous one is completed, making the journey lighter and preventing information overload. For digital products, the process was simplified by removing the address step, allowing purchases to be completed even faster.

The checkout was also designed as a flexible space, allowing creators to add banners, feedback messages or lateral widgets to personalize the experience according to their sales strategy. The goal was to build a checkout that is functional, trustworthy and highly customizable.

The next focus was the checkout design. For physical products, the flow was divided into three progressive steps: personal information, shipping address and payment. Each step only opens after the previous one is completed, making the journey lighter and preventing information overload. For digital products, the process was simplified by removing the address step, allowing purchases to be completed even faster.

The checkout was also designed as a flexible space, allowing creators to add banners, feedback messages or lateral widgets to personalize the experience according to their sales strategy. The goal was to build a checkout that is functional, trustworthy and highly customizable.

The next focus was the checkout design. For physical products, the flow was divided into three progressive steps: personal information, shipping address and payment. Each step only opens after the previous one is completed, making the journey lighter and preventing information overload. For digital products, the process was simplified by removing the address step, allowing purchases to be completed even faster.

The checkout was also designed as a flexible space, allowing creators to add banners, feedback messages or lateral widgets to personalize the experience according to their sales strategy. The goal was to build a checkout that is functional, trustworthy and highly customizable.

004

004

004

Integrations

Integrations

Integrations

Another essential part of the project was designing the integrations. Ombrelone needed to connect with external tools to strengthen its value proposition, such as payment solutions, lead management systems and specialized automations. The integration screens were designed so users could activate or configure connections in just a few clicks, keeping the experience simple even within a technically complex context.

Another essential part of the project was designing the integrations. Ombrelone needed to connect with external tools to strengthen its value proposition, such as payment solutions, lead management systems and specialized automations. The integration screens were designed so users could activate or configure connections in just a few clicks, keeping the experience simple even within a technically complex context.

Another essential part of the project was designing the integrations. Ombrelone needed to connect with external tools to strengthen its value proposition, such as payment solutions, lead management systems and specialized automations. The integration screens were designed so users could activate or configure connections in just a few clicks, keeping the experience simple even within a technically complex context.

005

005

005

Members Area

Members Area

Members Area

For creators offering courses and digital content, the Members Area was developed. The focus here was to provide students with an enjoyable experience, with clear organization of lessons and support features like quizzes and progress tracking. The design prioritized immersion in the content, creating a clean and intuitive environment that motivates learners to continue their studies.

For creators offering courses and digital content, the Members Area was developed. The focus here was to provide students with an enjoyable experience, with clear organization of lessons and support features like quizzes and progress tracking. The design prioritized immersion in the content, creating a clean and intuitive environment that motivates learners to continue their studies.

For creators offering courses and digital content, the Members Area was developed. The focus here was to provide students with an enjoyable experience, with clear organization of lessons and support features like quizzes and progress tracking. The design prioritized immersion in the content, creating a clean and intuitive environment that motivates learners to continue their studies.

006

006

006

Webinar

Webinar

Webinar

Finally, the webinar system was designed as one of the platform’s key differentiators. The experience was inspired by streaming platforms but adapted to the digital sales universe. Users can watch live sessions, interact through chat and, at the right moment, access a modal checkout without leaving the screen. This flow was created to maintain audience engagement and reduce friction in the purchase process, combining interaction and conversion in a single environment.

Finally, the webinar system was designed as one of the platform’s key differentiators. The experience was inspired by streaming platforms but adapted to the digital sales universe. Users can watch live sessions, interact through chat and, at the right moment, access a modal checkout without leaving the screen. This flow was created to maintain audience engagement and reduce friction in the purchase process, combining interaction and conversion in a single environment.

Finally, the webinar system was designed as one of the platform’s key differentiators. The experience was inspired by streaming platforms but adapted to the digital sales universe. Users can watch live sessions, interact through chat and, at the right moment, access a modal checkout without leaving the screen. This flow was created to maintain audience engagement and reduce friction in the purchase process, combining interaction and conversion in a single environment.

Results and Impact

Results and Impact

Results and Impact

The Ombrelone project delivered a robust platform that combined consistent branding with complex functionalities in a smooth and reliable experience. Key highlights include the webinar system with integrated checkout, which reduced friction in conversions, and the customizable checkout, which supports multiple sales models while remaining simple for the end user.

These are only some of the project’s highlights. Ombrelone was designed to be even more comprehensive, with additional features already planned but not yet implemented by developers, such as the checkout builder, the heatmap-based checkout analyzer and a highly advanced email marketing system.

The Ombrelone project delivered a robust platform that combined consistent branding with complex functionalities in a smooth and reliable experience. Key highlights include the webinar system with integrated checkout, which reduced friction in conversions, and the customizable checkout, which supports multiple sales models while remaining simple for the end user.

These are only some of the project’s highlights. Ombrelone was designed to be even more comprehensive, with additional features already planned but not yet implemented by developers, such as the checkout builder, the heatmap-based checkout analyzer and a highly advanced email marketing system.

The Ombrelone project delivered a robust platform that combined consistent branding with complex functionalities in a smooth and reliable experience. Key highlights include the webinar system with integrated checkout, which reduced friction in conversions, and the customizable checkout, which supports multiple sales models while remaining simple for the end user.

These are only some of the project’s highlights. Ombrelone was designed to be even more comprehensive, with additional features already planned but not yet implemented by developers, such as the checkout builder, the heatmap-based checkout analyzer and a highly advanced email marketing system.

Key Learnings

Key Learnings

Key Learnings

001

001

001

Alignment between brand and product

Alignment between brand and product

Alignment between brand and product

The project demonstrated the importance of thinking about branding and the platform together from the start. The visual identity served as the foundation for the entire user experience, ensuring consistency across every screen and feature.

The project demonstrated the importance of thinking about branding and the platform together from the start. The visual identity served as the foundation for the entire user experience, ensuring consistency across every screen and feature.

The project demonstrated the importance of thinking about branding and the platform together from the start. The visual identity served as the foundation for the entire user experience, ensuring consistency across every screen and feature.

002

002

002

Complexity made simple

Complexity made simple

Complexity made simple

A major learning was how to handle highly complex features, such as the customizable checkout, without compromising clarity. The challenge was to transform multiple options and scenarios into flows that were straightforward and easy to understand.

A major learning was how to handle highly complex features, such as the customizable checkout, without compromising clarity. The challenge was to transform multiple options and scenarios into flows that were straightforward and easy to understand.

A major learning was how to handle highly complex features, such as the customizable checkout, without compromising clarity. The challenge was to transform multiple options and scenarios into flows that were straightforward and easy to understand.

003

003

003

Multidisciplinary collaboration

Multidisciplinary collaboration

Multidisciplinary collaboration

The work required close collaboration with developers and stakeholders to discuss feasibility and scalability. This process of co-creation was key to turning ambitious ideas into practical and consistent solutions.

The work required close collaboration with developers and stakeholders to discuss feasibility and scalability. This process of co-creation was key to turning ambitious ideas into practical and consistent solutions.

The work required close collaboration with developers and stakeholders to discuss feasibility and scalability. This process of co-creation was key to turning ambitious ideas into practical and consistent solutions.

004

004

004

Design as a foundation for growth

Design as a foundation for growth

Design as a foundation for growth

Ombrelone reinforced that well-structured design is more than aesthetics: it is the foundation for future growth. The project was built to scale, allowing new features to be added without compromising the user experience.

Ombrelone reinforced that well-structured design is more than aesthetics: it is the foundation for future growth. The project was built to scale, allowing new features to be added without compromising the user experience.

Ombrelone reinforced that well-structured design is more than aesthetics: it is the foundation for future growth. The project was built to scale, allowing new features to be added without compromising the user experience.

Create a free website with Framer, the website builder loved by startups, designers and agencies.