DrupalStyle.com re-design.

DrupalStyle offers cost effective solutions (templates & complete website services) for startups who are looking to take their business online. In order to meet a growing demand and to better serve our existing customers, we are completely redesigning the website in order to improve usability, highlight important new features, and, ultimately, increase conversion rates.

Original article was posted by me on Threefifty Neuromarketing Blog.

The first version of this website was a great starting point and taught us many valuable lessons about selling themes (or "templates") online.

The new website (launching early 2011) builds on this success by incorporating many features that have been requested by our customers. It also focuses on a more limited number of purpose-built themes, which will increase the quality and overall ease-of-use for both the users and the developers. The new website should also boast a much higher conversion rate than the older version, which will result in more sales.

DrupalStyle version 1.0

The first version of DrupalStyle was created over 2 years ago. Its design is very simple: a navigation panel at the top right and a huge, rotating, graphically appealing banner that features new products/sales right below it. This all looks great; however, as we have learned over the time, it isn't very conversion friendly.

Proposed version 2.0

One of the biggest pitfalls of the previous website was the lack of useful/sellable content. The new website has more room to promote various services and features.

We are also re-using some of the graphics from the previous website. It's a good thing to do, since some people already associate certain graphical elements of the old website with the brand. Plus, these elements have all been saved as PNGs, which makes them usable on any color background.

Another way we simplified the re-development process was by using a grid design system. This gives the website a more uniform look and makes designing new pages much easier, but it does limit creativity a bit.

We also decided to make the new website wider this time around (1100px). Not only does it fit more content, it also looks much better.

That said, we realized that a website this wide isn't ideal for 1024x768 users, which is why we checked our Analytics account for resolution info, which told us that only 8% of visitors to DrupalStyle use 1024x768... soooo those people can either scroll around a little or just upgrade their monitors.

Google Analytics resolution usage statistics. Always check your Analytics for various useful information that will help you decide on how your website should be designed!

STYLE logos in the development process.

While re-doing the website, we decided to update the branding and identity of all of our "STYLE" websites (ArchitectureStyle, DrupalStyle, RefreshStyle, StationeryStyle) for recognition and consistency reasons.

We used Helvetica as a base font for many reasons. Our "STYLE" network of websites targets a lot of designers, and as we all know (or don't know), designers LOVE Helvetica! The base font includes a lot of styles (and by a lot, I really do mean A LOT), which is perfect in order to create some variation in our designs, while keeping them consistent. In this case, we have used 75 Bold for the name of the website, whereas the "STYLE" part will always stay as upper case 45 Light. Website headings will be Condensed Bold, and so on.

I have been always taught that using more than 3 completely different fonts in your designs is a bad practice, which I do agree with, unless you want your website to look like a bowl of soup.

Theme page on version 1.0

Proposed theme page layout.

The main "Themes" landing page will show larger screenshots of themes, a basic description of the theme and a quick purchase button that does not require the user to go further into the theme. This is important for increasing conversions: the less clicking around, the better!

Additional theme information. Work in progress.

Thanks for reading. More to come.