Crownpeak

Product Style Guide

Role

Research & Vision
Designer (UI, UX)
Frontend Developer
Product Manager
Design Director

Introduction

This case study aims to explain how we created a design system at Crownpeak. Below you will see insight into the process, design, and tools we used to create and implement the system.

The Style Guide acts as a central location for all Crownpeak Brand information. The site enables designers, developers, marketers and more to quickly find brand and product related information.

As Crownpeak continues to grow as a company we are faced with learning how to maintain brand consistency throughout the numerous products. This style guide acts as a central location where we maintain 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 style guide and help ensure that it is kept up-to-date.

Goal

Create and build a site that acts as a central location for all Crownpeak Brand information. A site that enables designers, developers, marketers and more to quickly find brand and product related information.

An example UI from one of our products using the style guide and component library.

Process

This site outlines the process I went through to deliver my solution from start to finish.
1. Understand
2. Research
3. Discovery
4. Design
5. Code
6. Deliver

1. Understand

The Problem:

When I was hired at Crownpeak the products (Volte, WCO, etc) suffered from dramatic inconsistent styling, coloring and overall UI patterns. I spent the first couple months of my time working with these products, understanding our issues and inventorying the UI elements we used across our platforms. The legacy platforms had forced so much unnecessary development time and lack of consistent direction for developers that the user experiences where suffering.

The Request:

My role as a Sr. Experience Designer was to envision and create a new UX and UI for our product suites. To deliver this in a way that would not only allow me to jump ahead of development but to deliver consistency across products I created a style guide.

It's important to note that I labeled this delivery as a Style Guide and not a Design System for multiple reasons. Design Systems are made up of UI elements displaying all states, interactions and extremely detailed information about each little UI element developers will work on. Since I was the only designer supporting 20+ developers I discussed ways we could enable shortcuts. The solution was for me to create and design the vision as a design asset reference but to then jump directly into the code to deliver the UI states and interactions. This dramatically reduced design time but only enabled us to provide a Style Guide and not a Design System.

2. Research

Market Analysis:

Over the past couple years we have started to see a strong push for Design Systems, Style Guides, Component Libraries. I spent time researching available libraries, code languages and structures that we were building upon. Global companies were just beginning to use these guides and libraries so the focus was around how we can approve on what they have already learned.

3. Discovery

The Solution:

The style guide would be a resource for anyone in the organization to reference.
Focused on our internal personas: Product owners, managers, developers, marketers.

The style guide contents would be made up of Design Assets, Color Palettes, Icon Libraries, Component Libraries, Motion Rules, Product Descriptions, Sales Imagery and more.

The UI components on this site would be live visual references while the code would be able to be used directly in all of our products by the development teams.

4. Design

After researching other products and understanding our needs I had a clear idea on the direction of the overall design. My goal was to design for fast content discovery and viewability across devices.

• I began with Concept sketches and buy in from the product owners.
• I created mind map layouts so we could discuss the information architecture.
• I created wireframes to discuss possible roadblocks with the developers.

At this point there was no need to go into high fidelity visual design as most of the website would be based on the content input. From here I went straight into coding.

Navigation Desktop

Navigation Mobile

Code Components

5. Code

As a designer who knows basic code I had some ideas around naming and delivery I wanted to run past the team. I worked alongside one of our front-end developers to discuss type of languages, naming and how marketing could benefit from what we are delivering to the open source community. We decided to break the project into two parts.

Part 1: Coding the site in Pug (Jade) which would allow for rapid template development. For the template I led the direction and design while a teammate constructed the foundation in Pug (Jade). This also allowed us to create a base Style Guide template we could open source to the community as part of our process.

Part 2: We would take the template and implement it into Angular 2 components for the final delivery. After Angularized I was then able to jump into the code and implement the template into our Digital Experience Manager for future content editing.

6. Deliver

This image showcases a quick click through of the Style Guide upon completion. View Style Guide and Component Library.

CP Static Template (Pug)

CP Dynamic Template and Component Library (Angular2)

Resources

• UI Inventory I used Google Docs.
• Concepting I used Pencil, Paper and Balsalmiq.
• Wireframing and high fidelity designs I used Sketch.
• Design collaboration I created a Craft Library containing all of our components.
• Prototypes and animations I used Principle and Invision.
• Code editing and layout I used Atom Code Editor.
• Code collaboration we used Github.

Previous Project

Digital Experience Manager

Next Project

SingleFit

Archives

Checkout my archived portfolio containing a wide range of projects showcasing some of the work I am most proud of. Contact me direct for more.

📐 Design Archives

🎨 Artwork Archives