MacBook Pro 15_ Mockup.png

The Product -
Enterprise Level Content Management Platform

Crownpeak is a digital experience company that specializes in helping multinational corporations stay globally accessible and legally compliant. 

Role:

UX Designer & Researcher

Client:

Crownpeak 

Scope:

8 week complete design cycle

Tools:

Sketch, Abstract, Confluence, Invision

Quentin Lee, Janna Moreau

Team:

The Challenge - Redesigning a complex tool

I was asked to update the styling tool that clients use to edit the digital privacy notifications among multiple websites. Not only would I need to get up to speed on best practices for SaaS, but I'd need to understand world of digital governance.

Step 1 - Stakeholder Alignment

(getting every team on the same page.)

Understanding and aligning with the stakeholders was the beginning, middle, and end of the process. It was imperative to understand major blockers, and important criteria otherwise all visual design work would be wasted.

C&C companies.png

C&C Analysis

  • Before the first Kickoff meeting I needed to have a firm understanding of what other industry leaders were doing to solve styling challanges.

  • This pre kickoff research included an indepth study of what our current styling process looked like.

Colleagues Working in Office

Clarifying Assumptions

  • With that anaylsis in hand i was able to go into a kickoff and get clarification on key limitations, expectations, and assumptions. 

  • That kickoff lead to the creation in depth "how might we" questions

download (7).png

Gathering Ideas

  • Eventually, we took our specific questions and scenarios as visualized through personas and Ideated several "pie in the sky" potential solutions.

  • The result of the ideation session was 8+ different ideas we could test and mold into applicable suggestions for the development team.

The Current Experience was ... Dated.

Below you'll find images of the original experience. This version of the product struggles because not only does it feel "dated", it is very challenging and time-consuming for users to make changes among multiple websites at once. Showing the shareholders this alongside comparative flows was an important step to get everyone on the same page. 

Current Flows

Screen Shot 2021-09-10 at 9.12.46 AM
Screen Shot 2021-09-10 at 9.11.45 AM
Screen Shot 2021-09-10 at 9.11.02 AM
Gentleman's Agreement - Task Flows
Screen Shot 2021-07-14 at 1.35.54 PM
Gentleman's Agreement - Task Flow - Crown Peak v.1

Step 2 - Getting An Accurate Baseline 

(The Research Process)

With a clear understanding of the problem, we began meeting with clients, product experts and finally testing prototypes on potential clients. Our goal in this research phase was to confirm those assumptions and to understand what features from the ideation session resonated best with users.

Contacting Product Experts

Staff Meeting

Takeaways...

"The preview doesn't work"

We spoke with the customer success managers, technical service managers, and developers associated with the project. They could speak directly to the history of the product as well as the problems they most often had to solve. These SME's would be able to clarify, and add specifics and metrics to our assumptions.

The feedback led to 2 major takeaways

  1. An overwhelming amount of complaints revolve around inconsistencies between the preview and the final result

  2. fixing one thing broke other aspects of the site.

Meeting With Customers

Collaborating

Feedback...

"It's confusing and broken"

We had the privilege of meeting with 3 different clients 2 of whom would be considered "super users". We wanted to know exactly what situations they used the product and their major pain points. This info would help us determine which of the potential solutions were most important.

After walking through the customers' previous experience we discovered 2 additional points.

  1. The challenges our customers faced were even more drastic than our assumptions suggested

  2. Having different viewing options was even more important than we initially understood.

Solving for Two Distinct Problems and Clients

The culmination of the research phase confirmed a few assumptions and provided a deeper understanding of the 2 core users, Marketers who prioritized speed and ease of use, and Engieerers or Super Users that required a much higher level of customization within the styling platform.

Easy Mode Marketing

Persona - Marketing Mary.jpg

Super User Engineering

Persona - Engineering Edwin.jpg

Step 3 - using an iterative process for solutions

Now that we had proof that our users needed the ability to quickly edit on the macro and micro level, we could fashion several potential solutions and test whether they were understandable, useful, and most importantly whether our clients could have a faster and more enjoyable experience.

A "few" versions...

Testing which feature was the MOST beneficial.

Some of the eariest design iterations aimed to solve the problem of mass changes by having a setup wizard and allowing global changes via an all-inclusive modal.

 

In these images, you'll find many of the iterations that were scrapped for various reasons from not leading to the simplest and smoothest user experience, to not aligning strongly aligning with our users' core needs.

Step 4 - Presenting the "Final Designs"

The final designs (though not without a few questions) do solve the challenge for both marketing and engineering by enabling global changes, having a step by step set up, naming and focusing only on important information, and including the ability to make advanced changes directly in the CSS. The pictures below are selected from that design.

DG Styles - Home Hovering over Select
DG Styles - Select Theme (Standard Dark)
DG Styles - Tutorial 1
DG Styles - Button Editor (Inline)
DG Styles - Background Layout Editor  (Logo Flow 2)
DG Styles - Background Layout Editor  (Logo Flow 3)
DG Styles - Advanced Editor (Hover States)

Facing an unexpected hurdle ...Time Management!

The Process was of course not without many challenges, from getting 5000 spam recruitment results to most importantly not planning testing well. Design is of course much more than pretty screens, but staying efficient with my time is the big challenge I'll be working on next to become the best designer I can be.

Smiling with Sweat Emoji.png
Proper time management and planning is important. I rushed to High Fidelity, and it cost me 10+ hours! I won't be making those mistakes again!

What makes a Great Designer isn't pixels it's team building & collaboration.

The actual gold I brought to Crownpeak was not in designing a great solution but in bringing all the stakeholders around a common problem. The most impactful next step was something non-design-related, and it was my responsibility to be an advocate for that solution as it would best serve everyone, while also visualizing a step by step set of potential solutions for the best possible product.

There's always next steps.

More research and testing could have been done and at a greater speed, and I could have done a better job at planning and recruiting. Regardless of the challenges, I'm incredibly grateful for the opportunity to have learned through this project and hope to continue to improve in the planning area of design.

If you liked it and want more...

The story is actually even deeper than this one case study, 3 collages and I worked on this very project for 3 weeks as consultants and came to surprising revelations.