New Design: Third Street

Ivella HQ
Written by 
Kahlil Lalji
November 4, 2022

Today, we're excited to announce Third Street – a new design system that marks an important milestone in Ivella's journey inspired by the location of our first office on Third Street Promenade in Santa Monica.

Over the past few months, we’ve been aggregating insights from our users to rethink how we can deliver the Ivella experience in a faster, cleaner, and more delightful way. The culmination of that is Third Street, and it’s the product of roughly two months of work between our design and engineering teams.

With such a drastic update, we wanted to take some time to highlight some of the product and design challenges that we were working to address over the last couple of months.

Third Street

As we’ve talked about in previous posts, our goal is not just to serve couples that are interested in programmatically splitting expenses, but instead to serve all couples with financial products designed for various relationship stages. In order to realize this goal, we needed a scalable design system that would support future Ivella products. With Third Street, we streamlined a handful of visual styles that we had pieced together over the last year to help aid in this mission.

An example of an area where our existing design system failed to meet our users' needs was in the context of drop shadows. In many instances, we used drop shadows to denote elements that were interactable. At the same time, however, we also used flat elements with strokes to denote elements that were interactable. This often led to confusion about what was a button, what functioned like a button, and what wasn’t a button.

Further, modularity was a concept that was nearly non-existent in our existing design system. As an example, when adding ATM discovery, we placed it in the settings menu because there wasn't a better way to align it with a user’s balance (where it would have made more contextual sense). With Third Street, we've done a much better job of defining various sections of the app and categorizing related features.

Profile & Connection

With Third Street, we’ve also re-introduced Profile. In the past, Profile cards were a one-dimensional feature that served solely to show you & your partner’s balance. However, in our efforts to do a better job of reorganizing various features with the app, Profile now provides users the chance to quickly glance at important aspects of their balance and their relationship, such as account & routing numbers, low-balance alerts, Split Ratio, etc. directly from the Dashboard.

Transactions

When redesigning transactions, we set out to make the experience 1) more modular, 2) more intuitive, and 3) more cohesive. Over time, we'd periodically added transaction types to support disconnected partners, card funding, wire payments, referral bonuses, etc. and all of these transaction types had taken on various information structures. The most obvious example of this disarray is that our transaction screens used ~5 different header layouts depending on what type of transaction was being displayed. This was a clear failure in being able to organize information in a consistent and predictable manner.

With Third Street, we've adopted one consistent information hierarchy, and sections were then added or redacted based on necessity (e.g. ACH deposits have a status tracker and instant card funding shows a section regarding fees). This concept is similar to the idea written about Sections in this article about Airbnb’s Server-Driven UI.

Further, we fundamentally changed the look and feel of the ratio slider to be one in which users could push & pull the ratio of either partner and the alternate slider would adjust accordingly. We believe that this change will improve the clarity that these sliders are adjusting the payment obligations of both parties bilaterally.

Connect to Partner

Outside of registration, Connect to Partner is one of the first flows users complete on Ivella. This may be the first time users realize Ivella is truly a multiplayer experience as opposed to a single-player one used by traditional banking experiences.

In addition to highlighting the importance of this flow, we wanted to make it more playful and experimental for couples. One approach we've taken was shifting away from users setting their own profile photos and instead, having their partners set it for them. From our understanding, this idea was first popularized by Tuned (the Facebook NPE app) before they shut down.

Over the next couple of releases, users will see further changes to this flow that have the goal of both increased account activation and product delight.

Safe to Split

Before Third Street, we had three separate ideas around balance:

  1. My balance - the balance in your account.
  2. Partner’s balance - the balance in your partner’s account.
  3. Shared balance - an aggregate of these two individual balances.

While "My Balance" and "Partner's Balance" were relatively straightforward, the concept of “Shared Balance” led to some confusion regarding the user’s spending power. Even though this balance is just an aggregate of the two individual balances, users can’t necessarily transact against this full amount unless both parties have sufficient balance to split all transactions.

In response, we created the concept of “Safe to Split” to accurately depict to users the greatest value that they can split between them at any given time. Safe to Split takes in the two individual account balances, the given account ratio, and calculates the maximum value a couple can spend before one user’s balance zeroes out. For example, if both partners had $100.00 in their account and a Split Ratio of 50/50, then their Safe to Split would be $200.00. However, if one of the partners had only $50.00 in their account, then their Safe to Split balance would be $100.00.

This is just a glimpse into the way we think about product at Ivella and we hope you enjoy Third Street half as much as we enjoyed developing it. While this new design system won’t solve all of our future product challenges, it will serve as an instrumental piece in launching joint accounts over the next few months. As always, our user base is growing rapidly, and we’re expanding our team across design, engineering, and marketing. If you’re interested in joining us please send an email to careers@ivella.com with your resume and the most interesting thing you’ve done. We’d love to have you join the ride.