Atlassian Website Redesign
Background
In January of 2024, senior leadership aligned on the need for a complete website refresh for Atlassian. This was not just a short-term update but a strategic move to set the stage for our digital presence for the next decade.
It was our chance to step back, look at the entire body of work holistically, and see where we could take a more systematic approach. It was to be the first such redesign in 8 years, with a long-term impact in mind.
I was the project's Directly Responsible Individual (DRI), leading work across our Marketing, Engineering, Product, and Creative Teams. I ensured that all voices were heard, all data w
Why Now?
Brand refresh
This project was initially scoped as an opportunity to align our brand across all surfaces for Team 24, our annual user conference. It was our first such redesign in 7 years and was not limited to the look and feel of our visual language but also extended into our voice and tone. We took a "show, don't tell" approach, favoring actual product shots and animation, where we previously had a more illustration-heavy style. This was an opportunity to create more seamless end-to-end experiences for our customers.
Migration to a new tech stack
While the initial impetus for the project was our upcoming Brand Refresh, it quickly became apparent that the planned migration of our web properties to a new tech stack, a more modern front end, and a CMS shared with our products would open a world of possibilities.
While we previously used our design system for some pages, much of the website had been built as "one-offs", leading to inconsistent experiences and hindered growth. With our migration, we now had the opportunity to rebuild pages using the best versions and a template-based approach. This would improve performance, accessibility, localization, and responsive design. Additionally, sharing a tech stack with our product teams would allow for more seamless end-to-end customer experiences.
Targeting the Enterprise
With the move upmarket to target enterprise customers, the site needed to be redesigned to make that information more easily accessible and take a more sales-led (rather than product-led) growth approach.
Executive buy-in
Upon taking on the increased scope of the Head of Growth Platform, I authored and socialized a report on the state of the current site and processes. This created support to address not just the Brand and Architectural changes but also a host of known issues and UX debt.
Goals
Create more seamless E2E experiences.
From both a brand and interaction perspective.
Successfully migrate pages representing 40% of site traffic.
Increase sign-up by 15% on product tours* and via the homepage.
Increase sign-up rates
Rebuild pages on the new tech stack for performance/architecture improvements.
Increase page views on Enterprise and Customers pages.
Increase the speed of authoring and rollout of
experimentation wins.
What We Did
Gathered Formative Data
First, we gathered all the data we could get quickly. This ranged from existing web analytics, support tickets, and items in our JIRA backlogs to Interviews with key stakeholders (including execs) and performing a Landscape Analysis, looking at key competitors and other best-in-class solutions from different industries for inspiration.
Two-Day Virtual Kick-Off
We then ran a cross-functional workshop, during which we gathered to understand the problem space, define success, and develop a working plan.
It included representatives of Design, Brand/Creative, Engineering, Product Management, Product Marketing, Performance Marketing (SEO and Production), and Support. (As well as visits from senior leadership to inspire the team)
We reviewed all of the data we had amassed, built consensus on what success would be, and made inroads into the taxonomical approach to the work.
The output from this workshop was a set of Guiding Principles used as a rubric for subsequent design reviews.
...and scope of work was broken up into two phases:
In the first phase, we would address the homepage and navigation as the two main workstreams. We would use this work to help land the Brand and key patterns and components for reuse across the site at large.
In the second phase, we would scale those foundations across the pricing pages for all products, the Customer pages (including 135 individual case studies pages), and the Enterprise pages. We also took this opportunity to update the key patterns and components of our design system, allowing this work to then scale across the rest of the site, including any "lift and shift" migration of pages.
Homepage Design
We started by going broad. Ideas were fleshed out in multiple directions for both the Homepage and the Brand (as it would manifest on marketing pages).
These were then brought to Crit for feedback prior to a weekly review with the executives.
Executive Buy-in
Upon taking on the increased scope of the Head of Growth Platform, I authored and socialized a report on the state of the current site and processes. This created support to address not just the Brand and Architectural changes but also a host of known issues and UX debt.
Critique
We met briefly every other morning to review work-in-progress as a core team.
We also leveraged Figma commenting for async feedback as the team was spread across the United States and Canada.
Executive reviews
We reviewed our work fortnightly with the CEO, CMO, CXO, Head of Global Creative, and other cross-functional leaders.
Initial meetings were held in person, with followups as Zoom meetings or Loom Recordings
Modular approach
We then built out our design alternatives using a modular approach. This allowed us to easily create multiple permutations for experiementation and set permissions for later federated authoring.
Modules would have either informational or inspirational themes and be created as reusable patterns/code for use throughout the site.
.png)
Brand
The content spoke to the users’ value and informed buying decisions more quickly. The tone was balanced between a well-established market leader and a fast-growing company. Progressive disclosure was used to provide additional context whenever possible.
We took a "Show-don't-tell" approach, moving from a previous illustrative style to using actual screens of the products. We judiciously used motion and animation throughout the page, ranging from subtle expression-driven animation (e.g., numbers in a counter spinning up from zero) to a more robust style for narrative-driven use of products.
.png)
.png)
Reusable patterns and components
We used the redesign as an opportunity to standardize key patterns, which could then be reused across the site.
These were built as reusable code components, increasing our velocity and allowing designers across several teams to maintain cohesive experiences while working in parallel.
Examples included: Statistics, Carousel (used for customer stories), Card array
.png)
Federated authorship - the beginnings
Key areas of the page can be updated with no need for Design or Engineering
One such area was the “Banner Alert” (at the top of the homepage).
Key Stakeholders now had the ability to update and schedule time sensitive banners of several types directly.
This removed the need for last-minute pushes from Engineering and gave Marketing leads the ability to update content quickly.
Navigation
While we needed to move quickly to high-fidelity work in Phase 1, we fleshed out wire-frames for several directions and did an in-person review with the core team for feedback
Two concepts were fleshed out for each navigation type:
Global nav
Product nav
Upon review, we realized we needed a third hybrid nav for non-product pages other than home
Global navigation
We created a broader/shallower taxonomy to allow for more accessible wayfinding.
Enterprise and key differentiators were added to global navigation.
We took a "revenue first" approach, moving company info and other non-revenue generating (or supporting) information to the footer (increasing the signal-to-noise ratio)
We added motion/transitions judiciously and added visual hierarchy to items within the menu fly-outs.
Product navigation
We investigated several alternatives for product navigation on the atlassian.com site. We went in three directions initially:
-
A simple brand refresh while maintaining the compound global and product navigation interaction
-
A brand refresh with the addition of surfacing global navigation on hover or selection of the Atlassian logo
-
A complete redesign, with global navigation no longer present. Selecting the Atlassian logo would bring the user to the homepage.
We initially chose option 3, as it was the simplest design, received the most positive feedback from stakeholders, and added just the right amount of friction to keep users on task. However, we realized that removing global navigation would negatively impact SEO, so we pivoted to option 2.
This approach allowed us to remove initial complexity and redundant links shown in global and product navigation (e.g., Enterprise links) while still maintaining SEO and the ability to navigate laterally.
.png)
Phase 2 - Extending our learnings
We were able to start Phase 2 by gathering, in person, with our cross-functional peers (and each other)
We spent a week in our Austin office to begin work on the Customer, Enterprise, and Pricing pages as well as the downstream impact of this work on the Design System
Experimentation plan
Working closely with Engineering, we set up a plan for experimentation on:
-
Homepage
-
Customers
-
Enterprise
-
Global Nav and Product Nav
-
Personalization within the Homepage redesign
Intentional togetherness
Since we were able to get everyone together in person, we took the opportunity to have a little fun and get to know each other better.
Pricing pages
Since our pricing pages were well established, we started with a “Rose, thorn, bud” exercise to assess their current state.
We included not only the customer experiences for these pages but also the authoring experiences.
Crazy 8s, followed by some medium-fidelity prototyping on the second day, resulted in updates to the page itself and the process.
Final designs for the pricing pages removed the data center as an option (and the now unnecessary tabbed interface), and the "Calculator" interface was given a horizontal orientation, also taking up less vertical space.
These two things together brought the primary CTA above the fold for our target minimum resolution.
We added a rationale for why Annual pricing might make sense and changed the access to more info from a tooltip to an expandable "twistie" that allowed the user to open several at once and compare.
Customers pages
Three major changes were made to the customers' page. The first was the ability to find the customer's page. Previous versions of the global navigation had hidden the link, so the entirety of the page's traffic came from paid or organic search.
We added a link to the Customer stories from the newly added "Why Atlassian" section of the global nav.
The second was combining the customer landing page and search page into a single page, with featured customer stories at the top and the ability to search for additional stories on the same page. As the overwhelming majority of traffic to the landing page immediately navigated to the search page, we hypothesized that combining the two would remove a step and make it easier for our customers to get the info they were looking for.
Lastly, all 135 customer stories were migrated to a single template on the new tech stack. These pages were now more performant and more consistent, allowing readers to see similar info in the same place across customers.
An authoring environment on top of the new CMS allowed these customer stories to be edited and new ones created without the need for design or engineering resources.
Enterprise Pages
While the Enterprise pages were completely rebranded, the three most significant updates were the addition of an "Enterprise" link in the global navigation, simplifying the secondary navigation within the Enterprise pages, and clear CTAs above the fold.
These changes alone resulted in a significant uptick in pageviews.
.png)
.png)
Impact: Performance and Process
Performance improvement resulted in a 4% lift in signups from paid landing pages and a 15% average lift in click rates alone.
Migration of Key Pages for Team 24 in a fraction of the time
A reduction of authoring time from ~5 months to a single 2-week sprint for most page types.
The establishment of a framework to quickly roll out changes across pages allowed for faster page creation and updates, federated contribution for content creation, and faster adoption of experimentation wins.
Worked more closely with the creative team, resulting in a higher quality of work.
Navigation/Homepage redesign:
Homepage: Improved Sign Up rates by 23.8%
Enterprise: Increased page views by 61.4%
Customers: Increased page views by 68.2%