Categories
Uncategorized

Upgrade Modals – Engineering for Experimentation

Context, Not Control

“Context, not Control” is one of my core engineering principles — especially in a SaaS Growth environment.

As a Senior Engineer embedded in a Growth team, impact is not measured in features shipped. It is measured in KPI movement.

To operate effectively in a SaaS company, an engineer must understand:

  • ICP (Ideal Customer Profile) — who are we building for?
  • Core value proposition — what problem are we solving?
  • North Star Metric — what defines meaningful product value?
  • Revenue engine / flywheel — how acquisition, activation, retention, and monetization compound over time

But in Growth, context goes deeper.

Growth engineering directly influences unit economics. By improving activation, retention, and monetization, we increase LTV (Customer Lifetime Value). By reducing friction and improving conversion efficiency, we shorten payback periods and strengthen the LTV/CAC ratio.

You are not just building UI — you are influencing revenue dynamics.


Engineering Inside the Experiment Loop

Growth engineering operates inside tight feedback cycles:

Hypothesis → Experiment → Measurement → Iteration

This means:

  • Frequent releases
  • Small deltas with measurable impact
  • Clear ownership of primary and guardrail metrics

Before writing code, you should know:

  • Which lifecycle stage are we optimizing?
    • Activation
    • Conversion
    • Retention / churn
  • What is the primary KPI this experiment aims to move?
  • What are the guardrail metrics? (engagement, churn, NPS, etc.)
  • What is the expected impact vs. engineering effort?
  • How will the outcome influence the next experiment?

In this environment, frontend engineering is not downstream from product and design — it is upstream. Technical constraints, component flexibility, and implementation strategy directly shape the scope of experimentation.

For example, repositioning an upgrade CTA from a passive banner to a contextual modal may increase trial-to-paid conversion — but only if the architecture allows variants to coexist without duplicating logic or fragmenting state management.

Execution quality determines experimentation velocity.


Designing for Change

On a Growth team, certain assumptions are safe:

  • Copy will change.
  • UI hierarchy will change.
  • Components will move.
  • Steps will be added, removed, or reordered.
  • Variants will coexist behind feature flags.

Rigid implementation slows iteration. Flexible systems accelerate it.

The role of a Growth-focused frontend engineer is not to build static features — it is to build adaptable surfaces.


Modularity First

To support experimentation at scale, components must be:

  • Small and composable
  • Decoupled from business logic
  • Configurable through props or variant inputs
  • Easy to isolate and test

Instead of coupling layout, state, and copy:

  • Presentation components focus purely on rendering
  • Logic lives in hooks or controller layers
  • Experiment configuration is injected externally

This separation keeps change localized and reduces regression risk when multiple experiments run in parallel.


Minimizing Change Surface

Growth requires speed — but controlled speed.

As experimentation volume increases, so does regression risk. To manage that risk, I prioritize:

  • Clear prop contracts
  • Strong typing
  • Explicit state ownership
  • Isolation of experiment logic

A well-structured component should support changes like:

  • Repositioning a CTA
  • Swapping interaction patterns
  • Splitting a flow into additional steps
  • Hiding or exposing sections by cohort

…without rewriting core logic.

Reducing the change surface increases confidence. Confidence increases velocity.


The Growth Frontend Mindset

The most compelling aspect of Growth engineering is that engineering becomes a lever for insight, not just output.

You are not only implementing experiments — you are shaping them. Technical understanding informs feasibility, complexity, and long-term sustainability. Empathy informs which ideas are worth testing.

The goal is not control over the product surface.
The goal is shared context around the metrics that matter — and systems that can evolve without friction.

That is what enables experimentation at scale.

Categories
Uncategorized

Williams Sonoma

In 2022, while working for Nexient, I had the opportunity to create the new Swatch Selection feature. The work included all new Vue.js components, collaborating with the back-end engineers while developing the Swatches sorting algorithm.

The UI was challenging because it included many pop-ups and “scroll in scroll container” situations. Williams Sonoma has very high standards in terms of accessibility which made the work even more interesting.

Categories
Work

Wespire

I was hired by Wespire to rebuild entirely their WordPress Website and implement new marketing tools as Hubspot.

Collaborating with their designers and Customer Success was a great experience, we managed to improve accessibility and performance by more than 50% leading to an increase of 70% new unique visitors and 150% more conversions on the next quarter!

HTML5 – CSS3 – ES6 JavaScript – jQuery – WordPress – Elementor – OceanWp

Categories
Work

Framer-Motion

Design and Developement

Playng with Framer Motion, i designed some SVG in Sketch and had Fun with React and Framer Motion!

Features : Animations – OnClick events – State Management

HTML5 – CSS3 – ES6 JavaScript – REACT

View LiveView Code

Categories
Work

CSS-SVG

Design and Developement

I played a little bit with sketch, JavaScript and CSS to animate some SVGs.

Features : CSS3 path animations – OnClick events

SVG – CSS3 – ES6 JavaScript

View LiveView Code

Categories
Work

Pokemon Alphabet

Design and Developement

I wanted to practice my JS skills and help my daughter with her letters ! A Year and a half later i’m still proud of this one, The design is simple and colorful which pleased the kids, we had fun and its performance is great, i used template litterals in JS and flexbox in the CSS.

Features : Memory game to learn the letters with the Pokemons.

HTML5 – CSS3 – ES6 JavaScript

View LiveView Code