Skip to content

Website redesign

Reflecta website

Website redesign for a self-insight app

A redesign of reflecta.life around an animated story, with six assessment pages linked by one thread transition. No framework.

Visit the site: Reflecta (opens in new tab)
The Reflecta homepage at reflecta.life: the settled hero "Understand why you feel the way you do" beside a phone showing an Emotional Needs insight, then a smooth scroll through the question library, the three-step How it works, the Journey progress card, "Not a diagnosis. A mirror.", the mirrored "Look closer. Gently." headline, support and privacy sections and the footer.
Homepage

Sketch to Ship

Headline on the left, the insight it leads to on the right.

The shipped Reflecta homepage hero: the headline "Understand why you feel the way you do.", Explore assessments and How it works buttons, and a phone showing an Emotional Needs insight beside a chat card.Shipped
Hand-drawn sketch of the Reflecta homepage heroSketch

Stack

  • HTML
  • CSS
  • JavaScript
  • SVG animation
  • Motion design
Type
Website design
Client
Reflecta

The problem

Reflecta is an app of short mental assessments. The landing page had to explain, in a few seconds, the feeling the app is for, then lead people to the assessment that matches their question.

What it does

The redesigned site opens with a short film: a late-night "ok." text tangles into a line that Reflecta pulls straight, then draws the app's real screens. The library starts from the questions people ask themselves, and each one opens its own assessment page.

How it's built

Plain HTML, CSS, and JavaScript, with no framework and no build step, served as static assets on Cloudflare. The thread is an SVG path computed from the viewport, so the hand-off between the landing page and an assessment page lines up. Typography uses Roboto and Doppio One.

Key features

Motion

  • An intro film that starts from a 2am "ok." message and ends on the app's real screens, with a Skip intro button and a Watch the intro again link
  • Library cards leave through a full-screen tangled thread; the assessment page opens on the same tangle and pulls it straight before its own scene starts
  • Each assessment page has its own looping scene; Emotional Needs fills its heart with a simulated pour
  • Scroll reveals driven by IntersectionObserver and requestAnimationFrame, with prefers-reduced-motion respected

Pages

  • Landing page: library, how it works, journey, trust ("Not a diagnosis. A mirror."), support, and legal sections
  • Six assessment pages: Attachment Style, Emotional Needs, Overthinking Patterns, Shadow Traits, Burnout Risk, Love Languages

SEO and assets

  • A question-led title for each assessment page, with its own share image
  • Canonical URLs, Open Graph and Twitter cards, and JSON-LD (WebSite, Organization, MobileApplication)
  • Sitemap, robots.txt, web manifest, favicon set, and a new logo

Scope

Redesigned and built the website

  • Landing page redesign with the intro film and the thread story
  • Six new assessment pages, each with its own scene and share image
  • Typography (Roboto, Doppio One), logo, favicon set, and share images
  • SEO: canonical, Open Graph and Twitter cards, JSON-LD, sitemap, robots, web manifest

Screens

  • The full Reflecta hero film as it plays on load: a 2am chat where "ok." is the only reply, the overthinking thoughts tangling into a red and violet thread, "Meet Reflecta.", a phone answering an Emotional Needs question with the AI helper, the insight radar, the Journey cards counting to 20 reflections, and a calmer reply before the hero settles.
    Homepage hero animation
  • Opening the "Am I tired, or running on empty?" card in the Reflecta library: the page leaves through a tangled thread that pulls straight, the Burnout Risk page plays its battery story (energy dropping from 100% across the week, "It doesn’t. Monday starts low again."), then scrolls through Rest stops refilling you, What drains you, Where your energy goes, and the closing call to action.
    Use case: Burnout Risk
  • Opening "Why do I need them to text back so fast?" from the Reflecta library: the thread transition into the Attachment Style page, its hero with a delivered message and a racing heart-rate line ("You hit send."), then Silence gets very loud, How you bond and why, an example insight card, and "Understand the pull, not just the panic."
    Use case: Attachment Style
  • Reflecta homepage hero: "Understand why you feel the way you do." with Explore assessments and How it works buttons, beside a phone showing "You need reassurance before you can relax." and a chat card.
    Homepage hero
  • The Reflecta library section "What’s on your mind?": six question cards such as "Why do I need them to text back so fast?" and "Am I tired, or running on empty?", each with a hand-drawn line motif.
    Question library
  • Reflecta "Three steps to the why.": pick what’s on your mind, answer honestly in your own words, and see the pattern beneath, each with a small illustrated card.
    How it works
  • Reflecta Journey section "It remembers, so you can notice." with a coral card showing 20 reflections and completed assessments (Attachment Style, Emotional Needs, Overthinking Patterns).
    Journey
  • The Reflecta homepage on a phone (390 px wide): the "Understand why you feel the way you do." hero with full-width buttons and the app preview below.
    Mobile homepage

Contact

Want something like this built?

Get in touchExperience