Building a complete design system for web

Task —

Build a functional componentry and design system to showcase forthcoming product and solution, demand generation, and event landing pages. The final design system must be understandable, accessible, and usable by technical and non-technical users, and powerful enough to draft new pages quickly and easily.

Project details

Business need
Full service design system
for web usage + templates

Team members
Visual Designer (me)
Senior Frontend Developer
Director of Digital Strategy

General timeline
~3 months for core components, system maintained on-going

Old Five9 Homepage (left), versus the Five9 Homepage for CX Summit 2019 (Right). Swipe to compare versions.

Background

Call centers, where representatives take and make calls, inherently are considered to be on-premises only, with many operations having little to no remote or cloud capability. The lack of customer data for these operations also hinders business agility, with reps using canned scripts to get relevant information.

Five9 solves this through their CCaaS (contact center as a service) technology, allowing representatives to operate the business both on premises and remotely from anywhere business demands. And with the suite of agent & supervisor tools, rich customer data empowers reps to provide high quality interactions.

With such a powerful product, I was shocked at the state of the website when arriving on the team. Broken pages, popups galore, and a website that looked stuck in 2005, the site’s visual and user experience was ripe for a complete overhaul.

As the web team’s sole designer, I created a complete, feature-rich web design system from the ground up, creating a powerful baseline for all forthcoming updates to the website. Everything from new product feature pages, event experiences, demand generation landings and more, all pages utilized the system for a fresh and accessible user experience. 

In addition, the system was fully integrated into Storybook, a modular and scalable frontend workshop tool, with full developer documentation & annotations, and 1-to-1 design and frontend parity. What was designed and updated, was what went live.

Project Outline

Kickoff — Building rough versions of basic elements

Beginning with the basic elements like color, typography styles, and spacers, I roughed out an initial “digital style guide” with the assistance of the Creative Director (non-digital) to achieve design parity with Five9’s updated brand guide. 

This allowed us to ensure that the styling that we present at our events and materials mirrored our website, while ensuring accessibility for users with limited visual or cognitive ability (e.g. clearly defined text and buttons, togglable motion, etc).

With our tokens established, I then worked through the basic elements of a page: buttons, forms, checkboxes, etc. Then, we built the basic global components, like our header navigation, hero / headline sections, footers, cards, and more.

Structure — Putting it all together and user testing

Once we had our basic components together, it was time to synthesize them all into a basic template page, and start basic usability testing. We did this through various platforms, such as Optimal Workshop for our navigation testing, UserTesting for our form pages (such as free trial), and general usability interviews from panelists internal to Five9.

With a few refinements, and including developer review of the full component system and annotations, we were able to introduce the system into our dev sprints easily and begin front-end development, with components ultimately integrated into Storybook, a front-end sandbox tool for deployment.

Launch — Pressure testing the system live on site

Finally, it was time to launch the new page template, and to test the new system live on-site. With this, we did a developer sprint of UAT (user acceptance testing), which involved sending our staging link of the template to various non-technical associates and getting their feedback, as well as our team combing through every minute detail to ensure the new system was operating effectively.

A few updated pages / concepts utilizing the components created with the web design system

Impact on the org

The impact of the new design system was immediately apparent. With a refreshed look, updated experience, and increased readability across the site, our users and prospects immediately responded positively. Some of these stats include:

• Starting from the launch in Q3 2020, to Q1 2022 (my full tenure) the site saw an increase of +26.8% in qualified leads (leads with sales data including position, size of org, etc) across the site.
  
  
• As a derivative of the site design system, we were able to create a new “demand generation” landing page template system, that included similar components but tailored to the demand gen’s specific needs, including on-page form modals, easy-build headers, custom bullet lists, and more.

+27%

clickthrough rate on homepage in key highlighted areas (products)

+19%

sitewide increase handraiser submissions (forms, downloads, etc)

+15%

qualified leads from free trial

+24%

increase in Pricing Page visits from entire site map

+9%

increase in handraiser leads from resources hub redesign