Web application - Vélo en France

Views: 96

Work on redesigning and improving "Vélo en France" began in November 2022, and the project is still ongoing.

What is Vélo en France?

Vélo en France is a French website, an indispensable toolbox for cycling and cycle tourism enthusiasts in France.
The site is used by over 120,000 members of the Fédération française de cyclotourisme, in addition to visitors brought in by search engines and social networks.

Features include (but are not limited to) :

  • A comprehensive list of cycling clubs located throughout France. At the time of writing, there are 2,735 partner clubs, and this figure is rising all the time.
  • An event is a gathering of cyclotourists at a given time and place.
  • A comprehensive list of cycling routes to discover for your next outing (3528 at the time of writing).
  • Les Bonnes adresses du territoire: accommodation and restaurants where you'll find a warm welcome during your cycling outings.
  • Le défi des cent cols, an extensive list of passes to discover for the more adventurous.
  • The possibility of creating your own personalized itineraries with a dedicated tool (an interactive map).

And much more... to discover all the services on offer, please visit the site.

Vélo en France is proposed by the Fédération française de cyclotourisme...

What is "La Fédération française de cyclotourisme"?

"La Fédération française de cyclotourisme" is an association governed by the French law of 1901, and has been recognized as a public utility since 1978.
The "first version" of the federation was created in 1923 by Gaston Clément.By 1939, it had 9,000 members, and was known as "La Fédération française des sociétés de cyclotourisme".
During the Second World War, the FFSCT took a break (the "s" for "société" is in the epigraph).poque), then in February 1945, the Fédération française de Cyclotourisme (FFCT) as we know it today was created.

The FFCT's aim is to develop bicycle tourism in France, while making cycling a sport for all.
To achieve this, the federation organizes numerous activities (which you can discover on Vélo en France).

What work has been carried out on Vélo en France?

Since November 2022, several major projects have been carried out on the site...

Support

We're in constant communication with the federation's teams. In fact, to develop the site, it's necessary to understand certain new technologies, so I support the people in charge of the site at the heart of the federation, to guide them in the best choices to make for the site.

"Refactoring" the code

I won't go into detail here, but in order to meet the needs of maintainability and the needs of the federation. The code has been "refactored", meaning that certain parts of the existing code have been rewritten, and certain behaviors have been modified to ensure the project's longevity.

Creation of a user account system

The French Cycling Federation currently has 120,000 members...
To enable its members to access the services reserved for them, we had to implement a user account system on the site, enabling members to access the services reserved for them. These include services such as the creation of personalized itineraries, or the possibility of discovering the list of "Cycl'hôtes", licensees who offer services to the community (host, guide or mechanic).
The user management system has been designed to allow connection with social networks such as Strava, but this feature is not yet in use.

Improved site loading speed

As explained above, the Fédération française de cyclotourisme is made up of a large number of people, so the data accessible on the site comes from many different sources.To manage this simply, the federation has set up a large data management system.
The data is complex (since it also includes cartographic data). This comprehensive system can be cumbersome, slowing down navigation and degrading the user experience.

A great deal of work has therefore been carried out to maintain this system, enabling the federation to continue to work as it always has, while at the same time improving the loading speeds of the data.For example, on the Hundred Pass Challenge map, there are over 10,000 points to display, yet everything is displayed in less than 500 milliseconds.
This allows visitors to enjoy all this information without frustration.
On a "classic" circuit page, we've gone from a load time of 1 second to 100 milliseconds.

Carte du défi des cents cols sur vélo en France

A few graphic tweaks

The design of certain pages has been modified to make them more harmonious, notably the pages presenting the clubs, and the "slider" at the bottom of the page has been reworked to provide a more pleasant user experience.

Improved technical SEO

In order to take advantage of Google Search's visibility, SEO best practices were implemented in the site's code, enabling Google to better understand the site and therefore to better reference it.

Implementing image compression technology

Before talking about the home page and the search engine, it's worth mentioning the in-depth work that went into the project.
Both the new home page (which I'll talk about next) and the search engine (which I'll talk about next) are image-intensive.
The problem with images is that they consume a lot of bandwidth, and that's not very good for the environment.
To alleviate this problem, I've set up an image compression system that reduces image size by 50% to 95% without any visible loss of quality.
This makes it possible to use beautiful images to illustrate the site, while offering a fluid experience and contributing to the preservation of the environment.

Home page redesign

The home page has been modernized and redesigned to be more accessible, with larger clickable areas than in the previous version.
The page uses many more images to better illustrate the site's proposals, and animations and relief have been added.
The "Suggested bike routes" section allows visitors to discover new routes when they don't have a clear idea of what they're looking for.
The "Explore France" section allows visitors to discover different regions of France and, above all, what they can do there by bike.

You can see the old page here and the new page here.

The bicycle search engine

As explained above, the Fédération française de Cyclotourisme has done a fantastic job of creating content about cycling in France.
My job was to make this content effortlessly accessible to licensees and site visitors alike.
To do this, we created the "Bicycle Search Engine", which takes two forms.

A small search bar on every page
On every page of the site, in the navigation bar, there's a quick search bar. Start typing what you're looking for and you'll instantly see the most relevant proposals for your query.
This allows you, if you know what you're looking for, to move from one element of the site to another very quickly. And for those who want to go further, there's the "advanced search" button.

Advanced search
On this page, you'll discover many more results and options than with the quick search bar.
The advanced search has been designed to be very flexible. On the right (below on mobile), you can choose some of the characteristics of the expected results: is it a circuit? A club? An event? Does it concern road bikes? Mountain bike? Electric-assist bikes?
By now you should have understood the principle: this search engine responds just as quickly as the quick search, but with a much more advanced level of search customization.

Le moteur de recherche de vélo en France

From website to web application

One of the latest changes to VeloEnFrance is the transformation of the traditional website into a web application, also known as a "pogressive web app".

In concrete terms, what does this change?
It allows the website to be installed on the home screen of a smartphone, and accessed as if it were an application. What's more, it gives the interface a much more responsive feel: there's never any "dead time"; when an action takes place, the user is always informed, never left in the dark.
Hotwired Turbo and Stimulus technology were used to create this application.
The transition from website to application also allows us to prepare for the future...

Conclusion

This project is still in progress, with more to come, but this page gives you an overview of what's been achieved with the French Cycling Federation.
Vélo en France is a very interesting project, as well as being very useful for a large number of people.