Flux

Six design rounds show how product focus moved

Figma V1–V6 and live V7 record the full evolution: long Portfolio pages, homepage marketing, slogans, brand stories, KPI dashboards, and multiple action panels. Enlarging the desktop frames in sequence shows the homepage repeatedly shifting between actions, narrative, and product data. V7 ultimately stops forcing everything into one homepage: Overview owns product guidance, participation guidance, and overall KPI progress, while the separate KPIs page owns progress for each KPI.

I proposed a preferred option and a fallback around user tasks

My January 29 feedback on V6 addressed page responsibilities, information priority, and exposed concepts: first consider a separate introduction page; if the structure stays, reprioritize Home. The TL and PM said these judgments closely matched investor feedback and the redesign goals. The final pages settled on separate Overview and KPIs responsibilities.

• Prefer a separate introduction page so Home can focus on global KPIs; let Portfolio answer personal stake, estimated rewards, and earned rewards first
• If the introduction stays on Home, consider replacing the right-hand Updates with Active KPIs to bring decision-relevant progress into the first view
• Rewards are allocated by how long MEGA remains staked: longer staking means higher maturity and reward weight
• Each stake creates a Position; multiple Positions are combined by MEGA amount into weighted maturity
• Keep Stake / Unstake primary, and explain Position or maturity only in How It Works, the staking dialog, and My Commitments

The UI followed the design; the UX still needed definition

The evolving mockups explain why the UI needed repeated alignment; they were not the source of the UX decisions. I completed the full UI rewrite while separately defining information hierarchy, route-aware Drawers and Modals, mobile Back, stable headings and visual anchors, motion timing, and same-size skeletons beyond the mockups.

Every overlay became a reversible route

The useRouteStack implementation retained in Terminal illustrates how to organize this interaction: createRouteStack("drawer") creates an isolated Context, Provider, and hooks so URL state, React state, and browser history share one stack. An overlay becomes a reversible, restorable path rather than just an open boolean. The film illustrates URL and drawer changes with screenshot animation.

• URLSearchParams.getAll / append: repeated drawer parameters encode every layer in order
• stack + stackRef + pushedDepthRef: update the UI immediately and track which history entries belong to overlays
• pushState / replaceState / back / go: open, replace, remove one layer, or close the owned stack
• usePathname / useSearchParams + Credenza: restore URL state, rendering a desktop Modal or full-height mobile Drawer

Consistency is more than a color system

I standardized title copy, heading regions, content regions, CTA placement, and close semantics across related overlays. Desktop Modal and mobile Drawer use different containers but carry the same content and state; changing overlay content or steps does not move the title or primary visual anchor.

Motion and loading still have to preserve layout

Headings reveal character by character, progress moves from its initial value to the target, and component entrances keep a shared rhythm. Every asynchronous region reserves the final content dimensions, so removing its skeleton replaces content without reallocating space or pushing the surrounding layout.