Webex by Cisco

About

Lack of brand consistency was visible throughout the original Webex website. This included multiple style logos, as well as a lack consistency within the design asset library. In addition, major changes in products, plans, services, and word marks led to the direction of rebranding. In this project I improved the sign on experience, redesign the product pages, help pages, error messaging, through visual design and interaction design.

Welcome to Daily Interaction 67

Add to Cart Button Animation on Hover

This example showcases moving lines around an image. The image also has a 3d rotation on hover.

do the honors,
hover over the button!

Why rebranding was needed

Lack of brand consistency was visible throughout the original Webex website. This included multiple style logos, as well as a lack consistency within the design asset library. In addition, major changes in products, plans, services, and word marks led to the direction of rebranding.

Cloning Instructions

Research

Most of my research centered around the onboarding process. A major concern was to figure out why users would begin onboarding without completing registration. I created heat maps, online surveys, diagrams, and performed a competitive analysis to actively seek out pain points and tailor creative solutions to satisfy both user needs and business goals.

Demographics

Webex had experienced an unprecedented number of new users signing up for their services amidst the Covid pandemic. Our only serious competitors during this time were MS Teams and Zoom. While Zoom had a strong lead amongst school students, Webex has seen large number subscribers amongst large enterprises such Boeing, IBM, and American Express. Most Webex usage being business related in nature followed by school students.

Primary

Persona

Katrina Chen

"I work for a major aerospace company. Since the start of the COVID-19 pandemic our company has been using Webex as it's primary collaboration tool. I'm glad Webex is easy to learn, it makes working offsite a painless experience!"

Visual Design

&

Work

Creating a layout that embodied the new design was challenging. Aesthetics had to seamlessly meet the demands of functionality, while strict accessibility standards had to be met. Contrasting dark and light sections was also an important tool for creating balance and distinction between one category and the next.

Creating a layout that embodied the new design was challenging. Aesthetics had to seamlessly meet the demands of functionality, while strict accessibility standards had to be met. Contrasting dark and light sections was also an important tool for creating balance and distinction between one category and the next.

Product help pages needed visible clarity dividing each article. These help pages were often very lengthy and with the addition of anchors, users could now be brought to the targeted category without having to endlessly scroll through content. As a last resort, customers were provided with direct access to customer support at the bottom of the page.

After conducting a thorough competitive analysis, multiple rounds of online surveys and analyzing heat map patterns, I uncovered data that revealed underlying issues that impeded customer sign on process. Several changes were then made, some of which included a reduction in irrelevant links, the addition of a progress meter, clarity in instructions, and password setting prompts. This sleek black / grey pattern was part of the brand redesign.

My role was to create new page layouts that implemented the newly updated design system, clean up the asset library, as well as create new visual standards for messaging.

👋
Scrollable Screen inside

View Live Website

Takeaways from this Project.

Narrowing down research

Sometimes it takes multiple rounds of surveys to narrow down the underlying pain points that the user may have.

Think mobile first

Although the phrase 'mobile first' has now become a cliche, forgetting can become easier trying trendy experiments.

Return to Homepage

Cloning Instructions