Jarche.com redesign

In April, 2014, Tantramar Interactive Inc. launched its first-ever design of Jarche.com. Having met Harold Jarche at the Centre for Learning Technologies at Mount Allison University in 1998, I have been hosting his professional blog since he ventured out on his own in 2004, but this marks the first time he hasn’t gone with an off-the-shelf theme for his blog.

Design goals

Harold and I sat down to discuss what he wanted.

  • He focuses on his writing more than visual appearance, especially since he doesn’t consider visual design skills to be his strength. He typically chose a photograph for his site’s masthead, but his site has looked pretty much the same as many other WordPress sites.
  • Because Harold was launching his new eBook — Seeking perpetual beta — he wanted it to have consistent visual presentation with his site.
  • He wanted his site design to be memorable and distinctive.
  • He wanted his site to be mobile-friendly.

Approach

I had a number of things that I felt were important behind the scenes, too, including

  • leaving Harold in control by not making him dependent on me when it came to formatting future site updates
  • using a WordPress starter theme to simplify the design process — I find using WordPress child themes, to override styles in off-the-shelf themes, to be a cumbersome and limiting process, despite its advantages
  • using a Sass-based workflow to take full advantage of the efficiencies it allows, augmenting the power of cascading stylesheets without adding any client- or server-side dependencies.
  • following a mobile-first design workflow that emphasized typography and legibility.

Process

Redesigns can be easier than starting from scratch. In the case of Jarche.com, I had more than 10 years of active content on the site, so I knew exactly what we were dealing with.

A number of suggestions came out of working with him, his site’s content, and discussing his work in general, including some ideas on how to streamline the site’s navigation and the idea of using a lighthouse as a visual metaphor for his work.

A recurring theme in Harold’s writing is clarity. Where there may be chaos, he shows the way forward, providing what organizations cannot provide themselves: an outside perspective.

Harold and I met regularly, and I kept him up-to-date with design iterations. He was completely open to any suggestions I had, and even after the site had launched, we continued meeting to polish things up where we found any rough edges.

Jarche.com redesign — early version

An early mobile design with different site title, tagline, navigation items, colour scheme, and type treatment.

Results

Final Jarche.com design for desktop, tablet, and smartphone

I think we struck a good balance. The new Jarche.com has a unique, professional look that remains warm and inviting.

Harold seems happy with the result and the feedback he’s gotten — both publicly and privately — has been positive: