UX & UI Case Study
Redesigning the FutureFunds landing page.
Rebuilding a financial planning page around clarity, hierarchy, and trust.
Project Overview
A landing page that earns the visitor's trust before it asks for anything.
Client
FutureFunds (fictional)
Project
GRA-470
Tool
Figma
Deliverable
UX/UI redesign and usability test plan
The Challenge
The right features, in the wrong order.
FutureFunds is a financial planning company for young professionals, spanning three personas that range from financially confident to overwhelmed. The original wireframes had every feature the client asked for, but they pushed visitors to book a call before the page ever explained who the company was or why it could be trusted.
A heuristic review found problems across all six core UX principles, with hierarchy as the biggest failure. Cards, graphs, and forms went unlabeled, navigation arrows looked identical with no explanation, the booking form asked for a full mailing address, and dense spacing left users unsure where to begin.
Real testers drove every fix. One said they could not tell what the company did before being prompted to schedule. Another could not identify what the graph or form even was. Each change in the redesign traces back to something a specific user struggled with.
The Redesign
A page that introduces, then invites.
The revised design follows a deliberate top-to-bottom narrative where every section earns its place. Trust signals arrive early, the company explains itself before any ask, and the tools are clearly labeled and simple to use.
Hero section immediately establishes who FutureFunds is.
Services map directly to all three persona needs.
Calculator is clearly labeled, with sliders and a live result.
Testimonials move below services, where they add context.
Scheduler is simplified to plain time-slot buttons.
Blog closes the page with educational value.
Desktop
Mobile
Problem and Solution
Every change answers a real complaint.
Visual System
Color & typography.
Green signals growth and action and is reserved for headings and key buttons. Charcoal carries the structure, so the green never has to shout.
Why Figma
The right tool for high-fidelity work.
High fidelity, no code
Shows how the final product looks and behaves before a single line is built.
Desktop and mobile together
Both versions live in one file, designed side by side for a consistent system.
Built for handoff
Real-time comments and clean PNG export for presentations and development.
Usability Test Plan
Proving the fixes actually worked.
Do users get it?
Can a visitor quickly tell what FutureFunds offers and who it is for?
Can they use it?
Can users find and operate the calculator and scheduler without confusion?
Does it feel logical?
Does the new layout read as organized compared to the original wireframes?
Participants
- Five young professionals, ages 25 to 35
- Range from financially confident to overwhelmed
- Screened to match the FutureFunds audience
- Moderated, think-aloud sessions, about 30 minutes each
Tasks
- First impressions: what is this and who is it for?
- Find the tool that shows how savings could grow
- Show how you would schedule a time to talk
- Interpret the articles section, and would you click it?
Bias is controlled with neutral facilitator language, open-ended scenarios rather than step-by-step instructions, and a reminder that there are no wrong answers. Recordings are reviewed afterward for unintentional cues, and findings feed back into the design before any development.
Twelve slides, start to finish.
The complete critique, redesign, and usability test plan, presented as a UX and UI training deck.
View the Full Presentation