Crownpeak

Digital Experience Manager

Role

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

Introduction

This case study gives an overview of my contributions to envisioning a new experience for the Crownpeak product suites. Below you will see insight into the process, design, and tools we used to deliver an upgraded experience that met our customer's needs while improving the overall business goals at Crownpeak.

Overview

The Company

Crownpeak is a (SaaS) technology company providing a Digital Experience Management (DXM) platform to global enterprise-grade customers. Our platform focuses on delivering marketers, developers and IT teams the tool they need to manage experiences across different technologies and devices. Our suite of products is made up of content management, personalization, quality management, search and hosting solutions.

Crownpeak is best suited to organizations who need to rationalize and govern multi-language, multi-site scenarios or need a cheaper way to modernize the presentation layer of legacy systems. Direct competitors include Adobe Experience Manager, Sitecore, IBM and others focused on enterprise solutions.

My Role

My role as a Sr. Experience Designer was to envision and create a new UX and UI for our product suites. These tasks were accomplished through qualitative and quantitative research, wireframing, prototyping, user testing and some good old fashioned intuition.

I worked on a wide range of enterprise focused products including a Digital Experience Platform, Content Manager, Optimization and Personalization Manager, Brand Style Guide, Component System, and Product Demo Experiences.

Envisioning the new product experiences enabled me to wear many hats including ideation and vision, researcher, designer ( Brand, UX, UI ), product manager, front-end developer and design director.

During my time I was the only designer at the company delivering assets and working alongside 20+ developers.

Highlights

Major accomplishments during my time at Crownpeak include:
• Complete overhaul of the products UX and UI
• Product added to the Gartner Magic Quadrant
• Product added to the Forrester Wave
• Company acquired for $50 million

Goal

Vision and create a new UX and UI for the Crownpeak product suites. Analyze brand, marketing and engineering process to help guide new direction. These tasks were accomplished through ideation with owners, qualitative and quantitative research, wireframing, prototyping, user testing and some good old fashioned intuition.

An overview of how our separate products enable the Digital Experience Manager (DXM) capabilities.

Process

This site outlines the process I went through to deliver the best solution for our customers needs 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, branding, and 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 was suffering.

Outside of visual consistency I began to realize that the product suites where delivering valuable solutions but with no understanding of who the user personas were. On top of these issues naming of the product and how marketing and development described features were very disconnected.

Classic (Legacy)

Volte (Legacy)

V3 (Current)

2. Research

I spent time taking deep dives into qualitative and quantitative research, customer interviews, and the competitive market to help guide my path to discovery.

Competitive Highlights
What were the competitor features, comparison, advantages, user interfaces and more.

Market Direction
Where was the market headed and who was driving it.

Customer Insights
What were our customers requesting and are there current needs being met.

Professional Services Guidance
Were our services team feature requests in alignment with the customer requests.

I coded a custom website to contain all the research information in a central location for easy access. The website enabled me to clearly layout company information that needed to be organized for buy in such as management processes, research, product ui and V3 vision.

3. Discovery

Overall solutions were presented and discussed in meetings with owners for approval. I built out websites to that could act not only as great ways to present my solutions but if approved would be able to be used as our style guide and company information central location down the road.

• How our individual products bundled together would form the Digital Experience Management (DXM) platform.

• How we would adjust our product naming to version focused along with how we talk about the product features for easy understanding.

• What the interface would look like respecting the legacy (Classic, Volte) products due to customer recognition.

• How we could cut developer time and ensure product consistency through a pre-built component library delivering reusable UI elements.

• How we could deliver a single page web application with complex abilities for Desktop, Tablet and Mobile.

4. Design

At this point I had a clear vision of exactly where I could take the products while ensuring that the delivery would be a smooth transition for our current customers.

Personas
Created user personas to focus the why and who we were building the product for.

User Flows
Created user flows to demonstrate the flexibility and big picture ideas of the platform.

Wireframes
Created a interface wireframe a kit to be used in development tasks as well as marketing discussions.

Menu Responsive

Menu Default

Menu Expanded

Section Default

Content Panel Left

Content Panel Right

Content Panel Left and Right

Content Panel Left Tabs

Content Panel Right Tabs

Content Panel Left and Right Tabs

Panels, Tabs, Action Bar

Dashboard Grid

Modal Small

Modal Large

Modal Slide

Components
Created a component library that included reusable UI elements for visual recognition as well as development time reduction.

Visual Design
Created high fidelity designs visualizing the interface, panels, modals and complex content editing areas.

Prototypes
Created high fidelity prototypes of all areas that would require design and development discussions.

I built a Development Guide Website that contained all of the prototypes organized into sections for clear discovery by the development teams. This enabled the developers to access and click through functional prototypes for better understanding of interactions, motion, and final delivery.

Development Assets
Created a central location where developers could find icons, get measurements specs, and information they needed easily.

5. Code

As a designer who knows basic code I would run ideas past the team from time to time. I worked alongside the team on all projects lending a hand around the front end and in some cases backend code.

Some of the areas where I assisted with code include:

Application
I managed the application style (less) files and would jump into some of the Angular 2 component files when necessary. I also would work with the team around naming as organization has always been one of my strengths.

Research and Style Guide
I designed and worked alongside a teammate to build out the shell of the template. I then coded all content and ui styles directly into the template.

Prototyping
Some features required complex prototypes which I either coded direct using html/css/js or I could code using javascript/coffee in Framer.

6. Deliver

View more of the interface experience by clicking the below links which highlight areas of products. Product Tour, Product Workspace 1, Product Workspace 2, View Responsive, View Inline Form, View Form, View Developer, Drag & Drop 1, Drag & Drop 2, Drag & Drop 3, DAM

Digital Experience Platform

Content Manager

Optimization & Personalization

Style Guide

Component Library

Demo Experiences

Demo Experiences

The demo experience are ways we can showcase and highlight features of the products in a easy to understand way. Our strategy was to build 4 templates in focused industries (Financial Services, Life Sciences, Technology and Pharmaceutical) that we felt would clearly showcase the products.

For each template I led the direction and design and worked alongside a teammate to construct the foundation in Pug (Jade). This then allowed me to jump into the Pug (Jade) template and focus on filling the content with the information our team would need. All design, descriptions and content inside the templates I created during the prototyping phases.

Upon completion all templates were then implemented into the Crownpeak platform to allow for demoing. We built three types of templates to demo 1.Standard Template, 2.Drag & Drop Template, and 3.Hybrid Template.

Previous Project

Digital Canvas

Next Project

Product Style Guide

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