Future Funds
High-fidelity responsive landing page mockups for the financial planning company FutureFunds. This landing page should be cohesive across devices and include features offered by FutureFunds, specifically service offerings, financial calculator, appointment scheduler, recent blog posts, and testimonials.
Service
UI/UX, Web Design
Client
College Project
Year
2024
Future
Funds
Design Brief
Mission:
FutureFunds Financial Planning was founded in the early 2000s with a singular mission: to empower young professionals to achieve financial success and security. Their company is committed to helping the next generation make informed financial decisions that will shape their future.
Objective:
Through this redesigned landing page, FutureFunds aims to strengthen their online presence and better connect with their target audience . The page will serve as a gateway for young professionals to discover the benefits of financial planning with FutureFunds. Along with content that introduces the company to prospective clients, FutureFunds has outlined a set of features they would like to see in this landing experience:
Requested Features:
-
Service Offerings: Provide a concise list of services that FutureFunds offers their clients. This list could be a full list or just the most popular services.
-
Financial Calculator: Provide a calculator to estimate returns clients could expect when investing.
-
Appointment Scheduling: Provide a quick way to schedule a consultation appointment with a list of available appointment slots.
-
Recent Blog Posts: FutureFunds runs their own educational blog with new posts that come out weekly. Recent blog topics should be visible on the page to encourage visitors to click through to full blog posts.
-
Testimonials: FutureFunds has a strong online reputation with thousands of positive reviews. They would like to highlight these reviews somewhere in this landing experience.
User Personas
Emily, 28
-
Technically proficient professional
-
Passionate about her financial future
-
Well-educated in financial topics.
Looking for:
-
Personalized advice and guidance tailored to her financial goal. Including:
-
Saving for a down payment
-
Investing for retirement.
-
-
Trustworthy company
-
Tools and calculators
-
Transparent with its pricing
Ethan, 27
-
Recently started making a good income
-
Lacks financial planning knowledge
-
Seeking education that will help him gain future economic success
-
Wants to set himself up for a secure financial future, including:
-
Emergency fund
-
Investing
-
Looking for:
-
Financial tools and calculators
-
Value for cost
Raj, 29
-
Riddled with student loans and credit card debt.
-
Reducing his debt is his top priority
Looking for:
-
Solid financial foundation
-
Option to utilize debt calculators and budgeting tools
-
Affordable service that provides:
-
Empathy
-
Guidance on financial planning
-
Strategy to get out of debt and on his way to financial success
-
Problem Statement
As a young person with financial goals, I need a service that understands my challenges and aspirations and provides educational and financial tools to help me navigate the complexities of financial planning, setting me up for a successful future.
We can then further this statement by adding a supporting question:
How might we provide an approachable experience for young users to achieve their personalized goals in financial planning?
Final Designs
The user-centric design of this landing page uses clearly marked headings, call-to-action buttons, and links. This helps reduce the users’ cognitive load by telling them exactly what they can expect when visiting a link or clicking on a button within the website.
I switched the order in which the information was presented to the user from the original wireframes. We start with an introduction to give users a quick snippet about FutureFunds. This allows the user to decide if they are in the right place and want to continue learning more. Next, we introduce our services. This reinforces that the user is in the correct place and allows them to look more in-depth into whether the company offers the services they seek.
Since calculators and financial education were very important to our personas created from target audience research, the following two sections are the user's first exposure to them. This keeps these sections high in the hierarchy, and the user gets to check them off the list of things they are looking for within a company.
By presenting the information in this order, we have gained the user’s trust by giving them insights into what FutureFunds offers regarding services. This creates hierarchy and context within the design.
Now is our chance to reinforce their trust with reviews, and after that is the form to schedule a consultation. It’s important to note that throughout the landing page, there is a call-to-action within each section. This reduces cognitive load by allowing the user to learn more information or schedule a consult at any given point.
Due to the young demographic and the needs of the personas of our target audience, I wanted the imagery to feel fun and approachable. A critical pain point is that potential users get overwhelmed by the thought of future planning. Utilizing cartoony imagery tempers the seriousness of finances and communicates how the company may interact with its customers and approach its services.
Web vs. Mobile
The first design aspect to consider when designing for desktop and mobile is responsive design. Responsive design uses break points in a layout to determine which point the context will break to accommodate smaller and larger screen sizes (Kelley Gordon). For example, in our “What’s your potential?” section, the calculator form and components are side by side for the desktop version and stacked on top of each other for the mobile version. You can see examples of responsive design throughout the landing page. This ensures the user can still easily read the content and has enough room to interact with the content.
This brings us to consider how the user interacts with the devices. On desktop, it is most likely a mouse; tablets can utilize digital pencils and fingers; and mobile devices, mostly fingers, primarily thumbs, are used. How the user interacts directly affects the precision of their clicks and the space clickable elements need around them so the user doesn’t accidentally click the wrong thing. This can be frustrating for the user and cause them to simply leave the site, not the desired response for the company. For example, in the “Our Services” section, you can see that in the desktop design, the “learn,” “invest,” and “save” buttons are on the right-hand side next to the content that is reached when clicking on them. In the mobile version, they are spaced evenly across the top of the page to allow ample room for the user to accurately click each button, delivering them the information they are seeking.
