Out with the old and in with the new

[fisicx]

I've been developing this plugin for a while and was never really happy with the design (because I've got the design skills of a cabbage):

404 Not Found

So I did what I advise many to do and paid for some help. This is the result:

Plugin Demonstrator

This page is used to demonstrate comparison plugins.

demo.bankcomparisonplugin.com

I'm pretty pleased with how it looks.

But you may not feel the same. Your views are solicited

 

[Shopclicks]

Like the look much better.

On mobile, the results fields don't appear to be changing with the slider inputs. Works fine on desktop.

 

[Nick@Daydot]

New one looks good. One thing the old one had going for it was more grouping and separation, although it's clear enough where each card starts and ends with the new one. I wonder though if that separation could be strengthened slightly?
I guess as a user I might be wondering who some of these companies are. It is possible to enable a sentence or two with this information?
Some of the things that have been filtered for don't show up all the time. I've seen this lead to doubt as to whether the item is absent or the system is broken. It might not be a problem but I'd at least want to look at a design that is explicit that some filters don't apply and eventually AB test it.

 

[UKSBD]

Is the special offer thing supposed to be right in the middle?
You don't know if it applies to the top one or the bottom one at the moment

 

[Shopclicks]

On mobile, the results fields don't appear to be changing with the slider inputs. Works fine on desktop.

Working on mobile now.

 

[fisicx]

Thanks for the comments so far.

@Shopclicks

The values weren't updating because I'd called to wrong variable in the jQuery.

@Nick@Daydot

I've added a bit of CSS3 so the cards now have alternate backgrounds.

The more Info bit is where you can add some words about the business. And you will see there is a link in the more info box to a potential bank page.

This is just a demo with a limited data set. What I normally show is a 'there are no matches' message below the filters if you have set the sliders and filters to some strange combination. But I do get your point.

@UKSBD

I've moved the offer box down a bit so it clearer who it refers to.

For those looking at this thread for the first time - what you see now isn't what we started with. I'm doing lots of fiddling.

 

[Nick@Daydot]

@Nick@Daydot

I've added a bit of CSS3 so the cards now have alternate backgrounds.

Getting into finer detail I'd make the shading a bit lighter. I find it has the effect of emphasising the shaded items and sending the others to the background. It also loses some contrast with elements in the box which would likely impact accessibility.

 

[fisicx]

Done. Also going to have a play and see how it looks without the borders.

 

[Paul Kelly ICHYB]

Whilst the new one is slicker, the old one isn't that bad and is a great foundation to build on, as the second one shows.