Portfolio

Grainger PLC Customer Experience

May 3rd, 2019

Grainger, one of the UKs biggest professional landlords, has seen the benefit of going digital given their over 100 year legacy. I lead multiple cross-functional teams to deliver their customer portal for thousands of tenants (My Grainger), alongside a complete re-platforming of all their customer-facing websites and a desktop application that automatically created marketing websites for new locations.

Background & Objectives

Background

Grainger wanted a customer-facing website that managed every aspect of the My Grainger experience for residents of their developments. The customer portal would allow users to book different facilities, make payments, receive updates and much more.

In addition, a re-platforming of all their existing websites into a single pipeline to enable reusability and ease of maintainability.

Objectives

To successfully deliver on the requirements set by Grainger, at a high level, the objectives outlined were:

  • Ideate designs based on UX research and customer feedback.
  • Develop a unified architecture for the new customer-facing sites
  • Inject an Agile mindset into the existing ways of working
  • Increase operational efficiency by reducing tenant issue resolution times

Responsibilities

As the Principal Engineer across multiple enterprise, frontend and development projects, my responsibilities were:

Architecture

Architect the My Grainger portal and frontend customer-facing websites along with third-party integrations

Frontend Development

Manage and support the development team with the creation of the frontend portal, marketing sites and desktop application

Backend Development

Platform design decisions including the building of cloud platform microservices, infrastructure as code scripts, DevOps and CI/CD pipelines.

Stakeholder Management

Work with stakeholders across the management team to agree on project requirements, build cross-functional teams and deliver both  projects into production.

Outcomes

My Grainger Portal

A scalable customer portal that managed every aspect of the My Grainger experience for residents of their developments. Users were able to login and have a full end-to-end experience of their property management.

The portal integrated with multiple third-party APIs and services to allow customers to pay bills, book amenities, travel and book faults.

Marketing Site Platform

A platform for deploying marketing sites in less than 5 minutes when new locations are built and allowing in-house staff to modify and update these sites easily.

A desktop application that managed the marketing site deployment. Users with the right access could easily login, input the details for the new site and one-click deploy it into production.

Tools & Technologies

This project branched into many varying aspects of engineering and technologies, and a few tools to aid in greater productivity.

  • HTML5
  • CSS3 (SASS / LESS)
  • JS (Vanilla / OO)
  • React
  • NodeJS
  • Webpack
  • Responsive
  • Mobile
  • UX / UI
  • Architecture
  • Photoshop
  • Illustrator
  • SSH
  • SVN / GIT
  • SEO
  • Bash
  • Usability & Accessibility
  • Website Templates
  • Wireframes
  • AWS
  • Adobe Photoshop
  • Adobe Illustrator
  • VS Code
Location connection times
Location connection times
My Grainger customer portal
My Grainger customer portal
My grainger custom updates
My grainger custom updates
Clippers Quay home page
Clippers Quay home page
My Grainger login
My Grainger login