Crownpeak Technology

WHAT:
A single platform to manage all enterprise content management and marketing campaigns.

SHIPPED:
• Content management desktop and mobile platform
• Personalization and A/B testing desktop application
• Dynamic analytics management desktop application
• Quality and accessibility management desktop application
• Demo desktop and mobile applications

ROLES:
Head of User Experience, Sr. UX Designer, Developer

 

Overview

Crownpeak is a global leader in the SaaS technology providing a Digital Experience Management (DXM) to enterprise-grade customers. Crownpeak’s ultimate goal is to deliver marketers, developers and IT teams the tool they need to manage experiences across different technologies and devices.

Logo-Crownpeak.png
 

Challenge

Enterprise marketing and content management teams struggle to drive decisions that lead to success. Most enterprise companies custom fit multiple applications to help them full-fill there management and data needs. Crownpeak provided fantastic value to customers but the products were decoupled and the customers had no clue they are even offered.

How can we build a single management platform that provides the most value to our user's needs. That platform would need to provide governing of multi-languages, multi-site scenarios, marketing campaigns, and site accessibility which is a mountain of challenges to unify.

The legacy products, as powerful as they were, suffered from dramatic inconsistent styling, branding, and UI patterns. How can we effectively unify our platform, user interfaces, and improve our development efficiency so we didn’t replicate work or slowdown feature development.

home-versions.png
 

Solution

Over communication early on between leadership, product, and engineering brought immediate value. I joined a small leadership and strategy group to help drive the vision and execution while communicating the ideas throughout the teams. 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.

I worked in partnership with product to communicate with customers discovering there pain points and needs every week. To unify our efforts I developed our central documentation center which all Language, Strategy, Product, and Design System content lived. I created the ux, ui, and prototypes that we ran concept and usability testing while continually iterating. Over time my role advanced into team leadership and developing the design system with the engineering that would enable us to develop the products rapidly.

 

Outcome

Communicating early and often while including our customers in the entire vision led to a successful launch of Crownpeak 3.0. 88% of customers adopted version 3.0 upon its availability in the first two months of launch. Customers communicated that the new platform was more efficient and improved there daily task productivity. We saw marketing team adoption increase by surfacing the analytics and personalization solutions directly in the UI. Customer development and testing increased by our focus on improving the documentation and demo applications directly inside of the platform.

The hardest and most rewarding improvement was the design to development processes we implemented. The design system and pattern libraries provided seamless on-boarding of internal and external developers. The design system unified the platform providing users with recognizable patterns throughout our products. Our development teams focused less on timely modifications and more on complex feature tasks which improved our overall roadmap and long term strategy.

Significant accomplishments during my time at Crownpeak include:

  • A complete overhaul of the products.

  • Company Documentation Center 2.0 and 3.0.

  • Company Design System.

  • Product added to Gartner Magic Quadrant and Forrester Wave.

  • The company acquired.

  • From Lead UX to Head of UX and Product Design.

 

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.

 

Research ( Ethnographic, Trends, Testing )

Approach

In the early stages I spent my time aligning the product, organizing business requirements, creating product feature inventories, competitive analysis research, and market trend research. Early organization and research would allow me to shape my approach when planning for customer interviews and virtual questionnaires. This would also enable leadership to understand how I would be interacting with customers which design and product had not previously done.

Customer Insights

To guide the user experience I created a plan made up of 3 components (Customer, Data, Research). These metrics would help inform a better understanding of how I could shape the product.

  • Customer interviews: 
Leverage our current customers to understand how they are using the product, frictions they have, areas for improvement, and future requests.

  • Customer questionaires: It was important to gather feedback from all customers even if they were not available in person or by phone.

  • Data Metrics: By adding Mixpanel to our legacy product I was able to see insights into behavior, clicks, and overall how the product was being used.

  • Assumptions and Requirements: I categorized our functional requirements to help guide customer importance while leveraging future state research for customer assumptions.

What we learned?

Research, Interviews, and analytics led us to understand the most critical needs of our customers. Understanding how the customers used the product formed the priority of features and shaped the focus for the user experience.

• Customers use 10% of our features
• Customers consistently complete 3 tasks per session (NM)
• Lack of information halts campaign and site development
• Publishing speed is critical when launching campaigns

Customer Needs:
• Multi-user management
• Multi-language previewing and translation
• Persona based editing experience
• Automatic accessibility audits
• Platform speed

Screen+Shot+2018-11-09+at+1.56.23+PM.png
Screen+Shot+2018-11-09+at+1.58.14+PM.png
 

Product Management ( Organization, Strategy, Vision )

Organization is at the forefront of any project. It plays a crucial role in project success, team communication, and information discoverability. I created this documentation center to act as the central source of truth for all cohorts and leadership enabling instant communication and education for all things Crownpeak.

CrownPeak Product Management
 

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

Personas and Mapping

With a clear understanding of our customers, needs, and responsibilities I was able to shape 4 essential personas that were required for the platform. Mapping during the iterative design process at Crownpeak consisted of flowcharts, mind maps, and mockups which were embedded into our documentation center to help with leadership and team review.

Low fi concepts and feedback

Early versions of the new product were concept tested with sketches, basic illistrations, and organized questions to help gather feedback. Key takeaways from our tests were then applied as the fidelity increased. Our focus during the early stage concept tests was to validate the direction we were taking, understand the customers worries, inform the customer about decisions, and showcase the potential value delivered for the customer.

Key Takeaways:
• Administrators need whitelabeling of the products.
• Editors want drag and drop activated with active templates.
• Developers need preview and code view in a single interface.
• Authors need a visual representation of editors in file.
• Editors need a historical timeline of changes, the ability to revert, and suggest an error.
• Administrators need an analytic dashboard configuration, would find prebuilt configurations valuable.
• Authors need a single view, when editing, displaying the live site, A/B test, and analytics associated so it is not a disconnected experience.
• Authors need offline mode and merge edits.

test.png

Data Informed

One of the most effective aspects of the project was our ability to implement data analytics to help guide, align with user feedback, and inform our decisions. We performed three separate analytics systems that would shape track the full universe of our customer experiences. The data would give us everything from behavioral data to optimization data all with the intent to help inform our decisions.

High fi concepts, prototyping and continual iteration

Our team would continually design, prototype, and test features with customers throughout the process. Even after launch we continuously maintained open communication to conduct usability tests through in-person interviews, video interviews, as well as data tracking user behavior.

CrownPeak Prototype
 

Development ( Front End, Angular, Github )

Overcommunication was vital for the design and engineering cohorts. Early on we setup design to development handoffs and iterated to improve as we progress. Addressing this first allowed us to reduce frictions and repetitive work that slowed our task roadmap. The design system provided extreme value throughout the entire project. Since we were developing in Angular 2 we set up folders that I was able to work directly from for the frontend code. Once I had the code structured in the file I would check in the assets directly to GitHub were we set up a merging process for developers to approve before merging into the design system. These Github processes saved us time by catching mistakes early on and continually allowed us to merge in the rapidly evolving design system components quickly. (Yes I am a designer who enjoys coding :)

CrownPeak Components

Screenshot from the component library seen here.

Screenshot of the sketch files that contained all the pages and components broken down and organized.

Screenshot from the InVision developer interface leveraged for front end code.

Screenshot from the Angular less style guide for components I managed in the application.

 

Applications

Digital Experience Platform

Content Management

Optimization & Personalization Manager

Demo Templates

Design System

Design System

 

Demo Experiences

Pharmaceutical Template

Agency Template