Refresh Mint for iOS 11

Responsibilities: Visual Design, Product Design
Team: Product Designer (me), Illustrator, 2 iOS engineers

Background

 

Mint has had a complicated history over the last few years, which led the product to lag far behind in terms of design. For over a year and half, Mint was focused on their acquisition Check (now Bills in Mint), bringing it up to brand, and then later merging it into the Mint product itself. The Android app got some attention when the new Material Design Language was released, and a few designers created a SWAT team to update the Android design.

iOS never got its own SWAT team. iOS has been updating their design language slowly but surely since iOS7. The last refresh Mint got was during the iOS 7/8 design. Much of the new design from iOS 10 Apple Music, News, iTunes Store was never brought into Mint. This led to Mint's iOS app basically looking like the iOS 8 settings app

Approach

 

With growing competition in the finance category, as well as iOS 11's radical new design guidelines, a visual refresh was imminent. 

The current design had several issues right off the bat

  1. The card structures are limiting, designers weren't able to surface up new content or highlight certain content within the cards

  2. The green header takes up all the attention, and it makes it harder to place compelling visuals underneath the bright green header

  3. The cards structure takes up a lot of screen space, leaving less for content, making the overview crowded (i.e. the margin between the edge of the screen and card, padding within the card, top and bottom shadows)

  4. Lack of unique views that can be used beneath the Overview level - most of our views are simply list views, few patterns for organizing information with hero elements, and establishing a hierarchy 

  5. Our new illustration style did not fit into the app

Click around both prototypes to see the redesigned elements

BEFORE

 

AFTER

 

Aro+Ha_0387.jpg
Large+JPG-Aro+Ha_0638.jpg