Summerlee Office Solutions

Summerlee Office Solutions, Ltd. is somewhat of a deceiving name for this Canadian provider of office interior solutions. Far more than merely a distributor for some of the industry’s top brands, Summerlee stands out from the crowd as a true resource, providing strategic design solutions that range from furniture to architectural walls to specific technical solutions such as mission-critical furniture, noise damping or stealth cabling solutions. They know about stuff you wouldn’t even think of thinking about when it comes to populating your office with everything a modern office needs to be visually attractive, ergonomic and functional.

Unfortunately, Summerlee Office Solutions, Ltd. has recently closed its doors, but you can still visit an archive of their website.


Summerlee website homepage snapshot

Summerlee’s website is not an online store. In fact, very early on as we were facilitating a website vision and design workshop (a standard component to many of our larger web projects) with the Summerlee team, it became very clear that this would be one of the defining differentiators about this site. Visitors to the site shouldn’t feel like they were here to browse a product catalogue and make a few budget purchases. This is completely anathema to the entire Summerlee value proposition.

Summerlee helps clients make great decisions about their corporate office interiors. It says so right on their home page.

So how do you craft a website that infuses every page with that ethos?

Helping clients discover great decisions

Everything can be a communication tool, even navigation. Especially navigation. It informs how you consume information, how you experience the site. For Summerlee, we made the browsing experience all about discovering decisions you didn’t even know you had to make. Then help the customer understand these decisions. And when they feel it’s time to reach out, provide a simple, quick, contextual contact form on every single page.

Summerlee website Decisions main page

Entering the Matrix

As we started to explore what this meant, we discovered that there were really three critical areas of expertise that were not only relevant to their customers, but were in fact very strong keywords that would provide clear bearings to different segments of clientele visitng the site. And within each of these major segments (Furniture, Architectural Walls, Technical Applications) there were the same set of product and service categories. Suddenly we had a potential navigational nightmare on our hands.

Our solution architecture team worked closely with the Summerlee subject matter experts to devise a comprehensive 2-dimensional “matrix” that would cover all these product and service categories in the context of the three major segments, and ultimately drive the site visitor to discover the many cross-functional decisions that are mission critical to the successful implementation of each project.

The visitor can browse “vertically”, sticking within their identified segment of interest, or they can explore “horizontally”, covering the breadth and depth of a specific product solution category (such as “Private Office Furniture”). A typical hierarchical menu system allows visitors to drill down their chosen vertical, and an easy-to-use tab system allows unthreatening horizontal navigation across segments without completely disorienting the first-time user.

Summerlee website navigational matrix

Content Customer is King

Believe it or not, content is one of the principal reasons that ambitious web projects fail. Managing the creation, organization, review, approval and publishing of a content-intensive website is one of the hardest challenges both for customers, and for the design team. Typically, designers like to focus on what they do well (design), and customers on what they do well (sell their product), and everyone underestimates the amount of work it takes to actually write good copy for the website. (Just to provide a measuring stick, this single blog article has taken three hours to write, edit and pepper with screenshots).

The Summerlee website has in the neighbourhood of 100 pages of content, and not just generic content, but content that is well-written, thoughtful, relevant and useful to visitors that take the time to explore the pages. We needed a way to allow the customer to work within the context of the site’s design to create, review and edit the massive amount of copy required to make this “matrix” concept a success.

For this project, we rolled out a lightweight content management solution that had a very low barrier to entry and a lot of restrictions on what could and could not be edited. In addition to this, our project manager kept close tabs on what content was completed, which images were provided, what edits were yet to be made, and even pitched in with some editing and compiling tasks when push came to shove.

Summerlee website image gallery

Unobtrusive coding

The Summerlee site is chock-full of little technical gems that tactfully remain under the hood. From a coding standpoint, everything was created for flexibility and with the large content load requirements in mind. Everything from the rotating image galleries, the Flash-based Decisions banner, the complex navigational matrix and the ubiquitous contact form is lightweight, flexible and easy to maintain.

Image slideshows automatically detect when new images have been added to that page’s folder on the server and get integrated into the slideshow’s flow. The contact form knows what page it’s on, and sends this information quietly to the appropriate people at Summerlee when a visitor reaches out, so that the customer can be helped by the best person. The navigational matrix is controlled through highly sophisticated Dreamweaver templates that allow sitewide changes by editing a single document.

And the best part? Summerlee doesn’t know, doesn’t care and didn’t even ask for all these bells and whistles. It’s just part of our dedication to providing the best solution to a cherished client.

This entry was posted in Promotional Material. Bookmark the <a href="" rel="bookmark">permalink</a>.