A Visual System

Formatting a brand for web

Even the strongest brand guidelines often stop short when it comes to the web. They sometimes offer only a single reference page or a placeholder marked “coming soon.” This project set out to close that gap by translating our newly refreshed brand into a complete visual design system purpose-built for Duo.com.

The challenge was to create a system that could scale across a large, content-heavy website while remaining flexible enough to support creativity. We needed to work within the constraints of our CMS, partner closely with the brand team, and support over 125 existing pages all while also setting a foundation for all future growth.

​

Design Principles

• Flexible - We developed an image treatment that adapts to a wide range of use cases, from bold homepage hero moments to detailed product screenshots. The system was designed to feel cohesive without becoming repetitive.

• People + Product + Personality - The visual language centers on people while still allowing the product to shine. By intentionally reintroducing personality, the system brings a more human, expressive feel back to Duo.com, balancing clarity, warmth, and brand distinctiveness.

• Scalable - The final system reduces the time required to create and update visuals without sacrificing quality or creativity. It provides clear guidelines and reusable patterns that scale efficiently across existing content and net-new pages.

​

My Role

I led a design team of two internal designers through the visual design exploration and system definition for the web. We translated high-level brand guidelines into practical, reusable patterns. This included defining image treatments, establishing rules for composition and usage, and collaborating closely with the brand team to ensure consistency across touch points. I also partnered with our development team and content team to ensure the system worked within our CMS and could be easily adopted by teams across the organization.

​

Impact

The resulting design system created a clear, scalable foundation for Duo.com, enabling faster production of on-brand visuals across more than 125 existing pages and all new content moving forward. It improved alignment between brand and web teams, reduced friction in the design-to-build process, and helped reintroduce personality and humanity into the website—without sacrificing clarity or scalability.