Financial
Horizons

Financial Horizons Group is where financial advisors thrive. As a leading Canadian MGA, their 350-strong team aids over 6,500 advisors, providing connections, partnerships, and insurance. FHG sought a consolidated website merging two existing ones to showcase services to new clients and support their current portfolio. This simplifies access, enhances user experience, and aligns with FHG’s commitment to empowering advisors and fostering connections. It ensures readiness for expanded services while maintaining the current free plan.

Project Type

Responsive Web/Mobile Design

Tools

Figma, Adobe Illustrator, Photoshop

Design Roles/ Responsibilities

UX•UI Design

Project Timeline

• Project Manager
• UX• UI Designer (Alana Lee)
• Senior UX• UI Designer
• 5 Developers

02. Features and Functions Matrix (FFM)

To gain a clear understanding of the purpose of each component, we created a Features and Functions Matrix (FFM) to delineate user goals, features, functions, and identify the target user.

03. Low-Fidelity Wireframes
for Desktop/Mobile

After a comprehensive review of the sitemap, I initiated the creation of low-fidelity wireframes, focusing on a user-centric design and establishing a clear hierarchy for each component. Throughout this iterative process, we carefully considered the responsiveness of each component, especially how they translate into a mobile-friendly format.

04. Design System

Having received brand guide from Financial Horizon, I incorporated their style into the development of components that harmonize with and enhance their brand.

05. Clear Information for the Team

Designing a comprehensive design system is always a challenge; we need to ensure clarity and include as much information as possible. While constructing the design system, my team and I made an effort to add detailed notes, providing clear guidance to developers about the intended use and behaviors of each component.

06. High-Fidelity wireframes

After incorporating client feedback into the finalized wireframes, I integrated design assets into each component to create high-fidelity wireframes. Following completion, I developed a clickable prototype for client review and testing to finalize our wireframes before going live.

Desktop Wireframes

Mobile Wireframes

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }