Beauty Tech Archetype Quiz Development

Case study – Beauty Tech Archetype

How I combined Framer Workshop's visual design tools with custom code overrides to deliver a fully editable quiz for the client. Complete with Airtable capture and archetype results.

The client initially was running their quiz on a third-party platform, but it came with two real limitations: customisation was heavily restricted, and any link to it pulled users away from the website entirely.

The challenge was to rebuild it natively in Framer — a multi-step beauty quiz that reveals a personalised "Beauty Tech Archetype" at the end, living fully within the site experience.

Beyond that, the client needed complete editorial control: swapping images, updating copy, and adjusting brand colours independently, with no code involved. And before any result was revealed, the business needed every respondent's email and quiz choices captured cleanly in a structured database.

Quiz questions

The user moves through a series of visual, image-led questions. Each card is fully editable by the client inside Framer — image, heading, answer options, and button colour.

Subscribe gate

After the final question, a subscribe screen prompts the user for their email address. this is the gate, results are withheld until the form is submitted successfully.

Airtable capture — powered by Make

Rather thank calling the Airtable API directly from Framer, I used Make.com as the middleware layer. When the Subscribe form is submitted, Framer sends the data to a Make webhook. Make then handles the Airtable connection, mapping the email, each quiz answer, and the calculated archtype into the correct fields in the base. This approach kept the Framer code override simple (a single fetch to a webhook URL), avoided exposing any API keys in the front-end.

Results reveal

Only after the successful Make & Airtable response does the quiz unlock and display the user's Beauty Tech Archetype –– with personalised copy and imagery matched to their results.

Framer Workshop: Visual design, layout, component system, and client-editable properties via the Properties Panel

Code Overrides: Custom Typescript overrides to manage quiz state, track answers, and a fetch to a webhook URL using Make that would help connect Framer to Airtable securely without exposing any API keys to the front-end.

Make: handles the Airtable connection, mapping the email, each quiz answers, and the calculated archetype into the correct fields in the base.

Airtable: Single base collects all responses. Client can view, filter, and export their leads without any technical assistance.