Building a Next-Gen Design System

Unifying the Brand and Product Experience for a $110MM Product Suite.

Demonstrated Competencies:

Design Leadership and Operational Excellence

Year Completed:

Started in September 2015. Ongoing today.

Long-Term Customer Goal:

Improve Customer and Partner Relationship NPS to 25

Operations Goal:

Reduce design prototyping and front-end development time by 35%

What is a Design System?

A living and evolving framework that defines the principles, architecture, objects, patterns, copy/language, and rules for how a product’s user interface and brand works together to create a consistent and compelling user experience across devices and touchpoints. It also includes the technology stack, processes and operational mechanisms to support ongoing development and iteration of the system.

Objective

Leverage best-in-class usability paradigms and strategic experience differentiators to refresh the UI and improve consistency across the entire Infusionsoft Product ecosystem

Critical Problems to Solve:

Deeply fragmented and outdated user experience - different products and devices have different states of “current UI” and often have entirely different paradigms and patterns to accomplish the same tasks; point solution competitors are increasingly providing a superior user experience
Flagship app originally designed for power users; target customer has evolved to a late-adopter, consumer-like user with only a basic understanding of sales and marketing strategies, tactics, and best practices
No standard process or repository for curating design standards and documenting changes across a 140-person product development org
Lack of clear rules dictating usage of patterns and components
Mobile/Tablet patterns have little to no standardization
Product suite poorly accommodates international users; International expansion is a key part of the three-year company strategy

Design Approach

First, a little backstory - Infusionsoft, in it’s entire 16-year history, had never invested in a reimaging of the entire UI. It also never had emphasized design standardization until I had joined the company. Overtime the product gained a terrible nickname from its customer’s: “Confusionsoft.” Along with a planned overhaul of the product lineup, we knew we had to eradicate the notion of a confusing experience if we were to achieve our lofty growth goals over the next three years.

While we have always had a focus on standardization during my tenure, our execution and accountability to standardization was quite lax. It’s no easy feat to get 140 people to implement consistency across product offerings. It requires strategic prioritization and alignment from Product executives, a design culture of competitive benchmarking and trend analysis, operational mechanisms to support prioritization, communication, and usage definition, and a technology stack to ensure teams are working with the latest and greatest standard in the most efficient manner possible. It also takes commitment, focus and patience - Infusionsoft’s next-gen design system has been in the works for 18 months and counting.

We also had an incredible layer of complexity with our product strategy. Infusionsoft is rapidly shifting to becoming a platform company with a multi-sided network of customers, service partners, content partners and developers. This requires the design system to be built on the platform, be extensive enough to support drastically different users and use cases, will still being a highly performant and adaptable system. Infusionsoft also has a habit of making up words, using jargon and phrases that ultimately cause confusion...especially to less savvy users. All of this requires a highly durable and structured architecture...experience architecture to be exact.

Keys to Success

I could talk for hours about the process, approach and learnings, but the biggest contributors to speed and progress were:

Balancing new pattern generation with best-in-breed standards from well-known, established design systems; when in doubt plagiarize mercilessly and focus new effort on experience differentiators
Having a mindset of continuous improvement over perfection; don’t try to boil the ocean all at once and design in a vacuum. Prioritize generation by balancing “table stakes” patterns with known use cases
Establishing weekly team syncs to discuss usage, new patterns and prioritization
Investing in defining visual branding and strategic differentiators first. You risk untold amounts of waste if you don’t establish a solid foundation to build upon
Switching from Adobe CC to a design stack of Sketch + Craft library + Git and creating a “live” style guide connected to the most current build
Establishing a review and implementation cadence with the front-end development team. This relationship facilitates trust, and increase speed. The goal is to get out of design tool prototyping as fast as possible and get into working code prototyping using reusable web components.

Screen Shot 2017-01-26 at 10.35.45 AM[15820].png

Design System Experience Pillars

Universal Experience

One re-imagined experience that applies consistently across the product portfolio for customers, users and partners.

Guided Workflows

Proprietary Small Business Success Method principles baked into the core interaction model

Platform Extensible

Partner configurations, platform content, services and data, apps and other integrations can modify and extend the experience

Flexible & Adaptive

Grows with the Infusionsoft brand, device/technology/design trends, and i10n expansion

Intelligent & Emotive

Leverage micro-interactions to connect with small business users on an emotional level, predict their needs, and gamify their growth to enable exponential productivity and results