HomePostsAug 19, 2015

Semi-eCommerce Site for a Local Composites Distributor

Working with Josh has been an absolute pleasure! He caught on very quick to our vision of what we wanted for a website. When we were initially quoted, we were given timeframes for certain segments of the website completion and he met every timeframe we were given. That in itself is priceless!

– Greg Fochtman, Sales Manager

Pacific Coast Composites (PCC) “stocks and distributes advanced composite materials certified for quality requirements.” What sounds, at first, like simple repackaging is, in reality, a government regulated and heavily monitored process. Materials need to be held in specific temperature ranges while being shipped all over the world, buyers need to be certified and vetted, and everything needs to happen quickly while expensive airplanes and machinery sit idle, waiting to be repaired.

The PCC team, from the first meeting, were friendly, helpful, straight-forward, motivated, and organized. They had been through a number of disappointing experiences with creatives and developers and were long-overdue for a site redesign. They had an idea of what they wanted – professional, easy to navigate, easy to update, and on-par with their Fortune-500 clients – and needed major help getting there.

What I really liked about this project, besides everyone I met, was that information architecture and clarity of information was paramount. The final, polished design was secondary to how the site was structured and how it functioned. This means that wireframes, my close second favorite part of the process, would be essential and account for the majority of the design work needed.


As we talked about the site in it’s original state, I discovered a number of troubling things:

Our work was cut out for us and the timeline was tight but we were all excited to make big, sweeping, positive changes to a major source of new clients and revenue.

Once a spec was worked out, I started on the wireframes while a member of the PCC team started the herculean task of reviewing each and every one of almost 400 products in their database. What we needed to create was a CSV to import everything using a modified version of a great WordPress plugin called, appropriately, CSV Importer. We made sure all numbers were saved separate from their units so metric system conversion could be done on-page. We also needed to import and attach data sheet PDFs and a product image during the import.


We wanted the wireframes to describe about 80% of the look of the site so that a final layout would be used as a general guideline for all pages rather than a pixel-perfect representation. It would also help build the responsive view, which would be done entirely in-browser. Working closely with the PCC team, we came up with key places that improvement could be made:

We also discovered some “nice to have” options that would help both customers and the PCC sales team:

One interesting component of this site was this idea of “semi-eCommerce” that I mentioned in the title. Product specifications and freshness must be confirmed before an order can be placed. and certain materials can’t just be sold to anyone online. As such, we needed a “shopping cart” that would function like any other but without the ability to pay. Customers would add products to a cart with specific quantities, then that list would be sent to the sales team to follow up immediately. This simplified things a bit by excluding the need to setup a payment gateway but meant that everything else needed to be built from scratch.

The wireframes I created ended up being much more complete than they usually are, partly because I knew the idea of “low fidelity design” would be new for PCC. I often encounter resistance to what is seen as an “ugly” version of a new site. That said, because of the timeline, it was critical for me to be able to work on the import process, admin UI, and pricing request functionality while the comps were being created. The final document was 14 pages describing all the visitor-facing page templates that were being created. A few examples are shown below, the whole document can be seen here.

Home: wireframe


Home: complete


Product category: wireframe


Product category: complete


Single product: wireframe


Single product: complete


Request pricing: wireframe


Request pricing: complete


With the functionality documented and agreed upon, I turned my attention to the site build. Besides all the additional functionality we were adding, I needed to retain:

This build was one of the largest I had taken on by myself and was a very enjoyable process overall. The PCC team was receptive to suggestions, excited about what was coming, and provided great feedback. It was great to hear directly from them exactly what their customers needed, wanted, and expected from this site. It was clear that they made this learning a priority.

From start to finish, the site took around 3.5 months to launch. The response from customers was very positive and the team took to updating and managing content quickly. This is a great example of what happens when a talented, motivated, customer-focused business takes their web presence seriously.

His knowledge of website analytics has placed our website within the first page in almost every product we carry, which in turn has improved our website traffic dramatically. In the first quarter of 2016, around 60% of all new accounts created in our system, derived from our new and improved website!

– Greg Fochtman, Sales Manager

< Take Action >

Suggest changes on GitHub ›

Comment via:

Email › GitHub ›

Subscribe via:
RSS › Twitter › GitHub ›

< Read More >


Oct 19, 2015

Much Needed Inspiration

An incredible movie, a life-changing product, and a quote. Might be just what you need right now too.