E9 case study - Ko Punithavelu

Elite Nine (a.k.a E9) is a fintech platform engineered to bridge the "confidence gap" in tax filing. Unlike traditional apps that skin generic frameworks, e9 was built from the ground up using 'Nonet', a custom design system of native Angular components.
This vertically integrated approach ensured that complex business logic was embedded directly into the component lifecycle and the design simultaneously. By mapping Figma properties 1:1 to Angular props, we created a production-ready framework that maintains integrity at scale.

The Engine: Powered by the Nonet Design System.
Role: Lead Product Designer (Research, UX Strategy, IA, and System Architect).
Stack: Figma → Native Angular (Nonet Design System)

The Challenge: Bridging the "Confidence Gap"

Tax filing is a high-cognitive-load activity defined by "Audit Anxiety". Our research found that the primary friction wasn't just data entry; it was the psychological barrier of legalistic jargon and the fear of financial reprisal. We aimed to transform complexity into a guided, predictable journey.

The Freelancer (Emma)

A gig worker managing multiple 1099s and rental income. She lacks the mental space for complex financial management and needs automated categorization to feel secure.

The Consultant (David)

A CPA managing over 150 clients. He is overwhelmed by incomplete client data and requires a high-density command center to manage batch filing.

The Engine: Nonet Design System (Angular Architecture)

Because Nonet was created specifically for e9, we built "Smart Components" that utilized Angular’s robust framework to enforce tax rules.

Component-Level Governance

Every Figma component was mirrored by a native Angular component, embedding accessibility and interaction logic into the Angular templates.

Anticipatory Design

Angular data-binding and services power auto-import engines for payroll data, removing "Transcription Cost" for users.

Inclusive Defaults

Components include 24x24px touch targets and mandatory ARIA attributes managed via Angular directives.

High-Stakes Iteration: Peak Season Testing

To validate the system, I conducted four design iterations with real users during the actual tax season. This provided a "stress-test" environment that standard testing could not replicate.

Methodology: Contextual observation of real filings, task-based testing (e.g., "Categorize a rental expense"), and retrospective interviews to understand friction points.

Iteration 1: Emotional Guardrails

Users were distracted and anxious due to a constant "Balance Owed" ticker visible during the entire entry process. I moved this to the final stage to allow for focused, calm data entry.

Iteration 2: Humanizing Logic

We translated IRS jargon into "Human-Language" within the Angular components. For example, technical terms like "Schedule C" were replaced with "Freelance Expenses" to lower cognitive friction.

Iteration 3: Document Verification

Redesigned the upload component to include a mandatory "Preview & Verify" step. This micro-interaction reduced backend document errors and mismatches by 40%.

Iteration 4: CPA Dashboard

Created a "High-Density" Angular view for power users like David (CPAs). By optimizing information density, consultants were able to manage 150+ clients with 35% more efficiency.

Information Architecture & UX Mechanics

Progressive Disclosure

Using Angular’s structural directives (*ngIf), the system only reveals complex tax questions if the user’s specific profile triggers the necessary logic, preventing overwhelm.

The Von Restorff Effect

We used the system's semantic color tokens to highlight critical audit-risk items, ensuring these high-priority alerts were never overlooked among standard data fields.

Semantic Handoff

Because Nonet uses native Angular components, the handoff was seamless—design tokens and variable names were identical in both Figma and the production code, eliminating translation errors.

Visual Designs

Responsive Mobile Web

Optimized for on-the-go filing, the mobile interface utilizes Nonet’s flexible grid system to maintain clarity on smaller viewports. We focused on thumb-friendly touch targets and simplified data entry flows to reduce friction for gig workers and freelancers.

Desktop Dashboard

The desktop experience is designed for high-density information management. It provides CPAs and professional consultants with a comprehensive overview of client statuses, batch-processing tools, and advanced filter logic powered by Angular services.

Brand Identity & Style Guide

The e9 visual identity communicates trust and precision. This brand book defines the semantic color palette, typography hierarchy, and iconography sets that are hard-coded into the Nonet Design System to ensure brand consistency across all platform modules.

Impact & Outcomes

92%

Accuracy Rating

Built-in audit protection gave users the confidence to file independently without third-party help.

Scalable

System Scalability

The Angular-based architecture allowed for rapid deployment of updates as tax laws changed mid-season.

35%

CPA Efficiency

Tax consultants moved away from manual spreadsheets to a governed, batch-filing dashboard.

Designing the Elite Tax Experience