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

PROBLEM · PROBLEM ·

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

PROBLEM · PROBLEM ·

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

Sidebar Customisation

Hover to play

Problem

Advanced search

Allow users to efficiently browse everything within their workspace

PROBLEM · PROBLEM ·

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

PROBLEM · PROBLEM ·

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: Messages

Hover to play

Problem

Prototyping

Build high-fidelity clickable prototypes that demonstrate complex functionality.

PROBLEM · PROBLEM ·

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.

PROBLEM · PROBLEM ·

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

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 · RESULTS ·