Brand Identity · Web Design · 8 Pages · 3-Week Sprint
Role
Head of VisualOS GrowedIn Digital
Visual identity, UI design, cross-team coordination
Key Outcome
100% first-iteration approval rate across 8 pages
Repositioned fragmented messaging into modern AI-focused brand identity
Client & Context
AI-Powered Code Review Platform
Automates 24/7 health checks + PR optimization for engineering teams at scale
The Problem
Single-page site with scattered messaging—failed to communicate value to developer audience
Generic visual identity (blue palette, basic logo) positioned CodeKnack as outdated in AI space
No brand system—inconsistent colors, typography, and assets across touchpoints
Goals
Position CodeKnack as modern AI player — purple gradient system, scalable logo, technical typography to differentiate from legacy blue competitors
Expand to 8-page website with developer-first messaging + custom product illustrations
Understanding the Gap
Technical credibility gap: Visuals failed to communicate product sophistication to developer audience
Fragmented messaging: Value proposition scattered across hero, features, footer with no hierarchy
Generic positioning: Blue color palette and basic logo didn't differentiate CodeKnack in AI DevTool market
Research & Discovery
Competitive Analysis
Reviewed 4 AI DevTool brands to identify positioning patterns: CodeRabbit, CodeAnt, Cubic Code Review, Cursor Bugbot
Messaging approach: Technical specificity over marketing fluff; developers trust concrete capabilities
UI patterns: High-contrast, minimal layouts prioritize code readability and product screenshots
Opportunity for CodeKnack: Modern positioning + developer-first language could differentiate from generic blue competitors
Stakeholder Alignment
Coordinated across 3 teams to define scope and expectations:
Founder (Client Stakeholder)
Established non-negotiables: Full creative control on hero section to showcase product functionality
Aligned on brand positioning: Modern AI company vs. generic DevTool
Content Team (GrowedIn Digital)
Co-developed messaging architecture before wireframing
Defined technical language standards for developer audience
Development Team (GrowedIn Digital)
Reviewed component reusability requirements for 8-page build
Confirmed CMS structure for blog and documentation sections
Outcome: Early alignment prevented scope creep and late-stage revisions
Brand Identity Development
Visual Identity
Created 5 logo variations, each with strategic rationale
Primary Palette
Purple (#935BEF): AI/innovation signal; differentiates from blue-saturated DevTool market
Rose Pink (#E5D5FF): Clean backgrounds; maximizes code readability on product screens
Secondary Palette
Dark Navy (#2A2B6E): Technical depth; used for text and UI elements
Gradient: Modern AI positioning; reserved for hero sections and CTAs
Rationale:
Purple positioning aligns with modern AI brands (Anthropic, Jasper) while maintaining developer trust through high-contrast white backgrounds
Typography
Selected Kumbh Sans for headings to deliver geometric sans-serif precision with excellent web rendering, paired with Nunito Sans for body text offering high x-height optimized for long-form technical documentation. Code snippets use JetBrains Mono, a monospace font designed for developers with coding ligatures.
Wireframing & Content Structure
Worked with GrowedIn's content team to:
Map 8-page sitemap with priority hierarchy (Home → Features → Pricing)
Define messaging pillars: Developer-centric language, Technical specificity, Outcome-driven CTAs
Create reusable component library (hero sections, feature cards, testimonial blocks)
High-Fidelity UI Design
Translated wireframes into polished screens with:
Custom illustrations for homepage and feature page (code flow diagrams, PR optimization visuals)
Consistent 8px spacing grid for developer-friendly precision
WCAG AA contrast ratios on all text/background pairings
Hero Section Collaboration
Challenge: Initial hero design established visual tone and direction, but founder requested a more product-centric approach that demonstrated the complete end-to-end user workflow rather than abstract branding.
Solution: After discussing the need to showcase the product holistically, designed a feature-rich dashboard visualization that captured the entire user journey—from code health monitoring to automated PR reviews—giving visitors immediate understanding of CodeKnack's core functionality.
Outcome: Dashboard hero approach approved without further revisions, successfully balancing brand aesthetics with product demonstration.
Delivered Outcomes
Timeline efficiency — 8-page website + complete brand identity delivered in 3 weeks
Approval rate — 100% first-iteration approval across all pages (excluding hero section—resolved in 1 additional round)
Cross-team coordination — Managed alignment across content team, dev team, and founder stakeholder with zero scope creep
What Worked
Early stakeholder alignment on hero section
Setting expectations upfront (founder had final say on hero) prevented late-stage scope creep
Purple color differentiation
Bold choice paid off—positioned CodeKnack as modern AI player vs. legacy blue DevTools
Reusable component library
Accelerated design handoff to dev team and enabled future page expansion without designer involvement
What I'd Improve
Developer interviews
Would conduct 2-3 interviews with target users (engineering leads) to validate messaging assumptions before finalizing copy
Interactive documentation nav
Could've prototyped searchable docs navigation earlier to test usability with technical content
