An internal theming tool for Rain Retail Software.

My Role

Lead UX/UI Designer & Front‑end Developer

Platform(s)

Web

Timeline

May 2017 – Aug 2017

TLDR

Responsibilities

Concept, advocacy, UX research, UI design, and full front-to-back development. Solo project from idea to shipped product.

Results

Reduced client color theming from up to 3 hours down to under 10 minutes on average. 

94.44% decrease in time spent

Highlights

Live template previews across 70+ designs, real-time color editing with pseudo-class support, one-click CSS export, and a zero-code workflow built entirely for non-technical users.

Problem & Constraints

Account managers were hand-editing CSS to theme client websites. With dozens of templates and clients who changed their minds often, a single round of updates could eat 1 to 3 hours. CSS proficiency varied, errors were common, and there was no way to preview changes before committing them. Clients were waiting.

Time was being wasted. The process needed to go away entirely.

Process & Key decisions

The interface needed to feel immediate, visual, and forgiving. Users could see color changes reflected live on an actual website template rather than guessing from a hex value. Suggested colors, quick-action adjustments, and a one-click CSS export meant the tool guided users to a finished result without requiring any technical knowledge.

The bigger design challenge was scope. With 70+ templates across 17 business categories, the tool had to work consistently across wildly different layouts and element structures. Every template needed selectable elements, pseudo-class support, and reliable CSS output. Getting that architecture right early was the decision that made everything else possible.

Templates

Choosing a starting point had to be fast. An autocomplete search bar let users filter across 70+ designs without scrolling through a wall of thumbnails. Templates were organized across 17 business categories so account managers could find something relevant to a client's industry in seconds.

Website Template Editor

This was the core of ColorPages. A live preview of the selected template updated in real time as colors were changed. Users could select any element directly from a list that included pseudo-classes like hover, active, and focus states so nothing was left unaddressed.

Color suggestions were generated based on the template's primary color, giving users a smart starting point. Quick actions let them lighten, darken, rotate hue, or revert to the original with a single click. When the design was locked in, one button generated all the necessary CSS. A Prism.js modal displayed it cleanly with a one-click copy so the handoff was instant.

Enhanced Product & Category

Homepage featured product and category sections had their own editor. These sections showed up across every template and needed the same level of control, including hover, active, and focus states, with the same fast CSS export workflow.

Design System & Components

Built on Bootstrap, which gave the team a familiar, stable foundation without reinventing layout and component patterns from scratch. Custom components were layered on top where Bootstrap's defaults fell short, keeping the interface consistent without overbuilding. The priority was a tool that felt lightweight to use, not one that showcased the design system behind it.

Final Experience

ColorPages turned a fragmented, error-prone process into a single focused workflow. An account manager could open the app, select a template, dial in colors with live feedback, and walk away with production-ready CSS in under 10 minutes. No code. No back-and-forth. No waiting.

The experience was designed to feel less like a CSS generator and more like showing a client options in real time.

Impact & Findings

Time savings were significant

Average completion time dropped from 1 to 3 hours down to 5 to 10 minutes per client. The tool paid for the time invested in building it within the first few weeks of use.

Errors and revision cycles dropped

Because account managers could preview changes live, fewer mistakes made it to the client. Less back-and-forth meant faster approvals and smoother onboarding overall.

Non-technical users

CSS proficiency was no longer a bottleneck. Account managers who had previously relied on developer help could handle theming independently, freeing up technical resources for higher-priority work.