Notes on the Pro Theme Redesign

Last week, Ben and I launched the new version of Pro Theme Design. For me it was the first opportunity since going freelance to design a concept, logo, layout and content from the ground up, so I thought I’d make some notes on the process.

Decision to Reboot

Pro Theme started as a place to market and sell Mimbo Pro back in March 2008 and hadn’t changed much since. Until recently, Ben and I both worked full-time jobs and could only commit limited time toward nurturing the one theme, making frequent upgrades here and there.

When I went freelance earlier this year, we’d already begun to sketch out more product ideas so rebooting the entire site seemed inevitable. One realization I had soon after going freelance was that I wanted everything on the web with my name attached to it to be revisited. In this case, it meant putting paid work aside and carving out 4 weeks to design a new Pro Theme identity and work on infrastructure. In the process, I learned some things about pacing myself and learning to live with certain decisions.

Identity

Doing client projects for 10 years, it was very rare to design for a business with no identity. At the very least, there was a typeface the client favored or some hint of a color palette. With Pro Theme, we’d never considered identity much. With Ben’s blessing, I decided to start from scratch.

Like a lot of good showcase sites, I knew the layout should be muted, spacious, unobtrusive, and otherwise put the content (screenshots, marketing notes) at the forefront. Neither Ben or I favor the heavy-handed commercial approach. Rather than screaming for attention, I wanted the design to be distinctive above all.

I knew I wanted to avoid gradients or excess stock art or anything shiny, cartoony and trendy. I decided to try something that hinted at traditional definitions of design, more reminiscent of the industrial/architectural world. The motive was conveying an idea of sturdiness and meticulousness: a drawing compass, note paper, dashes and graph lines. The collage-style of the product images is meant to reinforce the handmade feeling.

Because the design elements are muted, I wanted the logotype to be strong. I’d already been looking for an excuse to use House Industries’ Neutraface and the Display Titling font had just the right punch. Mac users will notice Palatino used for headers and Myriad Pro for the body, which defaults to Georgia and Arial on Windows. Unfortunately, the difference in scale between Arial and Myriad Pro led to some difficulties in setting the navigation, and in retrospect, I would probably not use that font stack again.

Layout

As some people pointed out, the new Pro Theme feels like this site in some ways. This wasn’t intentional but is probably a good reflection of the overall design approach I’ve been leaning toward this year.

With both sites, my favorite challenge was designing unique layouts for interior pages. For a long time I felt like I was exhausting my energy on homepage mockups and not giving proper attention to interior page layouts. It’s especially easy to get lazy when using a CMS like WordPress that’s so commonly used for blogs in the traditional column/sidebar formula. Factor in a client’s time constraints, and it’s easy to toss together a text-heavy “About Us” page that no one remembers.

Breaking out of that formula requires more design hours, but for certain projects it’s worth it. If this was a 30-page site, designing unique layouts would not only be taxing, it would make the users’ experience too erratic. When sites grow to a certain size, rigid standards can be comforting. Predictable layouts help manage expectations and make users feel more in control.

With smaller sites, I feel like each page can have more personality. The “About Us” page was an opportunity to communicate our team more visually – we’re small, we’re on different continents, we have experience, etc. If the presentation is more memorable, hopefully the content will be too.

Another part of breaking out of that formula is creating content that works well within a more flowing, print-like layout. Again, this takes more time but prevents the site from an overly templated feel. It also allows things to be communicated visually that might get lost in a columnar, text-heavy layout.

Other sites that influenced me to think about content layout differently: Kai Brach’s personal site, 37 Signals, Inkd and Noded.biz.

Message

In previous versions, we hadn’t spent much time on our message. For this version I played with a few ideas, but ultimately what I wanted to convey was:

1. We’re a small company with very focused roles
2. We have comprehensive experience in making websites, not just themes or templates
3. We prefer the ’small batch’, handmade model to the commerical, mass-produced approach

Merging these messages with the design elements was something I’d always done for clients, but rarely for my own purpose. Marketing text is clearly not my strong suit. Conveying Pro Theme’s approach and personality via design is something I’m much more comfortable with, which explains the lack of much text on the pages.

In retrospect, I would have liked to come up with better taglines for the homepage. One benefit of being small and not heavily-branded is that we can change those things later on without too dramatic an impact.

Content & Buildout

As far as interior page content, the biggest priority was making it obvious where to seek support and under what circumstances. The support page uses big, recognizable icons and walks the user visually across different tiers of support. FAQs were also rewritten and forum/helpdesk policy text was tightened up.

Until now I hadn’t had an excuse to play with ScreenFlow, but once the screencast tutorials were done, I realized how important it was to the experience. There is so much happening on the back end of Elemental, for example, it makes a huge difference to just watch someone else play with it.

Gravity Forms is another site that lets the video tour sell the product for them without needing to bombard anyone with bragging messages. I do wish my voiceovers didn’t betray a Southern accent and a sinus problem…Next time I hope to script them in a way that minimal voiceovers are necessary.

As far as buildout goes, it went smoothly using Gravy as a base. Given its size, the site didn’t require much WordPress voodoo, though I did use custom fields for the “More Products” module you see on certain pages. Each subpage of the /themes/ page was assigned a custom field for its tagline and screenshot and called like this:

<ul>
<?php
	global $post;
	$myposts = get_posts('exclude=' . $post->ID .'&post_parent=7&orderby=menu_order&post_type=page&numberposts=4');
	foreach($myposts as $post) : ?>
	<li>
	<a href="<?php the_permalink(); ?>">
        <img src="<?php bloginfo('template_url'); ?>/images/<?php echo get_post_meta($post->ID, thumbnail, true) ?>" alt="" />
        </a>
	<strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong>
	<em><?php echo get_post_meta($post->ID, tagline, true) ?></em>
	</li>
	<?php endforeach; ?>
</ul>

Here the get_posts function is saying: “Give me the last 4 titles, taglines and thumbnails from subpages of the “Themes” page (ID#7), but exclude the current page and put them all in a list.” The product carousel uses almost the same code.

Afterward

The toughest part of the redesign process was coming up with a metaphor (drawing compass, graph lines) that suited our personalities. In the past, that’s the kind of work I’ve often farmed out to print designers and identity specialists. Doing it all myself exhausted a lot of energy that I’d usually spend on heavier design polish, but for this project, that wasn’t appropriate anyway. There always small things I wish I’d done differently, but now that the identity issues are tightened up, making changes the near future should be smoother.

Follow me on Twitter