How our AI cybersecurity platform design helped Cracken make offensive security feel operational

Award-Winning
Project:
No items found.
Industry:
🔥 AI & ML
Enterprise
Services:
Product growth design services
Design system
Digital product consulting
AI consulting services
About
the project

A website to make a new security category sell itself

Cracken is an offensive, agentic AI platform operating in a category the market has not yet named. Its positioning, attack as the foundation of defense, is a technical conviction: the only way to defend against sophisticated adversaries is to operate with the same offensive logic they use. The website needed to establish this from the first interaction and win two skeptical buyers at once: the operators who judge whether the product is real and the executives who sign for it. 

Lazarev.agency designed the full website with a coherent product narrative and a unified visual language serving both audiences without splitting the site or diluting either message.

Here’s how we achieved that.

Results
No items found.

The Project’s
Discovery Phase

No items found.
No items found.

Built a living 3D visualization to make an agentic AI system feel operational

For an agentic AI security platform, abstraction is the biggest credibility risk: red teams dismiss any capability they cannot see operating. 

We built the Cracken as a living visualization, an active system reconstructing and responding in real time, its behavior shifting with context: analytical and restrained in intelligence sections, denser and more charged at high-urgency moments. The visualization gives skeptical technical evaluators visible proof of a working system before they reach a single line of specification, so they meet Cracken already believing it is real.  

No items found.

Created an entry point to a new category of cybersecurity

A category-creating product has a homepage problem: a features-first layout asks visitors to judge something they have no framework for, and they default to slotting it beside tools they already know. 

Our team built the Cracken homepage as a sequential entry. It first sets the threat context, then shows why defensive-only approaches no longer hold, and only then reveals how Cracken takes control through automation and agent-based logic. Each section raises the pressure, so visitors move from recognizing the problem to accepting the offensive position as the logical answer. 

By the time the product appears, buyers already believe the category is real, which is the difference between a homepage producing qualified pipeline and one producing confused exits.

No items found.

Designed a scalable architecture to keep buyers oriented

Enterprise security deals close over weeks or months, across many return visits and links forwarded to colleagues, so the website has to hold a buyer's confidence the whole way. When the pages feel like disconnected pieces, buyers lose the thread and rebuild context every time they come back, and each lost thread is a chance for the deal to cool. 

We designed the Cracken site as one hierarchical system, each page extending the same product story from a new angle so nothing contradicts or repeats. Buyers stay oriented and keep moving toward a decision, and Cracken can add pages as it grows without breaking the experience or paying to rebuild it. The architecture protects pipeline now and the marketing investment later. 

Why information architecture is the UX superhero under cover

No items found.

Constructed a unified visual language to win different audiences

Two very different buyers judge the same security site for opposite reasons. Technical operators and red teams want proof the product is real and powerful: speed, depth, the ability to find exploits. Executives and CISOs want the reverse: control, manageable risk, accountability. Building one version for each would split the site into two halves neither group fully trusts, and a compromise between them convinces no one. 

We built a single system for Cracken carrying both readings at once, an underlying order executives read as scale and control and a sense of live activity technical buyers read as real capability. The same pages satisfy both, so a deal keeps moving when it reaches the next stakeholder, with the credibility argument already won. 

No items found.
Fintech
Explore Fintech

Fintech

Lazarev. agency offers comprehensive digital design services. Discover our range of related expertise supported by impactful case studies.

explore

More Startups Cases

FAQ

/00-1

How should AI cybersecurity platform design communicate technical credibility to both security operators and executive buyers?

Security platforms face a procurement reality most B2B products don't: the people evaluating technical credibility and the people signing the contract are different, arrive with different expectations, and are often skeptical for opposite reasons. Red teams and technical operators read a website for evidence the product is real. Executives and CISOs read the same site for evidence of control, scale, and organizational trustworthiness. A site optimized for one audience at the cost of the other loses a critical part of the buying process. 

In the Cracken project, Lazarev.agency resolved this through a single visual system carrying different meanings to each group simultaneously: structural order for executive audiences, stylistic tension and system-behavior signals for technical ones. For enterprise security software companies designing for a dual procurement audience, this layered approach is more defensible than splitting the site by persona or defaulting to a compromise neither group finds fully convincing.

/00-2

What is the most effective way to design a website for an AI platform operating in a category buyers haven't defined yet?

Category-creating products have a homepage problem: a features-first structure asks visitors to evaluate something they don't yet have a framework for understanding. If the category itself isn't established before the product is introduced, the most common outcome is a visitor concluding the product is a variation of something they already know, which is exactly the positioning a new category needs to avoid. 

Working on the Cracken project, we structured the homepage as a sequential experience establishing the problem's logic before introducing the product as the system built around it. Visitors move through a progression placing them inside the operational reality Cracken addresses, so they arrive at the product introduction already convinced the category is real. For AI-native defense platforms and B2B SaaS companies entering undefined markets, this sequencing is the difference between a homepage generating qualified pipeline and one producing confused exits.

/00-3

How can 3D visualization be used in cybersecurity and AI platform design to build product credibility?

Abstract technology claims are now so common in security marketing they have become nearly meaningless to technical buyers. Credibility requires evidence of what the technology does, communicated in a form technical audiences find convincing before they read a specification sheet. 

In the Cracken project, the 3D visualization was designed to change character based on page context: fluid and analytical in intelligence sections, sharp and pressurized in high-urgency transitions, making the system's operational states visible. 

For enterprise security software companies investing in 3D as a design element, the distinction worth making is between visualization as decoration and visualization as product communication. The former adds visual weight without commercial value. The latter shortens the distance between first impression and qualified interest.

/00-4

How does website architecture affect the sales process for complex B2B security products?

Complex B2B security products are rarely sold through a single page visit. Buyers return multiple times, share links with colleagues, and move between sections in a non-linear order determined by their specific evaluation criteria. A site where The Platform, Solutions, and About pages feel like disconnected sections rather than parts of a coherent system creates friction at every return visit, buyers lose the narrative thread and have to reconstruct context each time. 

For Cracken, Lazarev.agency built the site architecture around a unified visual and semantic framework allowing each page to extend the product narrative from a different angle without contradicting or duplicating the others. This architectural coherence is a sales enablement decision as much as a design one, a site functioning as a connected system keeps buyers oriented through a procurement process lasting weeks or months.

/00-5

What visual design principles work best for offensive security and red team platforms targeting enterprise buyers?

Offensive security platforms occupy an unusual design position: the product's value depends on communicating aggression, capability, and operational depth, qualities most enterprise software design actively avoids. Standard enterprise SaaS aesthetics signal safety and approachability, which is the wrong register for a platform selling attack capability as a defense strategy. The design challenge is making a product feel genuinely powerful without becoming visually unstable or unreadable for the executives who ultimately approve the purchase. 

Let’s take Cracken as an example: we used red as pressure, glitch and particle effects as evidence of system activity, and strict grid and navigation logic as the structural layer communicating organizational control. So, we delivered a site reading as aggressive and technically credible to red teams while remaining ordered and trustworthy to executive buyers. For AI cybersecurity platform design targeting enterprise procurement processes, this balance between operational intensity and organizational credibility is the central visual problem and it requires deliberate layering.

/00-6

How should B2B SaaS companies approach website design when their product requires explaining a new mental model to buyers?

Most B2B SaaS websites assume buyers arrive with a formed opinion about the category and a checklist of features to evaluate. Products requiring buyers to adopt a new mental model before they can evaluate the product correctly cannot rely on this assumption. The website itself has to do the conceptual work of establishing the framework, otherwise buyers default to comparing the product against existing categories it doesn't belong to. 

In the Cracken project, the homepage was structured to establish "attack as the foundation of defense" as a logical position before introducing any product capability. Visitors move through threat context, the failure of defensive-only approaches, and the offensive logic underpinning Cracken's design, in a sequence making the product's positioning feel inevitable.

/00-7

How does design investment affect pipeline quality for enterprise cybersecurity companies?

Enterprise cybersecurity procurement involves multiple stakeholders, long evaluation cycles, and high-risk decisions where trust is a prerequisite for any commercial conversation. A website failing to establish credibility with both technical evaluators and executive sponsors creates friction at the top of the funnel, prospects exit before they qualify themselves, or arrive at a first conversation still uncertain whether the product is serious. 

The AI cybersecurity platform design for Cracken Lazarev.agency delivered was built to make the product's category, capability, and credibility legible from the first interaction, through visual behavior, page structure, and a unified design system serving both audience types simultaneously. For enterprise security software companies investing in a website rebuild, the pipeline impact is measurable in qualification rate: a site making the right impression on the right buyers produces fewer but more qualified conversations, which is the metric determining whether a sales team's time is well spent.

/00-8

/00-9

/00-10

/00-11

/00-12

/00-13

/00-14

Hit me up! Let’s chat about your growth

Kirill Lazarev
Founder of Lazarev.
Let’s talk

Recognizing that financial researchers utilizing Rhea need to process data and generate reports, we aimed to enhance their efficiency. Consequently, both text-based and widget results provided by AI can be seamlessly transformed into a report, with the added capability to edit the data.

UX for AI, Lazarev. digital product design agency

The command results are presented on a graphical interface through widgets. Accompanying CTAs are available to assist users in refining commands for processing the results further.

Widgets design for AI Fintech analysis app by Lazarev. product design agency

The Connect app also focuses on career growth and advancement. Therefore, we provided users with the option to send something akin to their digital business cards through the messaging system. This allows others to explore their skills and experience.

Messaging system for a mobile app designed by Lazarev. best design studio

We let users build their own schedule by picking their favorite sessions, workshops, and speakers. They can even export the schedule to their personal calendar for better organization.

Scheduling, event schedule for conferences, design by Lazarev. UI UX agency

Right there, we provided traders with the ability to compare various assets and observe how their value changed under the influence of news within different time periods. This feature facilitates making more informed decisions on investments.

A widget with the graph showing crypto asset comparison.

On the Matta marketplace, the availability of pricing information for products is contingent upon the intricacies of supply and demand.

To address this aspect of price absence, we gave buyers an ability yo request Price and Features Information (PFI). Upon making this request, the supplier will dispatch the PFI to the user via email and WhatsApp in PDF format.

Checkout design for an online marketplace

Similar to any marketplace, we've integrated a feature for adding products and suppliers to your Favorites. This allows buyers to receive notifications about product availability and save desired items for future purchase if the timing isn't right.

Digital product design for chemical marketplace

To enhance interactivity further, we made the decision to move away from providing users with only text-based instructions on how to address a particular issue.

Instead, we offered visual aids that accompany the text answers, helping users navigate the app and resolve their issues more swiftly.

Gamification design with dark UI elements for the Payoneer financial app.

Customers can ask the assistant any question, thanks to its neural network power, and it can even offer a weather forecast.

We made sure that the customer support section is accessible to everyone. If someone prefers not to or is unable to record their voice, they can use text input to pose a question, and vice versa.

AI-driven chat design by Lazarev. AI design agency

Brands need to connect any of the available wallets to mint NFTs. On the consumer side, though, individuals without a wallet can create a new one on the fly by using their email or social media. Alternatively, they can purchase NFTs using fiat currency and complete the entire transaction without any knowledge of Web3.

A graph showing the price history of an NFT, designed by Lazarev. design agency

We've implemented a personalized Customers section within Console, enabling collectors to manage customers who settle their debts through Collect. This empowers them with easy access to account data, detailed transaction insights, and the flexibility to provide customized payment solutions for individual cases.

Two desktop interfaces showing Customer's module within Tratta app

Central to our objectives was streamlining processes and boosting productivity for Console users. To accomplish this, we introduced highly customizable Settings. This empowers collectors to tailor the platform to their individual workflows and preferences. For instance, collectors can personalize settings to determine which features their customers will view in the Collect platform, including special offerings, discounts, and more.

Two desktop screens showing the Settings module of Tratta app

Each inventory management report is further fortified by the inclusion of the tenant's signature, solidifying the inspection process's validity and accountability.

A pop-up showing how to sign an inspection results once it was completed

To ensure a landlord's capability to substantiate claims against a tenant's deposit for damages, or vice versa, to verify that the damages are attributable to wear and tear, it is imperative that inspections exhibit the robustness required to endure legal scrutiny.In line with our approach, our inspections are comprehensive, incorporating intricate descriptions accompanied by photographic evidence.

A pop up showing how to add photos to an inspection of an apartment

To elevate user engagement and foster a deeper comprehension of the available apartments, we crafted the interactive house model within the "Selection of Apartments" section. This immersive experience empowers potential buyers to take a 360-degree tour, flipping between street and yard views with a simple toggle switch. As they hover their cursor or tap (for mobile users),  the house's specific sections illuminate, offering valuable insights into construction timelines and housing readiness. The interactive journey extends to selecting a floor and pinpointing a specific apartment with the help of a visual builder, simplifying the decision-making process and potentially increasing conversion rates.

An interface screen shpwing the 3D model of a complex and a widget that allows to switch between different complex's sections

For a more accessible experience, we've integrated a calendar widget right alongside the daily task list. A simple click takes users to a detailed breakdown of tasks, anything from completing quizzes to reading materials. This strategy keeps users within the app, providing a sense of encouragement and support rather than overwhelming them with excessive demands.

A mobile version of the Daily Actions page

We introduced an interactive widget at the top of the homepage, allowing users to track upcoming elections and assess their preparedness based on articles read, candidate knowledge, and quiz participation. By providing users with a clear measure of their readiness, the design solution motivates them to engage with educational content and explore candidate profiles while actively participating in quizzes.

Three states of the interactive widget on the homepage

Our solution was to design a switch that lets users transfer money to the fund’s international bank accounts. The website now offers the flexibility to contribute in multiple currencies (USD, UAH, EUR) using various payment methods tailored to the user's location. Donors can also donate through Paypal, support the fund on Patreon, or make donations in cryptocurrency.

Widgets displaying various donation platforms

An interactive payment widget responds with the organization founder, Serhiy Prytula’s phrases, every time a user enters any sum of money in the donation field. Such a solution proved to be efficient, encouraging more people to donate through the widget and increasing the average contributions by almost a quarter.

The mobile version of the donation page

One standout feature of Redbrain is the inclusion of price history and price forecasts directly on the product page. In line with Redbrain's dedication to delivering the best deals to consumers, we introduced a block that presents price trends from various retailers for easy comparison. Further below, we provide results generated by forecasting algorithms, helping consumers determine the optimal time to make their purchase.

The Price history section of the Redbrain website

Below the product imagery, consumers find essential product details like a comprehensive overview, rankings, and technical specifications. Given the pivotal role of product content in influencing consumer choices, we've enhanced the content display with interactivity and incorporated ample white space to ensure easy readability.

The scroll of the Redbrain page

This versatility in data presentation underscores our commitment to delivering a user-centric and highly functional interface, empowering users with diverse tools to effectively engage with critical information.

A map featuring an organized table filled with data

Following the analysis process, the resulting data  manifests on the interface. In the context of the Threat Area module, we have thoughtfully provided three distinct alternatives for data display: a map, table and integrated map and table together. A dynamic map presentation highlights the pertinent area, ensuring immediate focus.

Three screens featuring thread-level analysis

We paid special attention to the numbers, as this is what we can be proud of in spite of any difficulties. A minimum of text - a maximum of really important information.

The site offers a responsive view across mobile, tablet, and desktop. We provided the optimal searching experience while maintaining the site content regardless of the device.

The Awards section of the UkrainianPower website

We wanted to showcase the skateboards' benefits unobtrusively, step by step. To this end, we opted for interactive components that entertain people and educate them about the high-end technical specs and benefits like full customization.

 A page featuring a brief guide on using a compact control panel

The content flow seamlessly directed people towards the choice of deferred payment and customer reviews on the skateboards, instilling a sense of trust along the way.

A product webpage showcasing a motor controller replacement kit

We created a catching design style with contrasting colors, dynamic composition, and smart typography that bring visitors' attention to key elements.

An attention-grabbing widget spotlighting the advantages of 11Sight

The web calculator counts the cash back, given the number of invited users. It adds interactivity to the experience and evokes trust, showing commission transparency.

We've made tutor-student communication smooth. The “Questions” feature lets students pick teachers for paid inquiries. Additionally, students can step into the role of a tutor and provide answers to their peers' questions. Simplifying the tutoring process further, we've introduced the “Working Hours” section. This feature allows users to specify their platform availability, facilitating the system in finding suitable, available tutors.

Mobile screen displaying rate the teacher feature

For easy module and lesson navigation, we've created a side menu that opens and closes as needed. It also features a progress list with checkpoints, clearly indicating completed units and those remaining. In the “Learn” section, students can access both free and paid materials. They can study multiple materials on one topic, take quizzes, and move through to the next modules.

Interface showcasing the modules & lessons navigation

As we explored users' perspectives further, we discovered that some don't usually leave comments online due to not remembering all the details or being short on time. These insights led us to develop tags, making it easy for people to share their experiences at places they've been. This fresh idea replaced the old star rating system with tags, offering a simpler and friendlier way to express opinions.

The mobile screen showcasing the Tags functionality

Acknowledging the interconnected nature of workflows, we've introduced a powerful dependencies feature to further enhance the automation of the user experience. These dependencies establish a connection between two workflows, offering users the flexibility to select which workflow to link with. The types of dependencies include simultaneous start, immediate repeat and time delay.

Two compact pop-up windows to manage dependencies

Addressing the central challenge of managing recurrence, we aimed to create a seamless experience for setting repeated workflows. Our solution involves a full-page popup directly on the workflow page. It allows users to manage recurrences comprehensively, setting recurrence frequency, due dates, project durations, and more.

A full-screen pop-up interface for configuring recurring events

Our thoughtfully crafted input fields, controls, and CTA buttons distinguish themselves within the interface, all thanks to their skillful use of design accents and proportions. This approach not only enhances the interface's visual appeal but also boosts user efficiency.

An image showcases various screens, buttons, widgets, and design elements

In our quest to simplify the user experience and eliminate needless steps, we made the deliberate choice to incorporate a right-hand sidebar that opens when you click on a project task. This UX patterns conceal all non-essential information, preventing user overload, while prominently presenting the crucial details necessary for efficient project management.

The sidebar that appears when users click on a project task

The crisp UI design, featuring well-balanced proportions and a logical information structure, enhances readability and helps digest complex financial data.

Numerous screenshots of the Boel IT web product

Recognizing that Vessel Finance could potentially be utilized by less seasoned investors, we incorporated tooltips to explain the column headers. This  addition aims to enhance user understanding when calculating the benefits from vessels.

Desktop webpage displaying a table with year-on-year parameters

The product delivery schedule is presented on an interactive roadmap that advances on its own as visitors scroll through the section.

We present several ordering options to give existing and new customers the freedom of choice and help them make informed buying decisions through in-depth offerings explanations.

Speaking to a broad range of audience segments meant creating technical specs that give entry-level consumers just enough information and knowledgeable engineers - the ability to dive deep.

Through straight composition and powerful copy, we familiarize people with the uniqueness of the Inertia Wheels MAX and inspire them to experience the product in work.

We reimagined the resource center to become a hub of stories, use cases, educational articles, and videos to showcase the breadth of what's possible with the Inertia Wheels MAX.

Through rich interactions, 3D renders, and digestible copy, we show off the unique physical features of the Inertia Wheels MAX, drive demand, and encourage our audience to explore the product further.

Brands need to connect any of the available wallets to mint NFTs. On the consumer side, though, individuals without a wallet can create a new one on the fly by using their email or social media. Alternatively, they can purchase NFTs using fiat currency and complete the entire transaction without any knowledge of Web3.

The list of smart contracts on a green background

Brands need to connect any of the available wallets to mint NFTs. On the consumer side, though, individuals without a wallet can create a new one on the fly by using their email or social media. Alternatively, they can purchase NFTs using fiat currency and complete the entire transaction without any knowledge of Web3.

An assortment of crypto wallet options
No items found.