← Back to all projects

Redesigning Documentation Hub for Better Engagement

Screenshot of CircleCI's redesigned developer hub homepage.
Client
CircleCI
Services
Web Design
Deliverables
UI Designs, Prototypes
Date
2022
Website
Visit site

Project Goals

CircleCI’s developer hub and documentation site were isolated on separate platforms, making it difficult for users to navigate and find relevant information. To create a more seamless and effective experience, the project aimed to unify these resources into a single, structured site that aligned with user needs, improved accessibility, and provided a consistent, modern interface using the design system.

Problem

Having two separate platforms, neither using the design system, created a disjointed and outdated experience that didn't have a specific focus.

Solution

Create a more intuitive and engaging experience for CircleCI users by consolidating the two platforms into a single resource with a focus on relevant audiences.
Challenge
A resource hub for developers of varying experience.
Solution
Branded developer hub and documentation site with targeted content.
Learnings
Balance between marketing brand and product design system.

Result

The unified site shipped on schedule and drove a 30% increase in engagement on the pages we targeted. Accessibility scores improved 20% across the site (as measured via Lighthouse and WCAG audits), and the restructured docs gave developers a direct path from documentation into the relevant area of the product.

Annotated screenshot of CircleCI's developer hub site before and after redesign.
Annotated screenshot of CircleCI's documentation site before and after redesign.
No items found.

We sequenced the work to de-risk the merge: back-end replatforming came first, unifying the infrastructure of the developer hub and the documentation site so they could become one, and I worked directly with engineers on the architectural decisions that phase required. The front-end rollout followed in two releases driven by my site audit, applying the CircleCI design system to unify branding and resolve the accessibility issues the audit had surfaced: first the developer hub, which became the combined site's landing page, then the docs landing page to complete the migration.

Process & Execution

  • Site audit: Screen capture and inspect both sites to compare and identify inconsistencies, patterns, and structures.
  • Accessibility audit: Use plugins to assess accessibility against WCAG standards.
  • Research: Gather research and analyze findings to identify user needs and requirements.
  • Ideate: Wireframe and mock up dozens of iterations and possible solutions.
  • Feedback: Solicit feedback from a wide variety of stakeholders to meet all business requirements.
  • Refine: Use feedback to improve the iterations until we had the desired solution.
  • Ship: Work closely with engineers to build and ship the final designs.
  • Monitor: Collaborate with product to monitor built-in analytics and track performance.
A heatmap of user activity on the original documentation home page, showing low engagement and no focus.
Bar charts showing qualitative and quantitative research findings about users. Most users are DevOps Engineers and Software Engineers, looking to learn about pipelines, spending the most amount of time on configuration reference pages.
Screenshot of multiple iterations of the landing page, testing different layouts and contents.
Annotated screenshots of final pages, showing unified navigation, branded visual language, shared components, and content tailored for new users.

Research & Analytics

I was able to use a mixture of resources and prior research to validate the principles and approach to this design.

  • Internal interviews: I conducted informal interviews with internal stakeholders, including the team that manages user requests regarding the site.
  • Marketing review: I analyzed the existing marketing website and underlying research to understand what educational content the company prioritizes.
  • Top Tasks analysis: I reviewed prior research assessing what information prospective and existing customers want to know.
  • Experiment results: A prior experiment for new users provided valuable insight into some items that were not as useful as we hypothesized.
  • Competitor analysis: I reviewed competitor dev hubs, docs sites, and papers regarding what users want in a CI tool.

Core Principles

Clear navigation

  • There are a variety of user types for this site, so navigation must be as clear as possible to provide the fastest possible path to what different users want to find.

Hierarchy and visual appeal

  • A primary complaint about the site was that it was a "wall of text" - which was both uninteresting and provided no clear calls to action.

Exploration funnel

  • We also wanted to add more ways for users to sign up and try CircleCI from the developer hub. We wanted to lower the barrier between information gathering and taking action.
← Back to all projects