Menu

Nintendo Repair Center

Transformed an out-of-the-box repair system into a fully branded, seamless experience—bridging UX design and front-end implementation under heavy system constraints.
Role: Product Designer (UX + Front-End)
Platform: Web Responsive
Company: Mize / Syncron

Overview

My Role

  • Redesigned end-to-end repair flow
  • Built high-fidelity branded prototypes
  • Implemented custom CSS in a restrictive system
  • Conducted accessibility audits (WAVE, Axe)
  • Collaborated across product, UX, and engineering

Goal

Design a seamless, branded repair experience that:
  • Matches Nintendo’s support site visually
  • Maintains consistency across customer + agent portals
  • Works within a highly constrained system
  • Meets accessibility standards

The Problem

Netendo, a high-profile enterprise client, required a fully customized repair application that visually matched their consumer-facing website. The existing system delivered a generic, out-of-the-box interface, creating a disconnected user experience and breaking brand continuity.

The challenge was to bridge the gap between the front-end design system and a rigid back-end application framework—ensuring visual and interaction consistency without compromising system functionality.

Key Challenges

A. System Constraints
  • Platform not built for full customization
  • Styles frequently overridden
B. No Documentation
  • No guidance for modifying system CSS
  • Required reverse-engineering
C. Cross-Portal Dependencies
  • Changes in one portal impacted another
  • High risk of regression
My Approach

A. Redefined the Customer Portal User Flow

Analyzed existing repair + submission flows

To define the new user flow, I analyzed the existing “Repair Center” user flow and the online form submission flow to understand their processes.

Simplified and restructured the new journey

After reviewing the existing flow and business requirements, I have redefined the user flow for the “Repair Center” and the form submission process.

Result: clearer, more predictable experience

B. Recreated Nintendo’s Design System

  • Matched layout, typography, spacing, interaction
  • Embedded Repair Center within existing ecosystem

Result: seamless transition experience

C. Engineered CSS Workarounds

  • Stable UI across portals
  • Reduced regressions
Result:
  • Stable UI across portals
  • Reduced regressions
Nintendo Repair Service example

D. Designed for Edge Cases (Joy-Con Flow)

    • Designed separate flows for Joy-Con variations
    • Maintained consistency across scenarios
  •  

Result:
Reduced confusion in complex repair cases

E. UI and Accessibility Validation

  • Ensured CSS implemented across system correctly
  • Audited with WAVE & Axe
  • Ensured WCAG compliance

Result:
Improved usability + inclusivity

Impact
  • Delivered a seamless cross-platform experience
    Eliminated the visual and interaction gap between Netendo’s website and repair application, creating a unified end-to-end journey.
  • Strengthened brand trust and perception
    Users experienced a consistent interface, increasing confidence in the repair process and reducing perceived friction.
  • Reduced design–engineering inconsistencies
    Established a reusable styling approach that minimized future UI drift and reduced ad hoc fixes.
  • Improved efficiency for future customizations
    The systemized CSS and component structure enabled faster implementation for additional client-specific customizations.

I transformed a generic back-end tool into a branded product experience by systematizing design across front-end and back-end boundaries—ensuring every interaction felt cohesive, intentional, and trustworthy.