An internal theming tool for Rain Retail Software.
My Role
Lead UX/UI Designer & Front‑end Developer
Platform(s)
Web
Timeline
Jun 2022 – Dec 2023
TL;DR
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 big 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.