Bissell

One of my learning goals at DEPT as a visual design intern was to create and deliver a comprehensive, detailed style guide. Fortunately, working with DEPT’s high-profile clients gave me the chance to take on such a project. That opportunity came with the Bissell account.

Bissell is a company that specializes in household cleaning appliances. While their website and branding were already established, they lacked a comprehensive style guide that documented design choices and usage of colors, typography, icons, forms, and other elements.

I started by gathering as much information as possible from the website and existing designs. I collected individual elements and components, including text, icons, and more. Then I organized everything into categories such as logos, typography, icons, forms, imagery, links, buttons, cards, and UI states like active, disabled, and highlighted. These categories would later form the chapters of the style guide.

After gathering all the elements, I began designing the style guide in Figma. To make the process efficient, I created template pages using Figma’s auto-layout and styles. This allowed me to easily reuse pages and make global changes that would automatically update across the document. The text and paragraphs were placeholder content, ready to be replaced as needed.

I also designed title pages, a table of contents, and other supporting pages.

Then came the main task: adding all the collected components and organizing the information within my templates. Every topic was thoroughly documented, leaving nothing unexplained.

Before I knew it, the document had expanded to 50–80 pages, filled with detailed information about all of Bissell’s design assets and their proper usage.

Designing the style guide was a lengthy task, but an essential one. I learned a great deal about using auto-layout, reusing assets efficiently, and thoroughly documenting design choices.