Project Overview
This project began with a request to help a junior designer improve their initial wireframes for a FutureFunds Financial Planning landing page. The goal was to create an online experience that would better connect FutureFunds with young professionals and encourage new visitors to become clients. The original wireframes included features requested by the client, such as service offerings, testimonials, appointment scheduling, recent blog posts, and a financial calculator.
I reviewed the existing wireframes and identified several usability and visual design issues, including unclear information hierarchy, excessive content, confusing navigation, insufficient spacing between sections, and unclear button functions. User feedback reinforced these concerns, with participants describing the page as overwhelming and having difficulty understanding where to find information or what certain elements were intended to do.
After identifying these problems, I developed recommendations for improving the information architecture, hierarchy, navigation, and overall user experience. I then applied those improvements by creating the updated UI design in Figma. The redesigned interface maintains the client’s established FutureFunds branding while creating a clearer, more organized experience that prioritizes the information and actions users need most.
Initial Wireframes
Created by the junior designer
User Feedback on Initial Wireframes
https://acrobat.adobe.com/id/urn:aaid:sc:US:726688f6-8b47-4961-a0b4-7cac54c0e170
My High-fidelity UI
Desktop
Mobile
My Design Process
Step One: Empathize
Reviewed the junior designer’s wireframes, client brief, and target personas to understand the existing design and users’ financial planning needs.
Step Two: Define
Identified usability and visual design problems, including poor hierarchy, excessive content, unclear navigation, insufficient spacing, and confusing calls to action.
Step Three: Ideate
Researched competitors and explored solutions for reorganizing content and creating a clearer user flow around FutureFunds’ key services and tools.
Step Four: Prototype
Applied my recommendations by creating a high-fidelity UI in Figma with improved hierarchy, navigation, spacing, and presentation of the client’s required features.
Step Five: Test
Developed usability testing criteria to evaluate feature discoverability, task completion, and users’ overall understanding of the redesigned experience.
My Usability Test Plan
https://acrobat.adobe.com/id/urn:aaid:sc:US:5e749032-e2e1-4ea3-b162-70a6d5074004
Client Brief
https://acrobat.adobe.com/id/urn:aaid:sc:US:e9f469f3-556b-4cdb-b703-0d01a0a16088