Overview
VirgoCX is a premier Canadian cryptocurrency exchange dedicated to providing a secure and efficient trading environment for both retail and institutional investors. In a high-stakes industry where financial security and user trust are paramount, the digital experience must be as reliable as the underlying technology.
I was invited by the VirgoCX design team to spearhead a strategic UI revamp of their primary homepage. The objective was to modernize the brand’s digital storefront while resolving legacy usability friction. My role was to act as a bridge between the existing brand guidelines and a more sophisticated, user-centric interface that could effectively communicate complex financial offerings to a diverse user base.
Design Process
This project was more than a cosmetic update; it was a systematic re-engineering of the user's first touchpoint and their overall user experience. My process focused on three key design principles that would prioritize clarity over clutter, ensuring VirgoCX remains a competitive leader in the Canadian FinTech landscape. These design principles include:
Heuristic Alignment
Auditing the current homepage against competitors and industry standards to identify areas requiring design intervention.
Information Architecture (IA) Refinement
Restructuring the product hierarchy to highlight key offerings without overwhelming novice users.
Accessibility & Trust
Ensuring the visual language adhered to WCAG 2.1 standards to foster an inclusive, professional environment that reinforces platform security.
Competitive Analysis
When conducting research for the VirgoCX UI redesign, I analyzed leading competitors in the Canadian and global crypto/FinTech landscape—including Coinbase, Kraken, Gemini, and Wealthsimple—to identify common design patterns and emerging industry standards.
This benchmarking allowed me to pinpoint exactly where VirgoCX could differentiate itself while adhering to the mental models users already have for high-stakes financial platforms.
Trust at the Core
Leading platforms have shifted towards a calm and minimalist design philosophy to garner trust from users. Aesthetics such as neutral palettes with strategic accents and persistent visual reassurance are at the forefront of building trust.
Frictionless Onboarding
Progressive onboarding is now common amongst leading platforms, as breaking down complex user information into frictionless single-step screens with live validation help reduce cognitive load and drop-off rates.
Information Management
Competitors utilize Progressive Disclosure to manage complex data. For example, important user information is often nested within interactive cards, allowing the primary dashboard to remain clean and focused on high-level decision-making.
Personalized Predictions
The standard has moved toward Predictive UX, where dashboards are dynamically reordered based on user behaviour and context. This ensures that each user has an experience that is tailored to their needs.
Common Themes
Colour Accessibility
To establish a high level of trust and professional reliability for the VirgoCX platform, a rigorous Colour Accessibility audit was a non-negotiable step in the redesign process. Utilizing WebAIM’s contrast checker, I evaluated the existing brand palette against the Web Content Accessibility Guidelines (WCAG) to ensure that the interface remains inclusive and legible for all users, including those with visual impairments.
Before finalizing the UI, I measured the primary brand colours against WCAG's tiered criteria for accessibility:
WCAG 2.0/AA: Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
WCAG 2.1: Mandates a contrast ratio of at least 3:1 for graphics and user interface components like buttons or icons.
WCAG AAA: Represents the highest standard, requiring 7:1 for normal text and 4.5:1 for large text.
Technical Audit
To quantify the necessity for a palette revamp, I conducted a series of contrast tests using WebAIM’s criteria. The following results highlight the specific "Usability Debt" identified in the original VirgoCX colour pairings when set against the standard light background (#F5F5F5)
Primary Brand Tone (#7965E6): Yielded a contrast ratio of 3.99:1. While this passes the WCAG 2.1 requirement for graphical objects and user interface components (which requires a 3:1 ratio), it fails to meet the WCAG 2.0/AA standard of 4.5:1 for normal text legibility.
Secondary Blue (#739DE5): Produced a significantly low ratio of 2.5:1, failing both the text and graphical component standards.
Action Orange (#E49A81): Resulted in a ratio of 2.08:1, creating a critical accessibility barrier for interactive elements like buttons or alerts.
Accent Red (#E09F9F): Yielded the lowest performance at 2:1, making any functional information or error messaging using this tone nearly illegible for users with low vision.
Colour Resolution
From the data above, it was clear that the legacy palette did not provide sufficient visual distinction for a secure financial platform. My redesign strategy involved re-weighting the saturation and luminosity of these core brand tones. By deepening the values of the Primary and Action colours, I successfully shifted the palette to a state where every critical pairing meets or exceeds a minimum 4.5:1 (AA) ratio. This ensures that the VirgoCX homepage is not only visually cohesive but technically compliant, fostering an environment where navigation and data interpretation are frictionless for every investor.
Readability is Key
I prioritized sans-serif fonts to ensure maximum legibility across various digital displays. Unlike decorative or complex serif fonts, clean sans-serif letterforms reduce visual noise and improve the scanning experience.
Optimal Sizing and Spacing
To accommodate a diverse user base, I implemented a base font size of 16px for body text. This standard, paired with line lengths restricted to 50–75 characters, minimizes eye strain and ensures an accessible and inclusive user experience.
Responsive Scaling
The typography system utilizes relative units (em/rem) instead of fixed pixels (px). This allows fonts to scale proportionally across mobile, tablet, and desktop views, maintaining consistency and accessibility regardless of the device.
Semantic Structuring
By using proper semantic HTML (such as <h1> for titles and <p> for paragraphs), I ensured that the platform’s hierarchy is properly interpreted and navigated by assistive technologies.
Typeface Accessibility
For the VirgoCX redesign, typography was treated as a functional pillar rather than a purely aesthetic choice. In a fintech environment, clear communication is essential for maintaining user trust and ensuring accurate data interpretation. My selection and implementation of the brand typeface were guided by several core accessibility principles:
Typeface Choice
Inter was specifically selected as the primary typeface for VirgoCX due to its specialized design for screen legibility. Its clean, modern letterforms and generous internal spacing facilitate high readability at various sizes, which is critical for a platform displaying complex financial data.
To build a cohesive visual hierarchy while maintaining this focus on inclusion, I implemented a multi-weight system:
Inter Extra Bold (48pt): Utilized for primary Titles to establish immediate visual anchors.
Inter Medium (40pt): Applied to Headings for clear section identification.
Inter Bold (20pt) & Regular (32pt): Used for Sub-Headings and primary Body copy to create a balanced, scannable flow.
Inter Regular (14pt): Reserved for Sub-Body elements, ensuring even small-scale metadata remains distinct and confusion-free for users with visual impairments.
By leveraging Inter’s open-source flexibility and clear character distinction, I have provided VirgoCX with a typographic framework that fully supports WCAG compliance and makes crypto trading accessible to everyone.
Final Redesign
The final solution for the VirgoCX homepage redesign successfully transformed a fragmented, legacy interface into a modern, high-conversion gateway by prioritizing visual hierarchy and technical accessibility. By resolving critical "Usability Debt," such as low-contrast call-to-action buttons and buried trust signals, the new design establishes an immediate sense of professional reliability essential for a Canadian cryptocurrency exchange. Key structural changes included the implementation of a modular card-based layout to reduce cognitive load and the strategic elevation of security certifications to build user trust. Ultimately, the revamp balances the complex data needs of institutional investors with the intuitive navigation required by retail beginners, ensuring the platform is both inclusive and highly functional across all devices.
Reflections and Takeaways
This engagement provided valuable insights into the intersection of financial security and user-centric design.
Accessibility as a Trust Anchor
My audit proved that colour accessibility is not just a compliance requirement but a primary driver of trust; higher contrast ratios directly correlate to a more professional and reliable brand perception.
Complexity Management
I learned that in data-dense environments, Progressive Disclosure is essential for balancing the needs of advanced traders with the simplicity required for novice onboarding.
Consistency Drives Efficiency
Implementing a standardized typographic and iconographic system significantly reduced visual noise, allowing users to focus on critical financial decision-making.