A financial services firm needed a brand identity and website that could speak to a younger, sustainability-minded client base while retaining the trust of their established audience. The brief called for a people-centred design, modern typography, and purposeful animation as signals of a forward-looking practice. I designed the identity and the site, then built it in WordPress.

The sector has a settled visual language: navy, serif, conservative. It works, which is why everyone uses it, and that is exactly the problem for a firm trying to reach people who are not already sold on finance. The challenge was to build something credibly modern that could carry the firm's sustainability values without crossing into territory that would erode the trust a financial firm depends on.

Finance design defaults to the generic

Sustainability credentials invisible in the design

Two audiences pulling in opposite directions

Credibility is fragile in financial services

People-centred layout and imagery direction

Sustainability woven into the visual language

Plus Jakarta Sans carries the page, with a serif held back for buttons and pager numerals. The sector's default is the reverse, so the page reads as current without losing the register the audience expects.

Client-journey architecture

A financial services firm looking to grow, specifically to bring in clients who were younger, more focused on growth, and more conscious of values than their existing base, without losing the trust they had built with established clients. The firm had a genuine commitment to sustainability and wanted that to read clearly in the design, not as a badge tacked on at the end, but as something embedded in the visual language from the start.

The brief also called for animation and modern typography. The client had seen examples they responded to and wanted the site to feel alive and current, not static. The design brief extended to the brand: the firm had no visual guidelines, so the identity and the digital experience had to be built together.

One honest qualification. The navy and the neutral ramp underneath this identity are a house foundation I was working from across several projects that year, not values derived from scratch for this firm. What is specific here is the type pairing, the tonality and the photography direction. Building an identity from nothing and building one on a foundation you already trust are different jobs, and this was the second.

I ran a competitor audit across local financial services firms and a wider set of internationally established brands in the sector. The pattern was predictable: conservative palettes, serif typefaces, imagery of professionals in meetings, and testimonial blocks from satisfied clients. The sameness was striking, and informative.

It told me two things. First, the visual bar in the local market was low enough that a more considered approach would stand out without looking out of place. Second, the sector’s generic visual language was doing a specific job: signalling stability, longevity, and trustworthiness through familiarity. Any direction that moved too far from those signals would trigger doubt before a prospect had read a word.

I also looked specifically at how sustainability was handled in financial services branding internationally. Most firms that led with sustainability used predictable shorthand: greens, leaf iconography, earnest stock photography. The effect was often the opposite of differentiation. The research shaped a clear constraint: sustainability had to come through in tone and structure, not decoration.

Brand positioning was defined before any visual work began. The brief I set: people-first, sustainability-minded, modern but not trend-chasing. That framing became a filter for every subsequent decision.

The typography direction was an early commitment. The client had been clear they wanted modern fonts, not the sector’s default serif vocabulary. A contemporary sans-serif pairing was chosen to carry both the confidence the firm needed at display sizes and the warmth the people-centred brief required in body copy. The system had to feel current without feeling transient.

Animation was introduced as a structural tool, not a decorative one. Entrance transitions were designed to guide attention through each section in sequence, giving the reader a sense of pace and intention rather than dropping everything on screen at once. The motion language was kept consistent across the page so it read as a system, not a collection of effects.

The people-centred direction shaped the layout and imagery approach from the first wireframe. Rather than leading with products and services, the site leads with relationships. The hierarchy was designed to surface the client experience before it surfaced the firm’s credentials.

The sector default is a serif headline over a sans body. This inverts it. Plus Jakarta Sans carries about 95% of the page, and the one departure is Aoboshi One, a serif, used only on buttons and pager numerals. Keeping the serif at small sizes lets the page hold a trace of the sector’s typographic register without a serif headline announcing it. That put the burden of authority on the layout and the colour instead of on convention, which made every other decision harder and, I think, better.

Sustainability was surfaced through content strategy as much as visual design. The colour palette, copy hierarchy, and section sequencing were all oriented toward making the firm’s values legible to someone scanning the page quickly, rather than stated in a paragraph they would have to stop and read.

The motion was written as a specification rather than a feeling: 200 to 250ms ease-out on hovers, 400ms on carousel transitions, no parallax, no scroll-jacking. Financial services audiences do not respond well to movement that reads as trying too hard, and a number in the file is harder to drift away from during a build than an adjective.

I designed this at desktop width and then worked out the mobile layout while building it, which is backwards. Designing and building it myself hid the cost, because I could solve each breakpoint as I hit it instead of having to hand anyone a spec. What that produced is a site that adapts rather than a site that was designed for a phone. For a firm trying to reach a younger audience, whose first impression almost certainly happens on a phone, the mobile layout deserved its own design pass and did not get one. The motion in particular was specified at desktop and inherited everywhere else.

The other thing I would change is that the photography direction I wrote for this project is stricter than the photography the page ended up with. The direction says real settings, real people, no abstract financial imagery. Parts of the finished page do not meet it. Writing the rule was the easy half.

The full page as designed, and the reference the WordPress build was made against.

Plus Jakarta Sans carries about 95% of the page. Aoboshi One, a serif, appears only on buttons and pager numerals. The sector default is serif headline over sans body, and this inverts it.

Photography over illustration, in real Sri Lankan settings. Illustration in this sector reads as stock-bank shorthand, which is the opposite of the differentiation the brief asked for.

The motion spec. 200 to 250ms ease-out on hover, 400ms on carousel transitions, no parallax, no scroll-jacking. Written as numbers so the build could not drift from the intent.

Brand identity and landing page, designed and then built out in WordPress across eight weeks. The site is live and serving the client under an agreement that does not let me link it, so everything here is evidence from the design files rather than a URL you can check. Take the case study accordingly.