Project Parameters

Screen Shot 2018-02-28 at 9.44.26 AM.png

These are the original designs that were handed to me from sales showing the features that needed to implement a functional billing system. Originally, all the functions were going to be contained in the side menu and accessible from there. In the old design, there were two balances, an actual balance and an effective balance. It was confusing, so it we decided to only show the effective balance.

User Flow


Due to the number of initial branches, I changed this flow to be top down to make it easier to read. You can see the primary functions from the side menu and the secondary functions below them. 



Transaction History

Transaction history with empty state. Previously I mentioned the fact that we are only showing one balance, I included a tooltip to explain to the user what that balance means. 

Payment Settings

The Payment Settings page is the most involved with payment methods and auto-recharge functions. The first card added becomes the default payment method. There are several points that that will prompt a user to add a card if they haven't yet and turning on auto-recharge is one of them. This is to ensure projects are actually funded and in process rather than queued and waiting to be started. 

Promo Code

Our sales and marketing is heavily pushing a campaign with a promo-code so even though users can sign up with one, users should still be able to apply one if possible. We may release more codes in the future for existing users. being able to add one conveniently is important 


For adding credits, rather than putting it in it's own page, the function exists in the side menu like it does in the original specs. This is to make it as convenient as possible to add more credits is neccessary.