Cisco Duo Web Design
Instrument • Branding, Illustration
OVERVIEW
After Cisco acquired Duo, a company that provides solutions to protect organizations from identity threats, they worked with Instrument, a design and technology agency, to redesign their website. Instrument reached out to me to create a library of assets that would be used throughout the new site. I was in charge of finalizing the art direction, creating hundreds of assets, and performing final quality assurance checks and exporting.
ROLE
Designer, Illustrator, Photo Selection support
TEAM
Motion Designer Rodrigo Blergh, Designer Brinson McGowan, AD Jack Wilson, and more at Instrument
TIMELINE
Feb - Mar 2025
The challenge of this project was finding a way to depict product UI in a simplified, humanized way. We decided on a framework that would, on one end, consist of more abstracted and lifestyle imagery, and, on the other end, feature more specific and detailed product visualization.
Our Framework
I implemented our framework using stock photography, in-situ mockups, and product UI abstractions.
Humanizing Product UI
My process started with initial explorations of potential art directions.
Explorations
For most of Duo’s site pages, I landed on these bento-style compositions that combined UI elements and relevant stock photography to illustrate the page’s main topic.
Hero Illustrations
We created three tiers of product UI abstraction, ranging from fairly representative of Duo’s actual UI to much more abstracted, extracted UI elements.
Product UI Abstraction
Each page of Duo’s new website combines illustrations with elegant and clean web design. Pops of the Duo green brighten up each page and rounded corners embody a welcoming atmosphere.
I created several categories of assets, each with unique design specifications and use cases. We needed a large variety of illustrations as we were redesigning 30+ landing pages and wanted to avoid pages feeling repetitive and generic. These are a few samples from each category.
Categories of Product UI Image Assets
Along with asset exporting and handoff, I wrote up some light documentation for my asset creation process. This will help future designers easily edit or create new assets that seamlessly slot into the existing asset library.
