Eric Douglas Pratt

Color Picker for Pegasystems

2008

Pegasystems was my first job out of college. They had a unique product for those days — business workflow software, for which the UI was entirely web-based. It ran in Internet Explorer 6 and 7.

Their software functioned as a generalized development environment for creating workflow applications — an environment that was user-friendly to non-technical people. Because it was able to create and maintain all sorts of applications, from internal-facing customer relationship management (CRM) apps to external-facing help desk systems, a key value proposition for their customers was that the look and feel be easily customizable to match the brand of their company.

Pega's development environment provided a vast set of plug-and-play UI components — essentially an early design system — and customers needed a way of creating a "skin" to consistently apply colors, padding, etc. to an entire application built with those UI components.

To that end, I was put in charge of creating a Branding Wizard. It would be built using the same development environment as the applications it would customize — the magic of Pega's technology! It allowed users to set primary and secondary colors for the whole application and walk through the various categories of UI components, step-by-step, to set overrides for specific components as needed. On the final step, it generated an umbrella "skin" object along with several CSS files containing the appropriate customizations.

One of the central components needed for this tool was a color picker, to allow users to set those primary, secondary, and override colors.

At the time, desktop-quality user input components were not common on the web. Even libraries like Yahoo UI, which provided more complex input widgets, still behaved a little janky in the browser. But I took this as a fun challenge, being a long-time believer that the web should ultimately be able to deliver top-notch user experiences, as good as any desktop application.

I dove into learning color math (HSV, HSL, RGB) and examined as many different color pickers from other software I could get my hands on, to get a sense of prior art and user expectations. I decided that a combination of an HSL picker and RGB sliders would be the most intuitive for non-technical users to pick up.

Despite being janky, Yahoo UI's toolkit still offered some of the most powerful components available at the time. I took their slider widget and wrangled with it until I locked down the drag-and-drop behavior to function smoothly and not go outside the bounds I wanted. I built custom slider handles, alternating between black and white pixels so they'd be highly visible against any color.

I made sure that the four main input controls — the hex text input, the HSL sliders, the RGB sliders, and the RGB text inputs — updated live, in sync with each other, rather than waiting until the user clicked out of the input (which was something I found annoying about some of the color pickers I researched). As you dragged or typed in one, all the others would update immediately.

I locked down the hex text input so only valid characters could be entered, meaning the user would never have to contend with an error message and was unlikely to have to hit backspace due to a typo.

I built custom number spinner text inputs — so you could easily tweak an RGB value up or down — and also locked down their input so only numbers could be entered and the user couldn't enter a number greater than 255 (the maximum value).

I ended up being fairly proud of how smoothly the sliders functioned and how easy to use the color picker was overall. I was an entry-level software engineer at the time, and I remember the managers in my department giving positive feedback on how it felt like a real desktop-quality dialog. This project was one of the factors cited in my promotion to senior software engineer the following performance cycle.