Skip to main content

How we redeveloped the user interface for greenflag.com

news #design #user-interface

Luke Hoysted, one of our user interface engineers, spearheaded the development of the greenflag.com user interface refresh.

The project was part of the wider rebranding of the product, which DLG Digital is very excited about.

We caught up with Luke to chat about his role in Green Flag Reboot.

Can you tell us about your role and contribution to the Green Flag redevelopment project?

My role on the redesign was primarily redeveloping the user interface to match our design requirements, taking on a mobile first approach. This encompassed building the various components using Foundation and AngularJS, and unit testing to ensure that the build was robust.

Our quote-and-buy journey is a single page application, with several dynamic components. This meant that we had to concurrently reskin and ensure that the more delicate parts of the journey were still functioning correctly.

What is Greenflag.com’s technology stack?

We use a range of technologies across our brochureware and quote-and-buy journeys, including:

  • Foundation 5
  • Angular 1.4
  • HTML5
  • Sass
  • GULP

What are your key takeaways from the project?

My key takeaway is how much can be achieved in a short timeframe when the correct people are in place.

I worked closely with designers and software engineers to focus on the core requirements of the project. This enabled us to quickly resolve any potential issues.

What were your key learnings from the project?

My main challenge with the rebrand was to create the diagonal sections from the design, while ensuring these would be responsive across multiple devices. I had to also ensure the angle was kept cross-device.

The design encompassed various colours within the diagonal sections, so I used partials and Sass variables to achieve this. I then utilised scalable vector graphics, along with viewport width and height units to ensure a high quality finish.

This delivered a robust solution, meeting the design brief and ultimately allowing us to break the mould for the Green Flag redesign.

View an example of this technique here.

How does this help customers?

This helps customers by improving their experience throughout the website and quote journey. The customer is able to better understand our smart business model and how we’re distinct in the market.

We’re also able to reach a wider demographic of prospective customers by focusing on a mobile-first approach.

What are you most proud of on the project?

The delivery of the final product within such a small timeframe. I think this is testament to how well Digital and the wider business communicate and work collectively to achieve success.

I am also proud of how the Green Flag redesign breaks the mould of our estate and offers a modular and clean user experience while delivering business value.