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
Access provided account security but lacked advanced threat detection. Beacon added basic alerts, yet customers needed a complete solution. Guard combined both to fill the gap.
Previous Access page
Previous Beacon page
Challenges
Guard combined multiple security capabilities into one product. The page needed to build trust with technical customers without overwhelming those who aren't technical.
The page needed to highlight premium benefits without distracting from Guard’s core value.
Approach
Breaking down Guard's complexity
Guard’s wide range of security features can overwhelm users. To design an effective landing page, I first focused on understanding and simplifying the core capabilities.
Guard Detect alerts example
Guard simplified
To simplify Guard’s complexity, I mapped features to three core features: protecting, detecting, and responding to threats.
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
FInal Designs
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.
Boosting premium adoption
Impact
Launch results
The 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.