Project Overview
The VCode System is a self‑serve merchant tool within the FIUU Merchant Portal that enables merchants to securely check or generate transaction verification codes (VCodes).
Fiuu Merchant Portal
Role: UI Designer
Platform: Website
Year: 2023/2024
Tool: Adobe XD, Visual Studio Code
Vcode System
Objective
- Revamp the page visually to match new FIUU branding.
- Enhance with new features (hash selector, extended format toggle, contextual help).
- Improve readability, accessibility, and overall usability while maintaining security requirements.
My Role
- Sole designer of the revamp and feature enhancements end to end.
- Focused on rebranding, clearer flows, and error‑reduction mechanisms.
- Ensured a modern, readable, brand‑consistent interface with better microcopy and hierarchy.
- Worked closely with developers to define validations, states, and hand off detailed specs.
Design Process
Review & Understand Existing UI
Define New Features
High-Fidelity Designs
QA & Iteration
1
Reviewed the existing VCode system for usability issues, inconsistencies, and user pain points. Collected data from support tickets to spot top failure points.
2
Specify what’s new: hash options, currency input for extended format and validation.
3
Created clean, consistent interface in line with FIUU’s design system. Built interactive prototype for quick internal walkthroughs/UAT.
4
Test on staging, log UI/UX bugs, verify accessibility/responsiveness. Iterate after UAT feedback.
Iterative Enhancement: Extended Format Confusion
After the initial revamped version of the VCode system was released to production, we received consistent reports of data mismatches caused by merchants misunderstanding the "Extended Format" function.
Identified Problems
Although the UI included a currency input field, many users were confused about:
- Whether they were using Extended Format or not.
- Why selecting a currency would cause issues when they weren't supposed to.
Merchants often blindly selected a currency, not realizing it would only apply if Extended Format was enabled — this led to incorrect VCode generation and system mismatches.
First Release (Post-Revamp)
- First iteration of the redesigned form.
- Currency input was always visible, which confused users not using Extended Format.
Design Iteration: Explicit Toggle
- Updated design with a toggle switch.
- Currency input now only appears when Extended Format is enabled, preventing accidental misuse.
Guidance ("View Details")
- Some merchants still weren’t clear why they would ever need extended format.
- Added a “(View details)” link that opens a modal popup, providing clear, contextual help about when to use this format.
Old & New UI Screens
This comparison showcases the transformation of the VCode System interface from the legacy Razer Merchant Services design to the improved FIUU Merchant Portal UI.
Old User Interface Screens
New User Interface Screens
Key Achievements
- Reduced user errors related to VCode mismatches by introducing clearer interaction patterns and conditional UI (toggle switch for extended format).
- Decreased support tickets from merchants regarding incorrect VCode usage and currency selection.
- Enhanced user guidance with contextual “View Details” feature, leading to better self-service and reduced confusion.
- Successfully iterated based on real merchant feedback and post-launch usability issues.
- Strengthened UI consistency and alignment with the FIUU design system across all VCode interactions.
Reflections
Redesigning and enhancing the VCode System taught me the value of iterative design and the importance of closely observing real user behavior post-launch. While the initial revamp improved the interface visually and functionally, user confusion around the Extended Format showed that even small UX misunderstandings can lead to critical backend issues.
This experience reinforced that clarity must come before aesthetics, especially in B2B platforms where users rely on precision. By introducing conditional inputs and contextual guidance, I was able to bridge the gap between what the system required and what the users understood ultimately delivering a more intuitive and error-resistant experience.
It was a reminder that good UI is not just about how things look, but how well they guide the user through the task at hand.