Customize the look of your workspace

Custom UI Theme

UX Designer / Core Product Team / 2020

#1 Product Lifecycle Management Software For Consumer Goods

Centric PLM

The flagship solution Centric PLM brings cost savings and efficiency for consumer goods such as fashion, outdoor, luxury, multi-category retail, etc. by optimizing product execution from ideation to development, sourcing, and manufacture. This is the product I have been mainly supporting in over 4+ years in Centric Software.

Impression about Centric PLM is powerful, but also dated and depressing...

To enterprise users in C8 PLM, it is a powerful platform with many features that support their complex daily tasks. However, when I first joined Centric Software, I first noticed that the current UI, the ONLY OOTB UI, looked dated with messy colors, making it challenging for me to learn how powerful this product can be, let alone the end users. They must be suffering more...

Users want it to be not just powerful but also with appealing and personalizable UI!

Very soon, our Pre Sales in Japan reported their challenge in Sales demos. Though customers liked how powerful Centric PLM was, they still preferred one of the competitors with a much more appealing and customizable UI, which made the whole product look much more friendly to get started, regardless of the lack of powerful features supporting their daily work.

This really caught our executive's attention and prioritized the UI revamp on top of the roadmap. We saw this as the right timing for us to redefine the overall look and feel of the UI, and make it more friendly for users to personalize their own workspace.

As my very first project here, I was very excited to redefine the UI so I could have an easier time after this. I was pretty sure that my users felt the same 🤓

But what does it mean by redefining the UI and making it personalizable 🤔

1. To different users/customers？

Align their own branding color (e.g. luxury brands prefer dark colors).

Color-code based on roles (done by admin). Some customers have color code their supplier portal for suppliers

Customers

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

Individual Users

2. What is the familiar experience of UI personalization like to users?

There are many types of users in Centric PLM, and each could use different professional software for work. So I researched some more general tools that every user could be using, such as browsers and communication tools.

3. Understand the UI foundation of the whole system in Centric PLM

The biggest challenge was the lack of a systematic UI system

UI framework is DOJO, nearly 20 years old.
A mess of colors is used in the system, not all colors are documented in the Theme Guide.
Typography has no specific rules and mostly are hard-coded.
No spacing system. Almost all padding/spacing is hard-coded as well.
Only some of the components are documented for Devs, without detailed guidelines.

4. What is the SCOPE of this UI Theme project?

UI Theme is the term that came from 2 rounds of user testing. I'll be using this term in the following content :)

As a new designer just joined the company, how did I redefine the look and feel of the huge enterprise software with many modules?

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!

Started from 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

Redefining colors was easy, but it took much more to match them up with what the system already had

Reorder old colors in the shade order
Combine redundant colors
Map the old colors into the new colors
Take a very close look at the system and adjust color mapping.

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

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

Accessibility Check

Selected examples and components are shown here, much more was done throughout the whole system :)

I collaborated with a wide range of roles from various aspects to make sure we cover every single detail of this giant system

Each of us checked through the familiar parts of the system and logged defects in the Confluence page for us to prioritize and track progress

The Big Issue

Status attribute background colors were off and disturbing in many places

Among the defects logged by my teammates, this issue has been complained the most after the mapping with the new color palette...I needed to be very careful to make everything look just right!

With help from the Product Owner and PMs, I quickly audited State attributes in 16 modules and assigned new colors in a semantic and consistent way

More could be done to improve the look and feel of the Status attribute, like creating pills and improving the interaction. But with the time and resources, I had to put those ideas in the parking lot to stay focused on the rest of the big tasks in our scope

Selected Samples

After the default UI theme with more technical details

I started exploring the more fun UI theme customization experience

Round 1

Black and dark were mentioned the most by the many luxury customers. I also wanted to make sure to cover diverse color preferences

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

Bright Rain_edited_edited_edited_edited_edited.jpg

Then I explored more styles

Round 2

I put more light and dark UI Themes with carefully treated color tones into testing

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 of 22 options

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

Finally, we were proud to provide

A set of brand new UI Themes with a more fun, delightful, professional look and feel

Luxe Dusk Starry Night Sunset Boulevard

Ocean Wave Violet Mist Indigo Centric Blue

Arctic Fresh Sea Breeze Spearmint Dragon Fruit

Any Impact?

Received Great Feedback from Customers and Stakeholders

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 😁

Internally, I established new color palettes for Design and Dev day-to-day work and 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

The last but not the least

🤓 🧐 😃 😉 🤪
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 :)

516.647.7628

Download Resume

tiandesign93@gmail.com