Crownpeak Design System

 A single source of truth for rapid design, development, and multi-site scenarios.

 

Overview

Crownpeak is a global leader in the SaaS technology providing Digital Experience Management (DXM) to enterprise-grade customers. Crownpeak provides its customers with a suite of software consisting of a Content Management System, Personalization, and A/B Testing System, Dynamic Analytics System and Quality and Accessibility System.

 

Challenge

Providing customers with consistent user interfaces that create patterns for users has been a challenge as the company rapidly grows. Feature requests and development move fast causing inconsistent experiences and in most case feature development that isn’t usable.

How can we reduce inconsistent styling, lack of consistent language, and provide consistent user experience patterns to improve our customer's experiences? How can we improve development staff efficiency and reduce wasted feature development? How can we remove replication of work and provide drag and drop solutions to the development team? How can we onboard internal team members and external developers faster for development in our platforms?

home-versions.png
 

Solution

Over communication early on between leadership, product, and engineering brought immediate value. I communicated all ideas and concepts for the future roadmaps directly with engineering leaders. We collaborated and organized everything from the technologies we would use to how the structuring of components and systems would work. This added huge value notably because we eliminated any roadblocks we would run into down the road. Our teams worked in small application specific pods broken into different layers of the platform.

To unify our efforts I developed our central documentation center which all Management, Process, Language, Strategy, Product, and Design System content lived. This ended up being so valuable even the Sales, Marketing and other cohorts would refer to it as the company library. This documentation center acted as a central location where we keep a live visual inventory of brand guidelines, brand assets, UI components, snippets, developer guidelines and more. Anyone working on Crownpeak products is encouraged to stay familiar with this Brand Guide and help ensure that it is kept up-to-date.

I led a small team focusing on feature development and broke off to personally design out the structural components of the design system.

  • Taking inventories of the components that would make up our design system.

  • Providing rules that the components would follow.

  • Exporting design asset code and building code files.

  • Checking in the code files to a Github design system repo.

  • Collaborating with engineering to QA each component once in the design system.

  • Continual testing, improving, and iterating of the components.

  • Continual design and development of the components as multi-platform needs required.

design-template.png
 

Outcome

As our team was structuring version 3.0 of our platforms the design system began taking shape. We realized early on the design system methodology we put in place was displaying signs of success. From the design side, I was receiving fewer questions about how things should look and more requests for a QA which was great during the initial implementations. Product verbalized the improvement in feature requests turnaround time since the developers no longer had to spend time with the frontend interfaces. Not only were we becoming more efficient but our platforms providing better user experiences by surfacing consistent user interface patterns. The design system and components improved our overall speed and efficiency building out these enterprise tools (Content Management system, Personalization, and A/B Testing system, Dynamic Analytics system and Quality and Accessibility system) which led to the company acquisition.

1.1.png
 

My Role

I led design at Crownpeak, starting as a lead designer and evolving to head of UX and product design. I worked in partnership with leadership, product, and engineering to strategize direction while enabling development processes. In the beginning my role spanned across teams as needed in Design ( UX, UI, Interaction ), Research ( Ethnographic, Trends, Testing ), Product Management ( Organization, Strategy, Vision ), Frontend Developer ( Design to Code, Design System, React Components ) and as time advanced I focused on team development, leadership, and process development.

  • Head Of User Experience and Product Design

  • Senior User Experience Designer

  • Frontend Development

Highlights

Significant accomplishments during my time at Crownpeak include:

  • A complete overhaul of the products UX and UI

  • Product added to the Gartner Magic Quadrant

  • Product added to the Forrester Wave

  • The company acquired for $50 million

  • From Lead UX to Head of Design

  • Built 3.0 and 2.0 Documentation Centers

 
 

Research ( Ethnographic, Trends, Testing )

Approach

We began working on the concept of a design system and component library long before the trend of design systems became common. Our mindset for patten based design and development went back as far as flash components. In the beginning stages the product manager and I spent time researching libraries, code languages, and structures that we would have the potential to build upon along side of engineering. Global companies were just beginning to use guides and libraries so the focus was around how we can approve on what they have already learned. Our team formed opinions and hypothesis on these systems that would be the foundation for our approach.

 

Design ( UX, UI, Interaction, Prototyping, Testing )

Design Systems are made up of user interface components, patterns, rules, and guides displaying states, interactions and extremely detailed information about each little interface element that lives inside of our platforms.

 

Documentation Center Design and Development

Below are a few images displaying the documentation center I designed and coded for the solution. This was designed in Sketch, frontend coded in pug and checked into Github our company repository as the base for content to live inside.

 

Design System Design and Development

Below are a few images displaying the design system I designed and coded in partnership with the engineering team. This was designed in Sketch, frontend coded in pug and checked into Github our company repository as the base for content to live inside. After the initial foundation of the design system was developed I led a team of two to continually advance the design system components as we progressed forward with our platform feature development.

CP Dynamic Template and Component Library (Angular2)
 

Crownpeak Brand Guide

The overall brand guide, documentation center, style guide, and design system.