You may remember my article regarding my client, Kyle Laroque, of We Stripe Parking Lots Inc. a Vancouver based company asphalt painting company, and the logo/business card identity design I created for him (if not, you can read about it here; LINK). As part of his identity package, Kyle also needed a website (www.westripe.ca) created from scratch. This article will outline how I developed his website in two phases while he simultaneously developed his business.
Because Kyle's business was new he didn't have an existing website or content from which to draw from - so, this project really was to be built from scratch. My initial consultation was to get an idea of what Kyle had envisioned for his public site and the type of content that he felt was needed.
The backend development of the website would be determined by the nature of ongoing required maintenance and complexity of the site. For example, a Wix/Weebly/Squarespace website would be less expensive to develop and maintain. A WordPress/Magento/Drupal website would require a 3rd party developer and depending on the website update requirements it would be much more time consuming and expensive to develop – ongoing maintenance may or may not be done in-house depending if the developer had built tools allowing for easy updating. In the case of We Stripe, it was quickly determined that a complicated backend would not be necessary. We settled on a Wix backend as it offered the most custom design possibilities of the various simplified website builders.
(source: Wix web editor for We Stripe website)
Often content development on web projects are left to the 11th hour and as a result much of the web strategy is compromised. The content is a valuable business asset and with that in mind, I began doing research and content audits from his competitors with which to analyzed and create an initial strategy. After discussions, revisions and approval I outlined a plan of attack. Our strategy was simple, we would position ourselves above the competition as a company of exceptional quality, professionalism and workmanship - and we really wanted to hammer this home - so that we would quickly overcome new customers potential indecision or objections and encourage them to contact We Stripe.
It’s no accident how the We Stripe logo and color choices were developed. The black background gives a sense of sophistication, formality and power and the yellow/orange/gold tone reflects energy, wealth, and attention/attraction. Combined we have a palette that reflects the characteristics of the We Stripe identity we are trying to convey.
Currently the local competition of We Stripe is made up of, broadly speaking, two category types;
Family operated business, both short- and long-term
In most cases, I was surprised to see that the websites of both the smaller family run business as well as the larger organizations had design and content that was behind current thinking regarding online sales and marketing theory.
According to CCEB's Marketing Leadership Council it is common for a B2B customer to be - at a minimum - over 57% of the way through their sales journey before speaking to a sales rep, so it is even more important that every aspect of an online strategy is carefully considered (B2B's Digital Evolution LINK).
In the example below, Precision Line Painting, has a generic look and feel to the website and as a customer, I want to feel confident that a business treats my first contact with them professionally and seriously. This website feels like it has had a limited amount of thought invested in creating it, which makes me feel that they company will also invest very little in their business relationship with me - and ultimately, all their customers.
Considering that most customers are becoming more informed at each stage of their own online research this website homepage also does not teach me, the consumer, anything new that will help me though the sales journey.
Finally, the design on this and many other pages does not have a clear sales funnel, or in other words, it does not direct the customer into any next step or action - even finding the contact information is challenging as it is in very small, non-contrasting text on a grey back ground at the bottom of the page - are they even interested in my business?
(source: Precision Line Painting website screen capture, 2016)
Web Content, Tactics and Design
With a small amount of content to draw upon from We Stripe, I imagined the best tactic would be to create a single and simple ‘hero’ page in the first phase - with the second phase to be developed as Kyle had numerous jobs under his belt and a wider, deeper variety of content to share.
With mobile now dominating web browsing and the fact that most of Kyle’s customers would be new, we felt that the home page needed to quickly address any question potential customers would have without making navigation tricky - leading to them exiting the site - so we settled on a short company explanatory text followed by three key subsections.
Legendary advertising guru David Ogilvy once said: “On the average, five times as many people read the headline as read the body copy. It follows that, if you don’t sell the product in your headline, you have wasted 80% of your money“ and having worked in the publishing industry for more than 20 years, I'm a firm believer in strong headlines and supporting copy.
As I mentioned in the strategy above, Kyle wanted to model his company as a firm that would be noted as being more than just the best in quality, service and workmanship - they wanted to be thought of as exceptional.
The text purposely highlights the value proposition of both the company and the services as well as reinforces the identity. I wrote direct titles and short paragraphs for the main introduction and three subsections as follows;
WE STRIPE PARKING LOTS provides exceptional quality, eco-friendly products and services including customization options - all within your budget. That's why our clients refer our services time and time again.
WE STRIPE prides itself on its FAST, ACCURATE and high QUALITY results - all of which will meet all the requirements of your municipal and provincial standards.
Our superior quality service is just one of the reasons our customers keep coming back to us again and again.
WE STRIPE uses the hightest quality materials and equipment. We offer eco-friendly, waterborne paints and use state-of-the-art equipment, guaranteed to give you exceptional results.
With mobile making up more than 50% of all web browsing, it was also important to consider all the various screen types while considering the design. The main text area was limited purposely to a 900x600 area, this way small desktop, laptop or tablet would not cut off important information. The site was also configured to be viewed on the smallest of mobile phones.
The top (above the fold) portion of the website was to be devoted to the navigation bar, the logo, a large phone number, an introductory paragraph and 3 hero images clearly illustrating what We Stripe does as well as their pride guarantee 'doing it right the first time'.
(source: We Stripe Parking Lots website)
Each hero shot automatically dissolves to reveal the next while the text remains static on top, then when the viewer scrolls down, the next subsection describes each service offered by We Stripe.
Initially We Stripe only offered six services, but now they have grown and offer nine unique services for their customers. Note that the navigation banner as well as the logo remain fixed at the top of the screen - making it super easy for customers to find the We Stripe contact number and keeping it top of mind while browsing the website.
(source: We Stripe Parking Lots website)
Below the services section is a slider with numerous images visually reinforcing the specific services as well as breaking up the text between sections. As the user continues down the webpage they are next presented with the Testimonials section. Customer testimonials are a fantastic way for a business to gain credibility and grow sales - as well as ensure confidence with potential new customers.
The final section highlights the products used by We Stripe. Here we described the associated ‘green’ processes and products that Kyle and his company employ when working both indoors and outdoors. It was important for Kyle to differentiate his service from the competitors in this way as he is passionate about environmentally friendly practices and their benefits.
(source: We Stripe Parking Lots website)
I've spent a lot of time describing and showing the copy was used on the home page, but it is important to know that content design and visual design must communicate clearly together as a whole. You may have also noticed the color combinations and the text layout. The colours were chosen specifically and served two purposes;
The neutral color is favorable to my clients customer demographic, which are mostly men between the ages of 35-55 accustomed to working with the Trade Industry
The neutral color allows the webpage to highlight, through color, any specific tactical decisions, such as the name and phone number as well as important links to more information
By using these two tones of grey the website implies a level of quality and sophistication that helps indicate the We Stripe brand and identity of rising above the competition
Then the sections were broken up with horizontal bars so that navigation and organization would be clear to the viewer. This was reinforced with the formated text, having the Headline and Subhead also divide the sections horizontally.
The Headlines of the text were also displayed promimently at the top of each section of the webpage to clearly message that We Stripe is exceptional at everything they do. The text chosen is favored by our demographic and formatted into small, bite-sized bits of copy that any busy professional can quickly scan and digest.
As simple as the home page may appear, there has been a lot of thought in the execution of the design and content to clearly define We Stripe's brand characteristics and messaging - now it's Kyle and We Stipe's responsibility to keep the company actions on message and brand by being exceptional in every aspect of their business.
"I contacted PalbergWERX for a logo and left with a complete company brand. It is just amazing the difference an experienced Creative Director can do for a new company like mine. I had ideas of what I wanted to accomplish and Richard turned them into reality. My brand now helps me solicit the type of clientele that I envisioned when I began my company. My brand now makes the difference between a single $1,000 job and a $50,000 contract. This is so much more than I expected and I can't recommend Richard's company, PalbergWERX, enough!"
Kyle Laroque, We Stripe Parking Lots Inc.
In Phase Two of the website, we will begin planning the extended services content and other detailed navigation pages offering further information as well as gearing the website to demonstrate the brand, and not just talk about it. Stay tuned.
If you would like to take your design to the next level,
call PalbergWERX Creative Direction
at 604-356-1144 or email me at PBWX@outlook.com
I can help you undertand your ideal customers and build your brand to take advantage of how you want to portray your image to engage with your customers - increasing your marketing investment!