A Financial Planning APP
The Project
The app allows users to identify life goals and see an overview of their finances with an easy-to-use, modern online platform.
When visiting the app, users are presented with a number of goal options to choose from, such as saving for retirement, college tuition, or buying a home. After clicking on a goal, users are then taken to a page that has the option to book an appointment with an advisor.
User Flow
This user flow is most-simplified version that shows only the user journey who uses the app for the first time.
UI Docs
To ensure a smooth and accurate handoff to our devs, a design document, so called UI docs, is created to indicate all the interactions, restrictions, and rules. It's probably not the most efficient way to wrap up the work but rarely confusing when connecting with various teams from different perspectives.
Design System - Typography
We consider UX throughout - design system is not exempt. For web responsiveness, we use rem as the unit for the font size as well as leading. That means, not only font size will be scaled for different devices, the line height will be adjusted accordingly.
Design System - Atomic Design
"Atomic design is a methodology for creating deliberate, hierarchical user interface design systems. Like Russian nesting dolls, little components are included in bigger components which are included in bigger components which eventually create entire screens." We apply the methodology of Atomic Design to help unifying UI components in a hierarchical, interconnected manner.
Fully responsive
