How to Rebuild a Fintech Website: A Neo Way to Think About Money

CONTENT DESIGN  | BRAND DEVELOPMENT | PRODUCT MARKETING | TONE OF VOICE

Neo Financial is one of Canada's fastest growing fintech companies, valued at over $1 billion following a recent Series C funding round. As they gear up for their next growth stage, I worked with the team to develop the Neo brand and launch the new website, leading the positioning, content design and copy for the company's first major web refresh since its founding.

Background

Neo had outgrown its old website for a number of reasons. The issues weren't with the old visual identity so much as the way the old website was structured and how it talked about Neo's products. It was a weird polarity between being way too technical, or too vague and written by marketers (AKA terrible). The Neo of 2023 was an entirely different beast than the old website suggested. The needs of Neo's customers were more diverse, and the company had established huge partnerships with global brands like Tim Hortons and Cathay Pacific. It was time to evolve as a brand.

The old home page and brand. I didn't hate the stuff above the fold. But it was time to evolve.

Process

HOW WE GOT TO WHERE WE ENDED UP

The main goal was to clarify things. Tell the story in a more straightforward way. Explain products better. Make it easier to find everything. Oh, and one minor point: we had six weeks to do it. Six weeks to build a website might sound like a long time, but it's not. Not for one of this size and complexity, at least. From kickoff you have to do initial audits, design a new IA, design every page and component, plan your content, write every page, edit, compile creative assets, do compliance (shoot me in the face), develop each page, test and QA everything, all while achieving sign-off from C-suite at every step. So how did we get it done?

The new home page, above the fold

1. A Smarter Information Architecture

STARTED FROM THE BOTTOM (NOW IT'S CLEAR)

The old information architecture for Neo's website was absolutely mental. If an information architecture shows the map of a company's brain, Neo was having about fifteen aneurysms a day.

The previous IA for Neo's 'Features' pages. Good lord.

Obviously this was insane, so I had to figure out a way to focus down on the core things about Neo that really mattered. To achieve this, we decided to just kill all the low traffic pages. The only way to rebuild a house is to tear it all down and start again from the foundation.

Here's how things look in the 'Features' tab today:

You'll notice the new IA isn't that different at the top level from the old one. This is because it was important to me that we create a smarter URL structure while keeping the old high traffic URLs untouched. I also didn't want to scare anyone too much with a wildly different IA, so I built around the foundations of the old site.

The 'Products' Tab in The New IA.

The findings of our traffic audit were mostly consistent with our expectations about which pages were getting the lion's share of the traffic. Ultimately, I was able to eliminate the redundant pages and found better ways to incorporate their content into the new pages.

As is often the case, the practice of constructing a smarter IA was a helpful way to understand what was actually important. It allowed us to significantly expedite our production and development schedule, and would serve as the basis for the storylines I would later create.

Tip: Information Architecture, or IA, is just the practice of structuring information. In the case of a website, IA is about what goes where in the nav bar, and how it's structured at the lower levels. Just like physical architecture, good information architecture helps people move through a space, find what they're looking for, and know where they are.

2. Improved Page Structure

SIMPLE DESIGN, CONSISTENT COMPONENTS, FAMILIAR FLOW PATTERNS

Content Design

One of my primary goals with this project was to make every page count. The old website was somewhat bloated, with many pages that didn't tell a meaningful story or simply regurgitated content that was used elsewhere. When you're designing content, especially websites, it's important to put yourself in the perspective of a user or potential user. What do they know about your brand? Assuming that it's very little, what do they need to be shown? Just as we were ruthless with killing redundant pages, I tried to be ruthless about killing extraneous detail. Every page had a purpose, and the story for each one was built around that purpose.

The new Product pages get straight into the important stuff

Component Library

Another important decision we made was to make things as replicable as possible. We achieved this by creating shared page structures for pages that were similar in type. We also built a library of core components that share similar functions wherever they appear on the site. These constraints not only sped-up our content design, they also meant that the developers had way less to build overall. Instead of 35 pages, they had 8 or 9. Instead of 100 components, they had around 15. This saved us thousands in developer time and kept us on track with an already bonkers production schedule.

Tip: To avoid high development costs, use Webflow, a no-code web builder platform that I regularly use to build client websites.

3. A Clear Tone of Voice

SIMPLIFY, SIMPLIFY, SIMPLIFY

Discovery

Creating a tone of voice should be an organic process and it requires lots of unconscious processing of information beforehand. You sort of have to be like a zen monk and just exist among the organization for a while. You listen to how the founders talk about it, how the people who work there talk about it, how customers talk about it, and how marketing would like to talk about it (which tells you what to avoid completely). Once you see the kinds of things that keep coming up, you start to get a sense for what needs to be said. Then you can start thinking about how it should be said.

I was asking myself these questions constantly while we worked on developing the Neo brand. I pondered the company's current website and advertising, while scouring reddit and online reviews to see how Neo was perceived by members of the Canadian public, and what the common themes were.

Once you have all this information - and only then - you typically know what's missing and what's trying to be said. This is where the voice of a brand begins. On top of knowing what needs to be said, I think you also have to actually give a shit about what the company is doing. Nothing powerful can be said without the emotion that comes from genuine involvement.

Business Goals

As a general skill, developing a tone of voice for a finance brand involves knowing how to talk to real human beings (sorry marketers). For that you need to know how to think. It also involves knowing how other fintechs like to talk to human beings and how Neo, as a company, would like to be perceived among the ranks of these fintechs, many of whom offer Canadians similar tools.

How can Neo differentiate itself from The Big 5? From Wealthsimple? How can it take note from other brands out there in the space who are doing interesting things but aren't direct competitors, like Monzo and Revolut in the UK, Nubank in Brazil, and a handful of others who are ostensibly trying to change banking for good? These are the kinds of questions you have to ask before you come up with any kind of voice.

The Neo Tone of Voice

Neo's new tone of voice is functional, direct, clear and straightforward. It's rooted in everyday language and centered around tropes of convenience, simplicity, and personalization - all concepts that underpin what Neo is trying to do in the banking world. It talks the way people talk and offers solutions to the kinds of problems real people have.

4. Better Storylines for Core Offering

Once you have an idea of a brand's tone of voice, you can then figure out how to apply it to the most important storylines. Neo has a core set of tools and accounts with some awesome features, and a big focus of mine was making sure these were articulated clearly.

Rewards

A key feature of Neo is its Rewards ecosystem, where members earn cashback and points at over 11,000 partners nationwide, including major chains and local shops. Surprisingly, our traffic audit showed us that the Rewards page was one of the lower traffic ones. Given its centrality to the Neo ecosystem, my suspicion was that people didn't actually need it to be explained to them in so much detail. At the very least, they weren't going out of their way to read up on it. To be on the safe side after we killed the old page, I created an updated breakdown of Rewards in the Neo Help Center article, "What are Neo Rewards?" Then, I turned my focus toward weaving in the Rewards narrative more effectively throughout the rest of the website.

Another major finding was that Neo had totally downplayed the customizability of Rewards. To me, this was a critical differentiator that deserved more prominence and clarity in Neo's positioning. I built customization into the heart of the brand narrative, and it informs the way Neo now talks about a number of its core products.

Perks

Perks are subscriptions you can add to your account to unlock new rewards, on things like dining out, travel, or going to the gym. Perks had historically been surfaced poorly, I think, both from a structural and narrative perspective.

For example, here's what the old Perks page used to look like above the fold:

To me, this doesn't really do a good job explaining Perks: what they are, what they do, or how you can use them. I think part of that is the copy here makes the assumption that people know what Perks are. How do I know which Perks I want if I don't even know what they are? The long explanatory subheader tries to provide this important context, but somehow only adds to the confusion. UX research confirmed my suspicion and brought into focus the issues Neo was having around the communication of Perks as a whole.

Here's what you see above the fold on the new website page for Perks:

The new Perks story is clearer, more engaging, and centralizes in the Neo canon what was historically marketed as kind of an afterthought.

Tip: As a general rule, subheaders should offer supporting context for a header that is essentially just a compelling summary of the subheader itself. To take this further, people with very limited knowledge should be able to 'get' the whole storyline of a page from what you have above the fold. You don't need 54 words to achieve this when you can do it better in 20.

Premium

Premium was Neo's first real account-level upgrade for its users. I created the go-to-market messaging for Premium on the Neo website, in the app, and for Neo's external communications, helping them launch the new feature and explain it's value to users.

5. Humanizing Technical Topics

Money is already a sensitive topic for a lot of people. It's technical, stressful, and there's a reason Google gets so triggered over anything to do with money. To address this, I wanted to create a more empathetic and straightforward approach to explaining some of Neo's technical features.

Neo's new Credit Score Monitoring feature is a good example of this. Credit and credit scores are important yet widely misunderstood and intimidating aspects of personal finance. Through simple language and effective supporting imagery, I distilled technical money topics like these down to make them more approachable throughout the website, taking the same approach to UX writing in the Neo app.

Tip: If you're at the stage where you're explaining stuff in more detail, you won't be successful if you haven't done all the other steps listed earlier in this post. You need to know what information lives where, what order it goes in, and how you're going to say it. Once you've done all that, you can start to expand on the features and benefits of whatever it is you're writing about in more detail.

Impact

Rebuilding a fintech website is not a straightforward task. It's a complex space, not least because you're dealing with finances and technology, two very complex topics. You're also in a space with a lot of competitors, a lot of noise and a lot of confusion. The new website was successfully updated without disruption to users or traffic. It does a far better job articulating Neo's features and ecosystem while simplifying both the content and UX. Ultimately, it helped set the groundwork for Neo's next chapter as a brand, including smart new advertising and a major app update. Check out the finished product at www.neofinancial.com.

Read more about Fintech branding work:

BIG THANKS TO:

ALI NASSER - PRINCIPAL DESIGNER
SAURAV ACHARYA - PRODUCT MANAGER
SCOTT MALO - STUDIO DIRECTOR
PABLO BERNAL - CREATIVE DIRECTOR
JAKE JANOSIK - HEAD OF PRODUCT DESIGN
JEFF WIEHLER - LEAD, CONTENT DESIGN
BRUNO ROJAS - CREATIVE TEAM
DARIO BECHER - CREATIVE TEAM
ADRIAN DE LA PENA - PHOTOGRAPHY

Disclaimer: This post contains affiliate links, meaning I get a commission if you make a purchase through my links, at no cost to you.