Rally

Rally is a personal finance app that uses Material Design components and Material Theming to create an on-brand experience with a data-driven aesthetic.


About Rally


Rally is a personal finance app that tracks spending habits, and generates insights and alerts related to your finances.

Rally is designed to display a large amount of densely organized information in a manageable way. Users are invited to identify patterns in the data presented, by cross-referencing and investigating information.

A premium style

The dark gray UI gives Rally a premium feel, while also allowing its bright accent colors that represent data to stand out against the background. The high contrast between data and the background color make it easy to read its graphs and charts.


Data-driven aesthetic

Rally’s UI focuses on viewing, investigating, and understanding data. Infographics laid out in a dashboard invite the user to view a summary of their spending,...

Read More

Rally’s UI focuses on viewing, investigating, and understanding data. Infographics laid out in a dashboard invite the user to view a summary of their spending, including the details of a single transaction.

The UI is dense and direct, with an emphasis on typography, color, and shape.



Product architecture

Rally’s information architecture has a hierarchical structure, allowing users to look at their finances through a variety of categories. The financial overview provides the most general version of this category, with an individual transaction being the most detailed category in the structure.

Content

Content is divided into sections related to personal finance, such as accounts, budgets, and bills. Rally’s home page operates as a hub to these sections.

Because Rally is concentrated on presenting and describing different areas of personal finance, it’s important that users can easily move between sections. A permanent location for navigation makes it easy for users to switch sections easily. On desktop and tablet, Rally uses rail navigation. On mobile, Rally uses tabs. These navigation patterns are ideal because although they are always on-screen, they take up very little space.

Rally on desktop, tablet, and mobile


Rail navigation

On desktop and tablet, Rally uses rail navigation. Rail navigation provides a permanent region to navigate between sections, while taking up little screen space. In...

Read More

On desktop and tablet, Rally uses rail navigation.

Rail navigation provides a permanent region to navigate between sections, while taking up little screen space.

In a rail, each destination is represented by a unique icon. When a section is selected, it’s icon becomes brighter and a section title is displayed.

Rally’s rail navigation on desktop

Tabs

On mobile, Rally uses customized tabs to navigate between sections. Unselected tabs are represented by icons. When a tab is selected, it displays a section...

Read More

On mobile, Rally uses customized tabs to navigate between sections.

Tab selection

Unselected tabs are represented by icons. When a tab is selected, it displays a section title adjacent to the icon. Tabs make navigation persistently available, while taking up as little space as possible.

Rally’s tab navigation on mobile



Layout

Grid system

Rally uses a responsive grid system, which has flexible columns and padding that can resize to accommodate any screen width. The Material Design responsive layout...

Read More

Elevation

Rally expresses elevation differences between UI elements using color or a scrim.

Read More

Rally expresses elevation differences between UI elements using color or a scrim.

Rally uses color to differentiate elements. For example, to ensure a graph is distinct from a list scrolling beneath it, the graph and list each use a different tones of gray.

When a dialog appears, a blurry scrim behind it indicates the dialog’s elevation is above the rest of the UI.


Color

Sometimes Rally needs to show multiple infographics on a single screen, each with multiple sections. To do this, Rally has adopted a color theme with one primary color, and five additional colors. This elaborate color theme allows Rally to present readable, distinct infographics.

When three infographics appear on the same screen, each uses two colors from the theme:

  1. The first infographic uses: Primary Green and Dark Green.
  2. The second infographic uses Orange and Yellow.
  3. The third infographic uses: Purple and Blue.

Scaled down to 75%

Color theme

Rally’s color theme has one primary color and five additional colors. It also has an extended palette consisting of ten swatches: a swatch for the...

Read More

Rally’s color theme has one primary color and five additional colors. It also has an extended palette consisting of ten swatches: a swatch for the primary color (or an alternative primary color), and nine variations of that swatch.

Rally uses swatches from these extended palettes to present robust, readable infographics.

The extended palette for the six colors in Rally’s color theme:

  • A circle-shaped swatch indicates that the swatch is used in the app
  • A circle-shaped swatch with an “P” indicates the swatch as a primary color
  • A circle-shaped swatch without a letter indicates the swatch as an additional color

Typography

Typefaces

Rally uses two typefaces: Eczar and Roboto Condensed.

Read More

Rally uses two typefaces: Eczar and Roboto Condensed.

1. Roboto Condensed

2. Eczar

Type scale

Rally’s type scale provides the typographic variety necessary for the app content. Most copy is set in Roboto Condensed, though Eczar is used for headlines...

Read More

Eczar

Eczar performs well as both body text and display (heading) sizes, as it uses serifs which make it easy to read at different sizes. Eczar...

Read More

Eczar performs well as both body text and display (heading) sizes, as it uses serifs which make it easy to read at different sizes.

Eczar is a display typeface for numbers placed in the center of the infographics, as well as dollar amounts in lists.

Eczar’s letterforms

Eczar compared to Roboto

Roboto Condensed

Roboto Condensed is used for all of Rally’s body copy, button text, and headline text. This condensed sans serif remains legible onscreen, and its compact...

Read More

Roboto Condensed is used for all of Rally’s body copy, button text, and headline text.

This condensed sans serif remains legible onscreen, and its compact size makes it fit into Rally’s dense layout.

Letterforms of Roboto Condensed

Roboto Condensed compared to Roboto


Iconography

Rally uses custom iconography to represent to its four main sections: Overview, Accounts, Bills, Budgets, and Settings.

The icons use curved forms and sharp corners that resemble the shape of Rally’s typography.

1. To create consistency, all of Rally’s icons share the same underlying grid structure. 2. A collection of Rally’s icons.


Components

Cards and lists

Rally provides users with an overview of their finances, providing both macro and micro views of each transaction. The card component is used for macro...

Read More

Various financial views

Rally provides users with an overview of their finances, providing both macro and micro views of each transaction. The card component is used for macro views in the app’s main sections. For specific itemized lists, Rally uses the list component.

These card and list components have been customized to use Rally’s color theme and typeface. List items include colors, so that users can relate each line item to the corresponding graph.

Rally’s overview page uses cards to present various financial summaries, such as “Accounts” and “Bills.”

When a card like “Accounts” is pressed, the summary information from the card is shown in more detail in a list.

Banners, dialogs, and snackbars

Rally uses banners to deliver low-priority messages. These banners are customized with Rally’s color and typography, and they’re often paired with an icon associated with...

Read More

Banners

Rally uses banners to deliver low-priority messages. These banners are customized with Rally’s color and typography, and they’re often paired with an icon associated with a specific area of finance.

Snackbars and dialogs

Higher-priority messages that need increased visibility are communicated in snackbars or dialogs. They don’t contain icons and are customized with Rally’s color and typography.

On tablet, banners are surfaced in the upper right corner, appearing directly after rail navigation.

On mobile, banners are the first item on the overview screen.

On large desktop screens, banners are displayed (and archived) in their own column.

Dialogs are used to deliver high-priority messages.

Snackbars are used to deliver high-priority messages.

Rail

On desktop and tablet, Rally uses rail navigation. When a section is selected, it displays a text label and a brighter color in the rail.

Read More

On desktop and tablet, Rally uses rail navigation. When a section is selected, it displays a text label and a brighter color in the rail.

Rail navigation on desktop

Tabs

On mobile, Rally uses tabs for navigation, with each tab represented by an icon. These tabs have no container, and display text only upon selection....

Read More

On mobile, Rally uses tabs for navigation, with each tab represented by an icon. These tabs have no container, and display text only upon selection.

The tabs occupy fixed positions, without scrolling. When a new tab is tapped, they shift and redistribute themselves horizontally.

Tabs are used for navigation on mobile

1. A tab that has not been customized. 2. Rally’s tabs use custom typography, iconography, color, and states. Only selected icons have text.


Motion

Rally has a simple and reserved motion style to help balance the visual density of the UI.

Launch screen

Rally displays an animated logo on first launch to set a polished tone.

Read More

Rally displays an animated logo on first launch to set a polished tone.

Rally’s launch screen

Navigation transitions

Rally uses standard easing and durations for navigational transitions to keep the motion style streamlined. Navigational transitions are movements between states in an app, such...

Read More

Rally uses standard easing and durations for navigational transitions to keep the motion style streamlined.

Parent-child transitions

Opening an account uses a parent-child navigational transition. A subtle use of scale is used on background content to add a sense of depth.

Peer transitions

Selecting tabs use a peer navigation transition.

Sequencing

Stagger is used to add polish when introducing new elements like a list. A temporal offset is used to emphasise the circular graph since it’s...

Read More

Stagger is used to add polish when introducing new elements like a list. A temporal offset is used to emphasise the circular graph since it’s a prominent part of the UI.

List items have a staggered entrance from top to bottom after loading is complete.

Overshoot

Overshoot is used on important dialogs to convey a sense of urgency.

Read More

Overshoot is used on important dialogs to convey a sense of urgency.

A dialog enters with overshoot.