Building on a finance app on a time-crunch
Student
As a personal challenge, I asked a professor to give me a UI sprint challenge that would help me learn to adapt, design on the fly, and deliver on a tight schedule.
I was given 8 hours to redesign a finance app's homepage, submitting hi-fidelity wireframes and a short write-up.
To help guide my design, I was given the following instructions and references:
"I want you to redesign the home page of a portfolio management app to create a user-centric and visually appealing experience. The goal is to showcase key portfolio insights in a clean, intuitive, and engaging manner while aligning with modern design principles seen in leading fintech applications."
Key Elements to Include:
- Portfolio Overview: Display critical metrics like total portfolio value, performance (percentage change), and allocation by asset class.
- Recent Activity Section: Showcase recent trades, dividends, or other portfolio-related updates.
- Call-to-Action Buttons: Include actions like “Add Funds,” “Invest Now,” or “View Insights.”
- User Personalization: Design with the assumption that users are data-driven and seeking actionable insights at a glance.
Guidelines
With time in mind, I made very rough wireframes of my initial idea and gathered some inspiration from my are.na board. I designed with simplicity and a seamless userflow in mind. I opted towards a modular design aesthetic that would make adding new features and sections easy.
Ideation and Wireframing
After a few iterations and millions of edits (as many as my time limit would allow) I delivered the following hi fidelity wireframes to my professor
Hi-Fidelity Designs
Typeface:
I went with Nunito, a well balanced sans serif that is modern and clean. This goes hand-in-hand with the apps cutting edge data visualization and theme.
Palette:
I opted for a dark theme that highlights key areas using a pop of color. These instances also help communicate critical financial data such as highlighting the portfolio green when the user has made gains that day or red for losses. Yellow is used as a universal highlight for CTAs and indicators of selection to ensure clarity.
Hierarchy:
The apps hierarchy is structured using a combination of font sizes, weights, and color changes. Headers are semibold (24px), subheadings medium (16px), and body medium (12px). Numerical values are semibold and bold where appropriate. The design prioritizes the user’s main needs by placing current holdings and portfolios at the top, with the CTA to start trading easily accessible.
Layout and Flow:
I opted for a modular, widget-based layout to compartmentalize sections based on their relevant content. This allows for an intuitive flow with easy access to action items. Additionally the modular style makes it incredibly easy to implement additional sections and features as needed.
Writeup
