Repair Center
Nintendo Repair Center is a repair service lifecycle system for customers who need to fix their game consoles, accessories, or Joy-Cons. They can create an online repair request in the system.
Platform: Web Responsive
Company: Mize/Syncron
Project Brief
The “Repair Center” is an out-of-the-box product with two portals. The agent portal is for the technicians, and the customer portal is for their general customers to create repair requests.
Implementing the client’s branding on both portals and providing full customization for the customer portal to create a seamless transition experience for their customers.
Project Scope
I was crossing over to another functional team to support their need to share the front-end developer’s workload.
I was heavily involved in the design process for this new feature, from defining and creating a user flow to design mockups, CSS prototyping, and web accessibility tests.
The Problem
The customer portal has never undergone full UI and UX customization, so fulfilling client requests will require a lot of effort and work.
The Challenge
In order to create a seamless transition experience, the Repair Center UI needs to look exactly like Nintendo’s customer support site and match all styles.
Because the product system is not designed for full UI customization, agent and customer portal styles are intricate. Many workarounds are required to prevent some styles from being overridden so that the modified version can be applied accurately.
My Mission
Prototyping: My goal is to duplicate the current Customer Support UI layout and style for the Repair Center, which will seamlessly transition Nintendo users from the customer support site to the repair system.
Front-end development: I aim to overcome the obstacles of limited access, documentation, and training on modifying and submitting the change to the system CSS files. My goal is to ensure the “Repair Center” prototype is implemented accurately.
The Team
I worked closely with the product manager and the UX director to ensure that my prototype incorporated the client’s business requirements, branding style, and product content.
I collaborated with system and front-end developers to get access to the system CSS files and submit the modified version.
Tools
Axure RP
InVision
Dreamweaver-CSS
WAVE Evaluation
Axe Auditor
Customer Portal
1. Analysis the current Repair user flow
To define the new user flow, I analyzed the existing “Repair Center” user flow and the online form submission flow to understand their processes.
1.2 Define the new Repair Center user flow
After reviewing the existing flow and business requirements, I have redefined the user flow for the “Repair Center” and the form submission process.
2. Prototyping with branding style
Create a “Repair Center” section on the Nintendo Customer Support website with a consistent layout and style to ensure a seamless transition experience for the customer.
> View the Nintendo Repair Center
Unlike other game consoles and accessories, the Joy-Con repair form is separate from the repair form for different styles of Joy-Con.
> View the Nintendo Joy-con form
3. Implement CSS to the customer portal
In this process, I have encountered obstacles in modifying CSS. No documentation or training is available, which gives this process a certain learning curve.
One challenge is that after submitting the modified style, it does not always look correct in the system, so I need to debug what makes the style ineffective.
One unmanageable issue is that making one style work may cause other styles to change elsewhere, making system styles unmanageable quickly. I realized the limitations of the current system setup, and instead of battling among numerous styles through different CSS files, I found other workarounds to achieve my goal.
4 Validation
After the style has been modified on both Agent and Customer portals, it is ready to comb through these two portals to validate and ensure the UX and UI styles meet the requirements.
The Customer portal UI validation
The Customer portal UX validation
The Agent portal UI validation
The Agent portal UX validation
Project Learnings
Besides overcoming the obscure, I learned a new way to resolve multi-column flow in responsive when I worked on this project. I also learned the importance of backing up my file, especially when multiple people could modify the system CSS files. When my modification has been overwritten by other updates. I will be able to restore my change quickly and avoid redoing the work and slow down my process.