100%

Saturday, Oct 10

15:48

Hugo Kestali

La Trace: a mobile companion for cycling trips across France

B2C

Web to mobile

Shipped work

Splashscreen

Role

Product Designer (freelance)

Team

About 10 people across product and marketing

Timeline

May 2024 to May 2025

Platforms

iOS and Android

Status

Live

TL;DR

La Trace helps people plan bike trips across France. Over a year as its freelance product designer, I took La Trace from a web app to an iOS and Android app: navigation, map, route pages and profile, built on a design system I maintained.

I led most of the 70 or so user interviews. The app is live, with about 10,000 downloads in its first year.

Context

La Trace is a startup for long-distance cyclists: people who love nature, slow travel and exploring France at their own pace.

It started as a web app. Interviews with cyclists showed they needed support during the trip itself, not only before it. So we built a mobile app.

My role

I was the only product designer in the last 6 months I was there, in a team of about 10 people across product and marketing, mostly freelancers. I designed the whole mobile app:

  • Navigation and information architecture

  • Route detail pages

  • The profile

  • The design system, which I maintained and extended

  • I also conducted most of the user interviews.

Problem

To plan a bike trip, cyclists juggle many sources: routes, lodging, train stations, places to eat. On the road, it gets harder.

Imagine being out on your bike without knowing where you will sleep tonight. Suddenly, it starts to rain. You open the app, desperate to find bike-friendly lodging, fast.

The web app was not built for that moment. Two questions guided the project:

  • How might we bring everything a cyclist needs into one place, before and during the trip?

  • How might we make it readable at a glance, without adding friction?

Research

Over the year, the team ran about 100 interviews and test sessions with all kinds of cyclists. I conducted most of them, and around 10 focused on the mobile app.

The main insight: the hardest part is bringing together everything a trip needs, in a way that is easy to take in and organized enough to help both before and during the trip.

We shared this analysis with the team to steer the design of the mobile app.

Research

Over the year, the team ran about 100 interviews and test sessions with all kinds of cyclists. I conducted most of them, and around 10 focused on the mobile app.

The main insight: the hardest part is bringing together everything a trip needs, in a way that is easy to take in and organized enough to help both before and during the trip.

We shared this analysis with the team to steer the design of the mobile app.

Interview tracking and test protocol in Notion.

Interview tracking and test protocol in Notion.

Key decisions

1. A map you can read at a glance.
Interviews showed the satellite map was hard to read. I moved to an abstract map style, so routes and points of interest stand out. Quick filters, such as train stations, help cyclists find what they need in one tap.

Map View
Map View

2. Everything about a route on one page.
Directions, download, difficulty, distance, duration and elevation come first. Then the day-by-day stages with photos, and a short description. Cyclists can judge a route in seconds, then dig deeper.

3. Familiar navigation.
The navigation relies on proven iOS and Android patterns, so cyclists feel at home from the first launch and nothing gets in their way.

4. A profile that follows your trips.
Your current position and the trips you have done, in one place.

Design system and delivery

A UI kit already existed. I maintained and extended it, on my own for about six months: buttons, map controls, cards, modals, filters, navigation and more. One front-end engineer worked mostly on it, so components evolved side by side in Figma and in code.

When features were ready, I delivered high-fidelity designs and specs, and we ran a lot of QA together during delivery.

Design system and delivery

A UI kit already existed. I maintained and extended it, on my own for about six months: buttons, map controls, cards, modals, filters, navigation and more. One front-end engineer worked mostly on it, so components evolved side by side in Figma and in code.

When features were ready, I delivered high-fidelity designs and specs, and we ran a lot of QA together during delivery.

Explored, not shipped

We also explored a membership, “Le Club”, and a lodging booking flow. Neither was viable for the business, so we did not build them. The app and its content stayed free.

Impact

  • Shipped on iOS and Android, and still live.

  • About 10,000 downloads in the first year.

No analytics or structured feedback loop was shared after launch, so downloads are the only figure I can share.

Impact

  • Shipped on iOS and Android, and still live.

  • About 10,000 downloads in the first year.

No analytics or structured feedback loop was shared after launch, so downloads are the only figure I can share.

Lessons

1. Research is only as useful as the decisions it drives.
Today, I log each insight next to the design decision it led to, so the link stays visible to the whole team.

2. Plan feedback before launch.
Without analytics or a feedback channel, we could not learn from real usage. Now I define two or three success metrics and a way to hear from users before release.

3. Check business viability early.
We explored concepts like Le Club and booking before confirming they could work for the business. A quick viability check first saves design time.

4. Write things down in a distributed team.
In a small team of mostly freelancers, shared context is fragile. Written specs and decisions kept design and engineering aligned.

Lessons

1. Research is only as useful as the decisions it drives.
Today, I log each insight next to the design decision it led to, so the link stays visible to the whole team.

2. Plan feedback before launch.
Without analytics or a feedback channel, we could not learn from real usage. Now I define two or three success metrics and a way to hear from users before release.

3. Check business viability early.
We explored concepts like Le Club and booking before confirming they could work for the business. A quick viability check first saves design time.

4. Write things down in a distributed team.
In a small team of mostly freelancers, shared context is fragile. Written specs and decisions kept design and engineering aligned.

Thanks

Brand and product illustrations by Valentine Michel, Product & Brand Designer @ Bon Pote.

Thanks

Brand and product illustrations by Valentine Michel, Product & Brand Designer @ Bon Pote.

Summarize

Create a free website with Framer, the website builder loved by startups, designers and agencies.