When we are not designing themes here at Woo Headquarters we are tweaking and improving the process of delivering those themes to you. At least that’s what we were doing last week.
We thought it would be a good idea to document the changes we implemented last week with the honest reasoning behind the user experience tweaks. First let’s have a look at the theme listing page, as it was last week:
After much deliberation we decided we weren’t entirely happy with the user interaction process required when buying our themes, and the confusion of having four call-to-action buttons taking you to the checkout page.
Other noted problems with the theme listing user interface were:
- The Red “buy” buttons – The colour red has many connotations and invokes various emotions. Our feeling though was that it was making our buy buttons come across as rather alarming. We want to encourage our site visitors to click on the call-to-action button, and red is not a color you naturally navigate to, unless you want to delete or cancel something.
- The 3-for-1 banners – On our theme listing page you were presented with two promotional banners – one as a corner overlay on the theme screenshot, and one as a green banner across the full width of the page wrapper. The confusion that these messages broadcasted was that all our theme packages came standard with a 3-for-1 offer. Where in actual fact the developer package came with 3 bonus themes and the standard package came with 2 bonus themes.
- The Playground message – The yellow/tan styled playground message informing our users of our theme playground where you can test drive our themes came across to prominently. We obviously encourage our users to use this facility, but we don’t want this to deter from the fact that our main aim is to encourage potential WooTheme customers to buy our themes.
- The Supported Third Party Plugin Banners – Again, we felt these banners drew too much attention towards them, and away from our buy theme buttons. The eye naturally was drawn to these colourful and bold banners – if you were lucky enough to be on a big monitor and they appeared without vertical scrolling.
- The CMS switcher – Some of our themes have been ported to ExpressionEngine and Drupal. These themes, for platforms other than WordPress, can be navigated to via a small button/icon on the gray bar below the featured space. The button was often overlooked though, and users either missed it all together or ended up on the theme listings for the other CMSs and didn’t know where they were. Eventually buying themes for the wrong platform.
The revised theme listing page
Having taken into account the problems with the previous theme listing page Cobus pushed, squeezed, and chiseled pixels until we were happy with the proposed changes.
As can be seen above the theme listing page was simplified, yet it still remained consistent with other page styling and layout.
- The buy button, note singular, is now green and the obvious call-to-action, with a very neat pop-up/overlay box that appears when it is clicked on, with the two theme package purchase options.
- Some of the theme information, like the changelog, designer name, release date and theme type has been moved to the sidebar.
- The 3-for-1 banners have been removed and the bonus theme promotion message has been moved to the pop-up/overlay box.
- The playground message has been given the standard sidebar text styling – yet it is still prominently placed below the purchase options.
- The third party plugin banners have been re-sized, and re-styled more consistently, and placed in a two column structure in the sidebar.
- The CMS switcher is far more noticeable and it is clear which CMS theme listing you are viewing.
So was the two days it took to study, brainstorm and overhaul the listing page worth it? For sure! Good design is invisible, it’s often a transparent process of revising and revising again.
We of course hope the web analytics and purchase conversions will read well too though 😉