Product Design – Web app

Digital Mortgage Broker

What is Better.co.uk

Role: Lead UX Designer

Platform: Online Mortgage Broker

Focus: Iterative improvements of the customer journey and a comprehensive rebrand.

Overview: This case study covers my time as Lead UX Designer at better.co.uk, previously known as trussle.co.uk before its acquisition. Both companies are online mortgage brokers. My primary responsibility was to enhance the customer journey through our website iteratively. One of my significant projects was a complete rebrand to align with our new parent company, better.com. This involved auditing our existing 250-page website and developing an entirely new design system in collaboration with the tech team.

Key Contributions:

  • Rebranding: Led the complete rebrand of the website to align with better.com, involving a thorough audit and development of a new design system. Despite initial plans for a three-month timeline, contractual obligations required delivery in just four weeks.
  • Collaboration: Worked closely with US colleagues to understand their design system while retaining autonomy for the UK team. This collaboration ensured we leveraged their insights while maintaining our unique design control.
  • User Testing Platform Implementation: Introduced a user testing platform to the product and design team, aligning with the company’s goal for data-driven delivery. This involved researching various options, presenting findings to senior stakeholders, and securing significant investment.

Challenges & Achievements:

  • Senior Management Changes: Adapted to changes in senior management and restructuring within the product and design teams.
  • Cross-Timezone Collaboration: Managed the complexities of working with colleagues across different countries and timezones.
  • Tight Deadlines: Successfully delivered the rebrand project under a significantly compressed timeline, demonstrating adaptability and efficiency.

This case study highlights my ability to lead comprehensive design projects, collaborate across geographies, and drive significant product enhancements under tight deadlines.

Design System Creation for Better.co.uk

The Challenge:

Following the acquisition of Trussle by Better, it was decided to rebrand Trussle to better.co.uk, creating a unified brand to leverage resources more effectively. Business constraints reduced the available time for the rebrand, making it essential to hand over usable, documented components to ensure a rapid development cycle.

We needed to:

  • Audit the existing customer-facing website and mortgage journey.
  • Restyle components to align with the parent company.
  • Evaluate the usage of each component and assess whether it could be improved upon.

The Approach:

I collaborated closely with heads of product and development on this project. Initially, we had an incomplete style guide and components built with four different libraries. Our first challenge was to audit all existing components to understand their usage, importance, variants, and documentation status.

UX/UI Methodologies & Techniques:

UI Design: Created high-fidelity prototypes in Figma, focusing on a cohesive visual style and ensuring all components met modern design principles, and accessibiility guidelines.

QA of Implementation: Performed cross-browser testing, responsiveness checks, to ensure components functioned correctly.

Style Guide: Developed a comprehensive style guide detailing typography, color schemes, spacing, and component usage to maintain visual consistency across the platform.

Pattern Library: Documented reusable design patterns in Storybook, providing a reference for designers and developers and facilitating faster design and development cycles.

UI Inventory: Conducted a thorough inventory of existing UI elements, identifying inconsistencies and redundancies to streamline and standardize components in the new design system.

UX Audit: Analyzed user flows and friction points through a detailed UX audit, informing the redesign to address previous shortcomings and enhance the user experience.

Atomic Design:

I Implemented an Atomic Design methodology,a methodology for creating scalable design systems by breaking down user interfaces into five levels:

  1. Atoms: Basic elements like buttons, input fields, and icons.
  2. Molecules: Groups of atoms forming simple components, such as a search form.
  3. Organisms: Complex components made of molecules and/or atoms, like a navigation bar.
  4. Templates: Page structures composed of organisms, serving as blueprints.
  5. Pages: Final designs, templates filled with real content.

This approach ensures consistency, reusability, and a cohesive user experience.

Accessibility in Design Systems:

Ensuring accessibility was crucial for creating inclusive user experiences, expanding our audience, complying with legal standards, and enhancing usability.

Our Approach:

  • Evaluation: Conducted thorough assessments to identify and address accessibility issues.
  • Inclusive Design Principles: Integrated accessibility guidelines from the outset to meet WCAG standards.
  • Color Contrast: Selected color schemes with sufficient contrast for users with visual impairments.
  • Meaningful Text Alternatives: Provided descriptive text alternatives for visual content to support screen readers.
  • Text Hierarchy: Established a clear text hierarchy to improve readability and comprehension.
  • Clearly Labeled Form Fields: Ensured all form fields were clearly labeled for better accessibility and user experience.

By integrating accessibility from the start, we created a more equitable digital environment, improved user satisfaction, and demonstrated social responsibility.

Results:

Despite the reduced timeline, we successfully delivered a comprehensive and accessible design system in just a month, aligning with key business objectives and enabling earlier marketing opportunities. Key outcomes included:

  • A new look and feel for the website.
  • Reduced design bloat from multiple previous redesign efforts.
  • A style guide for use across the organization.
  • Reusable, accessible components.
  • Reduced time for future design and development work.
  • Meeting and delivering on key timelines.

This case study highlights my ability to lead complex design projects, implement user-centered design principles, and deliver high-quality outcomes under tight deadlines.