Brand Financial Training website UI update

Background

Following Mode=Create’s review and update of Brand Financial Training’s brand, the team asked us to look at improving a specific part of their website. Overall the website was looking dated. The representation of products by images of old school ‘product’ type boxes was compounding this issue.

A further complication was that the current functionality and structure of the pages and site in general had to remain the same, or at least as close as possible to what existed.

So how do you introduce an updated brand and implement improvements to just part of a website without everything becoming disjointed?

Old Brand Financial Training website design.

Process

Mode=Create worked with Brand Financial Training’s existing development team to enable the visual update of the entire website as efficiently as possible.

Firstly, we designed the area that the team needed updating the most. Once this was approved we worked up a fully working prototype of the pages that the team needed to improve whilst constantly reviewing the updates with the team. This included updating the look and feel and, were we could, we improved usability with some layout updates. As part of this process we also worked up global elements that could be carried through to other parts of the website.

We created a ‘components’ page which encompassed all design elements on one page. This could be used as a reference for the development team to build out other areas of the site without them having to be designed up page by page.

A full library of custom designed icons was created. These new icons covered all product offerings and provided a much needed update to the old ‘product’ boxes. Mode=Create also provided an image and graphic library that the team could pull from to help update the remaining pages without the investment of having them designed individually.

Result

Mode=Create were able to create fully styled up and functioning prototypes for desktop and mobile that were completely realistic. We achieved this in a fraction of the time of deploying developers and coding in a live environment.

Brand Financial Training and their development team were able to rapidly review multiple UI stylings website updates via the prototype.

The final prototype enabled the developers to update the website rapidly and reduce overall cost through faster delivery.

It was a genuine pleasure to work with Gavin. He is organised, responsive and clearly very talented when it comes to design. He held our hand through the entire journey, answering any questions we had along the way and working brilliantly with our web developer. We are extremely happy with our new logo, web design, social media imagery and product imagery and will certainly be contacting Gavin for our future design requirements.