Highlighting key security features to boost customer trust
Overview
I led the design and launch of Atlassian Guard’s landing page, a new B2B SaaS security product combining Access and Beacon. I partnered with another designer on supporting pages. The redesign built customer trust in the product and drove a 42% increase in user engagement post-launch.
Team
2 Product Designers
1 Developer
1 Product Manager
My role
Product Designer
Website
Context
Atlassian Guard is a new all-in-one security product, replacing Access and Beacon
Atlassian Guard is a new security product combining Access and Beacon. Because Guard didn't exist before, users had no mental model for how these capabilities worked together. The goal was to introduce Guard in a way that communicated trust and clarity across landing, feature pages, pricing, and demo signup.
Challenges
Access and Beacon were established products. Guard introduced new capabilities without a clear mental model. I needed to position it, communicate its value, and help users understand the security features to make confident decisions.
Guard combined multiple security capabilities into one product. The experience needed to build trust for users seeking technical depth while supporting those evaluating at a high level.
Research
Understanding the landscape
I reviewed how Beacon and Access were positioned and explored how other security products communicate complex features. This helped me understand what information resonates, common friction points in our current security product pages, and where they typically struggle with user engagement.
Previous Access page
Previous Beacon page
Analysis
Supporting multiple customer behaviors
Heatmaps on Access and Beacon pages revealed two distinct user behaviors. Some dove straight into technical details, while others acted directly from the landing page. Both were significant, so the experience needed to support both exploration styles. This informed our information architecture and user journey.
Heatmap of Beacon page
Approach
Breaking down Guard's complexity
Guard combines multiple security capabilities. I focused on understanding and simplifying these capabilities into clear, repeatable concepts that would work across landing, feature pages, pricing, and demo signup.
Guard Detect alerts example
Guard simplified
I worked with the content team to map Guard's feature set to three core buckets: protecting, detecting, and responding to threats. These became the organizing principle across all pages.
Protect
Prevent major security breaches and unauthorized access attempts.
Detect
Monitor for suspicious activity across your cloud environment.
Respond
Take fast, informed action to quickly contain and resolve threats when detected.
Designing the experience
Exploring ways to structure the features
With the three pillars defined, I narrowed layout options to two approaches for organizing features. The challenge was giving users enough context to understand Guard's value while making action easy.
Layout 1: scroll
Layout 2: Tabs ✓
I chose Layout 2 because it prioritized clarity and guided users to take action. The tabbed structure made key information accessible without requiring full-page scrolling.
Parity between the landing and subpage
I collaborated with the other designer to align content and visuals, ensuring landing and subpages felt cohesive. I focused on high-level feature summaries so users could quickly grasp Guard's value.
Landing page
Features subpage
Navigating limited engineering capacity
With limited engineering capacity, I partnered with our engineer to adapt design-system components. I added resource cards that updated with the active tab to give customers more context before converting.
Resources grouped under each security pillar tab
V1 launch
A seamless landing experience that builds understanding and drives trial sign-ups
After multiple iterations and reviews, we launched a focused landing page that clearly communicated Guard’s value, supported customer decision-making, and encouraged deeper product exploration.
Simplifying complex security features
The tabbed structure highlighted Guard’s three core capabilities at a glance, while allowing users to explore detailed information at their own pace.
V1 Impact
Launch results
The landing page drove a 42% increase in user engagement within the first month and higher demo requests and trial activations. Analytics showed users spent more time exploring key features.
V2 launch
Refining the experience
In the second launch, I took the lead across landing and subpages for a visual refresh. With more engineering capacity, I rebuilt the experience with custom components to match Atlassian standards and align with other product pages. These changes were guided by learnings from V1, allowing us to solve constraints we couldn't address in the initial launch.
Pricing page
V2 impact
Boosting premium adoption
The premium callout contributed to the 14% increase in Atlassian Guard premium adoption within two months of the second launch.