May 2017

Built with experience.

Olson Construction Company

Branding
UX and Visual Design
Web Development

The Setup

Olson Construction Company is a family-run, woman-owned business that has built commercial properties without compromise on quality for 4 generations. When Kathy and Chip Olson reached out to me for some help on their website I knew it was going to me my pleasure in working with them both. It felt like I knew them...or at least the work they had done over the years!

The Olson family business has been around for over a hundred years, and in that time they have built many historic landmark buildings around California and Nebraska. Some of those, I even remember seeing around San Diego, where I grew up.

But their latest project, updating their brand and website, was where I could really help them to continue telling the story of the Olson Construction Company (OCC) legacy.

The Challenge

OCC had an existing website that was very old and hadn't been regularly updated to reflect their latest projects and the recent growth to their business. They also had lots of content of building projects that needed to be manually imported to their new site since they had not been using any kind of content management system, like Wordpress or Webflow. They were running the current site on a fairly basic set of HTML pages. In looking at their existing site I knew this was a greenfield of opportunity to positively impact the overall visual design and content structure to tell a better story. 

The previous Olson Construction Company Services page
Existing, non-responsive HTML site and existing brand.

The Opportunity

When OCC initially reached out, they did so for some simple website help. The first major challenge was to sell them on the idea of a complete website redesign and implementing a CMS. The second challenge was their logo. If we were going to update the look and feel of the site so dramatically the logo really needed some help as well to reflect the OCC brand values like: qualitycreativity, and relationship.

The Solution

Branding

Lots of options were presented to the Olson team, playing with the shape and weight of the logomark as well as weight and type of the font family, and even different stacking options to compare. After dozens of ideas were sketched out on paper, I brought these into Illustrator for quick concepting and further refinement to see what was working. I finally arrived at a number of concepts that I could present to the Olson team for feedback.

I presented Olson Construction Company with many initial logo options
A sample of the options I presented to OCC for their new branding

While they loved many of these concepts it was clear that some things were working and others not as much.

The original logo mark had an almost Olympic ring-like shape for the initials OCC. This half of the logo had been part of the brand for decades and was an important element that would ground a new logo concept to a legacy of qualitycreativity, and relationship. So the Olson's decided to keep that element. And I think it was a great choice!

However, I thought the letters needed a little more distinction for readability. This had the added benefit of allowing OCC to use the logomark as a stamp. They're a construction company after all, and stamping concrete with one's initials is kind of a thing. ;)

So I added a bit of spacing around the letters, but also connected one side of each letter overlap. This gave the letters a distinct and recognizable shape that could be used on its own as a standalone mark.

Final logo for Olson Construction Company presented on letterhead
The OCC block logo kept the heritage of the OCC rings and emphasized the family name while adding the industry and established in 1885 date as well

We also added the EST. 1885 tagline to drive home their dedication to the construction craft for over a century. I say we because this really is a collaborative process with any client to establish what matters most to them about their business.

Finally, bringing a modern, bold font family to the logo solidified the OCC logo as a distinct construction brand that delivers quality, creativity, and relationship.

Final logo for Olson Construction Company presented on a hard hat for crew members
New OCC logo decals on hard hats for crew members

Web Design

With the brand established I could begin to see how content could be re-purposed for their new website. But first, it meant putting the right information architecture into place.

Proposed sitemap of content

I like to visualize this type of information and show groupings of content. For OCC this was a simple way for them to see how their content, like projects and services, could be grouped with better hierarchy to give more detail on each page.

Existing site's project page

Their existing site had no detail pages for each project but instead was a series of galleries with only a handful of images and no information.

Often when building any kind of content site you reach for Wordpress. It's almost implied that every project will have some kind of need for a CMS, whether that is for managing projects, a blog, video posts, an ecommerce store, etc...every site has some kind of content that would benefit from templating.

New Project page

So I reached for a tool I'm liking more and more on web projects called Webflow. I can build a simple prototype of wireframes very quickly and share a private link with the client to get approval on the interaction design before I ever start applying visual design.

But the best part is that I don't have to abandon Webflow once i've got the prototype in a good place. I can build a fully functional website with fully bespoke CMS with ease.

Once I had approval from OCC I quickly began designing the initial look and feel utilizing the new brand we had created.

I start by building pages and hierarchy through dynamic page templates called Collections, in Webflow speak. These are powerful ways to structure content like a blog or in OCC's case, Projects and Services.

Much of the content needed to be pulled from existing project sheets, or written, since this was not coming from their existing site.

A project card showing title, category, and thumbnail

The design of the project page relied heavily on the use of a card metaphor to indicate a distinct unit of information that contained more detail. Each project was organized with a title, category, and thumbnail to appear on the Project page. Inside each project I added a project description, client information, completion date, services rendered, as well as additional project photos. 

Each project detail page also contains a link to more projects that link to a project category page that has more of that type of project to drive deeper exploration of OCC content. 

Within a few months of starting the project Olson Construction Company had a fully responsive, CMS-backed, SEO-filled website that launched to the world. The team has been very pleased with the ease of use of their new site, the look and feel of their branding, and the professionalism of my process.

The Results

Google Analytics is installed and tracking website usage and traffic for the first time on the OCC site. We can now see about 60% of visitors are coming from organic search and over a third of all visitors are visiting on mobile devices. Mobile visitors will now be welcomed with a responsive design where content has been designed perfectly for every device.

Quote icon
Paul was very patient with us and was a pleasure to work with, always responding to our questions or comments in a timely manner. We are extremely pleased with the final result and look forward to working with him in the future. We recommend Paul Parson wholeheartedly and enthusiastically!
Kathy Olson
Wes Roberts of Leadership Design Group

Get better design today!

I can help Influence users toward your desired business outcomes and communicate a product vision that spans the full customer lifecycle.
Let's Chat!