Buildkite

challenge Documentation site

Redesign Buildkite's Documentation site to improve its information architecture (IA) and better support engineers to integrate Buildkite's new features and products.

scope What I did

  • Design the new IA, navigation and landing pages
  • Redesign homepage
  • Design and build GraphQL API spec docs
  • Rails development
  • Integrate tracking

problem To solve

The documentation site (Docs) is an important part of Buildkite to help engineers and engineering managers to get to know Buildkite's capabilities and integrate it into their DevOps infrastructure. However, Docs' IA doesn't support navigation for new products and features well, and we can improve the design make it easier for new customers to learn about the product.

process To undertake

  1. 1:1 with key stakeholders and team members to gathre problems, insights and ideas
  2. Conduct landscape research in technical documentation from competitors and 'world-class' Docs for inspiration
  3. Co-design, in both async and sync modes of collaboration, with team members across different timezone via Figma and GitHub
  4. UI design with Figma and directly with code
  5. Rails and JavaScript development
  6. Look for future areas of improvement from tracking data
Screenshot of Buildkite's old Docs homepage

Buildkite's old Docs homepage

Screenshot of Buildkite's new Docs site, Test Analytics's landing page

Buildkite's new product, Test Analytics, viewed on a newly designed landing page featuring new navigation header and sidebar

outcomes Delivered

  • Easier navigation for customers through the re-designed IA and navigation structure
  • New IA supports future feature and product releases
  • Engineers can easily explore APIs and integrations, particularly Buildkite's GraphQL API
  • Added new data points, such as web analytics, which integrates with Buildkite's data and analytics stack

future What's next

  • Expand the Docs' team's radius of impact to improve the overall onboarding CX design
  • Integrate Docs' tracking data to evaluate impact to activation and acquisition
  • Design and implement experiments in Docs and the Buildkite app to test different ways to improve customer engagement
Screenshot of Buildkite Docs' GraphQL API schema spec docs for Agent

Engineers can now easily browse the GraphQL API schema. I designed and built the script that generates the entire schema pages