Grain Design System

Summer 2019

Grain is a YC-backed fintech company with a goal to give people fair access to credit and help users raise their credit score using their existing debit card.

As lead designer, I redesigned the current app from the ground up and implemented a design system to support new product initiatives.

Design Goals:

  • Educate users about good credit use
  • Help users not feel negatively about credit
  • Urge users to pay attention to improving their credit standing
  • Implement methods to facilitate userbase growth

Designing For Trust

In the fintech space, it’s crucial to design products that users can trust, not only for security purposes, but for longevity in creating a relationship with customers. Design plays an immediate role in how someone can perceive the platform in reference to other software they’re familiar with, through both visual and product interaction standpoints.

To reinforce calmness and approachability, I used a blue-based color scheme throughout the app. Being one of the first fintech companies to display a user’s credit utilization ratio, (how much of their credit limit they’re using), I introduced a second palette to correspond to certain ranges in both utilization and credit score.

Credit Zones to Educate on Credit Standing

Credit utilization is one of the biggest impacts on a credit score. I designed three different zones to educate users on the severity as it approaches 100%.

By having three zones, the user can grasp their current credit standing right away, through response to red, orange, and green. I used this on the home tab, credit tab, and for knowing which zone you’ll be in after you make certain payment amounts.

For example, making a large withdraw and being at 80% utilization will show red, an immediate message to users that something is in danger (their credit score).

Raising Positivity About Credit

One of Grain’s core features is automated credit withdraws and payments, where the app can deposit money into their account automatically based on their spending habits and pay it off when it knows that a user can afford it.

Through this process, the user is raising their credit score automatically, taking no actions themselves. This opened a perfect opportunity to put a spotlight on a user’s credit score.

I hypothesized that by highlighting a user’s personal progress very blatantly in the app, users would continue to come back just to check their score. Through customer interviews, I validated that this stood true when displaying their score front and center.

Improving Users’ Current Credit Standing

To provide more depth to a user’s personal outlook, the app displays the reasons that their score isn’t higher.

To stay consistent with the visual cues throughout the app, I used the four colors ranging from danger to success to correlate to the severity that each factor has in reference to impacting credit score.

Designing in Product Scope

The whole app is crafted in terms of visual and written content to contribute to the process of users’ understanding and learning more about credit. In this regard, building the design system not only provided visual organization, but also a standardized way to explain complex topics.