Overview

CompTIA produces digital IT training content and platforms. 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.*

Mocking Up the UI Cards

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.*

Card Feedback & 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.*

Designing the New Product Icons

To create a feeling of realness and weight, I placed our digital products into physical objects like computers that the organization already had in icon format. This helped the applications (products) appear more tangible and give them more concrete value.

The designs themselves are minimalist representations of each platform’s user interface. This would help users conceptualize what the products were and looked like without bogging them down in too much detail. They would get an aesthetically-pleasing, brand-aligned, contextual feel for the types and quantities of products at-a-glance. With that visual information displayed, users would gain a sense of value.

***Base Icon Set:*** *This is the set of icons I designed to represent each of our major product lines. Icon accent colors and UI card colors would change based on the certification/product line.*

***Color Alignment Per Certification/Product Line:*** Each certification has an established color scheme to set it apart from others. By embracing this color scheme, I could ensure brand alignment and that different products viewed next to each other in the webstore were easily differentiated.

Building the Visual Language

Once the base icons were built, I could test various physical product layouts, “stacking” them in aesthetically pleasing ways to show depth and quantity.

Based on internal data and organizational priorities, there was a clear hierarchy of products we wished to represent. eLearning products would always be featured first, followed by exam prep or labs products, books, and finally, other products like certification exam vouchers.

The only next task was assembling the component products in a way that fit the space and was aesthetically pleasing. The goal here was to show quantity, types, and value of what a user was getting.

***Products by Priority within a Bundle****: This priority was defined by internal organization factors, allowing me to then focus on how to visually represent these products in physical a stack.*

***Visual Hierarchy:*** *This shows the placement of products in a bundle based on the quantity of products in that bundle.*

***Visual Hierarchy:*** *This shows one possible representation of stacked products within various bundle sizes. Regardless of the quantity of products in the bundle, the layout is the same each time, allowing for easy reuse.*

Using this design system, the organization’s design production team could take any product and place it in into any bundle in a standardized, visually-coherent way. If sales or other departments created new products or bundle types, the design production team could simply use the design system to know how it should be represented.

Outcomes

My design system was officially implemented in a new webstore rollout in March 2022 with millions of viewers per year.

Based on the new system, the organization’s design production department created the entire scope of icons in a matter of hours, not days or weeks. This removed the need to create any new iconography for the foreseeable future. This significantly reduced workload for new or updated products and set the standard for product representation in landing pages, marketing material, presentation decks, and more.

As products change and grow, or as new bundles are added or modified, this design system can flex and grow with it, allow the organization to save production time and money in perpetuity.