Andre Henning
Andre Henning
Andre Henning
Year
2025
2025
2025
Industry
Architecture
Architecture
Architecture
Services
Branding
Branding
Branding
Graphic Design
Graphic Design
Graphic Design
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.
Drop me a line!
40° 22' 57.6" N / 3° 42' 06.4" W
Remote from Madrid
Design & Development by DK
Copyright © Davi Klinsmann 2025
Drop me a line!
40° 22' 57.6" N / 3° 42' 06.4" W
Remote from Madrid
Design & Development by DK
Copyright © Davi Klinsmann 2025
Drop me a line!
40° 22' 57.6" N / 3° 42' 06.4" W
Remote from Madrid
Design & Development by DK
Copyright © Davi Klinsmann 2025