Redefining the digital loan application experience for the Student Loan Company

Build a user-centric, accessible digital loan application system that complies with gov.uk guidelines. Create a scalable solution to optimize user journeys, reduce operational inefficiencies, and improve loan processing accuracy.

To comply with my non-disclosure agreement, I have anonymized and excluded specific information deemed confidential in this case study. The views expressed are my own and do not reflect those of my former employer, ThoughtWorks, or the client.

Background

The UK Student Loan Company embarked on a mission to modernize its digital loan application system. The aim was to deliver a seamless, secure, and accessible experience for students while ensuring compliance with government digital service (GDS) guidelines. I joined during the critical Project Optimus phase to help optimize the user journey and streamline the operational process.

My role

As the lead UI developer, my role spanned design and development, contributing to the entire project lifecycle. Key responsibilities included:

  • Collaborating with UX designers, product owners, and business analysts to align solutions with user needs and business goals.
  • Facilitating paper prototyping and transitioning those ideas into low-fidelity wireframes, refining them based on feedback into high-fidelity interactive prototypes.
  • Architecting and implementing a modular and scalable front-end solution using technologies like Sass, JavaScript, and HTML5.
  • Conducting accessibility audits to ensure compliance with WCAG 2.0 standards, delivering an inclusive experience for all users.
  • Pairing with developers to ensure seamless integration between front-end and back-end systems.
  • Participating in Agile ceremonies to ensure iterative development aligned with project goals.

Features and solutions

Focused on delivering a seamless and accessible experience by integrating user feedback, adhering to GDS guidelines, and optimizing the end-to-end loan application process for improved efficiency and accuracy.

End-to-end prototyping and iterative design

Led the transition from paper-based ideas to fully interactive prototypes. These were tested with users and stakeholders at every step to align functionality with expectations.

I used various prototyping strategies, from sketching quick ideas, to using paper cutouts for layout arrangements. These methods prioritized user input and data organization before advancing to clickable prototypes in the browser.

Progressive enhancement for universal accessibility

Delivered a robust solution by designing the interface with progressive enhancement to ensure functionality across all browsers and devices, including older hardware.

UI evolution, highlighting the use of progressive enhancement to ensure seamless functionality across diverse browsers and devices.

Reusable and scalable components

Developed a library of reusable UI components inspired by GDS design patterns, enabling consistency and reducing development effort across the system.

Example pattern: Showing a single check answers page immediately before the confirmation screen for small to medium-sized transactions.
<div class="govuk-width-container">
  <main class="govuk-main-wrapper" id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds-from-desktop">
        <h1 class="govuk-heading-l">About you</h1>
        <dl class="govuk-summary-list govuk-!-margin-bottom-9">
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">Are you a UK national?</dt>
            <dd class="govuk-summary-list__value">No</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> UK nationality</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">What's your country of nationality?</dt>
            <dd class="govuk-summary-list__value">India</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> country of nationality</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">What's your UK residency group?</dt>
            <dd class="govuk-summary-list__value">Settled status</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> UK residency group</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">Residency status</dt>
            <dd class="govuk-summary-list__value">Settled status under the EU Settlement Scheme.</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> residency status</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">What proof of identity do you have?</dt>
            <dd class="govuk-summary-list__value">Passport</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> proof of identity</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">Enter your valid Passport details</dt>
            <dd class="govuk-summary-list__value">
              Full Name: Rajveer Singh Rathore<br>
              ID No: L7709284<br>
              Country: INDIA
            </dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> passport details</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">What is your current relationship status?</dt>
            <dd class="govuk-summary-list__value">Single</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> relationship status</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">Have you been, or will you be married or in a civil partnership before the first day of the academic year?</dt>
            <dd class="govuk-summary-list__value">No</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> marital status</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">Will you have care of a person under the age of 18 on the first day of the academic year?</dt>
            <dd class="govuk-summary-list__value">No</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> care of a person under 18</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">Will an adult depend on you financially on the first day of the academic year?</dt>
            <dd class="govuk-summary-list__value">No</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> adult financial dependency</span></a>
            </dd>
          </div>
          <div class="govuk-summary-list__row">
            <dt class="govuk-summary-list__key">Do any of the circumstances below apply to you?</dt>
            <dd class="govuk-summary-list__value">No</dd>
            <dd class="govuk-summary-list__actions">
              <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> additional circumstances</span></a>
            </dd>
          </div>
        </dl>
        <button type="submit" class="govuk-button govuk-button--primary">Save and continue</button>
        <a href="#" class="govuk-link">Save and exit</a>
      </div>
    </div>
  </main>
</div>

Responsive design for cross-device usability

Delivered a fully responsive front-end, ensuring the application provided a seamless experience across mobile, tablet, and desktop platforms.

I implemented custom code tailored to specific screen sizes, layering it on top of the imported GDS components for various page templates.

Results and impact

The work culminated in the successful full release of a modernized digital loan application system, transforming the UK's Student Loan Application experience in alignment with project requirements.

  1. Delivered a modern loan application system that was fully compliant with accessibility standards, setting a new benchmark for digital government services.
  2. Reduced form error rates by 25 percent, leading to faster and more accurate loan processing.
  3. Decreased call center inquiries by 15 percent, thanks to an intuitive and user-friendly interface.
  4. Laid the foundation for future digital services with a scalable and reusable design system.
It was a truly rewarding experience to collaborate with such a diverse and talented group of individuals throughout this engagement.

Challenges and learnings

  • Balancing innovation and compliance Navigating the stringent GDS accessibility requirements while delivering a modern, user-friendly interface required close collaboration with stakeholders and iterative testing.
  • Integrating with legacy systems Ensuring compatibility with older systems was a technical challenge that we overcame through rigorous testing and frequent developer collaboration.
  • Design and development alignment By being involved throughout the design and development process, I ensured the final solution addressed both user and business needs effectively.

"Rajveer brings immense value through his deep design expertise, his talents in both UX design and front end engineering, and his servant leadership approach to working with others. I admire how Rajveer is always learning and applying new concepts to his craft, and I value how quickly Rajveer can get concepts into tangible designs or prototypes. On top of that, Rajveer is truly a joyful and kind person to work with - he is well liked and respected by his peers and stakeholders alike." Rose Fan · Lead Business Analyst, ThoughtWorks