The Blog

So here you go, it's finally here. Months of reasonable hype and banter, as well as screenshots posted on the blog and Dribbble, have ended up with what you see before you, the new and improved Obox Design website.

Below we go into quite a bit of detail in terms of the layout, our philosophy of the design and many more reasons for why things are where they are. Enjoy.

Inspiration for Obox 2010

Inspiration for the new site came from many sources, most of them offline. The design started with every element coming from offline inspiration though as we progressed we molded it to a more online inspired creation as to not alienate the visitors too much.

Primarily offline inspiration was used to set the layouts but element design (buttons etc.) came from the iPhone and online stuff. Here is a list of items open in front of us while we designed the new Obox:

Offline

• Wired Magazine: Honestly, just take a moment to look at a Wired magazine. Their grids are so awesome I read it with envy. Their articles also flow with design creativity that blows my mind everytime I turn a page. Wired by far had the biggest influence over us for the new design.
• UK Car Magazine: There are some nice touches in the design and layout of the 'First Drives' section which inspired me. In particular their use of borders. You won't see that influence directly in our new site but it helped along the way.
• CNN News Channel: To me CNN have one seriously slick layout. It was CNN that encouraged us to go with 3px rounded corners and also avoid excessive margins and paddings. Their graphics are tight but somehow it works.
• Discovery Channel: Discovery Channel has some very good designers, their typography and spacing is top drawer. Next time they show whats 'Up Next' pay attention to the layout, type and colors.
• iPhone: No need to go into detail here. Most things on an iPhone are so slick it makes most of us sick with jealousy. The end.

Online

• Dribbble Friendly layout, colors and user interface. Dribbble got it so right it is ridiculous.
• Facebook Their redesign is spot on. I like the placement of the chat box and the sharpness of their icons. It's a massive improvement on previous iterations. Much respect and inspiration.
• MIX Gorgeous yet simple layout with excellent attention paid to their typography.

In terms of user experience and the shopping process, all learning was gained from online sources as well as a trip to our local grocery stores (to experience 'the process'). Here is some UI inspiration that we used:

• Narwhal Co.
• Facebook Facelift Home Profiles  a layout proposal
• Built by Buffalo planner

The Grid

A 12 Column 960 Grid was used to design the site, it's the grid we are most comfortable with but in hindsight it would have maybe been better to go for a 16 column base as there is more scope for variation when pages require a bit of creativity.

Eye Tracking Process (pie in the sky maybe, but we tried)

Home Page

As you can imagine the budget for this website was not on the massive side. We invested in a copy writer and Facebook advertising. Overall, very affordable. What we couldn't do was any eye tracking testing but we still tried to create a path down the page which we hope people will end up taking.

To give you an idea of the purpose of our layout (for example, why the graph is on the right and now the left) we have take a screenshot and drawn a line of how we are hoping your eye will track down the page.

Of course this isn't complete guess work, it's more an educated guess than a throw-anything-out-there guess. We read and analysed lots of 'stuff' to get to this point.

Product Page

If you look at the theme thumbnail, title and green purchase blocks they form an 'F' shape. It's not a coincidence.

We spent a lot of time looking at some studies on eye tracking and really made our best effort to apply those theories to the really important pages. For the product page we designed it around the 'F' shape eye process.

Sure this theory/study may be old but it helped when shaping our product page.

Consistent Design

Before a line of code was typed out we made sure that a style guide for the site was mapped out. One of the first notes that were written when planning this site was:

"Choosing the right icons for each part of the site: Continuity and size have to be considered as priority."

We talk about consistency almost all the time around Obox. It's one of our main arguments when convincing a client that their idea is not great. It's an excellent excuse but mainly paramount to a professional looking design.

Here are some notes which may help you with your site:

• All shopping related call-to-action buttons are green
• Auxiliary call-to-actions are orange
• All links are blue and bold
• Font sizes range from 11px to 13px in the body copy
• Icons sizes range from 18px to 25px depending on emphasis and location
• If possible icons must be blue with a white drop shadow
• Container divs with border radius must be 3px  no more or less
• Vertical block spacing must be 30px
• And so the list goes on

Attention to Detail

Attention to detail is not seen, it's felt. You won't notice it until it's not there.
~ Bobby Perel (our dad)

We have spent countless hours on refining the new sites details. Every icon was resized then touched up so there were no blurry edges to be seen (thank you Fireworks for awesome vector tools).

Font sizes were changed and then changed again. Line heights and spacing between elements were reviewed countless times.

This was all with the intention of letting your eyes breathe and allowing for the sites pages to flow. Nothing could be out of place and what you look at now are elements which are where they on purpose and not fluke.

We placed a huge amount of importance on the colors that were used in the site. If there are 100 green buttons on a page it must not feel that way, so we went for subtle colors which still draw your eye but are not distracting.

CSS3 items such as border radius and rounded corners were reviewed to the point of insanity. The indented drop shadows are set below 30% so the subtlety is emphasized which creates softness instead of eye strain.

Evolution of a Pie Chart/Graph thing

It seems that graphs are picking up quite a bit of popularity in web design. However I'm going to go out on a limb here and say that our graph wasn't inspired from any online sources. It actually came from an article in the Wired magazine (UK version, 12.09 page 138).

The article is about 'Vintage Visualisation' and in one part of the article they have a really picture depicting shockwaves running through the Earth during an earthquake.

We decided to go with a graphic on the home page to explain why Premium is better than Free. The visual element is important when trying to convey a message so it was very much an idea we were keen to run with.

10 iterations later we finally managed to land up with a graph we liked. At first we wanted something very simple and flat, however as things progressed we started adding more depth to the graph in order to make it a stand out feature when you scrolled to that part of the page.

What didn't make the cut?

We played around with quite a few elements in this site and like a movie some 'scenes' just didn't make the cut. Here are some screenshots of the 'out takes':

Product Page Slider

We wanted to try something different with the product page and incorporate a slider similar to a clothing rail. It could have worked quite well but there were too many variables which complicated matters. For now, it's on the back burner.

Shopping Cart Controller

With the shopping cart now obsolete we had to get rid of this cool looking cart design. We looked for every excuse in the book to use it but had to decide against it.

Pricing Grid with Info Slider

With 3 pricing options available we had to ditch this design idea. The white block on the right of the options would slide out with jQuery explaining each option. Sadly we couldn't make up a 4th pricing option and therefore have to put this on the back burner as well.

A new checkout process

With the experience we have gained from the first Obox site we decided that the checkout process needed a bit of a review. We have never received any complaints about our checkout process and some people have even contacted specifically to give us props about it.

We believe it's beyond important to minimize the pain of purchasing your product. In our case there was an opportunity to remove an extra step; rarely did customers end up utilizing the shopping cart during the purchase process.

We have therefore done away with the shopping cart and upon clicking your favored theme you go straight to checkout as opposed to adding it to a cart and then going through the motions.

We also have permanent 'X-for-1' deals and have therefore focused the checkout around that factor. Upon registering your details you are presented with screenshots of the other themes and one simple click will select/highlight your desired free theme which comes with your pricing package.

We have created what we think is quite an intuitive and elegant way to select your free themes. It was inspired by iPhone UI and its seemingly one click wonderfulness. Even if you don't purchase a theme we invite you to have a squiz through the process ;)

Speaking of pricing, things have changed

Our pricing structure has gone through a bit of a make over. All our WordPress packages now come with permanent 'X-for-1' offers.

Along with that we have also done a deal with Tumblr to provide them with Premium themes and therefore link certain micro themes directly to Tumblr's site. Also, since our Premium Tumblr themes cost $9 we have changed the pricing of our Micro Theme packages (includes Tumblr & Posterous files) from $25 to $15.

So here is what we now offer you:

• Premium Tumblr Theme: $9 (attainable via tumblr's site)
• Micro Theme Packages: $15
• Standard License: $50 (2-for-1)
• Super Standard: $70 (3-for-1)
• Developer: $100 (2-for-1)

Customers spreading the word

Moving forward we have some pretty 'cool' (they seem cool now at least) idea's of how we will incorporate the virility of Twitters service into our site. The first step is to offer the buyer the ability to tweet about their new theme. Below is a screenshot of what we are talking about:

We are 100% aware that not everyone will press that green button but it is well worth having it there for the person who will.

Modification Showcase Section

Wow have we been wanting to incorporate this for a long while! If you spot an Obox modification or if you have modified an Obox theme we now have a place for you to submit it to.

I'll be honest straight out the box and say that a big inspiration for this area of the site came from Dribbble. Their UI is brilliant so I felt compelled to steal some of their thunder.

In our showcase section you can drop comments and 'Like' designs. We encourage you to get involved, however we are completely aware that it's the content that will drive things.

If you have seen an Obox mod or have done one yourself please submit it via our Modification submission form.

And finally, an incorporated Blog

This has been a long time coming and we put it off for waaay too long. Finally our blog is incorporated into the Obox site. Based on what we have seen and felt, when visiting some big and popular sites, is that generally the blog is an after thought compared to the rest of the site design.

We wanted to avoid that and so started with the design of our blog quite early in the process. We figure that a lot of potential customers will come from reading content on our blog so why not put just as must thought into it as the rest of the site?

Conclusion

The process of creating this new site has been a massive effort from both myself and Marc. Concepts started in November 2009 and have ended with what you see here. Sure it's not ground breaking in terms of layout but we do believe that in certain instances we have moved Premium Theme marketplace site design forward.

Our favorite pages in terms of design are:

• Home Page
• Affiliate Page
• Team Page
• Product Page

As always your comments are welcome, bring on the negatives and positives. For those of you who reckon it's not too good, we invite you to fill out this form.

If you think it rocks we would love to know that too ;)