Background
"Twenty-five years ago, Webex was born from a vision that collaboration is more than verbal conversations – that 80 percent of communication is non-verbal and video conferencing allows people to collaborate more effectively. At the time, video conferencing was reserved for a select few and not inclusive for all. Webex changed all that."
-A new brand for a new era of inclusive hybrid work, Webex Blog.
Project Overview
AKQA SF took on a year-long rebranding project for Cisco to help them launch Webex Suite -- a variety of remote work tools in a single product that Cisco said is "the first best-of-breed suite for hybrid work." I had to the pleasure of working with our design team to redesign the entire product icon library, 500+ icons. This was one of several workstreams completed by AKQA for the rebranding of Webex by Cisco.
Deliverables
Icon design principles
Iconography system
554 icons (3 weights)
Timeline
3 months for icon
1 year for entire rebranding project
Team
AKQA SF
Tools
Figma
Adobe Illustrator
Blue light glasses and eyedrops
If you keep scrolling, you'll see the meticulous process of Webex's new iconography system, or feel free to peruse their totally rebranded website here. Any icon you see has been outlined, pathfinded, and saved as SVG by yours truly.
The Challenge
Webex’s library of icons was a mix of different design styles from past mergers and acquisitions. The challenge was that it was continuously growing, averaging about 7.5 new icons each week.
This resulted in less cohesive products and issues with scalability and consumer friendliness
Process
We had a lean team of 2 designers. We divided the task into 2 phases, with 2 sprints for each. Each sprint we had a week to push out about 138ish icons following the design system we created for Webex. After each week there was a day of review from the client, and another day for edits and production.
We had no script to process different icon sizes so we had to do everything ourselves, which meant going into our files and changing stroke weights.
We had to have an eagle eye for any mishaps such as misuse of negative space, unbalanced fills, and inconsistent radii.
.png){kind=icon}
We established several rules and applied them to the initial 15 buckets. These rules encompassed recommendations on radii, keyshapes, trim space, and of course, exceptions.
Through our several quality check sessions, we would find that sacrificing our rule in favor of clarity was the most user-friendly decision, and took note of these anomalies for the client.
"Clarity trumps consistency."
-Steve Krug, Don't Make Me Think, Revisited. 2013.
Outcome
Webex launched it's new branding on July 8th, 2021. Read the article here. Launch video here.
I wouldn't wish iconography work on my worst enemies, but in retrospect it was a great way to exercise attention to detail at a pixel-level, especially since we were our own quality-check team.
The fine-detailed work that I completed with the team helped elevate the Webex brand as they strive for a more friendly and inclusive product.
