Making financial services legible: one site for four very different customers
F&M sold complex financial products to investors, farmers, startups and hotel owners and had no official website. We built one, from workshops with the client to a design system the studio could keep extending.
No official site, complex products, and four audiences with nothing in common. Trust is the product.
Workshops and card sorting with the client, personas and journeys, sitemap, wireframes to hi-fi, design system, handoff and review.
Launched. 35 leads in the first month, from no website at all.
The problem
One site, four audiences with different vocabularies and fears: the investor wants to see where the money goes; the farmer needs capital before the harvest; the startup needs to survive payroll; the hotel owner needs to restructure debt.
Process
Workshops with the client
Briefing analysis, desk research and benchmarking, then card sorting with the client’s team. Five stages, from investigation to a design system.
- 01Investigation
- Card sorting
- Briefing analysis
- Desk research
- Benchmarking
- 02Empathy
- Personas
- Empathy map
- Proto-journeys
- How Might We
- 03Scope
- Value proposition canvas
- Sketches
- Mid-fi wireframes
- 04Information architecture
- Golden path
- Sitemap
- 05Design system
- Colour
- Typography
- Grid
- Icons
- Components
Personas
Four people, four very different reasons to look for a financial partner. Each one got needs, pains and what would bring relief.
Carlos, 56
Investor and business owner · Rio de Janeiro- needs
- Make his money grow in a business he can trust, and diversify.
- pains
- Investments that don’t pay off; not knowing how to diversify.
- relief
- Seeing where his money goes and how the return comes back.
João, 52
Farmer · Mato Grosso- needs
- Better machinery to plant and harvest more.
- pains
- Weather and crop risk; no capital for new equipment.
- relief
- Safe financing, with guarantees for the harvest.
Eduardo, 29
Startup CEO · Rio de Janeiro- needs
- Keep the startup alive, pay the team and launch the MVP.
- pains
- Running out of money before the product finds clients.
- relief
- Funding that comes with a plan, and people who’ve done it.
Sofia, 36
Hotel chain owner · São Paulo- needs
- Recover after the pandemic and take the business digital.
- pains
- Costs she can’t cover and credit she can’t get.
- relief
- Specialist support to redesign the business, and financing to keep it open.
Recreated from the persona boards. Names and details are fictional.
Journeys
How each persona would find the company, ask for help and get to a regional advisor. All four end in the same place: a person, not a form.
- Looks for investment options in sites and ads
- Visits the site and reads about investing and returns
- Gets more information and gets in touch
- Tracks the request
- A regional advisor calls
- Looks for help with judicial credit recovery
- Visits the site and reads about credit recovery
- Gets in touch
- Tracks the request
- Gets a status update
- A regional advisor calls
- Looks for a loan to start investing
- Visits the site and reads about starting from zero
- Gets in touch
- Tracks the request
- Gets a status update
- A regional advisor calls
- Looks for credit restructuring
- Visits the site and reads about restructuring
- Gets in touch
- Tracks the request
- Gets a status update
- A regional advisor calls
Structure
A sitemap built around audiences, and a contact flow that asks who you are first, so the message reaches the right advisor.
The sitemap and the contact flow, from the original case (labels in Portuguese).
Design system
Navy for trust, muted gold for value. Two typefaces, a 12-column grid and a component library the studio kept extending.
#2E3A4D#B69E6EBody text at 20, 18 and 16px, line height 1.4.
The design system, rebuilt from the original specs.
Handoff and review
Handoff to the front end, then a review pass after the team delivered.
Decisions
Corporate, Agribusiness and Special Investments each get their own entry and language; the nine services live underneath.
A “How it works” path ending in a form that routes to a regional advisor, which is how the company actually sells.
Two typefaces, generous spacing, and a system the client could extend without breaking it.
Outcome
Launched. The client reported 35 leads in the first month, from a company that previously had no official site.
Takeaway
The most useful part of this project happened before any screen. The client came to the workshops and did the card sorting with us, and they knew their four audiences far better than we did. A lot of the structure came straight out of those sessions, like asking who you are before the contact form, so each message reaches the right advisor.
Four very different audiences made it tempting to design four separate experiences. We kept one system instead and changed the language and the path for each audience. It was harder to design, but simpler for the client to keep up, and the studio went on extending the design system after launch.
Looking back, I’d plan how to measure each path from the start, not only the total. Thirty-five leads in the first month was a good result for a company with no website, but today I would want to know which audience those leads came from and which path worked best. That’s the part of my process that changed most since then: I now write the goals before the sitemap.