Rebuilding Mint’s UI From the Ground Up Using CardParts (iOS)

Chase Roossin
Oct 3, 2018 · 3 min read

Written and edited by Deniz Tumer & Chase Roossin

It’s impossible! Too ambitious! Overhauling the user interface of Mint — a multi-feature iOS application that has not changed significantly since it’s launch in 2008 — seems like a daunting endeavor. How was our development team able to accomplish this redesign? Easy. We used a UI framework we built called CardParts.

Image for post
Image for post

What is CardParts?

“…great use of POP to separate out display traits, and 💯 for view controller containment.” — Paul Hudson, Hacking with Swift

The primary intent of CardParts is to provide a UI architecture that is easy to build with and even easier to test. Developers can apply protocol-driven traits to their cards and leverage the MVVM design paradigm to shift complex logic away from view controllers and into view models. Creating this view controller containment allows for the view model logic to be tested easily and separately from view controllers.

What Did We Do?

To achieve this goal of revamping the customer experience we leveraged everything that CardParts has to offer. We employed a MVVM architecture, and utilized custom traits to fully customize the user experience and provide a wide variety of features in MintSights. Let’s walk through our process for the MintSight card.

The MintSight card is a colorful and uniform card that grabs the user’s attention. Each card contains similar design elements — an icon, title, and description. We were able to create a generic view controller and view model to support this functionality and create a reactive UI. The following are examples of the view controller and view model code:

Example of the view controller code used for MintSights
Example of the view model code used for MintSights

CardParts utilizes the power of RxSwift to create reactive UIs — binding data from our view models to view controllers. This allows for any changes in the view model data to be reflected immediately in the UI! All that is left is to setup a listener that enabled changes in the internal Realm persistence database to be reflected in the UI. Here is an example of how we accomplished that:

Listen to the Realm changes, apply logic, then update the values which are binded to the MintsightCardViewController

And it was as easy as that! Leveraging CardParts enabled us to create a minimum viable product in just a few days. We were able to spend more time adding complex feature that would provide users with insight into their personal finances.

What we learned

  1. Network Response
  2. Persist in Realm
  3. viewModel notified via Realm notification block
  4. Apply logic on cached data returned from notification block
  5. Change reactive variables in viewModel
  6. UI updates due to be being bound to aforementioned reactive variables

Our ViewController practically consists only of UI setup such as fonts, colors, margins, etc. while our viewModels do all the heavy lifting of data manipulation — thus we can easily test these viewModels and ensure they are acting as desired.

Final Thoughts

We just recently open-sourced CardParts to allow everyone to leverage its benefits. Visit our GitHub page and help us make CardParts one of the most powerful card-based UI frameworks out there! We hope that CardParts can also help you rebuild your application’s UI in just three weeks!

Shoutout to the Mint iOS Engineering Team

Intuit Engineering

Thoughts from Intuit on tech, data, design, and the culture…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store