Product Design: Building the Heart of Onlynnov

🏰 This chapter unpacks how we built it.

Product Team

At the very beginning, the design was outsourced to a digital agency (Ayctor). Gradually, it became obvious: everything had to move in-house at Onlynnov. I came on board first (Product Design), then Nicolas (Back-end), Timoté (Full-Stack), and finally Léa (Product Owner).

The Brief — A Heavy but Defining Constraint

When I joined, the project was already well engaged. Our CEO Guillaume had been navigating through the complexity of the insurance part. The result? A dense, highly technical spec doc we had to stick to.

Designing Within Technical Constraints

From a tech perspective, the app was no joke. On the back-end Laravel provided a solid, scalable base — clean, maintainable, and ready for real-time updates, user sessions, and async data.

On the front-end: a React structure that gave me some layout flexibility — but every decision had deep technical consequences.

🧠 To redesign this thing properly, I had to deeply absorb the system’s complexity

Starting the Re-Design. Step by Step.

Audit first, then craft.

As you can see from the diagram, we were truly missing a design system. The app wasn't scalable at this point because we lacked consistency and a logical structure behind each steps.

We were short on time. Our priority was to launch a functional version. So, Instead of making a design system, I focused on more immediate, relevant goals to simplify the UX.

✂️ Remove useless content & Reduce steps

🧑‍💻 Dynamic & Personal UI (suggestions, assistance, UX writing, popups…)

🗺️ Redefine the app structure

Lo-fi Wireframe Structure

This step might seem simple, but it was crucial to the project's foundation.

⚡️ The idea was to segment the app's areas for instant comprehension.

(🔴) At the top, a breadcrumb trail for easy navigation. (🟢) On the right, a pricing module to always display the cost to the user. (🟡) In the center, the main content where users make their choices . (🔵) On the left, contextual help and recommendations to guide users in selecting the right insurance, appearing as needed.

Since each section displays dynamic content, the display sizes are constantly shifting. That's why we implemented a three-tier scroll.

When a section's content exceeds the viewport, it becomes scrollable.

Keeping Users in Control
Breadcrumb & Steps Indicators

I wanted to design a path that put users in control.

🎚️ A basic stepper wasn’t enough.

Users needed to go back, update their choices, and instantly see if a step was completed, in progress, or locked. So i tried many things but that one made everything clear.

First, the red progress bar — Intuitively, everyone understands it represents a linear journey made of steps. That was the foundation.

Next, I needed to show that each step could have different states: locked, completed, needs review, or even an error. A first component appeared: The step indicator component.

Each state clearly communicates how navigation works. When a step moves from “editing” to “completed” — or shifts to any other state — the visual change is clear, making the flow easy to understand.

↓ Let's see how it works within the final breadcrumb. ↓

Complex User Flow

🧩 Giving users freedom means adding layers of complexity behind the code.

So we carefully mapped out every possible path — including edge cases and detours — to avoid mistakes along the way. We finally had our breadcrumb, the heart of the app’s navigation.

The next step was to bring to life the entire experience. Let's see the design pricing area. 🟢

Pricing Module — The Core Engine

This was the zone of truth: pricing — the key to reducing bounce. We needed to:

👁️ Keep it visible across the entire flow

⚙️ Adapt pricing in real-time based on expressed needs

💳 Offer flexible payment options (monthly, quarterly, yearly…)

This recording shows dynamic price updates based on insurance preferences. The interdependence between steppers requires managing multiple constraints in real time — which the dev team handled very well.

Designing Dynamic Content

With the breadcrumb and pricing module in place, it was time to tackle the dynamic content. Let's explain the main content area first. 🟡

Within this area, users make decisions and complete steps: fill in data, select insurance options, answer questions... The challenge?

🧼 Craft a section that feels effortless. Clean, readable, and easy to complete.

The solution: design a minimal set of flexible components—text inputs, toggles, checkboxes—each one built to adapt and fit to the area.

↓ This is what it looks like with every component in place ↓

Onboarding & Insurance Suggestions

One of the biggest challenges? Convincing users to subscribe to an insurance plan on their own, without human help. That meant tackling one of the biggest psychological blockers: trust.

Users had questions: Is this insurance actually reliable? — Does it really cover what I need? — Can I trust an app with something this important?

Sure, our branding, pitch deck, and website all worked toward building trust. But it wasn’t enough.

Building Trust Through Personalized Suggestions

We guided each user with custom recommendations based on their profile, needs, and context. It made the offer more relevant — and made users feel seen, guided, and supported. I led the work on messaging and visuals across every stage of the journey.

Gamification: Meet Lyno, Our Personalized Virtual Assistant

We already had a solid layer of reassurance. But Timoté pushed it further with Lyno, our interactive 3D mascot. Lyno delivers real-time messages, dynamically generated from the user’s behavior, answers, and context. The result: A virtual assistant that humanizes the experience, nudges without pressure, and helps users stay autonomous through the process.