Mojo Themes Redesign – Interview with the designer Brian Hoff

Posted April 18th, 2011 / By Chad Engle in Featured Creatives, Graphic Designers, Interviews

Brian Hoff runs a full time independent studio in Brooklyn, publishes The Design Cubicle, speaks at design conferences and has been featured in several industry publications. It’s fair to say that we at FUEL are big fans. Brian has been busy with Mojo Themes and their recent stellar re-design. I had a chance to pick Brian’s brain about the process:

CE: What was the overall goal of the re-design and how did you aim to make Mojo Themes stand out?

BH: There were three major tasks at hand when redesigning and rethinking the Mojo experience: Improved usability, simplified navigation / browsing experience /marketplace, and creating a better and more enjoyable experience that was lacking.
At first, we found ourselves moving far away from the brand that Mojo-Themes had already established. It took us a few weeks of swimming in the wrong direction in order to see where we needed to head to take the effort a touch further. With a fresh, lively coat of paint, beautified typography using webfonts (Proxima Nova), more engaging headlines and copy, dynamic and unique experiences from page to page, improved marketplace browsing, and rich interactions, including the Mojo Monster.

CE: Did you start the process with wireframes, moodboards, and loads background research or after the initial talks did you have a pretty clear cut idea in your head on where you wanted to take the design?

BH: Yes. A good portion of any project effort I take on starts off with extremely rough wireframes on paper and progressing into a more detailed mockup of the layout which focuses on tone, hierarchy, typography and flow of the page – so basically no color or texture comes into play in the early stages.

The tones early on consisted of blacks, various shades of grey, and white, which allowed me to map out importance through tone and contrast. The hierarchy and “flow” through emerged through typographic means – size, style (italics, bolds), all-caps. Beyond being a lovely, lovely typeface, Proxima Nova also has a very large family of fonts which helped us further extend the typographic hierarchy a bit more than your average family.

The project started off great, but took a bit of a sideways turn for about 3 weeks until I finally was able to see the direction it needed to head in. I remember calling the Mojo fellas (Brady Nord and JR Farr) explaining to them that I was sorry I wasted 3 extra weeks of their time, but I knew the new vision was something they would equally be excited and proud of. That’s the funny thing about design: it often takes going in the wrong direction for weeks on end to finally find the right path.

CE: What was the biggest challenge or hardest thing you had to work through in the design?

BH: The biggest challenge by far was not moving too far away from the “Mojo brand.” This was one of the main reasons we got lost for a few weeks. Although everyone was happy with the visual direction of the site, something didn’t feel quite “Mojo” about it.

There were periods of both myself and the guys over at Mojo saying, “well let’s change this to see if that works,” or “how about we change this color to see if that works better.” I typically find, especially if I’m saying things like this to myself, that it needs to go into an entirely new direction. Luckily, the guys behind the scenes at Mojo Themes were more than understanding and valued the process and much as the end result and were happy to extend the initial timeframe we set out for. Overall I find that great or even better ideas tend to transcend and evolve over rigorous thinking and re-thinking the original thoughts. This is why I tend to stay away from unrealistic deadlines.

CE: The details are what separate the men from the boys. The design has outstanding little details as well as beautiful typography. How much emphasis did you make sure you kept on these attributes?

BH: Thank you. Typography is certainly the backbone of great design and as a bit of a type nerd (and by bit, I mean that’s a bit of an understatement), I tend to focus on the typography from the very early stages of the design. When I have a mood in mind I tend to look for a typeface to match it first in addition to also making sure it fits the medium and function well.

The same goes for the tiny details. They tend to make the work unforgettable and experience more wonderful. Although it’s important to note that one shouldn’t go overboard with detail as well. Figuring out where to deploy the fine details and when to leave the unnecessary behind is key. Another important note in detail is on the development side (something I tend to worry about if I hand off files to other developers), but the people over at Mojo did an impeccable job. The PSD and the fully developed site overlay each other beautifully. Pixel perfection and precision.

CE: This design/implementation of this site comes at a time where there is a huge drive for being standards compliant & using responsible web-design practices. How conscious were you of making sure that this would be able to be carried out throughout the project?

BH: Knowing your medium and understanding the audience a bit plays a huge role in the responsibility of any web designer. All of my work focuses around simple, beautiful things that “work” for their intended use, while also pushing boundaries where possible. Just because something is “standard” or “responsible” doesn’t mean they can’t be approached from a different angle while still remaining “responsible.” The Mojo Themes website was designed around these same principles and processes.

CE: What are the highlights of the new design?

Here’s (pretty much) the full list of what we changed, added and improved upon:

• Landing page: More emphasis on the themes and seller interaction
• Dynamic page layouts: Each page has a unique layout to match the content
• More compelling headlines and copyrighting improvements
• More Monster: We gave the Mojo Monster (hover over him on the home page) more personality as a friendly guide and companion.
• Strong Typography: More focus on readability, hierarchy and personality
• A footer with charm and action. Useful links and a new way to sign up for newsletters.
• Simplified, restructured and much deserved Forum spring cleansing.
• More engaging and customizable blog to highlight the various authors that write for the blog
• More comprehensive Check Out process
• Fully redesigned Marketplace experience through re-thought category browsing and filtering
• Powerful and engaging interactive elements
• More streamlined sign in and sign up experience
• Achieved an overall mood that kept the to Mojo’s playfulness, yet raised a new standard and polish for all Marketplace companies online to rise to the (nav)bar – this is where the home page’s headline came from. Overall we found that you can be both playful and sophisticated at the same time.

LANDING PAGE

Actual size: http://cl.ly/652r

LOG IN AND NAVIGATION DROPDOWN DETAIL

Actual size: http://cl.ly/4phd

Actual size: http://cl.ly/4p5g

MARKETPLACE BROWSING

Actual size: http://cl.ly/4p82

SHOPPING CART

Actual size: http://cl.ly/4ozR

CUSTOM CHARTS

Actual size: http://cl.ly/4qKc

MAKING A DEPOSIT / PROFILE BALANCE

Actual size: http://cl.ly/4pcw

BLOG

Actual size: http://cl.ly/4qHw

MOJO Themes aims to create an open marketplace for top rated designers/developers to shine in a world where design is going down hill quicker then we know and where someone can find, rate and buy quality themes & templates all in one trusted place.

Chad Engle is currently slaying pixels @BoomtownROI. He abides in coastal Charleston, SC and enjoys living on an island. You should follow, harass or chat to him on twitter @chadengle and @fuelcreativity .