Scribd
Upload
5 views3 pages

Untitled Document

The document outlines the UI/UX design requirements for a personal finance website aimed at Canadians, to be created using Figma. It emphasizes a clean, modern, and user-friendly design across various pages including Home, Sign Up, User Dashboard, and more, while ensuring responsiveness for all devices. Key features include income and expense tracking, retirement calculations, investment tracking, and future bank linking capabilities.

Uploaded by

maraj ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views3 pages

Untitled Document

The document outlines the UI/UX design requirements for a personal finance website aimed at Canadians, to be created using Figma. It emphasizes a clean, modern, and user-friendly design across various pages including Home, Sign Up, User Dashboard, and more, while ensuring responsiveness for all devices. Key features include income and expense tracking, retirement calculations, investment tracking, and future bank linking capabilities.

Uploaded by

maraj ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

UI/UX Design Requirements (Figma)

This project is for designing a personal finance website like Empower.com but for
Canadians. The UI/UX design should be simple, modern, and easy to use. The design will be
created using Figma.

The goal is to make the website clear and user-friendly, so people can easily track their
money, plan for retirement, and manage their finances.

1. General Design Guidelines


✅ The design should be clean, modern, and professional.​
✅ The website should work well on mobile, tablet, and desktop (responsive design).​
✅ Use easy-to-read fonts and clear icons.​
✅ Follow a simple and organized layout, so users can easily find what they need.​
✅ Keep consistent colors, buttons, and spacing across all pages.

2. Pages to Design in Figma


1️⃣ Home Page

●​ A simple and welcoming homepage introducing the website.


●​ A section explaining how the platform works.
●​ A Call-to-Action button (e.g., “Sign Up Now”).

2️⃣ Sign Up & Login Page

●​ A clean and simple signup page with fields for email and password.
●​ A login page with "Forgot Password?" option.
●​ Buttons for Google and Facebook login (if needed).

3️⃣ User Dashboard

●​ A clean and organized dashboard after users log in.


●​ Show an overview of:
○​ Total Income & Expenses
○​ Retirement Savings Progress
○​ Investment Overview
●​ The dashboard should be easy to navigate.

4️⃣ Income & Expense Tracking Page

●​ Users should be able to enter income and expenses.


●​ Fields for:
○​ Amount
○​ Category (e.g., salary, rent, groceries, bills)
○​ Date
●​ A table or list showing past transactions.

5️⃣ Retirement Calculator Page

●​ Users enter:
○​ Current savings
○​ Monthly savings
○​ Retirement age goal
●​ Show a simple result box that estimates how long their money will last.
●​ The client mentioned www.myOwnFp.com as a reference for retirement planning. (Use
this as inspiration).

🔗 Reference Link: www.myOwnFp.com


6️⃣ Investment Tracking Page

●​ A page where users can track their investments.


●​ Show a sample portfolio layout with placeholders.
●​ Add a section for Google Finance integration.
●​ The client mentioned Quicken.com as a competitor. Use it for design ideas.

🔗 Reference Link: www.quicken.com


7️⃣ Bank Linking Page

●​ A page where users can connect their bank accounts.


●​ Include a Plaid button for future integration.
●​ Show a message: “Bank linking will be available soon”.

8️⃣ Additional Features Page

●​ A section for future tools that may be added later.


●​ The client may want automated tracking in the future, so leave space for it.
3. Important Notes
✅ Focus on UI/UX only (This is a design job, not development).​
✅ Keep the design clean, simple, and easy to understand.​
✅ Make sure all pages are responsive for mobile, tablet, and desktop.​
✅ Use www.myOwnFp.com and www.quicken.com for inspiration

You might also like