truelayer.com
TrueLayer.com
In April 2023 TrueLayer rebranded. This huge undertaking started in 2022 by the brand team, where I was tangentially involved. In November 2022, I was brought into the project to apply the new brand style, narrative and direction to our main website.
To sum up briefly, this involved a deep discovery on the new brand, the search and hiring of an agency to help support the team, and producing a high quality website in an short deadline.
Discovery and scope
With any project discovery and scope is vital for a good outcome, when I started the project, there was a couple of questions I needed to know from the start:
What is the new brand?
Who are the key audiences
How much time do we have?
What is and isn't possible.
What is the new brand?
I spoke with the brand team, trying to understand what is the new brand, what is the new narrative and how are we going to position ourselves and the website in the future. The brand was still being finalised but there was some solid themes already.
Who are the key audiences?
I had a good understanding of this, brand team had put together some personas, but for the website specifically I would need to do a little of my own work to understand who we were aiming for, and who would be visiting the site.
How much time do we have?
The original timeline was 3 months, which was swiftly changed to 6. to make it more manageable although not ideal. I would not have a lot of time for any real deep discovery or research
What is and isn't possible?
With the timeline and what we wanted to achieve as a group I took a pragmatic approach. Scoping out the page priorities based on data and company need. I wanted to be creative and spoke with the developer around what we were expecting, what could be achievable in the tight deadline and what wouldn't be.
It came to my understanding that we would need support to achieve the type of product we wanted with the resources we had, which was myself acting as designer and project manager, and one developer.
I was able to get the budget and started researching some agencies. I decided to go with DEPT agency, a fantastic agency which added a project manager, ux designer, ui designer and 2/3 developers to the team. I then split the work between in house and external where the agency would focus on the homepage and about us page. With this we had a shot at creating exciting, fun and creative.
Wireframing and testing
As mentioned previously time was short and as we entered December, we lost 2 weeks due to Christmas and holidays.
However during December with the help of DEPT I created some wireframes. Sticking to standard practices and past experiences. We didn't have a lot of quantitive data other than page views and number of users so I had to make some assumptions about our audiences and what we as a team wanted to show.
On the other hand we had this new brand and new narrative so we could experiment.
The copy team also ran some unmoderated tests over the Christmas break, which gave us some great insights in the order of some of the sections of the pages and what people expected from our site.
But as we were short on time, the execution part of the design process had to kick in sooner
Execution
My focus during the execution phase was to create a new consistent, aligned and high quality UX/UI for the majority of our pages. Focussing especially our products and industries section. This was because as our main brand and commercial output the website needed to highlight our products to attract new customers.
This meant that DEPT could focus on the homepage without distractions and I would work very closely with them to make sure it was the direction we wanted as a team and was consistent across all other 200+ pages
The key parts of the site I'll highlight are:
UI elements
We needed a way to highlight our product visually to support the copy but also to show how our products worked. TrueLayer is a B2B company but the product is used by the the end user. So I created these UI elements to show that outcome, positive expressions of our product to highlight why our product is good for you and your user.
I designed these to be simple, clean and elegant, keeping it realistic but also simplistic enough that they were instantly recognisable as parts of an app flow.
Masks/portals
The new brand introduced the idea of portals. So getting this onto the site was vital to tell the brand story. I introduced this buy adding the floating UI elements, to try and show how we are the layer between product and user, extending that brand story and visual style consistently across the site.
Demos
These how it works sections on the site are vital to explain our products in simple, clean and interactive way. I worked with a designer on my team to create super clean and slick mock apps to show how our products work.
Like the UI elements these needed to be elegant, simple but realistic in their execution. Showing our products in the best scenario but keeping it true to the end product.
Development
I worked very closely with the lead developer on the team. We were in communication everyday solving problems creating alignment across the site.
During this process we created a mini component library to keep consistency, each component needed to have 4 variations depending on the background colour. There was a lot of work on accessibility and readability to ensure no matter the scenario it worked and worked well.
This was without a doubt a challenging project, but the team and I release a product we were proud of, in a new exciting brand. The team around me were vital in creating a new 200+ (10 templates) page site in such a short time.
Post release
Since the release of the rebrand the team structure has changed some, and we're set on stepping into phase 2 which is focussing on those low priority pages during the rebrand.
I now do some front end development on the site where needed. But for the most part am leading moving forward with the new brand, exploring where it can go next and fixing some things along the way.
Keep your eyes on https://truelayer.com/ and I'm sure there will be some fun new updates in the future.