Case study
FutureFunds
A rescue job. The brief cast me as a lead designer at an agency, handed me a landing page that was failing, three user personas, and transcripts of real people struggling to use it. The client was a financial planning firm targeting 25 to 35 year olds, and the page was meant to turn visitors into clients. It was doing the opposite.
- Role
- UX critique, UI design, front-end build
- Year
- 2026
- Tools
- Figma, Next.js, GSAP, Vercel
- Course
- GRA 470
The problem
Asked to book before you knew who they were.
The original wireframes opened with an appointment scheduler and a wall of reviews. The introduction to the company sat near the bottom of the page. Nothing was labeled: a graph with no title, a form with no heading, rows of identical unlabeled arrow buttons. The booking form asked for a full mailing address in order to schedule a phone call.
I did not have to guess at the damage. The brief came with user feedback, and it was blunt.
The wireframes I was handed. Reading top to bottom: an appointment scheduler, then a wall of reviews, then, near the bottom, the first explanation of what the company actually does. Visitors were being asked to book a consultation with a firm they had not yet been told anything about. The graph carries no title, the form carries no heading, and the arrow buttons repeat without labels.
I could not grasp what the company was about before being prompted to schedule.
I had no idea what the form was. There was no title or explanation for the graph.
There was no space between items. I was overwhelmed and did not know where to start.
The diagnosis
Six failures, and one that caused the rest.
I audited the wireframes against six UX principles and found problems in all of them: user-centricity, hierarchy, context, consistency, efficiency, and cognitive load. But hierarchy was the one causing the others. A landing page introduces before it asks, and this one asked first. Everything users complained about traced back to that single inversion.
The redesign
Every section earns its place.
I rebuilt the page in Figma around a deliberate order: who the company is, what they offer, proof that it works, then the ask. The three personas the brief provided, a confident planner, a beginner, and someone managing debt, all needed the page to feel approachable within the first screen, so trust signals moved up and the scheduler moved down.
The calculator got a title and visible output. The booking form lost the mailing address. Mobile kept the identical narrative rather than being a compressed desktop, with full-width touch targets and the sliders preserved.
The redesign, reordered around one rule: introduce before you ask. The hero establishes who FutureFunds is, the services answer what they do and map to the three personas in the brief, the calculator lets someone test it against their own numbers, testimonials supply proof, and only then does the scheduler appear. The booking form lost the mailing address it had been demanding in order to arrange a phone call.
The build
Then I built it, and kept going.
The assignment ended at the mockup. I built it anyway, as a live site, because a design that has never survived a browser is a hypothesis rather than a result.
Building it changed it. The calculator became the hero instead of a section, so the first thing you can do on the page is drag your own future around. The projected value renders as thousands of particles that fly in from the edges of the screen and assemble, then scatter when you move through them. The page went dark, because a palette with no bright color in it needs the interface to glow rather than shout. None of that existed in Figma. It came out of building.
Note
A walkthrough of the built site. The projected value assembles from particles on load, scatters when you move through it, and rebuilds when you drag a slider.
Measured, not claimed
The scoreboard.
- 100
- Performance, desktop
- 100
- Accessibility
- 100
- Best Practices
- 100
- SEO
Note
Google PageSpeed Insights, August 2026. Desktop scores 100 across all four categories. Mobile scores 94 for performance and 100 for accessibility, best practices, and SEO.
Those six mobile points are the hero. Speed Index measures how quickly a page looks visually complete, and this one is deliberately still assembling itself out of particles when the measurement is taken. It is the effect, not a fault.