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.
This example showcases moving lines around an image. The image also has a 3d rotation on hover.
do the honors,
hover over the button!
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.
After the project is cloned you can copy the 'd-75-card-wrapper' to use the 'profile card animation on hover.' The animations are copied into the Webflow 'Interactions (H)' panel.
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.
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.
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!"
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.
Sometimes it takes multiple rounds of surveys to narrow down the underlying pain points that the user may have.
Although the phrase 'mobile first' has now become a cliche, forgetting can become easier trying trendy experiments.
After the project is cloned you can copy the 'd-72-btn-wrapper' to use the 'social media button animation on hover.' The animations are copied into the Webflow 'Interactions (H)' panel.