Free site review
Free site review
Case study

TSF UrbaNature

A Geneva nature NGO’s WordPress site, rebuilt from scratch: real projects, verified figures, three languages and a clear way in for every visitor.

Visit atsf.ch(opens in a new tab)
Client
TSF UrbaNature
Sector
Non-profit · urban ecology
Launched
2026
Services
Web design, Web development, Content structure, French, English and German
The new homepage’s first screen: a header with four menu items and a language switch, the headline “Co-naturing our cities”, and a photo of a child planting.
The old homepage’s first screen: a logo, a grid icon for the menu, and a mosaic of coloured tiles headed L’Association and Nos Raisons.
The old homepage on the left, the new one on the right. Drag the handle, or use the arrow keys, to compare.
languages
1 → 3
French only, now French, English and German
project case studies, each with verified figures
5
The old homepage showed none
script files loaded by the homepage
40 → 1
Counted from the saved old homepage and the live new one
Lighthouse performance score, desktop
99
100 for SEO and best practices, 96 for accessibility. 24 Sep 2026
The starting point

What wasn’t working

TSF UrbaNature plants micro-forests, green roofs and edible gardens across Geneva. Its old website showed none of it. It was a French-only WordPress theme: a mosaic of tiles with vague labels, a menu hidden behind an icon, and not one finished project on the homepage. For an NGO that needs schools, councils and funders to trust it, the site was working against the work.

The old TSF homepage from top to bottom: a grid of coloured tiles, most labelled “Nos Actions”, with arrows and a single “Rejoignez-nous” button.

  1. A menu you had to go looking for

    On a desktop screen, all the navigation sat behind one small grid icon. First-time visitors couldn’t see what pages existed.

  2. Pale green on pale green

    The sentences meant to explain TSF were set in small green serif type on mint tiles, the hardest text on the page to read.

  3. Arrows that don’t say where they go

    Row after row of bare arrows with no link text. The only way to find out where one led was to click it.

  4. “Nos Actions”, seven times

    The same label sat on the section tile and on every card under it, so the page repeated itself instead of explaining anything.

  5. One button for everyone

    “Rejoignez-nous” was the only call to action. A school, a council, a company and a volunteer all got the same vague invitation.

  6. The proof was hidden

    News, press and testimonials were three headings with an arrow each. Not one finished project or figure made it onto the homepage.

Top to bottom

Both homepages, side by side

Scroll either page and the other follows. The new one is longer, because every section now has a job to do.

Before

The full old homepage: a long mosaic of tiles.
  1. A mission statement and a slogan
  2. L’Association and Nos Raisons: a heading and an arrow each
  3. Nos Actions, then five verbs: promote, apply, coordinate, propose, lead
  4. Rejoignez-nous
  5. En images: a single illustration
  6. Three short pitches with no headings
  7. L’Association again, then the team and partners
  8. News, press and testimonials: headings only

After

The full new homepage, section by section, from the hero to the closing call to action.
  1. What TSF does, in one line, with a real photo
  2. Five services, each with a photo
  3. The approach: renature, participate, inspire
  4. Four ways in: a space, funding, a team or a partnership
  5. Latest projects, with figures and status
  6. From nursery to ecosystem, in six steps
  7. Ambitions, clearly labelled as future goals
  8. Partners, awards and what partners say
  9. Donations, who TSF is, and a closing call to action
What we did, and why

The decisions that mattered most

We started with the people TSF has to convince (landowners, funders, companies and partners) and what each of them needs to see before getting in touch. That gave the site its shape: what TSF does, proof that it has done it, and a clear next step for each kind of visitor. Then we built it as a fast static site in three languages, with every figure checked against TSF’s own reports.

  1. Navigation you can see

    Before
    Every page hidden behind a grid icon, and all of it in French.
    After
    Four sections in plain view, a switch between French, English and German, and one obvious “Let’s talk” button.
    BeforeOld header: the TSF logo and a grid icon, nothing else, above the first tiles.
    After
    New header: the logo, What we do, Projects, About, Get involved, an EN/FR/DE switch and a “Let’s talk” button, above the headline.

  2. Proof instead of verbs

    Before
    Promote, apply, coordinate, propose, lead: five verbs and not one example of TSF doing them.
    After
    A projects page where every entry is real, marked Completed, Ongoing or Planned, and shown with the figures TSF can back up.
    BeforeOld “Nos Actions” tiles: Promouvoir, Appliquer, Coordonner, each with a one-line description and an arrow.
    After
    New projects page: “Where nature is returning to the city”, status filters, and the École du Seujet roof with its site plan.

  3. Numbers you can trust

    Before
    No figures anywhere on the old homepage.
    After
    Each project leads with its verified numbers, like the 460 m² green roof and around 120 children at École du Seujet. Ambitions like “500k trees a year” are labelled as future goals, not results.
    After
    École du Seujet project page: a Completed badge, a short summary, and the figures 460 m² vegetated green roof and 120 children involved.

  4. A way in for every visitor

    Before
    One “Rejoignez-nous” button for schools, councils, companies and volunteers alike.
    After
    Four routes, one for each kind of visitor: I have a space, I want to fund nature, bring my team, I want to partner. Each leads to its own page.
    BeforeOld tiles Proposer and Animer beside a single “Rejoignez-nous” button.
    After
    New section “What can you bring to the ecosystem?” with four cards: I have a space, I want to fund nature, Bring my team, I want to partner.
On a phone

Just as clear on a small screen

  • New homepage on a phone: the headline, a short line on what TSF does, and the hero photo.

    Home

  • École du Seujet project page on a phone, with its Completed badge and figures.

    A project

  • Projects page on a phone, with Completed, Ongoing and Planned filters.

    All projects

  • Contact page on a phone: “Have a place, a partnership or a question?” and the email address.

    Contact

Under the hood

Fast, light and easy to find

  • 96Performance
  • 96Accessibility
  • 100Best practices
  • 100SEO

Lighthouse 13, desktop, run on the live homepage on 24 September 2026. Mobile performance scored 84.

  • Static pages, not a theme

    The old homepage ran on a WordPress theme and page builder and loaded 40 script files and 21 stylesheets. The new one loads one script file and one stylesheet.

  • One system, three languages

    French, English and German pages share the same components, so each page is written once per language, not designed three times.

  • Honest by design

    Completed, ongoing and planned work are labelled everywhere, so the site never overstates TSF’s impact to a funder.

  • Built to be found

    Clear headings, descriptive links, a sitemap and page titles for every project, in every language.

The finished site

See it for yourself

The new atsf.ch is live in French, English and German. It leads with real photos and real projects, marks every figure as completed, ongoing or planned, and gives every kind of visitor somewhere to go next.

Testimonial: A word from TSF UrbaNature on the project will appear here once they’ve sent it.

Visit atsf.ch(opens in a new tab)Start a similar project All work