Legibility was prioritized when selecting a typeface. The typeface needed various weights to assist with hierarchy when applying various sizes for each device. SF Pro Display offered a vast range of weights and proved legible in various sizes. Heavier weights at larger sizes were essential for larger devices while smaller, thinner weights were best for the mobile platform. The clean characteristics of the sans serif typeface bring a simple and minimalist style to the interface.

Opting for a clean, bright interface, the dynamic color scheme fortified the required values of trust and playfulness. The analogous colors are harmonious, yet contrast enough for hierarchical purposes. Many financial businesses utilize blue because it evokes calmness, stability, and trust. The purple and pink hues add a youthful element. The analogous colors are refreshing and bring a vibrance to the traditionally mundane, static approach to personal financing.

Iconography is essential for mobile and tablet devices, so having icons that worked in various sizes was key. Solid icons were selected to contrast against the predominately white interface. Following the softened approach of the interface with rounded corners, the icons sought similar roundedness to maintain consistency across the visual elements.

Each device displayed informational graphs and tables. The mobile and tablet devices relied more on visual elements to lead the user through the app. Specifically, the navigation menus, filtering bars, and interactive buttons did the heavy lifting for these devices. The objective for these elements was to be legible in various sizes and have a clear function for each element.

This page displays the user’s cards and corresponding account balances. The contrasting shapes and fills between the cards and the call-to-action button successfully funnels the user’s attention to the primary action for this screen.

This screen provides a concise breakdown of the user’s monthly spending. The transactions card displays the account’s fluctuating funds. The hierarchy successfully structures the numerical data to be quickly comprehended.

This screen displays various numerical breakdowns. This layout is simple and digestible for the user to quickly understand and comprehend. Specifically, a trend of the user’s weekly spending, their budget breakdown, and progress on their savings goal.

Like the mobile app, the user’s cards and balances are displayed. The tablet layout differs with its condensed, vertical navigation bar, prompting the user to hold the tablet vertically. Like the mobile app, the call-to-action button is placed towards the bottom of the screen, thus in a zone of easy reachability for the user.

The screen’s layout follows suit of the mobile app. In both the tablet and mobile app, a nice feature is at the top of the transaction chart. This centered bar allows users to extend the table to see more information and scroll less. The user can adjust how long the table is and how much information is displayed at once.

Bearing resemblense to the mobile app, the three stacked information cards lent themselves nicely to the tablet layout. The cards’ vertical stacking prompts the user to scroll and explore the content. Furthermore, the vertical navigation bar enforces this verticality and orients users to view the app as such on this device.

This screen’s layout prioritizes a horizontal orientation over the vertical orientation of the mobile and tablet devices. Unlike the previous devices, the call-to-action button appears before the cards. The horizontal navigation bar follows UI standards and is how users understand and operate desktop screens. The desktop menu bar allows for larger text, so the previous navigational icons are removed for greater legibility and to follow UI standards.

This screen demonstrates how content is scanned differently based on the device. The narrow mobile and tablet screens promote scanning down the screen. Meanwhile, the wider dimensions of the desktop enforce scanning left to right. The split card layout follows desktop layout conventions that prioritize horizontal over vertical scanning. Likewise, sticky elements commonly reside on the right side with scrollable elements to the left, as demonstrated here.

This screen adheres to the layout reconfigurations for responsive design. The mobile and tablet devices stacked the three cards for this screen. Due to the desktop’s left-to-right reading nature, it was logical to arrange the cards side-by-side rather than stacking them. The full-width graph suits the natural movement of the line as users look left to right. Likewise, the cards below further enforce that scanning pattern associated with the desktop’s width.