Design Recommendation for Pricing Page

There is this page that has a list of prices. I find this design rather crowded and am looking at using pricing tables for a lot of this data.

Would organizing this data in a pricing table be the best route? Or is there a better idea?

They are definitely easier to view as one column (as seen by your narrower, responsive version).

It definitely needs some more organization. Design generally is beautiful but the prices windows should be aligned, or perhaps all of this could have a drop down menu. Now one part of the chart (lets say Fox Classic - Regular) looks squeezed in there.

Something that might work well is having each section as a show/hide panel. That way i can open the panel of prices i am interested in and just concentrate on those. If i want to open another panel that would be fine also.

So i would have these as the headings to open the panels

Golden Fox
Fox Classic
Strategic fox

And then in each panel i’d have the 3 columns

Regular | Senior | twilight

In each of the panels i’d have a sentence explaining what ‘Golden Fox’ etc is. I can’t see what that means at the moment, can only certain members do certain levels?

So something like

Golden Fox
Open to our Golden Fox level membership and guests of Golden Fox level membership. Click here for more info
Regular | Senior | twilight

Even if you didn’t want to use hiding panels i think the above would still be better.


They do look messy. This is due to the misalignment of the rows.
Although the rows belong to different tables, it can appear like one big wonky table. There needs to be some separation between them to define them as different data sets. Perhaps just vertical lines between the three columns would do it. Though it still may need the rows aligned too, hard to say without seeing it.

Off the subject of visual design and to the actual html structure; why are you not using tables for this? The mark-up and order of data is a bigger mess than the visual appearance. With the prices being floated, they are placed before the corresponding times in the dom. I really can’t see the logic in this.
This is tabular data, so should be marked up in tables.

I didn’t design/develop this. I have just been given the job to redo it.

I was planning to use an Accordion style; but since you mentioned using tabs, that opens up a better opportunity for content organization for something like this. Great suggestion!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.