Webpage Redesign- Platform

LOCAL/

15:35:52

contact

15:35:52

contact

Atlassian platform

I was the design lead for redesigning Atlassian platform – a cloud-based ecosystem designed to connect teams, tools, and data to improve productivity and collaboration across software, IT and business teams.

Product

platform

What I did

product design

My role

design lead

Timeline

13 Weeks

Impact

Influenced $662K in new enterprise pipeline
Achieved an 80 % response rate—nearly 2× our 45 % target
Cut bounce rate in half, from 80 % down to 40 %

Context & Problem

An 80% bounce rate meant we were losing 4 out of every 5 enterprise prospects, undermining sales targets. Enterprise buyers couldn’t grasp platform value, got lost in navigation, and missed clear calls to action, which directly drove low demo requests and stalled pipeline growth.

Project Goal

Drive a 2× lift in enterprise demo requests by:
Clarifying platform value and positioning

Guiding buyers swiftly to “Contact Sales”
Building trust through targeted social proof

What we learned

Key Findings (Pain Points)

Unclear Value → 60% Drop-off Before Pricing
Prospects couldn’t see how platform solved their problems or what it cost, so they abandoned the page before even exploring pricing tiers.

Undefined Audience → 30% Disengagement
Visitors were unsure if platform was for admins, champions, or executives—leading each group to bounce when they didn’t see role-specific messaging.
Hidden CTAs → 70% Scrolling Without Converting
With primary CTAs buried below the fold and styled like links, most users scrolled endlessly without ever scheduling a demo.

What is Platform?

Who uses platform?

What do I do next?

What is Platform?

Who uses platform?

What do I do next?

Reduced Bounce Rate

Response Rate

$0K

Sales Pipeline

Context & Problem

Guiding buyers swiftly to “Contact Sales”
Building trust through targeted social proof

Guiding buyers swiftly to “Contact Sales”
Building trust through targeted social proof

What we learned

Key Findings (Pain Points)

Unclear Value → 60% Drop-off Before Pricing
Prospects couldn’t see how platform solved their problems or what it cost, so they abandoned the page before even exploring pricing tiers.

Undefined Audience → 30% Disengagement
Visitors were unsure if platform was for admins, champions, or executives—leading each group to bounce when they didn’t see role-specific messaging.
Hidden CTAs → 70% Scrolling Without Converting
With primary CTAs buried below the fold and styled like links, most users scrolled endlessly without ever scheduling a demo.

What we learned

Key Findings (Pain Points)

Unclear Value → 60% Drop-off Before Pricing
Prospects couldn’t see how platform solved their problems or what it cost, so they abandoned the page before even exploring pricing tiers.

Undefined Audience → 30% Disengagement
Visitors were unsure if platform was for admins, champions, or executives—leading each group to bounce when they didn’t see role-specific messaging.
Hidden CTAs → 70% Scrolling Without Converting
With primary CTAs buried below the fold and styled like links, most users scrolled endlessly without ever scheduling a demo.

Design Process

Aligned Personas & Assumptions
Ran a 2-hour workshop to define our three core enterprise personas—admins, champions, leaders—cutting research ambiguity.

Targeted Research
Conducted 13 user interviews and leveraged heatmaps, scroll-depth, and click tracking to validate navigation and messaging gaps.
Data-Driven Wireframes
Partnered with content design to restructure page hierarchy, prioritized CTAs based on click-through data.

Design Process

Aligned Personas & Assumptions
Ran a 2-hour workshop to define our three core enterprise personas—admins, champions, leaders—cutting research ambiguity.

Targeted Research
Conducted 13 user interviews and leveraged heatmaps, scroll-depth, and click tracking to validate navigation and messaging gaps.
Data-Driven Wireframes
Partnered with content design to restructure page hierarchy, prioritized CTAs based on click-through data.

Aligned Personas & Assumptions
Ran a 2-hour workshop to define our three core enterprise personas—admins, champions, leaders—cutting research ambiguity.

Targeted Research
Conducted 13 user interviews and leveraged heatmaps, scroll-depth, and click tracking to validate navigation and messaging gaps.
Data-Driven Wireframes
Partnered with content design to restructure page hierarchy, prioritized CTAs based on click-through data.

I used a user-centered, data-driven design process to better understand the needs of users.

Quantitative Analysis:

Heatmaps, scroll depth, click rates, and bounce rates were analyzed to identify user behavior patterns.

Assumption Mapping Workshop:

Collaborated with PM & stakeholders to align on goals and prioritize research questions.

User Interviews and Usability Testing:

Conducted interviews with 13 participants across three personas: Enterprise Admins, Champions, and Leaders.
Tested the existing webpage for navigation, content clarity, and actionability.

Key Findings:

Users needed more clarity about the platform’s purpose and value.
Industry-specific content and social proof were missing.
Navigation was unintuitive, and critical CTAs were buried or unclear.

Assumption Mapping Workshop
Enterprise personas
Data-Driven Wireframes
Assumption Mapping Workshop
Enterprise personas
Data-Driven Wireframes
Assumption Mapping Workshop
Enterprise personas
Data-Driven Wireframes
Assumption Mapping Workshop
Enterprise personas
Data-Driven Wireframes

Final Design

Overview:

The Platform Webpage Redesign for Atlassian.com was a data-driven, user-centered redesign focused on improving engagement, reducing bounce rates, and driving conversions for enterprise customers. By simplifying navigation, clarifying the platform's value, and refining calls to action, I significantly enhanced the user experience.

Final Design

Final Design

INITIAL DESIGN
⛔️ Before the redesign, the landing and all child pages featured only one CTA—the newsletter signup.
⛔️ Despite an OKR to drive enterprise growth, users were frustrated by the lack of a clear “Contact Sales” option—undermining conversion opportunities.
RE-DESIGN/ Define Clear Actions
Solution:

✔️Persistent CTAs at top & bottom of key pages.
✔️Bold, accessible buttons replacing text links.
✔️Heatmap-driven cta placement at natural pause points.
✔️Short demo videos embedded for extra context.
INITIAL DESIGN
⛔️ 63% of users scrolled down and clicked or hovered over the graphic—but it added no value. The static, unclear diagram failed to explain how platform worked or highlight its benefits.
RE-DESIGN/ Show platform value
Solution:

✔️Layered Visuals: Broke platform into infrastructure, features, and integrations, so users could grasp how it all fits.
✔️Concise Microcopy: Worked with content and added bite-sized explanations for each layer—what it does, why it matters, and how it maps to real workflows.
✔️Modular Interactivity: Made each segment clickable, letting users dive into related product pages based on their interests. This shift transformed a passive image into an engaging guide that empowers users to explore and understand Atlassian Platform.
INITIAL DESIGN
⛔️ The old design lacked trust signals—proof points, or validation—so buyers hesitated. In user interviews, I learned that industry-specific success stories were critical: prospects needed to see peers like them succeeding before they’d move forward.
RE-DESIGN/ Social proof
to build trust + awareness
Solution:

✔️Teamed up with Product Marketing to showcase top customer logos up front, instantly signaling credibility.
✔️Added a horizontal carousel of industry-specific case studies, surfacing multiple success stories without lengthening the page.
✔️Embedded direct enterprise quotes calling out real-world ROI, making outcomes feel tangible and relatable.
INITIAL DESIGN
⛔️ Before the redesign, the landing and all child pages featured only one CTA—the newsletter signup.
⛔️ Despite an OKR to drive enterprise growth, users were frustrated by the lack of a clear “Contact Sales” option—undermining conversion opportunities.
RE-DESIGN/ Define Clear Actions
Solution:

✔️Persistent CTAs at top & bottom of key pages.
✔️Bold, accessible buttons replacing text links.
✔️Heatmap-driven cta placement at natural pause points.
✔️Short demo videos embedded for extra context.
INITIAL DESIGN
⛔️ 63% of users scrolled down and clicked or hovered over the graphic—but it added no value. The static, unclear diagram failed to explain how platform worked or highlight its benefits.
RE-DESIGN/ Show platform value
Solution:

✔️Layered Visuals: Broke platform into infrastructure, features, and integrations, so users could grasp how it all fits.
✔️Concise Microcopy: Worked with content and added bite-sized explanations for each layer—what it does, why it matters, and how it maps to real workflows.
✔️Modular Interactivity: Made each segment clickable, letting users dive into related product pages based on their interests. This shift transformed a passive image into an engaging guide that empowers users to explore and understand Atlassian Platform.
INITIAL DESIGN
⛔️ The old design lacked trust signals—proof points, or validation—so buyers hesitated. In user interviews, I learned that industry-specific success stories were critical: prospects needed to see peers like them succeeding before they’d move forward.
RE-DESIGN/ Social proof
to build trust + awareness
Solution:

✔️Teamed up with Product Marketing to showcase top customer logos up front, instantly signaling credibility.
✔️Added a horizontal carousel of industry-specific case studies, surfacing multiple success stories without lengthening the page.
✔️Embedded direct enterprise quotes calling out real-world ROI, making outcomes feel tangible and relatable.
INITIAL DESIGN
⛔️ Before the redesign, the landing and all child pages featured only one CTA—the newsletter signup.
⛔️ Despite an OKR to drive enterprise growth, users were frustrated by the lack of a clear “Contact Sales” option—undermining conversion opportunities.
RE-DESIGN/ Define Clear Actions
Solution:

✔️Persistent CTAs at top & bottom of key pages.
✔️Bold, accessible buttons replacing text links.
✔️Heatmap-driven cta placement at natural pause points.
✔️Short demo videos embedded for extra context.
INITIAL DESIGN
⛔️ 63% of users scrolled down and clicked or hovered over the graphic—but it added no value. The static, unclear diagram failed to explain how platform worked or highlight its benefits.
RE-DESIGN/ Show platform value
Solution:

✔️Layered Visuals: Broke platform into infrastructure, features, and integrations, so users could grasp how it all fits.
✔️Concise Microcopy: Worked with content and added bite-sized explanations for each layer—what it does, why it matters, and how it maps to real workflows.
✔️Modular Interactivity: Made each segment clickable, letting users dive into related product pages based on their interests. This shift transformed a passive image into an engaging guide that empowers users to explore and understand Atlassian Platform.
INITIAL DESIGN
⛔️ The old design lacked trust signals—proof points, or validation—so buyers hesitated. In user interviews, I learned that industry-specific success stories were critical: prospects needed to see peers like them succeeding before they’d move forward.
RE-DESIGN/ Social proof
to build trust + awareness
Solution:

✔️Teamed up with Product Marketing to showcase top customer logos up front, instantly signaling credibility.
✔️Added a horizontal carousel of industry-specific case studies, surfacing multiple success stories without lengthening the page.
✔️Embedded direct enterprise quotes calling out real-world ROI, making outcomes feel tangible and relatable.
INITIAL DESIGN
⛔️ Before the redesign, the landing and all child pages featured only one CTA—the newsletter signup.
⛔️ Despite an OKR to drive enterprise growth, users were frustrated by the lack of a clear “Contact Sales” option—undermining conversion opportunities.
RE-DESIGN/ Define Clear Actions
Solution:

✔️Persistent CTAs at top & bottom of key pages.
✔️Bold, accessible buttons replacing text links.
✔️Heatmap-driven cta placement at natural pause points.
✔️Short demo videos embedded for extra context.
INITIAL DESIGN
⛔️ 63% of users scrolled down and clicked or hovered over the graphic—but it added no value. The static, unclear diagram failed to explain how platform worked or highlight its benefits.
RE-DESIGN/ Show platform value
Solution:

✔️Layered Visuals: Broke platform into infrastructure, features, and integrations, so users could grasp how it all fits.
✔️Concise Microcopy: Worked with content and added bite-sized explanations for each layer—what it does, why it matters, and how it maps to real workflows.
✔️Modular Interactivity: Made each segment clickable, letting users dive into related product pages based on their interests. This shift transformed a passive image into an engaging guide that empowers users to explore and understand Atlassian Platform.
INITIAL DESIGN
⛔️ The old design lacked trust signals—proof points, or validation—so buyers hesitated. In user interviews, I learned that industry-specific success stories were critical: prospects needed to see peers like them succeeding before they’d move forward.
RE-DESIGN/ Social proof
to build trust + awareness
Solution:

✔️Teamed up with Product Marketing to showcase top customer logos up front, instantly signaling credibility.
✔️Added a horizontal carousel of industry-specific case studies, surfacing multiple success stories without lengthening the page.
✔️Embedded direct enterprise quotes calling out real-world ROI, making outcomes feel tangible and relatable.

Impact

Redesign Results

Influenced $662K in new enterprise pipeline
Achieved an 80 % response rate—nearly 2× our 45 % target
Cut bounce rate in half, from 80 % down to 40 %

Impact

Redesign Results

Influenced $662K in new enterprise pipeline
Achieved an 80 % response rate—nearly 2× our 45 % target
Cut bounce rate in half, from 80 % down to 40 %

Final Design

Overview:

Define clear actions
Simplified user navigation with well-placed CTAs, featuring “Contact Sales” at both the top and bottom for maximum visibility.
Show platform value
Incorporated interactive visuals within pillar-based containers, creating a clear and engaging space for video content.
Modular, Scalable Design
Designed scalable interactive elements, allowing future updates without an entire page overhaul.
Show platform value
Refreshed the original diagram by adding interactive elements, new creative details, and descriptive copy.
Show platform value
Enhanced SEO by adding descriptive copy to each element, improving user comprehension.
Show platform value
Broke down each element to unlock strategic cross-linking possibilities.
Define clear actions
Simplified user navigation with well-placed CTAs, featuring “Contact Sales” at both the top and bottom for maximum visibility.
Show platform value
Incorporated interactive visuals within pillar-based containers, creating a clear and engaging space for video content.
Modular, Scalable Design
Designed scalable interactive elements, allowing future updates without an entire page overhaul.
Show platform value
Refreshed the original diagram by adding interactive elements, new creative details, and descriptive copy.
Show platform value
Enhanced SEO by adding descriptive copy to each element, improving user comprehension.
Show platform value
Broke down each element to unlock strategic cross-linking possibilities.
Define clear actions
Simplified user navigation with well-placed CTAs, featuring “Contact Sales” at both the top and bottom for maximum visibility.
Show platform value
Incorporated interactive visuals within pillar-based containers, creating a clear and engaging space for video content.
Modular, Scalable Design
Designed scalable interactive elements, allowing future updates without an entire page overhaul.
Show platform value
Refreshed the original diagram by adding interactive elements, new creative details, and descriptive copy.
Show platform value
Enhanced SEO by adding descriptive copy to each element, improving user comprehension.
Show platform value
Broke down each element to unlock strategic cross-linking possibilities.
Define clear actions
Simplified user navigation with well-placed CTAs, featuring “Contact Sales” at both the top and bottom for maximum visibility.
Show platform value
Incorporated interactive visuals within pillar-based containers, creating a clear and engaging space for video content.
Modular, Scalable Design
Designed scalable interactive elements, allowing future updates without an entire page overhaul.
Show platform value
Refreshed the original diagram by adding interactive elements, new creative details, and descriptive copy.
Show platform value
Enhanced SEO by adding descriptive copy to each element, improving user comprehension.
Show platform value
Broke down each element to unlock strategic cross-linking possibilities.