MFAA Website Redesign

Overview

The Mortgage and Finance Association of Australia (MFAA) aimed to redesign their website to enhance brand identity, improve user experience, and streamline member interactions. As a Senior Digital Designer at Heartburst, I contributed to a comprehensive discovery workshop, extensive desktop research, and iterative design phases to deliver a modern, user-centric platform. This case study outlines the process, challenges, solutions, and outcomes in achieving MFAA’s strategic objectives.

Discovery Phase

In late 2024, Heartburst conducted a two-session discovery workshop with MFAA stakeholders to align on project goals and user needs. The first session focused on defining objectives, success criteria, and key user personas, including Prospective Brokers, Members, and Advocacy Stakeholders, ensuring design decisions were user-centric. We also mapped user journey experiences from initial awareness to engagement and benchmarked reference websites for intuitive navigation. The second session solidified user stories, brainstorming both functional and content-focused requirements, which were then prioritized and refined. Technical discussions with solution consultants also outlined flowcharts for functional user stories and critical infrastructure planning.

Extensive desktop research significantly informed our strategy, providing critical insights into the existing digital ecosystem, website performance, and user behavior. This research identified pain points such as offsite management of events, forms, and membership processes via external URLs, leading to poor user experience and untracked conversions. For example, the “Join Now” process initially required account creation before application submission, causing confusion. Analysis of search and analytics highlighted top-performing pages centered on training and joining, confirming primary user goals. Usability testing revealed issues like unclear “Sign up vs. Sign in” calls to action (CTAs), unintuitive event filters, and a lack of imagery on event pages. Competitor analysis further revealed streamlined onboarding with clear “Join Now” CTAs and onsite application forms, highlighting areas for MFAA’s improvement. These findings collectively shaped the information architecture, content outline, and technical solutions, ensuring strong alignment with MFAA’s strategic pillars of a Trusted Voice, Sustainable Future, Professional Standards, Advocacy and Policy, and Innovative Solutions.

UX Design Contributions

Low-Fidelity Wireframes & High-Fidelity Homepage Mockup

Leveraging insights from the workshops and comprehensive desktop research, I developed low-fidelity wireframes to establish the site’s foundational structure and user flows. This included simplifying pathways for various membership types with clear CTAs to reduce user confusion, and designing intuitive event filters and calendar views to address previously identified usability issues. Placeholders were strategically integrated for the new brand identity, ensuring flexibility for third-party agency assets. Following this, I crafted a high-fidelity homepage mockup that reflected MFAA’s modernized aesthetic and intuitive navigation, drawing inspiration from industry benchmarks.

High-Fidelity Prototypes

I then developed high-fidelity prototypes for key pages, including membership, events, and advocacy sections, to refine interactions and user experience. For membership, I used clear visual hierarchies and comparison charts to differentiate membership types, directly addressing feedback from usability testing. The events section incorporated advanced filtering capabilities for topics and locations, seamlessly synced via API mapping. For calculators, I added demo video placeholders and integrated lead-capture CTAs, noting that these payments would transition to external systems where necessary. Furthermore, I designed consistent UI patterns for seamless user handoffs to external systems like the Learning Management System (LMS) and Member Portal, significantly reducing user friction.

Challenges & Solutions

Seamless Brand Rollout

Challenge: Integrating a new brand identity without disrupting user familiarity and ensuring cohesion across the redesigned platform.

Solution: I collaborated closely with the third-party branding agency, aligning brand guidelines directly with our wireframes and mockups. Through iterative feedback loops, we ensured consistent typography, colors, and imagery throughout the design, resulting in a cohesive brand experience.

Improving Member Onboarding

Challenge: Simplifying a complex onboarding process characterized by unclear “Sign up vs. Sign in” CTAs and external redirects.

Solution: I redesigned the “Join Now” flow to feature transparent, step-by-step guidance (e.g., “Create Account,” “Submit Application”) and prominent CTAs, drawing inspiration from successful competitor onboarding experiences.

Clarity Around Membership Types & Journeys

Challenge: Effectively communicating the diverse range of membership types and their associated benefits to prospective members.

Solution: Leveraging persona analysis and user stories, I designed a member category section with member filtering and collapsible sections to help users quickly consume key membership information. Comprehensive FAQs were still available for any users needing to delve deeper into membership joining requirements or prerequisites, enabling them to easily understand and choose the most relevant membership pathway.

Events Calendar Integration

Challenge: Unintuitive event filters and a lack of engaging imagery diminished user engagement with the events calendar.

Solution: Events Calendar Pro was leveraged to display events in a more interactive way. The events section featured prominent dates, locations, Continuing Professional Development (CPD) points, and high-quality imagery.

Seamless System Transitions

Challenge: While we aimed to move key interactions like payments and forms onsite, existing client systems required the website to remain primarily a marketing tool, necessitating offsite payments and dedicated logins for events, the LMS, and the member portal. This posed a challenge for maintaining a cohesive user experience across fragmented touchpoints.

Solution: Recognizing these systemic constraints, my focus shifted to ensuring a seamless and intuitive transition from the main website to these essential external platforms. I designed consistent UI patterns for these handoffs, implemented clear directional cues, and integrated analytics to track user engagement with external links, thereby reducing user friction and providing a holistic view of the journey despite the offsite requirements. Additionally, where possible, I consolidated data capture forms into an internal CRM system for streamlined data collection.

Outcomes

The redesigned MFAA website successfully achieved:

• A modern, brand-aligned interface that significantly strengthened MFAA’s trusted voice.
• Streamlined member onboarding with clear membership pathways, demonstrably reducing user drop-off rates.
• Enhanced event engagement through intuitive filters and visually appealing imagery.
• Improved system integration, leading to greater user retention and more accurate conversion tracking.
• Full compliance with contemporary digital governance standards, ensuring secure and reliable data collection.