luigi palermo

frontend engineer

I build accessible, inclusive products and digital experiences for the web.

View my resume

Back to home

During my tenure at ClearScore, my primary focus was on a new product called DriveScore.

DriveScore is an application that offers insights into how to enhance driving skills and contribute to saving money on insurance premiums. As the sole frontend developer in the team, I assumed responsibility for all frontend and JavaScript-related tasks.

Before joining DriveScore, I worked on the design system team, where I constructed accessible components for the ClearScore Design System. Subsequently, I joined the Resolve team and created the COVID Hub, a section of the app to keep our users informed about the latest news regarding how the COVID outbreak was impacting the UK's financial environment.

Highlights

  • Indepenendently built the insurance journey,consisting of a 67 fields form with cross filed conditional logic validation, products list and products details page for both mobile platform (webviews) and desktop.
  • Thanks to the Micro Frontend Architecture the application of SOLID programming principles, I have enabled the seemless deployment of the DriveScore pages to different platforms, including the main ClearScore product.
  • Utilized the Backend for Frontend pattern to reduce client logic, leading to enhanced user experience and improved application performances.
  • I used the trophy testing strategy to thoroughly test the application and its features. This included different types of tests like E2E, integration, and unit tests. This approach ensures complete coverage and efficient testing.
  • Contribute to developing the native app's features by creating and implementing backend services and endpoints. These will serve a transformed data layer, simplifying client logic and allowing for separate iterations beyond the native app's release cycle.
  • Utilized Server-Side Rendering and Static Site Generation tools to deliver dynamic and performant web applications and marketing websites.
  • Utilized HTML to implement a robust accessibility strategy by incorporating semantic elements and proper markup. I enhanced screen reader compatibility and provided a seamless browsing experience by following WCAG guidelines.
  • Maximized use of CSS to effectively reduce image size and optimize page loading time enhancing overall web performance
  • Led research and seamless integration of user-friendly tools, like haedles CMS (Conentful), empowering the team to efficiently deliver value and quality to users.
  • Applied critical thinking skills to evaluate existing features, identifying areas for improvement and employing refactoring techniques to optimize code efficiency and readability.
  • Demonstrated a strong work ethic by taking full ownership of the feature lifecycle, encompassing development, testing, deployment, and proactive monitoring.

Technologies

  • Javascript
  • Typescript
  • React
  • Redux
  • React Query
  • Node.js
  • Fastify
  • Next.js
  • Gatsby
  • SVG
  • CSS
  • PostCSS
  • Storybook
  • Figma
  • Jest
  • React Testing Library
  • Cypress
  • Sentry
  • SignalFx
  • Datadog
  • Grafana
  • Terraform
  • Jenkins
Note: The following sections consist of screen recordings of the apps, which do not include sound or captions at this time. However, audio and captions will be provided in the near future. To ensure accessibility to video content, a brief description will be provided for each video.

Website

  • DriveScore website overview

    The user navigates to drivescore.com, scrolls down the page, and views several explanatory sections on how the app works, its features, and how they can use it to save money. The user then clicks on 'Partner with Us,' where we provide a form for potential partners to get in touch with us. Finally, the user clicks on 'Login,' which redirects them to the web app.

Drivescore webapp

  • Login and Dashboard

    A user completes the login form and demonstrates that the email undergoes field-level validation. Upon clicking "Continue," they successfully log into the DriveScore web app and are subsequently redirected to the DriveScore dashboard. The DriveScore dashboard is segmented into three sections. The top section is dedicated to obtaining insurance quotes, displaying a header, a description, and a button labelled "Get a Quote." The middle section pertains to the user's score, presenting a brief description of the user's score along with an animated speedometer that showcases the score. The bottom section guides the user to download the mobile app, providing a web-based QR code for the download.

  • Insurance Form and PLP/PDP

    A user navigates to the summary of the insurance form and proceeds through the form sections to review their details. They first navigate to the car section, then the driver's section, and finally the cover section. After showcasing field validation and search functionalities of the form, they proceed by clicking on 'Get a Quote,' which leads them to the product list page. On this page, a variety of products are displayed, along with options to refine the search results. Ultimately, the user makes a selection by choosing a specific product. This selection then redirects them to the product details page.

ClearScore webapp

  • Drivescore pages in ClearScore webapp

    A user arrives at the ClearScore homepage and subsequently clicks on the DriveScore Hub icon located in the top navigation. This action redirects them to the DriveScore Hub, where the aforementioned DriveScore dashboard is displayed. Following this, the user clicks on "Get a Quote" and is directed to the summary page of the insurance quote form. From there, they navigate to the offers page, select "Car Insurance," and demonstrate that this link also leads to the insurance quote summary page.

Native app login

  • Magic Login and login with credentials

    The following videos respectively depict a user logging in via a magic link and via credentials. In the magic link scenario, the user only needs to input their email address, and upon submission, an email is dispatched to their inbox containing a link embedded with a specific app-generated token. Clicking on the link within the email redirects the user to the app and automatically logs them in. In the credentials scenario, the user disregards the email and instead opts to click on the "Login with Credentials" call-to-action. This action redirects them to the conventional login page, where the email is pre-filled, and the browser automatically populates the password. Following this, they click "Continue" and are consequently logged into the app.