In May 2016, we launched the official website for a company that was once our side project: Ships-A-Lot! While it may be a service company, that didn't bar us from building its site on the Shopify platform! Max and I did all of the website design and coding; I was personally surprised by how simple it was to create a well-designed and effective service company website with Shopify.
Why did we do this...
We are very big fans of the Shopify platform. The infrastructure, customer support, payment gateway access, checkout recognition, security, adaptability, ease-of-customization, ease of mobile optimization, and simplicity of SEO & Ad ROI tracking has earned our eternal loyalty. We have always operated merchandising companies, so the platform was always a no-brainer. When we incorporated Ships-A-Lot, we were faced with the brief conundrum of website platform. We made some very sophomoric attempts at a site in Q1 2016.
Finally, we decided to make a run at launching a viable service website on the Shopify platform.
THESE ARE THEIR STORIES. *DUN DUN*.
What we're doing differently
In a merchandising company, the workflow of the website typically goes like:
Attract ⇾ Inform⇾ Close.
- Attract. The website draws a lead in with good stylistic choices, photography, and design. Poor choices here can bounce potential customers before they begin a purchasing decision. Good choices motivate people to go from landing page to product pages (or even better: a full cart).
- Inform. Product descriptions, photography, and reviews help the customer make their purchasing decision. Poorly executed, even some customers who are dead-set on purchasing can be lost in this step. Done well, the customer will move on to purchasing with a very positive expectation of your product.
- Close. Closing requires a secure payment gateway that will not hinder a customer's choice to purchase. This conversion step behaves much like the previous ones with respect to execution.
With a service company, the goals are only slightly different. Since choosing to outsource fulfillment is a very major decision for any merchandising entity, our website's workflow is designed to:
Attract ⇾ Inform⇾ Make contact.
- Attract. Our website engages customers with the same stylistic tools as an arbitrary merchandising website. We could change nothing but text and images and end up with an attractive merchandising website :D.
The goal is to get the visitor to the page outlining our accuracy benchmarks, since that has a link layout that naturally leads them to the rest of the information on the site. Three separate objects on the landing page link there, and they have been designed to be the most-likely-to-be-clicked objects.
Doesn't that targeting reticle just draw your cursor in?
Don't you want to hover over those big hero headers and click away?
Inform. The level of information provided should be proportional to the barrier a lead needs to overcome to make their purchasing decision.
This is to say that a "typical consumer" considering a product with a $10.00 total cost requires much less information to make their purchasing decision than a business considering a service contract whose costs could be beyond $10,000.00.
Our goal is to provide an informative and accurate value proposition to our customers. The
Accuracy ⇾ Customer Service ⇾ Speed ⇾ Case Study ⇾ Pricing
page sequence accomplishes just this.
Make contact. We offer the customer several different ways to begin a discussion with us, all focused on their needs as a business and how Ships-A-Lot can best suit them.
We operate in an industry where actual price is highly obfuscated by complex fee schedules, so our leads are especially keen to gather a very detailed picture of the service we offer. Customers also often have radically different cost expectations for fulfillment service. We try to help kindle a productive conversation by gauging these expectations in one of our contact methods, shown below:
What exactly did we do? (Light Shopify Technobabble ahead)
This entire site operates with a highly bastardized Venture Theme. We were able to strip out all of the parts designed solely for merchandising companies and add some new features that only service companies would be interested in.
The biggest job was gutting any merchandise-oriented features from Venture, our landing page should make this evident for anyone who is familiar with the theme's default layout and behavior. We isolated product-cards for our "products": Accuracy, Customer Service, and Speed; having them overlay the hero image instead of loading below in what used to be the "feature products/collections" section.
You may also immediately notice that we have removed any way for a site visitor to naturally access a shopping cart.
The biggest changes we've made are detailed below. If you take a look at our code, you'll notice it isn't exactly professional engineering work but it's quite functional.
- We re-purposed and redesigned product-pages into service descriptions. This allowed us to hijack all of the liquid-product-specific navigational tools: principally liquid object properties specific to products and product pages as well as the product-cards already available from Venture.
- We re-purposed the comments/complaints structure that Shopify uses (fields & submission forms that email field contents to the site administrator) to create a page where potential clients can give us feedback on their pricing expectations.
Written by Zach Lukaszek. Feel free to email any questions about this weirdness to firstname.lastname@example.org