Overview

CompTIA is an IT certifications and training organization. Each year, dozens of new products and courses are released or updated. After a year and a half of work, the organization was ready to release a newly-updated webstore featuring all those products. However, there was no visual language for representing those products, or more importantly, complex bundles of products.

I was brought in to determine requirements and build a visual language for representing our products and bundles of products in ways that could scale, look beautiful and modern, and feel more physical and valuable.

The Problem Space

In the past, webstore icons were small, abstract, colorless, and didn’t denote a sense of value for what a customer was buying. Even more challenging was that customers just weren’t understanding what they were getting within bundles of products. Products didn’t feel real to them.

The organization needed a way to make digital products feel valuable, consumable, and real, while also being able to scale and easily update with new products or bundles of products. They needed simple, repeatable, expandable a visual language.

***Bundles by Product Line (Old):*** *This shows product bundles of within a single product line, denoted by banner color.*

Design Mocks

Based on requirements and scope, I wireframed basic cards that could show one or many products. I then mocked up a v1 of the design and took that into cross-functional discussions.

Requirements included:

Color use based on the product line
Product details like price, product category, product version, and what’s included in the bundles
Strict size constrains
An image representing the job role related to the products

***v1 Single Product Wireframe and Mock:*** *This showcases a single product card.*

***v1 Bundle Wireframe and Mock:*** *This shows the features of a bundle of products within a card.*

Design Iteration

Initial feedback on the v1 designs led to a v2, reducing color to avoid visual overload. However, as we continued, we felt that the card still didn’t giving a feeling of value and were the appropriate place for showing the job role information.

Further, the sizing restriction was lifted and we were allowed to extend the size vertically to improve the information architecture, such as by using bullets for bundled products.

v3 featured an overhauled layout with areas for a more aesthetic display of bundled options and higher information clarity. This became the approved version to continue forward.

***v2 Bundle Mock:*** *Reduces color overload while still clearly differentiating product line by color.*

***v3 Bundle Card Mock:*** *Shows stacked product representations within a cleaner, taller card design.*

Reinventing the Icons

Users felt the products lacked realism and it was hard to tell what they were getting. So, we moved away from icon-based representations to representations in context, such as an interface on a computer screen. This gave more context to what and how much a user was getting. It increased value association.

*Visual update to the product representations, showing digital products in context of their use.*

*Product Line colors to help differentiate products by type and ensure clarity if ever viewed in a long, unsorted list.*

Building the Visual Language

Once icons were designed, we could determine how best to fit them in a layout to portray value, context, and quantity.

Organizational priorities and sales date helped drive a hierarchy, leading us to only determine an effective layout. Thus, our goal was to create an aesthetically-pleasing, but easily scalable and reproducible system for representing any single or bundle of products.

*Product hierarchy by product line. These are the product types we would then need to visually organize.*

Final visual hierarchy system in use, able to expand or contract based on quantity of products being sold.

Outcomes

The visual system was officially rolled out into CompTIA’s webstore in march 2022 with tens of millions of views per year.
The marketing team took less than eight hours to create and implement all new product representations, reducing workload by weeks of time across a given year.
The new system was so well received that their use was expanded to company and product pages, sales presentations, and more.
The system now takes less time to maintain and has grown and flexed as new product lines and bundles have released.