Cisco Webex
2021
Mobile & Tablet
Video Conferencing
I helped distil Cisco’s suite of collaboration tools into one, seamless experience. Collaborating closely with in-house designers and Apple stakeholders, I consulted on core product strategy, built high fidelity prototypes, and managed design systems to help craft an experience that was ship-ready in just 8 weeks.
As a well established company, Cisco had a strong set of collaboration tools. However, at scale, the offering was becoming hard to maintain and lacked brand alignment. They wanted to integrate their products into a single, powerful collaboration tool, with the familiarity of iPadOS and iOS. It was critical that every design decision was informed by Apple’s Human Interface Guidelines, but still projected a distinctively Webex experience.
As a well established company, Cisco had a strong set of collaboration tools. However, at scale, the offering was becoming hard to maintain and lacked brand alignment. They wanted to integrate their products into a single, powerful collaboration tool, with the familiarity of iPadOS and iOS. It was critical that every design decision was informed by Apple’s Human Interface Guidelines, but still projected a distinctively Webex experience.
Problem
Native, but not
Create an on-brand UX/UI that stuck rigidly to the iPadOS native experience
With a complicated feature set and architecture, a 3 panel view was the best approach for navigation. Instead of a single sidebar with multilevel hierarchy, splitting deeper level pages on a second panel kept the interface clean. To ensure webex was a powerful, personalised tool, the sidebar was fully customisable. This approach meant that native multitasking and iOS views were shippable by default. Every design decision was put through rigourous accessibility testing, factoring in generous safe zones, tap areas, and a WCAG AAA semantic token system for tints. Through prototyping, I crafted a set of animation guidelines for easy developement and an ‘Apple’ feel.
Problem
Native, but not
Create an on-brand UX/UI that stuck rigidly to the iPadOS native experience
With a complicated feature set and architecture, a 3 panel view was the best approach for navigation. Instead of a single sidebar with multilevel hierarchy, splitting deeper level pages on a second panel kept the interface clean. To ensure webex was a powerful, personalised tool, the sidebar was fully customisable. This approach meant that native multitasking and iOS views were shippable by default. Every design decision was put through rigourous accessibility testing, factoring in generous safe zones, tap areas, and a WCAG AAA semantic token system for tints. Through prototyping, I crafted a set of animation guidelines for easy developement and an ‘Apple’ feel.
Before and After - Native Experience
Hover to play
Before and After - Native Experience
Hover to play
Sidebar Customisation
Hover to play
Sidebar Customisation
Hover to play
Problem
Advanced search
Allow users to efficiently browse everything within their workspace
To further promote ease-of-use navigating a large workspace, a powerful dynamic search allowed users to browse messages, spaces, people and files. Opting for an elastic search (showing results in real time as you type) over to reduce wait times, users could also use shortcuts and tags for deep searching. I introduced thoughtful transitions between content in search, to ensure the user’s eye was drawn to the correct area in a busy UI.
Problem
Advanced search
Allow users to efficiently browse everything within their workspace
To further promote ease-of-use navigating a large workspace, a powerful dynamic search allowed users to browse messages, spaces, people and files. Opting for an elastic search (showing results in real time as you type) over to reduce wait times, users could also use shortcuts and tags for deep searching. I introduced thoughtful transitions between content in search, to ensure the user’s eye was drawn to the correct area in a busy UI.
Advanced Search: Spaces
Hover to play
Advanced Search: Spaces
Hover to play
Advanced Search: Messages
Hover to play
Advanced Search: Messages
Hover to play
Problem
Prototyping
Build high-fidelity clickable prototypes that demonstrate complex functionality.
It was critical for easy testing and seamelss developer handoff that designs were dynamic and interactive, and weren’t reliant on just documentation. Using Figma, Principle and After Effects I built dozens of clickable and motion prototypes for macro and micro interactions integral to elavating the product’s UX. As designs were constantly changing and adapting to user feedback, I ensured every component was a nested instance that could be quickly swapped out for rapid approval.
Problem
Prototyping
Build high-fidelity clickable prototypes that demonstrate complex functionality.
It was critical for easy testing and seamelss developer handoff that designs were dynamic and interactive, and weren’t reliant on just documentation. Using Figma, Principle and After Effects I built dozens of clickable and motion prototypes for macro and micro interactions integral to elavating the product’s UX. As designs were constantly changing and adapting to user feedback, I ensured every component was a nested instance that could be quickly swapped out for rapid approval.
Multitasking and Picture-in-Picture
Hover to play
Multitasking and Picture-in-Picture
Hover to play
In Meeting and Arrangement
Hover to play
In Meeting and Arrangement
Hover to play
Results
Created an industry-leading collaboration tool featured at Apple’s WWDC 2021.
Introduced new standards for virtual meetings, including picture-in-picture, multitasking, car mode, and powerful advanced search.
4.6 stars from 7.4k ratings on the App Store.
Scaled a cross-platform, token based design system.
Results
Created an industry-leading collaboration tool featured at Apple’s WWDC 2021.
Introduced new standards for virtual meetings, including picture-in-picture, multitasking, car mode, and powerful advanced search.
4.6 stars from 7.4k ratings on the App Store.
Scaled a cross-platform, token based design system.