i need to solve following business requirement:

User gets a monthly premium (price in $) proposal based on his input of:

  • Term (for how long will be paying monthly premium - in years)
  • Sum assured (insured sum - in thousands of $ )

Monthly premium is higher if he enters higher premium and term. We need to give him option to "play" and recalculate offer:

  • by changing monthly premium that he needs to pay by recalculating sum assured and term
  • by changing sum assured that he needs to insure by changing monthly premium and term

Some basic sketches are here:

enter image description here

My Questions are:

  • Are there some examples of design patterns for this problem?
  • Does someone have more elegant idea to solve this one?
  • 2
    I'd suggest gathering ideas from banking websites that provide loans and even car manufactures sites who provide finance options. I personally like the BMW finance calculators use of sliders and toggles. – sclarke Mar 29 '18 at 12:57

Your solution is actually pretty good and simple to use... only thing i can think of is to improve that by using a radio buttons to eliminate one extra step in the process.

enter image description here


Something that crosses my mind is the input of a calendar item. There you can change starttime, endtime or duration. Each change will affect one of the other inputs.

The logic in calendars usualy is, that the longest not changed inputfield will be affected. This is correct for most of the cases, because the field that has changed last is probably the value the user wants to keep.

I haven't thought this through for your case, but it could work. But maybe you could check if this pattern works with your problem.


If more graphic approach is possible, consider this:


download bmml source – Wireframes created with Balsamiq Mockups

The problem with three dependent fields (roughly A*B=C) is "what exactly needs to be adjusted when you want to change just one value". In the diagram you can:

  • drag horizontal line to adjust monthly premium and keep cover amount unchanged - the circle will move along that hyperbole, so term will be adjusted
  • drag vertical line to adjust term and keep cover amount unchanged - the circle will move along that hyperbole, so monthly premium will be adjusted
  • drag the circle - you will change everything, but the point is to move it to another "level" - cover amount. It could work well with some "snap to line" behavior.

It's just for the inspiration, you don't need to fix to "math" visualization, just any rectangle would work (change in width adjusts height and vice versa, and dragging its upper right corner will adjusts its surface).


You can use for all infos regular input fields, and just do the real time update whenever digit is changed.. It will be clear enough for user, and user will be able to change all fields and get info right away.

If so, you can place some initial values in for first scenario as an example. You can enhance the functionality with small suggested boxes with values below the fields, then on click on those boxes update all numbers accordingly.

Plus many more ways to make this enjoyable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.