2022Visual SystemsCommerce

CVS.com E‑commerce Design System

Shaping the shared visual rules behind category browsing, product selection, and fulfillment.

Client: CVS
Role: Associate Design Director
Agency: Razorfish
Year: 2022
Scope: Type framework and icon set
Category colors and shop components, with the design team

The problem

CVS Shop brought health, beauty, and everyday shopping into one storefront. The design challenge was to give shoppers a consistent way to browse while preserving the differences between categories.

The decision

We aligned typography, icon geometry, and reusable components across the shop. Secondary category colors distinguish departments while CVS red and purple stay reserved for CVS Health and Aetna.

My contribution

I refined the type framework and designed the shop's icon set, including the circular grid behind its Sparks. With the design team, I helped develop the category colors, reusable shop components, and fulfillment patterns.

Keep type roles consistent as category content changes

I refined the type framework in CVS Health Sans for readability and a clearer hierarchy across the main shopping flows. Headlines, subheads, and body copy kept their roles as campaign imagery and category content changed. That gave the homepage, department pages, and product listings a common structure.

CVS Shop homepage: a back-to-school hero and the ExtraBucks welcome — Seasonal campaign and ExtraBucks welcome message.

The shop homepage on a phone, with a back-to-school offer — Homepage: a campaign headline leads, with shopping content below.

The Beauty department on a phone, with the ExtraCare BeautyClub card — Beauty: category content changes while headline, supporting copy, and action retain distinct roles.

Nail polish on a phone, with quick filters and product cards — Product listing: category heading, quick filters, and product information form the browsing hierarchy.

The type and category-color rules I shaped with the team carry into navigation and search. Department links give shoppers a path through the catalog, while search brings relevant suggestions and products into the same view.

Desktop Shop menu with department links, colored category shortcuts, and promotional cards — Department links beside promotional cards.

Mobile Beauty menu with pink promotional links above the category list — Pink promotional links above the Beauty category list.

Mobile search showing suggestions, a product card, and the keyboard — Add to cart within search results.

Build varied Sparks from shared geometry

I designed the shop's icon set and shaped its Spark family with the design team around one circular grid. That geometry gave varied page accents a consistent character and draw attention to key messages.

CVS Sparks arranged in a grid — Different accents share the circular construction logic shown below.

One red Spark centered on a complete circular construction grid, with dashed guides on all four sides — Curve, ray, and spacing guides.

Keep price, savings, and fulfillment near the action

I helped shape the product and fulfillment patterns with the team. We kept price, savings, and availability close to the cart action, and brought pickup, local delivery, and shipping into browsing. Fulfillment choice and stock availability also guide which products appear in the shop.

L’Oréal moisturizer: complete listing card with price, savings, cart action, and fulfillment — Standard card: price and savings lead into Add to cart, with fulfillment options below.

Sponsored CeraVe cream: complete listing card with price, savings, cart action, and fulfillment — Sponsored card: the distinct surface preserves the same information and action order.

Product page: a CeraVe jar beside its price, coupons and fulfillment choices — Coupons and stock information above Add to cart.

Detail of the product page: $23.10 price, a Save $2 coupon, an ExtraBucks reward, and a CarePass offer — Detail: price and the coupon choices sit together, ahead of fulfillment.

How do you want to receive this: Pickup, Local delivery or Shipping — Fulfillment selector with a two-hour pickup estimate, a shipping date, and unavailable local delivery.

Let brand content vary within the shopping structure

Brand pages need room for their own imagery and voice. The shared type and component rules I helped shape with the team give that content a consistent shopping structure.

Neutrogena supplies its own campaign imagery; category shortcuts and product cards retain the shop structure.

Shared rules, distinct category content

My part of the system was the type framework and the icon set. With the design team, I also helped develop the category colors and the product and fulfillment components, keeping the shopping structure consistent while giving categories and brands room for their own content.