Moddex Configurator · June 2026

Redesign
Proposal

A focused redesign of the drawing editor and organisation projects screen — keeping the Moddex brand language while modernising usability, navigation, and visual hierarchy.

Dallas PetersProduct Designer
ScopeEditor + Projects List
StatusConcept · For Review
Overview

Redesign Prototype — Home

Landing screen and top-level navigation.

01 / Drawing Editor

The drawing editor needed a cleaner tool surface.

The action bar was doing too much. The panels had no brand character. The right panel showed everything regardless of context.

01 / Drawing Editor

Branded Notched Workspace

Orange bar stripped to breadcrumb + pricing badge. Dark floating tool palette. Context-sensitive right panel.

02 / Projects Dashboard

The projects screen needed stronger hierarchy and wayfinding.

The navigation had no active state. The action row mixed three button styles. The table read as a wall of identical rows.

02 / Projects Dashboard

Organisation Projects — Redesigned

Marketing-site tabs, clear action hierarchy, status badges, and scannable table rows.

Detail — Navigation + Shadows

Dropdown active state & layered shadows

Two small changes with outsized impact on perceived quality.

Dropdown — Active State

BEFORE
Dashboard
Distributors
Companies
All Projects
My Account
No active state
Heavy opaque shadow
AFTER
Dashboard
Distributors
Companies
All Projects
current
My Account
Orange rail + aria-current
Layered elevation-low shadow

Shadow Tokens

/* elevation-low (menus, dropdowns) */
--shadow-elevation-low:
  0.3px 0.5px 0.7px hsl(var(--shadow-color) / .34),
  0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / .34),
  1px 2px 2.5px -2.5px hsl(var(--shadow-color) / .34);

--shadow-elevation-medium:
  0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / .36),
  5px 10px 12.6px -2.5px hsl(var(--shadow-color) / .36);

Replaces box-shadow: 0px 5px 15px #232323 in action-bar.scss

Audit Summary

21 confirmed findings

These designs directly address the highest-priority items.

H2
No active state on navigation items
Addressed by orange left rail + aria-current on the current page item.
H14
Consolidate Menu + MoreMenu
A shared DropdownMenu component fixes both, adds aria-expanded, aria-haspopup.
H8
Flash: no dismiss + 5s timeout (WCAG 2.2.1)
Add × button + extend to 30s. Low effort, high accessibility impact.
M8
Action bar uses hardcoded #232323 shadow
Replace with var(--shadow-elevation-low) — token-ready, tonal, modern.
H12
Complete the Optics token migration
Replace --color-* / --sk-* with Optics tokens. Eliminates 46 hardcoded hex values.
M5
Form section labels use <p> not <h3>
"Export Options", "PDF Options" are paragraphs — invisible to screen reader heading navigation.
Next Steps

Phased implementation

Quick wins first, structural changes second.

Quick Wins — Under 1 hour each
1
Remove Inter + Roboto Google Fonts import1 line in moddex-theme-core.scss
2
Fix 3 autocomplete attribute valuesgiven-name, family-name, organization
3
Add flash dismiss button + role="status"5 lines in _flash.html.slim + Stimulus controller
4
Add aria-expanded to hamburger + MoreMenu2 lines, one per component
5
Replace hardcoded shadow with tokenaction-bar.scss:5 → var(--shadow-elevation-low)
Structural — 1–3 days each
A
Wrap layout in <main> + add skip linkH3 + H4 — layouts/application.html.slim
B
Add confirm dialog ARIA + focus trapC2 — role="dialog", aria-modal, focus management
C
Consolidate Menu + MoreMenuH14 — shared DropdownMenu component
D
Complete Optics token migrationH12 — replace --color-* and --sk-* with --op-*