top of page

CASE STUDY

DIRECTV Merch Design Library

One of my main objectives on the DIRECTV Merchandising Team was to develop and implement new efficiencies and ensure my creative team followed the latest corporate guidelines. Some of my primary leadership responsibilities included managing and improving our creative process, streamlining team function, and ensuring correct and updated files and templates we used on our ongoing projects.

The CHALLENGE

The Merch Creative Team received finalized component designs for creating new full-page comps. While these new designs benefitted our design efforts, they were raw files created for a singular instance. When the designers began using these for their page layouts, the inconsistencies in the details (like spacing, font sizes, and font weights) became noticeable.

 

Ultimately, the designs were helpful but had drawbacks regarding how we utilized them. Without significant advancement, using these initial designs would be problematic and time-consuming. What we needed was a templatized solution.

cs-img-1b-xd.jpg
cs-img-2-figma-dsk.jpg

The IDEA

To increase productivity and reduce the number of problems and errors in the designs created by the Merch Creative Team, I partnered with the Experience Design Team to create a component library in Figma.

 

The Experience Design Team’s fundamental library utilized the Atomic Design methodology, consisting of the atoms and molecules comprising core elements, such as CTA buttons. With this library as my foundation, I began building out functional components in Figma–components with individual properties that were split out, making them easily customizable for the design team.

Grid Background
cs-img-full-anatomy-dsk.jpg

"The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency."

- Bill Gates

The EXECUTION

Once the component library was ready, I shared it with the Design Team. Their immediate reaction was that the new library was super easy to use and removed much of the guesswork and memorization of guidelines.

 

Figma was the perfect tool to solve this issue because I could release a library to a network of users, and all files that have utilized that component will be updated accordingly.

cs-img-3-organisms-dsk.jpg
cs-img-4-final-dsk.jpg

The RESULT

While the library had some initial heavy lifting, the benefits were well worth the effort. We immediately saw increased efficiency amongst the design team and, eventually, the agency that utilized this library. We drastically reduced the time it took to create a full-page comp. Utilizing this library also allowed flexibility in breakpoints—we could switch comps from desktop to mobile layout at the drop of a hat.

bottom of page