Custom UI Theme

Customize the look of your workspace

Design Lead / Core Product Team / 2020

The Problem

The perception about Centric PLM is outdated and depressing, posing challenges in sales demo. Enterprise users require appealing and personalizable UI experience

C8 PLM is a robust platform for enterprise users, but its outdated UI with messy colors makes it hard to appreciate its capabilities. This challenge likely affects end users even more. Our Pre Sales team in Japan identified a challenge with sales demos. Future customers favored a competitor with a more appealing and customizable UI, despite lacking robust features for their daily tasks. This really caught our executive's attention and prioritized the UI revamp on top of the roadmap.

😰

Design Solution

Custom UI Theme allows users to personalize their workspace, giving it a more modern appearance that aligns with their individual color preferences.

Design Process - Define The Scope

How to define a personalizable UI expereince🤔

01
Understand the needs for different users & customers

Luxury brands prefer dark tones for branding, while admins color-code by roles and some customers use color codes for supplier portals.

Customers

Individuals have diverse color preferences. They could personalize the look of the workspace they spend hours every day as they like

Individual Users

02
Analysis UI personalization aspects

Centric PLM has various users with different software. I explored common tools like browsers and communication platforms they might use.

03
Understand UI foundation

The nearly 20-year-old DOJO UI framework has a chaotic color palette with many undocumented colors in the Theme Guide, and its typography is inconsistent and challenging

04
Define the SCOPE

My Strategy

As a new designer just joined the company, I collaborate with the right people at the right time

Step 1

Analysis colors and define new color palette

Step 2

Work on the default UI Theme, focus on shared components

Step 3

Define other UI Themes, focus on decisive components

The Key Strategy

Collaborate with the right people at the right time!

Phase 1 - Default UI Theme

Redefine all the base colors

I got a list of 700+ variables used in the system shared by my Tech lead, among which I found those base colors variables:

Some are named numerically, but not visually reasonable.
The rest are named after where they are used.
some colors are the same but named as different variables.

Messy Depressing Dated...

Recreated 10+ shades of the color with Material Color Palette Generator and precise adjustment.

Bright Vitality Generally Accepted

Match up with old colors in the system

Fine Tuning The Default UI Theme

It was all about details when it came to mapping new colors to variables everywhere in the system!

🧐

Play with 700+ variables

With my developer's help, I ran HTML script myself to test out all the color variables in the Centric PLM in the browser, as the most efficient way to design for the entire system in this project, while design in Sketch was needed for certain cases

Accessibility Check

I followed WCAG 2.1 Level AA 1.4.3 to ensure a minimum contrast ratio of 4.5:1 between text and background

Collaborated with XFN to make sure we cover every single detail of this giant system

Phase 2 - Personalization

I started exploring the more fun UI theme personalization experience

Iteration 1

Black and dark were mentioned the most by the many luxury customers.

While color is a very subjective topic, there were still opinions in common

User Testing Insights

Yellow/Orange looks more like software for personal use than enterprise software
Red/Magenta UI Themes felt anxious and it was hard to have error elements stand out
Purple is too bright
Green and cyan were looking good
Users would like to have dark and clean UI Themes with light header

Iteration 2

Test out UI Themes with careful visual treatment

With my researcher, we conducted 4 more internal moderated testing sessions. It was really interesting since your favorite color may be the worst for someone else. That's why we carefully picked UI Themes not fully follow the rating from testing, since we only got the chance to test with a very small group of participants. But instead, informed by the rating, we picked UI Themes to make sure all types of colors are covered there.

12 UI Themes came out

4 dark UI Themes
4 light UI Themes
Beside Orange/Yellow, all other colors were covered

Define the look of your own workspace

Final Impact

Received great feedback for the enhanced look and feel in Centric PLM 🎉

Positive feedback from Business Consultants in the release follow-up survey. It was easy to explain to customer and they liked the new UI styling a lot! 😃

Stakeholders were super excited about this enhancement which brought a refreshing feeling to the system! They all find their favorite UI Theme for their own daily work 😁

Established new color palettes for Design and Dev day-to-day collaboration

700+

Variables audited throughout the system

150+

Variables mapped in to new Base Color Variables

16 x 12

Variables defined for 12 UI Themes

My takeways 🤓 🧐 😃 😉 🤪

It's been quite a journey in 6 months. I've learned more than I could imagine from this project and my colleagues. Team collaboration is the key to success in not just this but every project!

With such a large system, it’s super important to maintain organized variables and components to expedite the collaboration between Design and Dev smoothly. I continued my contribution to more component revamping in the Centric Design System after this project. Contact me if you'd like to learn more about it :)

Interested in learning more?
😊

Let's connect

516.647.7628

Download Resume

tiandesign93@gmail.com