Livemore - Website re-design

Collaborative Design: Streamlining Processes and Enhancing User Experience

In a fast-growing company, I tackled post-rebranding challenges by collaborating across departments. Initially focused on updating the Customer Duty and LiveMore bond pages, the project quickly expanded into a comprehensive design brief.The launch of a new mortgage calculator required creating intuitive, user-friendly designs. I developed some calculators for simplicity and others for integration with an external portal, managing the design solo.To support the marketing team and future-proof development, I worked with developers to implement design blocks in the CMS, enabling the team to independently manage site content. Regular feedback sessions with the marketing manager ensured all content blocks met their needs without technical roadblocks.
A key challenge was inconsistent design blocks, complicating new content integration. I evaluated the entire website, categorized existing blocks, and identified necessary changes to achieve consistency and functionality. Through collaborative problem-solving and detailed planning, we streamlined processes, enhanced the user experience, and aligned the website with the company’s growth goals.

Mortgage Calculators

Redesigning the Calculator: Prioritizing Usability and Accessibility

In close collaboration with the Product Manager, one of the first rebranding tasks was redesigning the calculator to reflect new brand guidelines while catering to a target audience aged 55 to 90+. Our focus was to create a user-friendly design that inspired trust and accessibility. To meet the needs of this diverse group, I proposed increasing the minimum text size from 16px to 20px, addressing potential readability challenges for older users. This adjustment, along with other accessibility-focused improvements, ensured the calculator was both brand-aligned and highly usable. This thoughtful approach resulted in a design that balanced brand consistency with the specific requirements of our audience, fostering trust and enhancing the overall user experience.

Maximum Borrowing Calculator : Intermediary

In close collaboration with the Product Manager, we introduced a new calculator for LiveMore Mortgages, focused on simplifying the user journey. During evaluation, we identified pain points, especially with the complex, multi-section questions users had to navigate. To streamline the process, we implemented a unique code system to reduce redundant data entry. Previously, users had to re-enter information on the Broker portal after using the calculator. Now, after completing their calculation, users receive a code (also sent via email) to enter on the Broker portal, pre-filling key data fields. This enhancement saves users time, reduces frustration, and ensures a seamless transition from calculation to application submission, optimizing the LiveMore Mortgages experience.

Elevating Website Readability and Simplifying Design

In reviewing the current website, we identified key areas for improvement and implemented impactful changes:

1. Enhanced Readability:
We increased font sizes across the site to improve accessibility, addressing previous readability issues.

2. Spacious Layout:
We expanded margins from 16px to 60px, creating more breathing room between content blocks and centralizing the page layout for a cleaner look.

3. Simplified Interface:
To reduce clutter, we customized the footer to show only relevant information based on whether the user is on the borrowers or intermediary page.

These adjustments prioritized readability, simplicity, and clean design, creating a more engaging and user-friendly experience.

Driven by the Goal of Accessibility: WCAG Standard Implementation

As a dedicated advocate for accessibility, I led a collaboration with the Marketing Manager to ensure optimal contrast and readability for our target audience, particularly users aged 55 to 90+. Using a Figma plugin, I thoroughly tested each text element across color schemes, identifying blocks that did not meet contrast and size standards.

To address this, I proposed using lighter shades of our brand colors for content-heavy areas, maintaining high contrast throughout the interface. Extensive testing, especially with our older audience, validated the effectiveness of these adjustments.

I’m pleased to share that my proposal, aligned with WCAG standards, has been approved and is in progress, reinforcing our commitment to an inclusive, accessible user experience for all.

Responsive component library

Addressing Responsive Design Shortfalls: Visual Design for Mobile View

In assessing the website, we identified a major issue: the mobile version lacked responsiveness, with nearly every block needing improvement.

To address this, I created tailored visual designs for each block and page, focusing specifically on optimizing mobile usability. These designs ensure the website’s layout and functionality adapt smoothly to smaller screens, enhancing the mobile user experience.

This detailed approach provides developers with clear blueprints, guaranteeing that the mobile version meets high standards and delivers a seamless, enjoyable browsing experience.

Streamlining Content Creation: Responsive Component Library

To support content creators and the marketing team, I built a comprehensive library of responsive components in Figma. This library has become an essential tool, enabling the team to efficiently design new website pages with elements that adapt automatically to content length, even before they start working in the CMS.

With this resource, the team can experiment with layouts and see how content will appear across devices, helping them make thoughtful design choices and ensuring a consistent, cohesive experience on all screen sizes. The responsive component library has streamlined the workflow and encouraged collaboration, ultimately boosting the quality and consistency of the website's design.