Building the Creatives Tax Calculator: Design & Architecture

When we set out to build MyNaijaTax, we recognized that traditional tax calculators don't work for everyone. Nigerian creatives—photographers, actors, content creators, and freelancers—face unique challenges: variable income, multiple revenue streams, and business expenses that don't fit standard payroll models.

This article takes you behind the scenes of how we designed and built the Creatives Tax Calculator, from initial concept to implementation.

The Problem: Why Creatives Need a Different Calculator

Traditional tax calculators assume:

• Stable monthly income (salaries)
• Predictable deductions (Pension, NHF)
• Single income source (one employer)

But creatives experience:

• Variable income (₦0 one month, ₦2M the next)
• Multiple income sources (gigs, royalties, brand deals)
• Business expenses (equipment, travel, studio rent)
• No employer deductions (self-employed)

We needed a calculator that could handle this complexity while remaining simple to use.

Design Philosophy: Progressive Disclosure

Our core design principle was progressive disclosure—start simple, reveal complexity only when needed.

Two-Mode Approach

Quick Mode (2 steps)

• Single income input
• Single expense total
• Fast results for rough estimates

Detailed Mode (4 steps)

• Multiple income sources
• Categorized expenses
• Full breakdown and quarterly planning

This approach lets users choose their level of detail based on their needs and time constraints.

User Experience Design

Mode Selection Screen

The first screen presents two clear options with:

• Visual distinction: Icons (⚡ for Quick, 📊 for Detailed)
• Clear descriptions: What each mode offers
• Use case guidance: "Perfect for: Quick checks" vs "Accurate filing"

This helps users make an informed choice without overwhelming them.

Income Sources Design

For Detailed Mode, we created a flexible system:

Pre-defined Categories:

• 🎬 Gigs/Projects
• 💰 Royalties
• 📱 Content/Brand Deals
• 🎤 Live Performances
• 📚 Teaching/Coaching
• 🎨 Creative Services
• ➕ Other Income

Key Features:

• Add multiple entries per category
• Visual cards with icons
• Live total calculation
• Easy removal with one click

Expense Categories

We organized expenses into logical groups:

1. Equipment & Tools (cameras, software, computers)
2. Travel & Transportation (fuel, flights, accommodation)
3. Studio & Workspace (rent, utilities, home office)
4. Professional Services (agent fees, legal, accounting)
5. Training & Development (courses, workshops)
6. Other Business Expenses (insurance, subscriptions)

Each category includes:

• Icon for visual recognition
• Description for clarity
• Helper text with examples

Technical Architecture

Frontend Stack

Framework: Next.js 16 (App Router)

• Server-side rendering for SEO
• Client-side interactivity where needed
• Route-based code splitting

State Management: React Hooks

• useState for local component state
• useMemo for expensive calculations
• No global state needed (simple data flow)

Styling: Tailwind CSS

• Utility-first approach
• Consistent design system
• Dark theme support

Animations: Framer Motion

• Smooth page transitions
• Step-by-step wizard animations
• Loading states

Component Structure

src/app/creatives/
├── page.tsx              # Mode selection
├── QuickMode.tsx         # Quick calculation flow
└── DetailedMode.tsx      # Detailed calculation flow

src/components/
├── ReceiptScanner.tsx    # OCR receipt scanning
└── premium/             # Reusable UI components

Tax Calculation Logic

The calculation engine (src/lib/tax-calculator.ts) follows this flow:

1. Sum all income sources → Gross Income
2. Sum all business expenses → Total Expenses
3. Gross Income - Expenses → Net Income
4. Net Income - CRA (Consolidated Relief Allowance) → Taxable Income
5. Apply progressive tax bands → Annual Tax
6. Calculate quarterly/monthly breakdowns

Key Design Decisions:

• Same progressive tax bands as PAYE (fairness)
• Business expenses deducted before tax (self-employed treatment)
• CRA applies to gross income (not net)
• No statutory deductions (Pension, NHF optional)

Innovative Features

1. Receipt Scanner with OCR

One of our most innovative features is the receipt scanner that uses Optical Character Recognition (OCR) to extract expense amounts from images.

Technology Stack:

• Tesseract.js: Client-side OCR library
• Image Processing: Browser-native image handling
• Pattern Matching: Smart amount extraction from text

How It Works:

1. User uploads receipt/image (drag & drop or click)
2. Image is processed client-side (privacy-first)
3. OCR extracts text from image
4. Pattern matching finds currency amounts
5. Amount is auto-filled into expense field

Pattern Recognition:

• Currency symbols (₦, N)
• Labels ("Total", "Amount", "Sum")
• Number formats (₦123,456 or 123456)
• Context-aware extraction (prefers totals over line items)

Privacy Benefits:

• All processing happens in the browser
• No images sent to servers
• No data stored
• Complete user control

2. Variable Income Helper

For users with highly variable income, we provide estimation tools:

• Best/Worst/Average Month: Input three values
• Automatic Annual Calculation: Estimates total income
• Volatility Indicator: Shows income stability

This helps users who don't track every transaction.

3. Quarterly Tax Planning

Unlike PAYE (monthly), self-employed creatives pay quarterly. Our calculator:

• Breaks annual tax into 4 quarters
• Shows payment schedule
• Suggests monthly savings amount
• Provides payment reminders

4. Tax Savings Visualization

We show users how much they save through expense deductions:

• "You saved ₦234,000 through deductions"
• Visual breakdown of expense categories
• Percentage of income saved

This encourages proper expense tracking.

Design Patterns

Wizard Pattern

Multi-step flows use a wizard pattern:

• Clear progress indicator
• Step-by-step navigation
• Review step before final calculation
• Easy back navigation

Card-Based Layout

Expense and income items use cards:

• Visual separation
• Easy to scan
• Clear hierarchy
• Touch-friendly on mobile

Live Preview

Calculations update in real-time:

• As users type, results update
• No "Calculate" button needed
• Instant feedback
• Builds confidence

Mobile-First Design

Nigerian users are primarily mobile-first, so we:

• Touch-optimized inputs: Large tap targets
• Collapsible sections: Save screen space
• Bottom sheets: Native mobile patterns
• Progressive enhancement: Works on slow networks

Accessibility Considerations

• Keyboard navigation: All features accessible via keyboard
• Screen reader support: Proper ARIA labels
• Color contrast: WCAG AA compliant
• Focus indicators: Clear visual feedback

Performance Optimizations

• Code splitting: Only load what's needed
• Lazy loading: OCR library loaded on demand
• Memoization: Expensive calculations cached
• Image optimization: Receipt images compressed

Future Enhancements

Based on user feedback, we're planning:

1. Expense Presets: Pre-filled categories by profession
2. Multi-Year Projections: 3-5 year tax planning
3. Receipt Storage: Save scanned receipts (optional)
4. Export to PDF: Professional tax reports
5. Integration: Connect to accounting software

Lessons Learned

What Worked Well

1. Progressive Disclosure: Users appreciated choice between quick and detailed
2. Receipt Scanner: Highly requested feature, well-received
3. Visual Design: Purple theme distinct from other calculators
4. Real-time Calculations: Instant feedback builds trust

Challenges Overcome

1. OCR Accuracy: Pattern matching improved extraction rates
2. Variable Income: Estimation tools help users with irregular income
3. Mobile Experience: Touch-optimized inputs critical
4. Performance: Lazy loading keeps initial bundle small

Conclusion

Building the Creatives Tax Calculator required understanding a unique user group with distinct needs. By combining user-centered design, modern web technologies, and innovative features like OCR receipt scanning, we created a tool that makes tax calculation accessible for Nigerian creatives.

The key was balancing simplicity with flexibility—giving users the option to go quick or detailed, while handling the complexity of variable income and business expenses behind the scenes.

Try it yourself: Calculate your creatives tax

Next Steps:

• Read our tax calculation guide for creatives
• Learn about deductible expenses
• Explore quarterly tax planning strategies

---

This article is part of our series on building MyNaijaTax. Stay tuned for more behind-the-scenes content.