ColorCoded Labs

Project Overview

Client: ColorCoded Labs
Industry: Tech Education / Coding Bootcamp
Project Type: Website Redesign & CMS Architecture
Timeline: 4 weeks
My Role: Lead Designer & Developer

The Challenge

ColorCoded Labs is a coding bootcamp based in Columbus, Ohio, with a powerful mission: providing tech training to underrepresented talent and connecting graduates with employers committed to workforce diversity. Their programs—Manual QA and QA Automation—have helped hundreds of career changers break into tech.

The company had launched as a pilot and quickly gained traction. Their existing website, built by the same agency that created their branding, served them well initially. But as they grew, several problems emerged:

The Core Issues

1. The Brand Was Getting Lost in Itself

ColorCoded Labs has a fantastic brand identity—bold, vibrant colors that represent diversity and energy. But on their website, these colors were everywhere. Headers, backgrounds, buttons, accents—everything competed for attention.

The paradox: When everything is colorful, nothing stands out.

Original Design: High Cognitive Load

Inconsistent Visual Hierarchy

2. Structure Didn't Match Growth

The site was missing critical pages:

• No About Us page (essential for mission-driven companies)
• No Partnerships page (needed for B2B outreach)
• No Press/News section (they were getting media coverage with nowhere to showcase it)

3. Operational Bottleneck

Adding or modifying courses required developer intervention. The team couldn't:

• Update course information independently
• Add new programs without rebuilding pages
• Manage time-sensitive content (enrollment deadlines, countdown timers)

Discovery & Strategy

Understanding the Real Problem

Looking at the existing site alongside their brand guidelines, I identified the core tension:

The brand colors were meant to be distinctive—to pop and grab attention. But when applied to every element, they created visual noise instead of visual impact.

My diagnosis to the client:

"I like the colors concept a lot, but I think it's being overused on the website in a way that's making the concept less impactful. More whitespace and high-contrast backgrounds would make the colors stand out more."

The Strategic Approach

Design Strategy: Introduce restraint. Create a neutral canvas (clean whites, subtle grays) that allows the brand colors to be intentional rather than overwhelming.

Information Architecture: Add the missing pages and restructure navigation to support their growth:

• About Us (mission and team)
• Programs (with dropdown)
• Press/News
• Partnerships

Technical Strategy: Build a CMS architecture that empowers the team to manage courses independently—including complex features like countdown timers and cross-site visibility toggles.

Design Process

Audit: What Wasn't Working

The existing site used brand colors for:

• Page backgrounds
• Section backgrounds
• Headers and subheaders
• Buttons and CTAs
• Decorative elements
• Navigation

Result: Visual fatigue. The eye had nowhere to rest, and nothing felt important.

The Refinement: Strategic Color Application

I introduced a new visual hierarchy:

Base Layer (90% of the page):

• Clean white backgrounds
• Light gray accents for section separation
• Dark text for readability
• Generous whitespace

Accent Layer (10% of the page):

• Brand colors reserved for:
  • Primary CTAs
  • Course-specific identifiers
  • Key data points
  • Interactive elements on hover

The Result: When color appears, it means something. Each course gets its signature color (blue for Manual QA, green for QA Automation), creating instant recognition without overwhelming the user.

Color System

To allow the website's vibrant colors to stand out without competing for attention, I introduced a neutral set of base colors. This approach not only provides a modern, professional canvas but also makes it easier to assign specific, distinguishable colors to different programs—like individual course pages—enhancing the site's overall utility.

New Base Colors

Existing Brand Colors

Page-by-Page Approach

Homepage:

• Clean hero with clear value proposition
• Course cards with color-coded accents (not color-flooded backgrounds)
• Social proof section (review ratings, salary outcomes)
• Sticky CTA bar for enrollment

Course Pages:

• Each course "owns" its color
• Countdown timer for enrollment deadlines
• Clear curriculum breakdown
• Graduate outcomes and salary data

About Page:

• Mission-first storytelling
• Team introduction
• Company values aligned with diversity mission

Partnerships Page:

• B2B focus for employer partnerships
• Clear value proposition for hiring partners
• Contact/inquiry flow

Press Page:

• CMS-driven news appearances
• Automatic page generation for each press mention
• Chronological archive

Technical Implementation

CMS Architecture

The biggest operational win was the course management system I built in Webflow:

What the ColorCoded Labs team can now do without a developer:

1. Add New Courses

   • Create course in CMS
   • Assign course color (appears everywhere automatically)
   • Set curriculum, pricing, timeline
   • Course page generates automatically

2. Manage Enrollment Deadlines

   • Set countdown timer date in CMS
   • Timer updates automatically across site
   • No code touching required

3. Control Course Visibility

   • Single toggle: "Show/Hide Course"
   • Affects: Homepage, navigation dropdown, course listing page
   • Instant site-wide update

4. Add Press Mentions

   • Add news item to CMS
   • Press page updates automatically
   • New press release page generates if needed

Technical Details

• Platform: Webflow
• CMS Collections: Courses, Press/News, Team Members
• Custom Features:
  • Dynamic countdown timer pulling dates from CMS
  • Conditional visibility based on CMS toggles
  • Color theming via CMS color picker
  • Automatic navigation updates

The Transformation

Before vs. After Comparison

Original Pilot Site

2023 Redesign

Before:

• Brand colors everywhere, competing for attention
• Missing critical pages
• Team dependent on developers for content updates
• No clear visual hierarchy

After:

• Strategic color application that makes the brand pop
• Complete page structure supporting business growth
• Full content independence via CMS
• Clean, modern aesthetic with intentional color moments

Design Philosophy in Action

The key insight from this project: Restraint is a design skill.

ColorCoded Labs' brand wasn't broken—it was being diluted. By pulling back and creating breathing room, the vibrant colors finally got the attention they deserved.

Results & Impact

Operational Efficiency

• Team can now add courses, update content, and manage press mentions independently
• Enrollment deadline updates take seconds, not developer hours
• New course launch requires zero development work

Brand Clarity

• Colors now serve a purpose (course identification, CTAs, key moments)
• Visual hierarchy guides users through conversion funnel
• Modern, clean aesthetic matches their professional positioning

Scalability

• Site structure supports continued growth
• CMS architecture ready for new programs
• Press section showcases growing media presence

Key Learnings

1. Sometimes the Problem Isn't What They Think

The client asked for a "refresh"—move things around, add some content. But the real issue was strategic: their brand was getting lost in visual noise. Identifying and articulating this elevated the project from cosmetic updates to meaningful improvement.

2. Restraint Requires Confidence

It's easy to add more. It's harder to take away. Convincing a client that less color would make their colorful brand more impactful required clear rationale and trust.

3. CMS Architecture Is Design Work

The course management system wasn't just development—it was designing a workflow. Understanding how the team would use the site daily informed every CMS decision.

4. Mission-Driven Clients Deserve Mission-Worthy Design

ColorCoded Labs is doing important work: creating pathways into tech for underrepresented talent. Their website needed to reflect that professionalism and purpose—not just look "colorful."

Project Images