UI/UX website redesign for the No.1 provider of public transport software in the UK 

The problem

TGUK is the number one provider of public transport software in the UK and had recently won a large London Transport contract.

Their website was too busy, on an old CMS platform, was difficult to update and did not communicate their offering clearly – and the competition were starting to gain on their marketshare. 

They tried creating a new site design in-house using a WordPress theme, but their marketing team were struggling to make the design work with the content and available resources.

What we needed to do

 

They required a new website design so they could develop and transfer over to WordPress. We consulted with the marketing team, and reviewed their existing website and user analytics (GA) and agreed to the following steps:

Conduct a roadmapping session to define a plan and discover their ideal, primary customer and create a user journey flow.

Clarify their primary goals; to retain existing customers and engage new prospects to contact them or book a demo.

Create a customer sales journey and focus on the most important pages to refresh their content and redesign the user interface.

From sketch wireframes to design

Once we understood their existing customers desires and needs, we looked at refining their information architecture on the homepage.

The existing layout and navigation made it hard as a customer find out where to go that was relevant and solved their problem. So we simplified it and created a secondary navigation with dropdowns on the homepage, making it easier to go directly within the site to the customers area of industry. 

I drafted my ideas into sketch wireframes of the main pages and looked at the content supplied as part of the user journey. We had the brand style guides, logos and imagery, so these wireframes helped provide a rough outline to quickly start creating full colour design layouts.

Creating the design systems

Using their existing Trapeze brand guidelines, and referencing their international partner sites and brand elements I created a working design system that was intended to evolve and expand as they redesigned the website.

With guidelines for typography, colours, buttons and form designs this system helped to keep everything consistent as we worked across the site pages.

Realistic prototype designs

When designing user interfaces and prototypes I always insist on using real content and imagery NOT ‘lorem ipsum’. I helped to refine their content into microcopy. This is to help inform the design and layout for the user, so we can gain better feedback and comments.

Clickable prototype design

To keep within the timeframe and budget only three core page templates were designed, creating a design system that was setup to grow and evolve. This gave the developers the freedom to create additional pages and sections. 

Developer-ready design

A final clickable prototype was prepared in Adobe XD for testing internally., and after a few adjustments, the final page designs were approved and specifications for all the page elements were ready for their in-house team to develop into the WordPress platform. Adobe XD provided detailed specifications from my design which helped brief the developers on hand-over.

“Andy helped take what was a selection of scribbles on paper through to a working, high-fidelity clickable prototype that we could test on users. And after validation, the transition from prototype to MVP was seamless.”

Andrew Warren-Payne – Marketing Manager

Let's help bring your website back to life.