Overview
ColorCoded Labs is a tech bootcamp based in Columbus, Ohio — preparing students for careers in tech and connecting graduates with employers committed to workforce diversity. After a successful pilot launch, the team was scaling fast: new programs, growing media coverage, and B2B partnership conversations with enterprise hiring partners. Their existing website couldn't come with them. I led a brand system extension and website redesign that turned a standalone identity into a digital system the team could operate themselves.
The Challenge
ColorCoded Labs had launched with a bold visual identity — vibrant colors, a distinctive mark, a name that promised diversity and energy. But as the company grew, the website carrying the brand wasn't scaling with it. Courses were visually interchangeable. Key surfaces didn't exist. And every content update required developer time the team didn't have.
01
Brand Designed for Impact, Not Scale
The identity worked beautifully as a standalone — but applied across an entire website, every element ended up in brand color, every background fighting for attention, every section feeling equally important.
02
Site Built for a Pilot
The original site supported a single product. As the company expanded into multiple programs, press coverage, and partnership outreach, there was no structure to house any of it.
03
Team Blocked From Their Own Brand
Course updates, enrollment deadlines, and press mentions all required developer intervention — which made the brand feel static in a company that was anything but.
Original Pilot Site — Brand Color Everywhere
No Visual Hierarchy Between Sections
The Core Insight
The brand wasn't broken. It wasn't built to scale.
What ColorCoded Labs had was a strong identity — confident, meaningful, visually distinctive. What they needed was a system: a set of rules and patterns that could turn that identity into something the team could extend themselves, across a growing website, multiple programs, and expanding marketing surfaces — without diluting the brand each time.
The real work wasn't redesigning a website. It was building the digital infrastructure the brand was missing.
My diagnosis to the client: "The colors concept is strong — but it's being overused on the website in a way that's making the concept less impactful. More whitespace and high-contrast foundations will make the brand colors stand out, not disappear."
The Audit
Before touching visual design, I audited how the existing brand was being applied across the site — page by page, section by section, component by component. Three patterns kept repeating.
Color as Decoration
Brand colors were treated as surface treatment. Page backgrounds, section dividers, button fills, decorative accents — all rendered in full brand color. With every element fighting for visual priority, nothing read as primary. The palette that was meant to signal energy was reading as noise.
No Product Differentiation
ColorCoded Labs had two distinct programs — Manual QA and QA Automation — but visually they were interchangeable. New students couldn't quickly tell which program was which, and the system had no room to handle additional programs the company planned to launch.
No Extension Logic
The brand's original guidelines — completed in 2020 alongside the pilot launch — covered the essentials of identity work: logo variations, the color palette, a print-oriented typographic specimen. What they didn't define was digital behavior. No web type scale. No hierarchy rules for navigation, forms, or data displays. No component patterns. No guidance for how the brand should behave as the product surface grew. Every new page had been solved from scratch — which is why every new page drifted.
Strategic Approach
From the audit, three decisions shaped the rest of the work:
Build a neutral foundation. Introduce rest states so the brand colors could do meaningful work instead of fighting for attention.
Assign color to product. Give each program its own signature color so the brand could differentiate what the company actually sells.
Document the system digitally — and make it operable. Extend the existing guidelines into a component-level system, and build a CMS that enforced the system's rules so the team could add to it without breaking it.
Early Exploration
Before any visual design, I worked through structure. The original site had grown organically — new pages added as the company launched new initiatives, without a shared model for how those pages should behave. I started by wireframing the priority page templates — homepage and about — to map content hierarchy, confirm information architecture, and align with stakeholders on structure before committing to any visual decisions.
These wireframes gave the team a clear picture of what was changing architecturally versus what was changing visually — and surfaced structural gaps (like the missing About page, partnerships section, and press archive) as design decisions rather than afterthoughts.
Homepage Wireframe — Hierarchy Before Visual System
About Page Wireframe — Mission, Values, and Team Structure
Visual Identity System
The original brand gave me a vibrant palette, a distinctive mark, and a typographic voice. My work was to extend it into a complete digital system — one that kept the energy of the identity while giving every surface room to breathe.
Color Architecture
The biggest system-level change was introducing a neutral foundation. The original palette had no rest states — every brand color was fully saturated, and there was nothing in the system that signaled "quiet." I added three.
Foundation Layer
Xiketic
#18172DCultured
#F2F2F2White
#FFFFFFThese gave the palette somewhere to land. Dark surfaces, light surfaces, and a true white created a canvas against which the brand colors could become meaningful.
Brand Colors (Role Reassigned)
Midnight Blue
#262262French Blue
#1C75BBDark Turquoise
#61C7CFCarrot Orange
#F6931DDeep Cerise
#EB008BThe brand colors didn't change — but their role did. Instead of defaulting to brand color as the baseline, the system now used them intentionally: primary CTAs, product identity, key data points, interactive states. The rule was 90/10 — 90% neutral foundation, 10% brand color. When color appeared, it meant something.
Per-Course Identity
With color now acting as signal, I assigned each program its own color within the brand palette. Manual QA and QA Automation each received a signature color that carried through the course card, the program page, the enrollment CTA, and the navigation. It turned the palette from decoration into a product-differentiation system — with room built in for future programs to join without breaking the pattern.
Typography
The brand's existing typographic voice was Helvetica Now Display — a clean, confident sans-serif. I extended it into a responsive digital type scale, defining hierarchy for web-specific contexts that the original print-oriented guidelines didn't cover: navigation, form elements, metadata, stat displays, and the dense curriculum sections on course pages.
Component System
From these foundations, I built the component library that powered the site: course cards, program identity blocks, enrollment CTAs, stat displays, press callouts, navigation patterns. Each component carried the brand logic — neutral foundation, intentional color, product-assigned accent — so any new page assembled from these components stayed on-brand by default.
Key Design Decisions
Decision 01
Making the Brand Name a Design Instruction
The company is called ColorCoded Labs. The original brand hinted at the concept — five colors in the palette, a color-banded logo — but nothing in the identity actually did anything color-coded. On the homepage hero, I assigned each letter of the headline a different color from the brand palette. It's a small moment that delivers on the brand's own name — the first thing a visitor reads on the site is literally color-coded. The concept stopped being a description and started being an experience.
Hero Headline — Interactive Color-Coded Letters
Decision 02
Restraint as the Brand System's Core Rule
Convincing a client with a deliberately vibrant brand that less color would make the brand stronger required trust. The argument: when every color is shouting, none of them signal anything. By pulling brand color back to 10% of the interface, every appearance of brand color could mean something — and every CTA, every product marker, every key moment gained real visual weight.
Decision 03
Color as a Product Identity Layer
Rather than use brand colors decoratively, I assigned them to product. Each program owns a color — and that color carries through the entire experience of that program, from first impression to enrollment. This created instant recognition, supported cross-program differentiation, and built room for new programs to join the system without reinventing it.
Decision 04
The CMS as the System's Operating Layer
A brand system only works if the team can maintain it. I built the CMS so the rules of the system — color assignment, component patterns, visibility logic — were baked into the content model itself. When the team adds a new course, they pick a color; the system handles the rest. The brand stays consistent because the infrastructure enforces it.
Applying the System
The redesigned website became the first full application of the new digital brand system. Every page assembled from the component library. Every use of brand color deliberate. Every program visually distinct, but clearly part of the same brand.
Homepage — Color-Coded Headline Delivers on the Brand Name
Course Offerings — Per-Program Color Identity
Course Page — The Program's Color Carries the Experience
About Page — Mission-Forward, System-Consistent
Keeping the System Running
The CMS architecture was the operational layer of the brand system — the infrastructure that let the team add to the system without breaking it.
Course management. Adding a new course means creating a CMS entry, assigning a color, and writing curriculum copy. The system generates the page, updates navigation, and applies the color rules automatically.
Enrollment lifecycle. Countdown timers pull dates from the CMS and update across every relevant surface simultaneously — homepage, course page, navigation.
Content visibility. A single CMS toggle controls whether a course appears anywhere on the site — homepage, nav dropdown, course index — letting the team manage active and inactive programs without developer involvement.
Press coverage. Media mentions added through the CMS automatically generate the press index and individual press pages, keeping the company's growing media presence current without design or development work.
Outcome
The redesigned site launched in 2023, giving ColorCoded Labs a digital brand system matched to the scale they were growing into.
Full Content Independence
Team owns course launches, enrollment updates, and press publishing end-to-end — no developer required.
Brand That Scales
Vibrant identity finally reads as intentional — every color appearance carries meaning, and new programs slot into the system without breaking it.
Reflection
This project reframed how I think about brand work.
ColorCoded Labs' identity wasn't the problem. The problem was that the identity had never been extended into a system designed for scale. The most important decision I made wasn't a visual one — it was drawing the line between identity and system and treating them as two distinct deliverables.
Identities create recognition. Systems create scale. Most brands are built to do the first. Very few are built to do the second — and that gap is where I do my best work.