Building a Modern Website With E-Commerce — Part 1 (a Case Study)

In this 3-part case study series, you’ll gain valuable, real-life insight into the world of building full-blown modern web apps, UI/UX design, SEO, payment gateways, and more. This series will be partly reflection/partly how the hell do we fix this mess and move on from here + other fun topics.

First, a throwback:

ZAIZON is a highly respected wine & food delicacy at Falkoner Allé, Frederiksberg (a big city in the middle of Copenhagen, Denmark). In early 2015, and early into my freelancing career, I re-designed Zaizon’s website, with WordPress as the CMS/blogging engine.

Besides building a responsive website, a key focus of Zaizon was SEO (Search Engine Optimization). We had a clear vision in mind:

Drive more traffic to the website from Google, with a specific emphasis on targetting Zaizon’s high-end wine coolers, of which Zaizon has many, both for private and professionals.

Zaizon’s SEO from a target keyword perspective has done really well. They still show up on page one on Google for several keywords, including Vinskabe København (Wine coolers Copenhagen).

A massive traffic boost

As far as general traffic goes, I started working with Zaizon April 9th, 2015, and Zaizon went from:

  • An average of 23 visitors per day in 2015
  • To an average of 93 visitors per day in 2016.
  • To an average of 131 visitors per day in 2017
Zaizon had 8597 visitors from January 1st, 2014 to January 1st, 2015 Zaizon had 33.968 visitors from January 1st, 2015 to January 1st, 2016 Zaizon had 47.989 visitors from January 1st, 2016 to January 1st, 2017

This year, 6-7 months into 2018 Zaizon’s average is 252 visitors per day. This means that Zaizon’s average has almost doubled compared to 2017(!)

Zaizon had 45.912 visitors in the first six months of 2018.
Zaizon had 45.912 visitors in the first six months of 2018. And we’re only halfway through 2018!

That’s great! Right..?

From a general SEO/site-traffic perspective, yes. Zaizon’s average number of daily visitors has increased almost 1100% in 3 years, that’s pretty good!

But then Lars, the owner of Zaizon called me up a few months back and told me that Zaizon’s webshop (a separate app which I was not involved with) has converted close to zero dollars in the meantime.

Wait, what?

Yeah, Zaizon has two sites: a WordPress business/blog site (which I built), and a webshop (on a subdomain) from another company.

Here’s what happened

After I built Zaizon’s main website, in early 2015, I offered to build their webshop also, for $5000 (my plan was to use WooCommerce).

But Zaizon respectfully declined my offer.

I don’t blame them one bit because someone else gave them an offer they couldn’t refuse:

  • A free webshop
  • Hosting
  • Updates
  • Support

For $1200 per year.

How can you say no to that? Sure, that $1200 per year subscription will turn into many thousands over time, but still, it would take 4.1 years before they’d reached the amount that I offered to build their webshop for ($5000).

Think of all the money you could make on a webshop, especially if you have hundreds of connoisseur products, and a respected name — like Zaizon has. For only $1200 per year, it sounds like a great investment.

But it wasn’t. And the reason is simple. Well, in hindsight it’s simple.

Rocking a successful webshop in modern times requires more than just having cool products listed somewhere on the web.

Back in the 90’s, having a webshop within just about any niche would be profitable, because you had no competition and few standards.

Today, there is fierce competition. And not only that, the standards of how a website (or web app) should look & function, are increasing rapidly.

Dinosaur saying if you shouldn’t judge a book by its cover, why do people say that its the first impression that counts?
Touché.

In modern times:

  • Your website should look damn good. Think Airbnb, in terms of aesthetics and cleanness.
  • Your website should be blazing fast. Nobody has patience.
  • Your website should have armor plated-security like a Fort Knox guarded by a pack of pissed off grizzly bears.
  • Your website should have seamless usability. “Don’t make me think”.
  • Your website should have top-notch accessibility features (e.g. for visually impaired people)
  • Your website should have as good Search Engine Optimization (SEO) as possible.
  • Your website should be fully responsive, or as I like to call it: device agnostic. It should work on every relevant device.

The aesthetics might be the least important factor to how Search Engines judge your website — but humans do judge a book by its cover.

All the other factors, security, speed, usability, accessibility, will directly affect how well you will be able to rank on the SERPS (Search Engine Results Pages). Why? Because the search engine algorithms use those criteria to determine how much total authority your website will have.

While Zaizon’s main page had great SEO, unfortunately, SEO was not part of the $1200/year webshop package Zaizon bought. Not even basic SEO, as it turned out when I started digging into the code base.

In fact, their webshop had as little SEO as you can possibly put into an HTML document. It honestly couldn’t have had fewer target keywords if you had purposely tried to remove them. This is the reason that Zaizon’s webshop never got any visitors directly from searching on Google.

A webshop without at least basic SEO is like a car without fuel. It will just sit there and be worthless. People won’t find your webshop, even when they directly search for products that you have.

But, if the main web page Zaizon.dk gets thousands of visitors per month (as the site stats posted earlier shows) why hasn’t that traffic been used to promote the webshop?

Well, it has, sort of. The main page as it looks right now does refer to the webshop, in the menu, and on the front page. But it hasn’t been enough.

From the beginning, there was a disconnect between the website and the webshop. I did the main site first, and then a few months later the company-which-shall-not-be-named did the webshop — without communicating with me.

Now when I think about it today, the above is a recipe for disaster. Today, I would have insisted on talking to the other company, even if I wasn’t on the payroll anymore, because lack of communication hurts everyone.

Back then, I didn’t have the “a website needs constant care and maintenance if it wants a future” mentality that I have now. Nothing is static.

After I finished up with Zaizon (a few months before they got their webshop) I went on to the next client. I didn’t even think about offering Zaizon a minimum maintenance package, which would have kept me in regular contact with them. Silly me.

Another major problem is that Zaizon’s webshop just plain sucked, technically, and visually, in pretty much every way imaginable.

  • The Search function is terrible. Slow and screams 2010. Search needs to be instant, and preferably with live-updating as you type.
  • The category filters suck. Clicking on a category leads to a “no products listed” page. Epic fail.
  • Here and there HTML/CSS code is leaking into the product pages. I’m not sure how this is possible.
  • It has no security. Everything was using HTTP (which is a total no-go from 2017 moving forward).
  • Last but not least: non-existing SEO.

So even when Zaizon’s main site directed visitors to the webshop (which did occasionally happen, based on our Analytics), they were met with an abomination of a webshop, which among other things, told the user that they were on an insecure connection. On a page, where people are supposed to use their credit card. Talk about bad first impressions.

Note: I purposely leave out any hint of the company who built Zaizon’s webshop, because I don’t want to be that guy.

But wait, didn’t that awesome deal that the-company-who-shall-not-be-named gave Zaizon, include updates?

Sure. And the company actually did offer Zaizon to upgrade his shop’s software, but when Zaizon accepted the offer, he never heard back from them. He wrote them twice, without getting any response. They still happily took his subscription payments though.


Introspection time

Now, it’s easy to point your finger at others.

When I look at Zaizon’s main website now, 3.5 years later, I will admit that from a visual design point of view, it’s only 'okay'. From a technical perspective, especially in terms of code performance, it’s pretty, pretty bad.

I knew nothing about programming at the time. I had just learned how to copy and paste my first line of code from StackOverflow, so the results were predictable. To compensate for my non-existing programming skills I had to use a bunch of jQuery plugins to handle basic interaction logic.

And that was beside the big bloated WordPress framework I used.

I also had no idea about how to assess the technical debt (cost) of adding a WordPress plugin for every technical feature Zaizon desired.

My CSS level at the time also wasn’t anything to brag about, I had only just passed the “let’s try this and see what happens” stage. I, of course, didn’t know how bad it was back then.

TLDR: a bloated WordPress framework and an unruly CSS stylesheet, does not a performant website make.

And this is on me.

I knew Lars for years before I built his website. Getting the gig was a huge honor to me, — and I put everything I had into it, relative to my abilities at the time. But compared to today’s standards, it’s not good enough.


Rebuilding Zaizon

It’s time for a change. The Zaizon’s website — not just the blasphemous webshop — needs a total make-over.

Buckle your seatbelt!

Pretty much everything needs to be wiped clean, besides the Content SEO, which is still solid still to this day (hence the high amount of traffic). Ironically, SEO was the topic I knew the least about at the time, but it turned out to be the one thing that we had the most success with (Lars and I did the SEO in collaboration).

I should also mention that Yoast SEO, an excellent SEO plugin for WordPress, was a great help in guiding the SEO decisions Lars and I made.

Note: the fact that Zaizon’s SEO is still good in 2018, even though Lars is using the same dead-simple technical SEO approach that I taught him in 2015, says something about the life-cycle of SEO. Unlike frameworks, libraries, and plugins, SEO has a much longer expiry date.

Unfortunately, all that glorious traffic Zaizon has had the past 3 years, has not led to conversions from the webshop.

But that’s changing now.

With Zaizon 2.0, we’re not only fine-tuning Zaizon technically and visually, we’re also going to one-up the content SEO. It’s already good — but we’re going to make it even better.


Zaizon 2.0’s New Tech Stack

For the remake of Zaizon’s website and webshop, my team/partners have decided to swap out WordPress as a CMS, and instead build a lightweight CMS from scratch. This is easier said than done.

But a lot of amazing things have happened in the landscape of full-stack development, since the last time Zaizon and I (now we) worked together. There are many, many alternatives to WordPress, and depending on the context, I’d say better alternatives.

The base of Zaizon’s new stack looks as follows:

  • Front-end: React & Apollo via Next
  • Server: Node (graphql-yoga) with PM2
  • API: Prisma (Node + Docker)
  • Database: PostgreSQL

For styling we’re combining:

  • FunctionalCSS (utility-first CSS).
  • Styled Components (CSS-in-JS).

Don't worry if the above sounds gibberish, we’ll cover all the tools and technologies in detail, in part 2 of this series.

This article has been written at the early stages of this project, and thus not everything has been decided upon fully. But the stack above is currently wired up in development mode and so far we’re happy with everything.

We’re actually building two web apps with the stack above:

  • One app for Zaizon’s main site/blog.
  • One app for Zaizon’s webshop.

There are many reasons that it makes sense to separate the two, which I’ll cover in part 2.

For the CMS/content publishing (blog) we’re using SlateJS which is a flexible framework for building rich WYSIWYG text editors.

For the webshop’s payment service, we’re strongly considering Stripe, but there are many options.


Coming up next

Part two of this series will come out in a few weeks. Part two will include plenty of insight to the what & why we the picked the specific technologies and languages for Zaizon’s new web app(s).

And thus, the journey towards Zaizon 2.0, begins.

No comments to display.