We are building a small tool to compare mortgage terms and their impact on the user's finances in the long term.

How would you best visually convey that one result is better than the other? This is our attempt:

enter image description here

Additionally, what do you think about the text block structure in the explanation below for comparing these two mortgage options? Are there other ways we could better compare 2 results in a text-like format?

Here's the full design for context.

  • I thought about putting an answer, but it will be too extensive, there are many design flaws. The question seems simple but ... You need a graphic designer ;) – Danielillo Aug 28 at 18:36
  • thanks @Danielillo. Unfortunately hiring a graphic designer is not something we can do right now. Any feedback would be appreciated. – jgozal Aug 28 at 18:47

At first, you really need a UX Designer or just a web designer.

I will not do it for you, but you can easily find some ideas searching by "comparison infographic" on Pinterest and on Google images.

My tip for your current layout:

  • Keep the layout clean, out less information on the current view of the screen. Maybe form on top and comparison table below.
  • Add a division line, the $37...more block makes the user confuse and break the imaginary "division line".
  • Maybe centralize the text.
  • Add light background to create rows of divisions.

And if nothing works nice don't be afraid use, temporally, some Excel visual to make it easier for the user read.

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.