WooThemes re-designed

It’s been a helluva long time since I last posted on my blog. A lot has happened in the interim, both work and personally related. WooThemes has squeezed every hour of my work days out of me, and a whole heap more.

Since March this year we’ve been working on the WooThemes re-design – code name Woo2. Looking back over all the mockups housed in our Basecamp account it’s amazing to see how it grew and matured. Having a team of 5 web designers working on the project, makes it sound a doddle, but this was certainly not the case!

Trusting your team mates

Magnus, myself and Cobus all worked originally on mock ups of the home page, each of us proud of our work and trying to influence each other as to why elements of our designs worked better than others. Weeks passed and more and more mock ups were made until we got to a point where we realised we were going around in circles, we were not being productive, and the launch date was getting pushed further and further out. At that point we decided we needed to hand over the Woo2 design responsibilities to one of us and feedback needed to be in a consolidated form, with us trusting that designer whole-heartedly with the brand. Cobus was the lucky one chosen.

Once Cobus was handed over the reigns some serious brain storming was done over Skype conversations and whiteboard sketches at WooThemes Head Quarters in Cape Town, South Africa. The home page was sliced into modules with the header navigation, followed by a visual featured space suming up what we are about. Below this was a space for our offerings and our key selling points. We then wanted to show how easy it is to get your website up and running so made space for the WooThemes purchase process. Next was a space showcasing our social media presence in the form of a blog summary, a twitter feed, an email subscription form and our affiliate offering. Finally was a neat sitemap for quick and easy access to all our main pages.

Woo2 Layout

The colours in the Woo2 design needed to be a bit brighter and warmer than that of the cooler and darker original design. The typeface we chose for the headers – Geogrotesque – was a bit more chunky and modern, not to mention far more memorable and uniquely WooThemes, than the Lucida Grande font we had used previously.

WooThemes Colours

You probably have not even noticed, but even the logo received a bit of love. We softened the colours and lightened the bubble gradient, as well as applied a faint inner glow

woothemes_logo

For the club membership page we needed the content to be presented neatly and prominently as to eliminate the bulk of the pricing and membership queries that we were getting previously. We are huge fans of 37 Signals and had many Skype chats over how we could use sections of their hugely popular design and layout without copying it. Here we introduced some shades of green and yellow to break the blue branding seen predominantly around the site.

woothemes_club

Nearly every page was meticulously designed in Photoshop by Cobus, but even before that we mocked up some pages with basic wireframe sketches.

woothemes_docs

Once all the awesome mock ups had been made and signed off by the team it was over to the Magatron html/css and WordPress chop shop. The design was of course implemented on a Woo Framework that comes packaged with all our latest WooThemes making the build phase far less time consuming and far more flexible in structure.

Whilst this was all happening the backend was being reviewed, and of course more wireframe sketches were being drafted for our third party Amember developer to work on and implement on a test server. Magnus’s wordpress work was being polished by Foxinni with lots of awesome javascript animations and transistions being added. Content was being re-written, theme documents were re-organised, terms and conditions were tweaked and the forum, showcase and newly created WooCamp were all given shiny new templates to fit the Woo2 branding. This of course all the while we were still doing our usual WooThemes tasks of creating themes, supporting themes, answering mail, collaborating with designers and fuelling the marketing machine.

I could write another 1000 words on the re-design, the new content management systems we’ll soon be catering for and our new GPL licensing, instead though I’d prefer you to visit the site yourself, have a look around and hopefully enjoy the fine-tuned website. Also have a look at Adii’s video post on the launch of Woo2.

It’s amazing to be a part of such a dynamical and bright team at WooThemes and I’m so proud of what we’ve accomplished in a relatively short time frame.

Now that Woo2 is done and dusted I hope to find sometime to re-design this site, but as you can see from our design process for Woo2, this may take a bit of time…

8 responses

  1. Nice work guys… very interesting to see what went into it all and who did what. Very insightful.

  2. It’s quite hard to believe that something which started out as COMIC SANS!?! mockups (http://www.markforrester.co.za/wp-content/uploads/2009/06/woothemes_docs.jpg) turned out so well!

    Congrats 🙂

  3. Hehe @ Dan Harper. That’s actually the default (and only as far as I know) font in Balsamiq Mockups, which we used for some wireframing.

  4. Wow, lots of work goes into this website. Maybe some pointers can be given about how to succeed in an competitive online business of designs.

  5. Wow, new design look gorgeous

  6. Wow, lots of work goes into this website. Maybe some pointers can be given about how to succeed in an competitive online business of designs.

  7. Its amazing how small differences like the changes made to the logo can make such a big difference in professional image. Nice work!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Mark Forrester

Subscribe now to keep reading and get access to the full archive.

Continue reading