Building upon the previous design system, we started with a full suite of colors. Based on user interviews, people were confused on when to use specific colors. Resulting in a wide variety of usages across the website and tools. Our team created in depth documentation with the product teams to build a stronger understanding and consistency. Another key component, is all color usage must meet a minimum AA compliance standard. We built out schematic tables to help illustrate the proper usage over each approved background color.
Like our color system, we dove into every minute detail of every component across the CarMax ecosystem. One fascinating finding was around the number of different components live on the CarMax website. For example, our team identified 38 unique button styles. Again, this was mostly due to the lack of documentation and guidelines.
Stress testing our components across the current state of products was critical. However, we also used the opportunity to collaborate with less represented teams like Auctions to showcase the power of this new system. Below, I built a new landing page for our CarMax Auctions website that features the updated design system components.