Innovative Aluminum
Shared Platform Context
Innovative Aluminum runs inside the shared Thundercloud DPQ platform, alongside other partner strategies (Moddex, Upward, etc.). This means most UX findings are not exclusively an Innovative Aluminum problem — they reflect the state of the shared shell, editor, and design system. Each finding below is tagged with a scope label to clarify ownership:
IAS-specificBehavior that exists only in the Innovative Aluminum strategy, order flow, or assets.
IAS-observed / shared fixIssue observed in the IAS experience, but the correct fix is a shared-system pattern.
Shared systemLives in the shared Thundercloud editor, shell, or component overrides.
Parent app ownedHardcoded values and drift concentrated in the parent app's Optics overrides — not IAS-specific styling.
Two additional findings were excluded: an IAS-specific sleeve geometry error (internal engineering, not a UX issue) and a React state-transition warning (internal stability concern, no visible user behavior observed).
Executive Summary
248
Hardcoded CSS values
1
Critical finding
3
High findings
6
Total (1C · 3H · 1M · 1P)
The Innovative Aluminum Railing Designer is a capable domain-specific tool built on a shared platform that carries most of the UX debt. The most IAS-specific and highest-leverage finding is the Order Now flow (H1 / P1): the final conversion step drops users into a manual PDF download + email attachment sequence, while the shared CTA framework used elsewhere in the platform already supports a more seamless submit path. Fixing this would be the highest-value improvement available to Innovative Aluminum specifically — and it builds on existing infrastructure rather than requiring a greenfield design. The remaining confirmed findings (focus styles, mobile/narrow viewport behavior, design-system drift) are shared-system issues that affect IAS as a byproduct. A platform-level pass on accessibility and Optics token adoption would benefit all partner strategies simultaneously.
Findings Overview
| ID | Title | Severity | Scope | Section |
|---|---|---|---|---|
| C2 | Several shared controls remove focus outlines | Critical | Shared system | Accessibility |
| H1 | Order Now flow depends on manual email attachment | High | IAS-observed / shared fix | Key Flows |
| H2 | Mobile editor is explicitly not fully optimized | High | Shared system | Mobile & Responsive |
| H4 | Narrow viewports hide or crop action button labels | High | Shared system | Mobile & Responsive |
| M1 | Visual-system drift concentrated in shared Optics overrides | Medium | Parent app owned | Consistency & Standards |
| P1 | Order surface stops short of true submission | Pattern | IAS-observed / shared fix | Strategic Opportunity |
Detailed Findings
C2
Several shared controls remove focus outlines
Critical
Shared system
Section
Accessibility · WCAG 2.4.7 Focus Visible
Description
Static scan found authored styles that set
outline: none on shared editor controls and third-party select overrides. Some rules provide a replacement focus state nearby, but the side-panel tool button and tom-select option/control rules remove outlines without an equivalent visible focus treatment in the same rule.
Impact
Keyboard users may lose visible focus in shared editor and property-panel workflows. Because these styles live in shared component overrides, any fix could affect multiple clients and should be validated across partner strategies.
Client framing: Shared editor controls can be strengthened with clearer keyboard focus states, improving accessibility across the product experience.
Evidence
app/assets/stylesheets/components/optics-overrides/side-panel.scss:221
app/assets/stylesheets/components/optics-overrides/side-panel.scss:225
app/assets/stylesheets/vendors/tom-select-overrides.scss:31
app/assets/stylesheets/vendors/tom-select-overrides.scss:72
app/assets/stylesheets/components/jump-zoom.scss:57
Implementation Note
Shared-system change. Use Optics focus tokens and regression-check editor controls for all partner strategies.
H1
Order Now flow depends on manual email attachment
High
IAS-observed / shared fix
Section
Key Flows & Task Completion
Description
The Innovative-specific Order Now modal asks the user to download a PDF, open an email client, and manually attach the PDF before sending. The code builds a
mailto: link rather than packaging or attaching the generated document. This is a cross-application handoff at the most critical moment in the user journey — the conversion step.
Impact
The final step asks users to perform a fragile, multi-application action that increases the chance of incomplete orders, missing PDFs, and support follow-up from Innovative Aluminum staff. Users who have finished the design work are stopped before the order is actually placed.
Client framing: The ordering moment can be made more seamless by reducing the manual steps required after a design is complete.
Evidence
dev-tools/ux-audit-output/innovative-order-modal.png
app/javascript/components/strategies/innovative-aluminum/IASystemsOrderNowModalContent.jsx:140
app/javascript/components/strategies/innovative-aluminum/IASystemsOrderNowModalContent.jsx:155
app/javascript/components/strategies/innovative-aluminum/IASystemsOrderNowModalContent.jsx:168
Implementation Note
Observed in the IAS-specific modal. The durable fix should extend the shared custom CTA framework with a real order-package submission pattern — not another one-off modal — to prevent this problem recurring across other partner strategies.
H2
Mobile editor is explicitly not fully optimized
High
Shared system
Section
Mobile & Responsive Behavior
Description
At a 390px mobile viewport, the editor displays a warning that the screen size is not fully optimized and recommends using a larger screen. The shared editor still exposes tool, property, and order controls behind the warning banner — meaning mobile users are knowingly entering a constrained experience with no path to a mobile-appropriate alternative.
Impact
For client-facing positioning, this is better framed as a modernization opportunity. The warning is honest, but it leaves mobile users without a productive alternative — they can't complete their task and the product offers no guidance on what they can do instead.
Client framing: The editor already recognizes small-screen constraints. A future pass could define which tasks are fully supported on mobile and provide a better path for users who arrive on small screens.
Evidence
dev-tools/ux-audit-output/innovative-editor-mobile.png
app/javascript/components/UnsupportedScreenSizeWarning.jsx:21
app/javascript/components/UnsupportedScreenSizeWarning.jsx:26
app/assets/stylesheets/components/screen-size-warning.scss:6
Implementation Note
Shared-system product decision. Avoid scoping an Innovative-only mobile fix unless it is restricted to content changes or route gating.
H4
Narrow viewports hide or crop action button labels
High
Shared system
Section
Mobile & Responsive Behavior
Description
In the editor at a narrow viewport, several action buttons collapse into partial or icon-only states. The visible screenshot shows labels such as Parts List and Layers cropped at the viewport edge, while shared CSS intentionally hides some button labels on small screens when icons are present.
Impact
Users lose clear command labels in the editor toolbar, forcing them to recognize commands from icons or partial text. In a complex design tool where actions like parts list, layers, quote, and menu are task-critical, icon-only recognition adds unnecessary cognitive load and risk of error.
Client framing: At narrower screen sizes, important editor actions can keep clearer labels and spacing so users don't have to infer commands from partial text or icons alone.
Evidence
dev-tools/ux-audit-output/innovative-editor-mobile.png (narrow viewport — cropped PARTS LIST and LAYERS labels visible)
app/assets/stylesheets/components/optics-overrides/button.scss:548
app/assets/stylesheets/components/optics-overrides/button.scss:575
app/assets/stylesheets/components/optics-overrides/button.scss:580
Implementation Note
Shared-system responsive toolbar issue. Fix likely affects editor action-bar and button behavior across all partner strategies — validate button label hiding and overflow behavior per partner toolbar before shipping.
M1
Visual-system drift is concentrated in shared Optics overrides
Medium
Parent app owned
Section
Consistency & Standards
Description
The source scan found 58 authored hex-color matches, 114 hardcoded pixel values, 10 literal font-size declarations, and 62 inline box-shadow matches across the codebase. The biggest clusters are in shared Optics overrides for buttons and side panels — not in Innovative Aluminum-specific stylesheets.
Impact
This is not primarily an Innovative Aluminum styling problem. It indicates the shared app has accumulated local overrides around the design system, which makes future theming and partner-specific polish harder for everyone. Innovative Aluminum inherits this debt rather than creating it.
Client framing: Innovative Aluminum would benefit from shared platform polish in the editor shell and component system, even though the underlying work belongs to the parent Thundercloud app.
Evidence
58 hex colors · 114 hardcoded px · 10 font sizes · 62 box-shadows (phase1-summary.json)
app/assets/stylesheets/components/optics-overrides/button.scss:153
app/assets/stylesheets/components/optics-overrides/side-panel.scss:1
app/assets/stylesheets/core/theme/thundercloud-theme-core.scss:1
Implementation Note
Parent-app design-system modernization. Do not recommend IAS-only styling patches — the fix needs to happen at the shared override layer.
P1
IAS order surface stops short of true submission
Pattern
IAS-observed / shared fix
Section
Strategic & Forward-Looking
Description
Thundercloud has a shared custom CTA modal framework used across partner strategies. Innovative Aluminum uses that framework for its Order Now modal, but the current flow terminates at "download PDF + open email" — a mailto link rather than a submission. At least one other strategy (Upward) uses the same CTA hook for an in-app save/submit path via
ExternalProjectSaveButton.
Impact
This is the strongest IAS-specific strategic opportunity identified in this audit. It does not require a broad shared-app redesign — it builds on infrastructure that already exists. Closing the gap between the current mailto order and a real in-app submission would meaningfully improve the end-to-end dealer experience.
Client framing: The best next step for Innovative Aluminum may be a sharper ordering experience, not a cosmetic redesign. The infrastructure is already there — this is about completing the loop.
Evidence
app/javascript/shared/strategies/SystemStrategy.js:1011 (shared CTA framework)
app/javascript/components/editor-strategies/ModeStrategy.jsx:130
app/javascript/shared/strategies/partners/innovative-aluminum/InnovativeAluminumStrategy.js:153
app/javascript/components/strategies/innovative-aluminum/IASystemsOrderNowModalContent.jsx:140
app/javascript/shared/strategies/partners/upward/UpwardStrategy.ts:111 (comparison: in-app submit)
app/javascript/components/strategies/upward/UpwardAbstractModalContent.jsx:105
Implementation Note
Extend the shared custom CTA framework with a real order-package submission pattern. The IAS-specific flow should adopt this rather than continue as a standalone mailto modal.
Screenshots
Editor — top view
Editor — mobile / narrow viewport (H2, H4)
Order Now modal (H1, P1)
Appendix: Code Scan Data
Hardcoded Values Summary
| Type | Matches | Files affected | Note |
|---|---|---|---|
| Hex colors | 58 | 12 | Concentrated in shared Optics button/side-panel overrides |
| Hardcoded pixels | 114 | 26 | Spread across shared stylesheets |
| Literal font sizes | 10 | 5 | |
| Inline box shadows | 62 | 16 | Highest cluster in shared overrides |
| Hardcoded border-radius | 4 | 4 | |
| Total | 248 | — |
Token Coverage
| Metric | Value |
|---|---|
| CSS custom property declarations | 256 |
| SCSS variable declarations | 0 |
| Token usages in codebase | 1,488 |
| Authored stylesheets scanned | 56 |
| Optics version installed | @rolemodel/optics 1.0.0 |