REDESIGN Website  

Overview

Orion Financial needed a redesigned website that reflected its evolution into an innovative, user-focused financial partner. The goal was to create a digital experience that felt easy to use, modern, and interactive, while balancing the trustworthiness expected from a financial institution.

As Lead Project Designer and Manager, I guided the UX/UI strategy, design process, and cross-functional collaboration, ensuring the final product aligned with both user needs and business goals.

Problem

The previous website suffered from:

• Outdated design with text-heavy pages and minimal interactivity.

• Confusing navigation, making it hard to separate Personal vs. Business services.

• Low discoverability of key products like credit cards, loans, and checking accounts.

• Lack of engagement: the site felt formal, static, and uninspiring.

Old Website!

Goals of the Redesign

1. Ease of Use → Build a clean, intuitive layout with logical content hierarchy.

2. Innovation → Use modern UI patterns and micro-interactions to showcase a forward-thinking brand.

3. Clear Navigation → Create distinct pathways for Personal and Business banking.

4. Interactivity & Engagement → Design a more dynamic and visually rich user experience.

5. Brand Personality → Incorporate playful copy, icons, and approachable visuals without compromising trust.

Process & Best Practices

1. Discovery & Research

• Conducted stakeholder interviews to align on business goals.

• Analyzed user feedback and pain points from the old site (e.g., “hard to find credit cards,” “too text-heavy”).

• Performed competitive analysis of modern banking and fintech websites to benchmark best practices in navigation, interactivity, and tone.

Key Insight: Users wanted clarity and simplicity first, but also expected Orion to feel modern and approachable, not corporate or stiff.

2. Information Architecture (IA) & Navigation Strategy

• Created site maps to reorganize content into two clear categories: Personal and Business.

• Grouped products based on user expectations (e.g., credit cards under Personal, commercial real estate loans under Business).

• Tested navigation prototypes with users to confirm discoverability and clarity.

Best Practice Applied: Progressive disclosure — show only what’s relevant at each stage to reduce cognitive load.

3. Wireframing & Layout Exploration

• Developed low-fidelity wireframes to map task flows such as “I want to open a checking account” or “I want to get a credit card.”

• Prioritized modular content blocks with bold CTAs (e.g., “I want to…” pathways).

• Designed layouts to support scannability: grid systems, whitespace, and visual hierarchy.

Best Practice Applied: Task-oriented design — align layout with user goals instead of internal org structure.

4. Visual Design & Interactivity

• Introduced modern UI patterns (card layouts, hover states, responsive grids).

• Designed micro-interactions for buttons, hover effects, and navigation to make the site feel dynamic.

• Applied a fresh color palette, icons, and illustrations to break up text and inject personality.

• Crafted playful microcopy (“Charge Ahead” for credit cards, “Start Your Engines” for auto loans) to reduce financial intimidation.

Best Practice Applied: Emotional design — engaging visuals and tone to build a stronger user connection.

5. Accessibility & Usability Testing

• Ensured WCAG 2.0 compliance: contrast ratios, alt-text for icons, keyboard navigability.

• Conducted usability testing sessions on interactive prototypes to validate navigation clarity and content flow.

• Iterated designs based on feedback, especially around simplifying business navigation and refining microcopy for clarity.

Best Practice Applied: Inclusive design — balancing fun/innovation with accessibility and trust.