Maintaining a network of over 1,000 blogs can sometimes feel a bit like digital farming. Much of my time is spent identifying bugs to squash in various repositories, managing projects along to completion, and reviewing platform statistics in preparation for the next round of customer interviews (the “weeding”, “shepherding”, and “flock tending” of product management). Every so often, however, harvest comes and there is some revelry in the launch of a major update.

Yesterday was one such day as the new design of LexBlog’s support center was launched early in the morning; the culmination of several weeks of work between Ted Cox, Brian Biddle, and myself. The old design (pictured below) was a fast bit of work, with the primary focus on moving a rather large body of content from Get Satisfaction to Zendesk’s Guide product without losing anything in that migration.

 

 

 

While the move was a positive one, and the updated design better than the one implemented in Get Satisfaction’s ecosystem, there was still a lot of room for improvement. As with any design, the longer it was up, the more obvious it became that something was off. The three “call to action” boxes seen in the image above, seemed arbitrarily placed, the search form’s placement moved around depending on what page template you were on, if you scrolled lower you saw a list of categories without any explanation of what the contents of those categories were; the list of UX and UI flaws goes on and on.

With Ted moving from his role as a Technical Support Specialist to LexBlog’s full time Technical Writer, the time seemed ripe for a major overhaul of not just the design, but the organization and focus of the support center. Ted spent days reorganizing content, and more time reviewing everything to make sure that things were as up to date as could be expected, all while adding a series of documents on new (and old) LexBlog platform features. While that happened, Brian worked on building out a design that was both more in line with LexBlog’s design standards, and focused on the paths that a customer may take as they looked for content.

The result was a fully responsive (the last version had a mobile version) work of art that everyone at the company is (more) proud to stand behind.

 

 

There’s greater consistency throughout the design, and the list of popular articles at the top of the homepage is managed by Ted and reflects the most viewed pieces of documentation within the support center. The interior pages are where I think the design really shines, with each article containing clear navigation to other articles in the same section of documentation, making it easy to follow from article to article and find what you need:

 

 

Overall a pretty fun project to work on, and a good crop to harvest.

One of the drastic changes for LexBlog Design has been a move away from the use of graphics programs for the creation of web layouts to live designing inside the browser using Apple Fritter.

This past week I had the opportunity to live design the Real Lawyers blog with Kevin O’Keefe. The joy of this process is that it’s not weeks to delivery but a few hours and we were “live” with a new look. This method is not random erratic design rather, a thoughtful intelligent creation built on what we’ve learned over the past 15 years and woven into our digital publishing platform. The benefits of this approach are numerous:

  • Instant Results — We can immediately see our font, color, and layout choices on desktop and mobile views
  • Quick Corrections – We can make on-the-fly adjustments vs going back into Photoshop
  • Truthful Presentation – There will always be a disconnect between what we make in Photoshop and what we actually see online
  • Real Content – We can see how our new design interacts with our content on desktop and mobile views and we can make quick adjustments
  • Remove Captivity to old Design – We can be more agile to make design updates as our focus, branding, or preferences change

The exciting thing about Apple Fritter is the power to create can be yours. Pick a starter design, upload your logo, choose your fonts, colors and start blogging!

I’ve come to the conclusion that there are three basic blog layout types. This, after twelve years and several thousand blogs designed. Fixed width, Full width, and a Hybrid layout that combines elements from the first two. Each layout type has its advantages.

Layout Types: 1.Fixed 2.Full 3.Hybrid

A Fixed Width layout is very traditional with all content framed in nice and tidy like. An excellent choice for those of us who are a bit OCD. Like a pinstripe shirt they never go out of style.

The Full Width layout is all the rage and for good reason. Your main navigation and masthead span edge to edge allowing for more content and impactful imagery up top. Beautiful to behold on desktop displays and nice and clean when viewed on a mobile device.

Finally the Hybrid layout which takes its cues from the first two. The navigation and mast are wide-open. This allows for the use of some nice graphics or textures. The post area is framed in. Pulling your eye right where it needs to go…the content.

Of the three, Hybrid is my favorite. What’s Yours?