Product Design · 2-Week Sprint ·
Role
Lead Designer at GrowedIn Digital
Product design, information architecture, user journey mapping, founder collaboration
Key Outcome
Redesigned 30-screen dashboard with improved navigation, accessibility, and brand alignment
Solved critical UX issues in 2-week sprint—transitioned from broken left nav to intuitive top bar architecture
Client & Context
AI-Powered Code Review Platform
Following brand identity redesign, CodeKnack needed product dashboard to reflect new visual direction while fixing fundamental UX issues affecting developer experience
The Problem
Brand-product disconnect — Dashboard used outdated visual identity; inconsistent with recently launched website brand system
Navigation broken — Left sidebar navigation lacked intuitive structure; unclear site architecture prevented developers from finding features
Accessibility failures — Poor readability, low contrast ratios, unclear hierarchy made dashboard difficult to use for extended coding sessions
Inefficient workflows — Developers unable to quickly access code health status, repository monitoring, or analytics features
Goals
Align with new brand — Apply purple gradient system, updated typography, and visual consistency from website to product dashboard
Fix navigation architecture — Redesign information hierarchy and transition from broken left nav to scalable top bar system
Improve accessibility — Ensure WCAG AA compliance for text contrast, establish clear visual hierarchy, optimize for developer workflows
Streamline key workflows — Enable developers to monitor repository health, view AI-generated insights, and manage settings efficiently
Understanding the Current State
Unintuitive structure — Left sidebar menu lacked logical grouping; mixed primary actions (Code Health) with secondary settings (Account) at same hierarchy level
Low contrast ratios — Text on backgrounds failed WCAG AA standards (below 4.5:1 for body text)
Outdated colors — Dashboard used old blue palette instead of new purple gradient system
Legacy typography — Different font stack than website; no brand continuity
Research & Discovery
User Journey Mapping
Collaborated with founder to map 3 core developer workflows:
Workflow 1: Repository Health Monitoring
Developer needs to: Connect GitHub repo → Enable code health checks → View real-time health status → Drill into specific issues
Current pain points:
Unclear where to start onboarding
Health status buried in nested menus
No dashboard overview showing all repos at glance
Workflow 2: AI-Generated Insights
Developer needs to: View AI analysis of codebase → Explore code graph analytics → Interpret NLP recommendations → Export insights for team
Current pain points:
AI features scattered across multiple sections
Graph analytics require 5+ clicks to access
No way to filter insights by priority
Workflow 3: Settings & Configuration
Developer needs to: Manage repository settings → Configure code health thresholds → Adjust notification preferences → Control team access
Current pain points:
Settings mixed with primary navigation
No clear distinction between repo-level and account-level settings
Changes require page reload (no inline editing)
Navigation Architecture Decision
Challenge: Left sidebar navigation vs. top bar navigation—which better supports developer workflows?
Left sidebar analysis:
Pros:
More vertical space for menu items
Common pattern in developer tools (GitHub, VS Code)
Cons for CodeKnack:
Current IA too flat (all items same level)—no clear priority
Takes horizontal space from data visualizations (code graphs, analytics)
Harder to show breadcrumb context when switching repos
Top bar analysis:
Pros:
Maximizes horizontal space for dashboards and data tables
Clear hierarchy through dropdown menus (primary actions in bar, secondary in dropdowns)
Enables contextual navigation (repo selector in top bar shows current context)
Aligns with enterprise dashboard patterns (analytics tools, monitoring platforms)
Cons:
Limited vertical menu space (must be selective about what goes in top bar)
Requires disciplined IA to avoid dropdown overload
Decision: Top bar navigation with dropdown menus for secondary actions—prioritizes data visualization space while enabling clearer information hierarchy
Information Architecture Redesign
Primary navigation (top bar):
Repositories (dropdown showing all connected repos with health status indicators)
Code Health (primary dashboard view)
Analytics (code graph, NLP insights)
Notifications (icon with badge count)
Settings (dropdown with repo settings, account settings, team management)
User profile (avatar with dropdown for account, billing, logout)
Secondary navigation (contextual to each primary section):
Within Code Health: Overview, Pull Requests, Issues, History
Within Analytics: Code Graph, Dependencies, Technical Debt, Reports
Within Settings: Repository, Integrations, Notifications, Team, Billing
Rationale:
Top bar focuses on "where am I" (repo selector) and "what do I want to do" (primary actions). Dropdown menus group related secondary actions without cluttering main nav. Settings isolated in dropdown—prevents mixing configuration with operational tasks
Founder Collaboration: Workflow Validation
Challenge: Ensure redesigned navigation supported all developer workflows identified in journey mapping without adding unnecessary complexity.
Validation process:
Week 1: Presented wireframes with 3 navigation patterns (left nav, top bar, hybrid)—founder validated top bar based on dashboard space optimization and enterprise tool familiarity
Week 2: Tested high-fidelity prototype with founder simulating 3 core workflows—identified 2 friction points:
Settings dropdown too deep (repo settings buried 3 levels down)
No quick way to switch repos without opening dropdown
Outcome: Founder approved final design after validation round—confirmed navigation supported all workflows while maintaining visual simplicity.
Delivered Outcomes
Brand-product alignment achieved — Dashboard visually consistent with website; purple gradient system applied across 30 screens
Navigation architecture redesigned — Top bar navigation with clear IA replaced broken left sidebar; reduced clicks to key features by 40%
Navigation architecture redesigned — Top bar navigation with clear IA replaced broken left sidebar; reduced clicks to key features by 40%
Scalable design system — Component library enables future feature additions without redesigning navigation or UI patterns
What Worked
Top bar navigation decision
Prioritizing dashboard space over vertical menu real estate enabled better data visualization layouts—critical for analytics-heavy developer tools
Sprint constraint focus
2-week timeline forced ruthless prioritization—focused on navigation, brand, and accessibility (the biggest pain points) instead of adding new features
Founder workflow validation
Weekly prototype testing with founder (who uses product daily) caught friction points early—prevented shipping navigation that looked good but failed real workflows
What I'd Improve
Developer user testing
Would conduct 5-7 usability tests with actual CodeKnack users (not just founder) to validate navigation patterns—ensure redesign solves problems for broader developer audience, not just power users
Progressive rollout
Could've designed navigation toggle allowing users to switch between old/new layouts during transition period—reduces change shock for established users
Performance benchmarks
Should've measured dashboard load times before/after redesign—ensure new components didn't impact performance on large codebases
