You can use the arrow keys to navigate as well ↑↓

Proposal for Renude29 October 2026

Make the advisor look as clever as it is.

UI modernisation and a composable design system for Renude's AI Skin Advisor, built to re-skin for every brand and retailer you empower.

4–5 weeks · Figma system with optional coded components · valid until 28 Nov 2026

Grab a shape. 🫳🏽

Jacobo Koenig · product & technology, London01
02 SectionWho is behind this proposal
01

About me

    03 About meSelected work

    Web and UI/UX specialist

    A selection of products I've designed and shipped.

    Doshi Learn

    Duolingo for finance

    doshi.app     Whering15M+ users

    Machine-learning wardrobe digitalisation app

    whering.co     GrouSeries A

    Payment infrastructure for LATAM creators

    grou.com     Respira

    Musical meditation app

    respira.app     Symterra

    Construction reporting app

    symterra.co.uk
    Heria Pro

    Calisthenics app

    offline
    Prosegur Pay

    POS app for restaurants and cafés

    prosegur.es     Duracell

    Augmented-reality showroom

    video     Medishout

    Medical reporting app

    medishout.co.uk
    LeslieSold to Fetch Pay

    App Clip for ordering and paying in restaurants

    offline
    Doshi WalletSold

    A crypto wallet for teens

    offline
    Shoot my Travel

    Find a photographer for your travels

    offline
    Decology

    Augmented-reality interior design app

    video
    MySmartBottle

    Smart water bottle app

    offline
    04 SectionWhere the advisor is today
    02

    Context

      05 The problemBrief, call 28 Oct, walkthrough 29 Oct

      A strong engine with a dated surface.

      Commercial traction and conversion data is encouraging, but the platform is perceived as antiquated and not up to par with modern agentic workflows.

      Medik8

      Side panel
      • Routine view with All, Morning and Evening tabs, plus "why we chose this" goal tags.
      • No indication of progress, even when answering quiz questions.
      • The analysis arrives as paragraphs. Three typing dots are the only sign of work.

      Nip + Fab

      Landing panel
      • Name and email captured early, feeding the brand's CRM.
      • Answers are full sentences in pills, so every question is a reading task.
      • No progress indicator, icons or imagery to scan.
      • Looks like a generic support chat, underselling the expertise behind it.

      Barefaced

      Product page
      • Clean welcome, three starter prompts and a short trust panel naming the experts.
      • Opened on the Overachiever serum page, it doesn't know which product you're viewing.
      • The highest-intent moment on the site gets the same greeting as the home page.

      Brand assets today

      • Fonts and background colour
      • Tone of voice, widget name, star ratings
      • An outdated Figma file
      06 AnalysisFive findings

      Five things holding it back

      01

      Text carries everything

      Skin type, goals, cautions and reasons arrive as prose. Shoppers skim, so most of the expertise goes unseen.

      02

      No sense of progress

      A conversational quiz with no visible end feels longer than it is.

      03

      Invisible intelligence

      The dataset is the differentiator, yet the wait shows three dots instead of the work being done.

      04

      Blind to context

      On a product page it should open with that product and a verdict for this shopper.

      05

      No shared parts

      Without atoms and molecules, each new brand or category means bespoke UI and drift.

      The fix in one line

      Turn prose into components, show the work, and make every brand a configuration.

      Drag them around 🫳🏽
      07 What already worksRenude data

      The product converts. The surface should show it.

      100k

      real skin consultations behind every recommendation

      75–95%

      quiz completion today, depending on entry point

      16%

      of Nip + Fab shoppers who open the advisor buy in the same session

      +42%

      higher order value for Nip + Fab customers given a routine

      Nip + Fab figures from Renude's published case study.

      08 GoalsWhat the redesign has to achieve

      Three goals for the redesign

      Each goal shapes a different part of the system.

      01

      Win new contracts

      Prospects judge the tool in a demo. It has to read as a modern, specialist AI product the moment it opens.

      02

      Ship Phase 1 fast

      A quiz refresh with a progress bar, plus Chat, Recommendations and Profile tabs your developers can adopt quickly.

      03

      Fit every brand

      One set of customisable components that takes each client's fonts, colours, tone and categories without bespoke UI.

      09 Where AI interfaces have movedReferences via Mobbin

      Four patterns shoppers expect from AI agents

      Taken from shipped products. Discovery expands this into a full reference board.

      Visible reasoning

      Named steps tick off while the answer forms, then fold into one line.

      ChatGPT · Bevel · Linktree

      Products in the chat

      Cards with price and two or three reasons replace paragraphs.

      Shop · Amazon Rufus · Best Buy

      Next-step chips

      Tappable follow-ups, weighted toward buying decisions.

      Shop · Klarna

      Quizzes that show the way

      "3 of 8" progress and icon tiles make concerns a two-second scan.

      Amazon · Lovi · Hers

      10 SectionOne system, configured per client
      03

      Proposal

        11 Composable by designOne system, every brand

        Designed once, configured for every client.

        Renude sells one engine to many brands, so we propose one system built in layers: each client's config sets the tokens, and every component reads from them.

        Brand config

        // one file per client
{
  "name":       "Ask Fern",
  "font":       "Newsreader",
  "background": "#FBF7F2",
  "tone":       "calm, botanical",
  "ratings":    true,
  "logo":       "fernwood.svg",
  "accent":     "#1F4D3A",
  "radius":     "soft",
  "density":    "comfortable",
  "categories": ["skin", "body"]
}

        ● settings brands have today   ● proposed additions*

        * Pending discovery

        One source, used twice

        • Figma variables with one mode per brand. Switch the mode and every screen re-skins.
        • CSS custom properties generated from the same config, so the widget and Figma never drift apart.
        • Tone of voice as a token. Button labels and helper lines come from a copy set per brand.
        • Guardrails built in. Brands change colour, type, radius and copy. Layout, spacing and contrast floors stay fixed.

        Tokens

        colourtyperadiuscopy

        Atoms

        chipbuttonscore ring

        Molecules

        answer tilethinking step

        Organisms

        product cardverdicttabs

        Flows

        quizroutineproduct page
        12 Sneak peekInteractive sketch
        ChatRoutineProfile
        Ask about your skin…
        Powered by Renude

        The advisor, modernised*

        Step through

        Brand
        Phase 1Progress bar, answer tiles, Chat / Recommendations / Profile tabs
        Phase 2Category switcher (see Glowbox) and per-category results
        Phase 3Thinking steps, suitability score, product-page context, prompt chips

        * Just for reference. Not final work. Brands, products and scores are placeholders.

        13 SectionWhat you get, and when
        04

        Deliverables

          14 ScopeAll three phases from the brief

          Three phases, one system

          Phase 1 · Current product

          • Quiz screens with progress and answer tiles
          • Chat, Recommendations and Profile tabs
          • Profile to review and edit answers
          • Lighter consent and email capture

          Phase 2 · New categories

          • Category switcher for multi-category retailers
          • Category-specific results layouts
          • Component applicability matrix
          • Rules for single-category brands

          Phase 3 · The AI layer

          • Prompt buttons instead of trailing questions
          • Thinking state with reasoning steps
          • Per-product suitability rating
          • Product-page awareness and custom questions
          D1

          Audit & discovery

          UI inventory from your code, findings, category matrix, reference board.

          D2

          Brand token layer

          Config schema mapped to tokens, as Figma variables and CSS properties.

          D3

          Component library

          Atoms to organisms with variants, in Figma.

          D4

          Customisable components

          Every component bound to the brand config, proven by re-skinning the system into four sample brands, one a multi-category retailer.

          D5

          Flows, all phases

          Mobile and desktop panel layouts.

          D6

          Prototype

          Clickable, for sales demos and testing.

          D7

          Brand skin guide

          What each setting changes, what stays fixed, with examples.

          D8 · Recommended

          Coded components

          Framework-free Web Components with Storybook, themed from the same config.

          15 Flight planDepart Mon 9 Nov · arrive Fri 11 Dec

          Five weeks, a check-in every week.

          We show 2–3 directions, align, build the components, iterate, then hand over.

          Leg
          Week 19 Nov
          Week 216 Nov
          Week 323 Nov
          Week 430 Nov
          Week 57 Dec
          Discoveryalongside your team
          Audit, sessions, 2–3 directions
          First deliverabletokens, styles, Phase 1
          Foundations
          Final deliverablelibrary, brands, flows
          Library
          Test and finaliseprototype, handoff
          Handoff
          Coded componentsrecommended package
          Web Components and Storybook

          Weeks 1–2

          Kick-off, GitHub UI export and audit, analytics, category sessions, AI-team feasibility.

          Week 3

          Chosen direction becomes tokens and core components. Phase 1 quiz and tabs in two style options.

          Week 4

          Full library, components re-skinned across four sample brands, Phase 2 and 3 flows, clickable prototype.

          Week 5

          Walkthroughs with your team and up to five shoppers you recruit, fixes, developer handoff.

          Phase 1 signs off on 27 November, so your developers can start building before the rest of the system is done.

          16 What we'll needMostly in week 1

          Access and inputs from Renude

          Day 1

          GitHub read access

          The widget repo, to export current UI, CSS and markup into an inventory.

          Day 1

          Brand configs

          The customisable settings, a few real configs and the live deployment links.

          Week 1

          Staging or sandbox

          A test instance to run end to end without touching a client store.

          Week 1

          Figma and assets

          Old files still help. Plus logos, icons and owned photography.

          Week 1

          Analytics

          Completion by question, drop-off, chat-to-purchase, prompt usage.

          Week 1

          Sample conversations

          Anonymised transcripts and quiz question sets for every category.

          Week 2

          Product data shape

          Fields each product carries, so cards only show data that exists.

          Weekly

          Your team's time

          A product owner, your dev lead, and one session with the AI team.

          17 SectionFixed fees
          05

          Investment

            18 InvestmentFixed fees · prices + VAT

            Priced by phase, better together

            Book any phase on its own, or take everything with coded components at a discount. Every phase includes weekly check-ins and two revision rounds per deliverable.

            Phase by phase
            Phase 1 · Current productDiscovery, brand tokens, core library, quiz and tabs£2,000
            Phase 2 · New categoriesCategory switcher, results layouts, applicability matrix£2,250
            Phase 3 · The AI layerThinking steps, suitability score, product-page context£2,750
            Coded componentsWeb Components and Storybook, themed from each config£1,750
            Booked separately£8,750

            Phase 1 comes first, since Phases 2 and 3 build on its system.

            Recommended Everything, with code £6,200+ VAT

            £8,750 Save £2,550 against booking separately

            • All three phases, Figma system and flows
            • Core components as Web Components for your vanilla JavaScript chat
            • CSS properties generated from each brand config
            • Storybook with every component in every brand
            • Clickable prototype, developer handoff and a pairing session

            Figma and code share one source of truth from day one.

            Payment

            40% on kick-off · 30% at the first deliverable · 30% on final sign-off

            After launch

            Further design support at £650 per day, booked in half days.

            Changes

            Scope changes are agreed in writing at a check-in before work starts. Valid until 28 November 2026.

            19 Next stepsLet's start

            Ready when you are.

            Pick your phases or the full package, send the live brand examples and GitHub read access, and we book the kick-off for the week of 9 November. The haircare follow-up questions come before kick-off.

            Jump back to a section

            Jacobo Koenig · product and technology lead · fifteen years building and shipping product as a founder and CTPO

            Drag the shapes around. 🫳🏽

            Jacobo Koenig · proposal for Renude, 29 Oct 2026Brands and figures in sketches are illustrative