Spending assistant for monthly utility bill

My first Dribbble shot. Here it is! I’d like to thank @dannykeane for the invite :)

I designed this UI for ENGIE, a Dutch utility provider (gas and electricity). The flexibility to choose your own monthly installment is a key feature of this app. The importance of guiding users to choose a correct amount is high; it prevents them from having to pay an additional sum at the end of each year.

By having or choosing an amount that’s too low, the red background serves as a warning and the textual advice explains users the consequences of this action.

Note how the background color of the slider guides users in choosing at least a safe installment. By dragging the slider to ‘safe space’, the background color changes to a positive blue. We don’t specificly guide users to set the slider to a specific amount though. Some users like the added ‘safety’ of a higher amount, and a possible refund at the end of a year.

I designed, prototyped and tested this feature with users. It has been in production (iOS and Android) for about half a year. Hope you like it!