Carmax Horizon

While Horizon already existed as a design system, CarMax lacked a single source of truth to help teams adopt and apply it. Information was spread across files, tools, and team silos, making it hard to onboard new people, ensure consistency, and scale practices across the organization. CarMax needed more than just a reference site, they needed a documentation experience that clearly communicated Horizon’s mission and vision, provided practical guidance, and set the standard for how design and development teams should collaborate.

At the start of the project, we conducted interviews with designers, developers, and product stakeholders to understand how each discipline would use the documentation site. These conversations gave us insight into what information was most valuable to different roles and how they preferred to consume it, which directly informed our content priorities and navigation.

Using what we learned, we created a scalable IA that organized everything from guiding principles and brand foundations to component documentation and resources. This hierarchy was designed to grow with Horizon as the system matured, while keeping navigation clear and approachable for everyday use.

Before moving into high-fidelity design, we mapped out wireframes that showed how content would be grouped and accessed. This allowed us to test and validate the flow early, ensuring the structure supported real user needs before layering on visual design.

We began by creating moodboards to explore how the documentation site should look and feel. The goal was to make the site a natural extension of the CarMax brand while giving it a modern, digital-first edge. These explorations helped us align early with stakeholders and set a clear visual direction for the site.

To keep the documentation authentic, we built the UI using Horizon’s own design system elements, foundations, tokens, and components. This not only reinforced consistency but also turned the documentation site into a living example of the system in action.

With the direction and building blocks in place, we moved into high-fidelity prototypes in Figma. These prototypes showed how the site’s structure, visuals, and interactive elements would come together, giving the CarMax team confidence before development began.

Finally, we introduced visual “dos and don’ts” across the site. These examples modeled best practices directly within the documentation, showing teams not just how Horizon components should look, but how they should and shouldn’t be used.

Beyond the UI, we helped create the building blocks of content within the documentation. This included developing imagery templates for component anatomy, usage examples, and do’s and don’ts, ensuring visuals were consistent and easy to reproduce. We also partnered with the team to refine page content, clarifying tone, simplifying language, and making guidance approachable for both designers and developers.