Silobreaker Website UX/UI Design

Silobreaker website design case study banner – top view of a laptop surrounded by an angled grid of page layouts

Role

UI designer, UX designer, project manager

Timeframe

6 months

Tools Used

Adobe Photoshop Logo Figma Logo

Overview

Silobreaker is an enterprise cybersecurity intelligence company whose platform streamlines cyber operations by identifying and prioritizing threats using real-time data from millions of sources across the light and dark web. In 2022, the company was repositioning in the market and needed a website design to empower users with a clear understanding of Silobreaker’s value proposition.

Business Goals

  • Increase the rate of conversions of website visitors
  • Communicate the value proposition more clearly
  • Improve SEO with better incorporation of keywords

Silobreaker breaks barriers between data sources.

I helped them break barriers with their customers.

The Old Site

The old site was content-heavy and lacked visual contrast, making it hard for users to find necessary information. The sitemap overemphasized use cases and neglected key product features, contributing to low conversion rates.

Silobreaker old website design screenshots

Research Insights

Interviews with Silobreaker’s leadership revealed that senior cybersecurity professionals needed clear, quick access to product features. CISOs required digestible information for quick decisions, while Threat Intelligence Directors focused on dashboard benefits for streamlined operations.

Competitor analysis icon – brain with lines and nodes

These users are data- and results-driven and act based on analysis, not intuition.

Time/speed icon – Stopwatch with speed lines protruding from it

CISOs have limited time to evaluate products, so they tend to make quick decisions and need key information quickly in a digestible format.

Dashboard benefits icon – simple digital product dashboard layout

Threat Intelligence Directors are interested in product dashboard benefits to streamline day-to-day operations.

During a conversation with Silobreaker’s CMO, we discussed key competitors:

Mandiant and Darktrace used red hues as their primary accents, emphasizing danger, and Mandiant’s imagery was dark and foreboding. Silobreaker aimed to stand out with a clean, positive design using blue as the primary accent color, representing safety and trust.

Competitor analysis – Mandiant logo and website screenshot from 2022
Competitor analysis – Darktrace logo and website screenshot from 2022
Competitor analysis – Crowdstrike logo and website screenshot from 2022

Hypothesis

The sitemap didn’t effectively communicate the depth or extensibility of Silobreaker’s product, leading to low conversions.

Sitemap + User Flow

Google Analytics showed high traffic to the homepage and product overview page. I collaborated with Silobreaker’s marketing team and their external SEO specialists to create a new sitemap that balanced use cases with detailed product pages, optimizing user flow to encourage demo requests.

Silobreaker – old website sitemap (hierarchical tree structure)
Old sitemap
Silobreaker – new website sitemap (hierarchical tree structure)
New sitemap
Silobreaker website user flow/prototype diagram – wireframes with connecting arrows

User Flow

It takes a village

The process involved end-to-end collaboration between cross-functional teams.

Design Process

Based on the competitor audit, the design team and I decided on blue as the primary accent color for Silobreaker, with red as a secondary accent. Simple geometric shapes represent the influx of data that SecOps professionals encounter on a daily basis, and grid-based patterns of those shapes illustrate Silobreaker’s ability to organize, analyze and contextualize many data points. Our design process included paper sketches, wireframes, and a full design in Photoshop, which we provided to the engineering team for the live build.

Silobreaker website/brand sticker sheet

Continuous improvement, thanks to real-time data analysis

Post-launch UX tweaks helped optimize the site to meet Silobreaker’s business goals.

Testing + Iterations

After the site launched, we found that most users didn’t scroll all the way to the bottom of the page, based on Hotjar heatmaps. On the homepage, users tended to click links to the platform overview pages, so they never saw the CTA above the footer that directs users to sign up for a demo. As such, we tried adding a sticky button to the bottom right corner of the viewport. Though users still clicked through to 2-3 pages before scheduling a demo, we found that the sticky button was successful, increasing the overall conversion rate by just under 10%.

We also received early feedback from users that the homepage didn’t articulate the platform’s features clearly enough. We changed the platform overview section below the hero banner from a to a tabbed layout, highlighting the platform’s four key pillars. This change resulted in a decreased bounce rate and longer time spent on the page.

Silobreaker website design case study – desktop monitor with 5 screen designs projecting out out of it
Person's hands navigating Silobreaker website homepage design on a tablet

Future Opportunities

In hindsight, incorporating user testing early on would have addressed more user pain points. Despite this, the project successfully improved the user experience and has remained effective over time.

What I learned:

UX, UI, and SEO go hand-in-hand—and not just because they’re all acronyms. Collaboration is crucial for positive strategic outcomes.