Case Study: Finding Fun in Paradise with WooCommerce Storefront & Friends

Building a multi-vendor marketplace for bookable activities using the WooCommerce Storefront Theme and several Woo Extensions.

Like other projects, this one began with the client hiring me to write and resulted in the client hiring me to design and build the website too. Score one for Ash Babe! Plus, we became friends in the process. Always an added bonus.

GOAL

Build a streamlined marketplace of activity vendors, restaurants and other St. John service providers so that visitors may browse, inquire and book their activities in advance and all in one place.

 

MY ROLES
  • Copywriting
  • Website Design & Build
  • Project Management
  • Consultation & Coaching

 

SCOPE

I could easily write a hundred page case study for this project. It was fairly complex and I played many different roles. But, nobody has time to read that. Nor, in fact, do I have time to write it.

Therefore, what follows is a project summary focused primarily on the areas in which I had the most impact. I do not get into a detailed discussion of the functionality, including integration of several WooCommerce extensions. Much of that part of the project was led by the client, using me for guidance and configurations above his knowledge level.

I also have refrained from discussing the business model or marketing efforts, although I’ve spent considerable time with the client discussing those areas as well.

My largest role was in front-end design, writing copy, and overall project guidance.

Writing and design challenges are discussed, by web page, below.

 

PLEASE NOTE

All screenshots reflect how these web pages looked the last time I touched them, and do not necessarily indicate how the live website renders now or in the future.

JUMP TO:
PROJECT BACKGROUND

When I assumed control of the website design and build for this project, I was the third person/team to be in this role. The first iteration was built on Joomla. That was scrapped (partly, at my suggestion) for a WordPress /WooCommerce/WooBookings combo. Unfortunately, the “premium theme” purchased from a large theme mall ended up being a MAJOR dud.

To my deep and unending satisfaction, I finally convinced client (Randle) to do what I’d recommended since joining the project. That is, to build the site on the WordPress/Woocommerce platform, using the free WooCommerce Storefront theme. It’s an infinitely customizable theme, built exactly to WordPress standards, integrates perfectly with WooCommerce, and will be supported for years to come.

Now that Automattic — the company owned by WordPress founder, Matt Mullenweg — has purchased WooCommerce, it makes even more sense to use official Woothemes and plugins.

 

 

This project was one in which the client wanted to play an active role in building the site. Therefore, Randle initiated most of the design and functionality directives, while I advised, planned and executed. Of course, I did not (ahem…could not) hesitate to make recommendations steering him in better direction, when necessary.

When I came on this project, Randle already had a logo, brand colors and an aesthetic in mind.  He also had a tagline, “Inspired Travel Starts Here,” but needed help articulating what this actually meant, how it described his brand values, connected to his business goals and, ultimately, how it benefited his customer.

He wanted a clean, modern look that would appeal to affluent St. John tourists with liberal use of island photography, displayed at full-width.

Most of the pictures on Paradise Found were taken by Randle. A few by yours truly. And a couple of gorgeous shots by Jessica Slemmons. There are no stock photos. (Hooray for that.)

 

Integrating WooCommerce Bookings, Deposits, Vendors and More

I would be remiss to completely avoid talking about this website’s functionality. So here is your brief overview. (Requests for a more detailed explanation will be considered. 😉 )

Once Randle discovered WooCommerce extensions, he found what he needed to make his vision come together. I sent him in the direction of WordPress and WooCommerce Bookings in the first place, but I did not help him figure out that an integration between Bookings, Deposits and Vendors would — for the most part — do what he’d been trying to build for the last couple years.

My role was more in guidance and configuration after the Vendors and Deposits extensions were installed.  I went through and figured out how they worked, then shared what I found with Randle, who was doing the same thing on his end. We did have to hire a developer with more advanced skills than my own to do some php custom coding.

Randle also used several other plugins, both WooCommerce and not, to build Paradise Found. He found most of these on his own, and therefore I cannot take either credit or blame for what they do and how they work. My preference is to use as few plugins as possible to minimize bloat and bugs. But my reality is that sometimes I do not get to be a dictator (be it petty or benevolent) when working with clients on their websites.

That being said, I do endorse fully the following plugins used on this project:

Okay, that does it for my functionality bit. Any requests for a more thorough explanation may be submitted in the comments below.

 

The Ever-Evolving Home Page

This Home Page has gone through several iterations, the most recent at my insistence.

Originally, we made two mistakes.

  1. Wasting our best website real estate by not getting to anything like the point until after the first, very large photo. We used the valuable space above-the-fold to welcome our guests instead. A sweet thought, but utterly useless in reality.
  2. We also had the top photo displayed via a slider plugin¹ that Randle fell for— hard and fast. Unfortunately the plugin was anything but fast, and was in fact hard-wired to have a five second hang time before loading the first photo. (WHY?! Oh, for the love, why?) Way too long for this prime piece of real estate to remain empty, save for a maddening spinner.

At my urging, Randle agreed to let me redesign the top of the Home and Services pages. The hero-style image header with simple calls-to-action and large buttons are styled with pure CSS to load as quickly as possible. The difference in load time makes this a no-brainer. Watching a spinner for 5 seconds while the hero image loads is truly bad user experience. I couldn’t let a website with my name on it go out into the world that way.

 

 

 

 

Fewer Words with Each Revision

This last round of revisions found me simplifying the copy even more than I already had. No need for several long sentences! In fact, as I read the screenshot now, I see two more words I’d like to remove. But I resist. Because this case study needs to get done. #perfectionistproblems

From a sales and messaging perspective, the benefit I focus on is that using Paradise Found makes planning your St. John vacation easier because on a single website you can:

  1. Check out all St. John restaurant menus and make reservations for free.
  2. Browse the best activities on St. John and book the ones you want (saving you from phone tag, endless web searches, etc.).
  3. Peruse vacation rental options from our accommodations partners.
  4. Get the best St. John parking details and tips on the planet.
  5. Read St. John travel tips from longtime locals.

 

Home Page Layout: Less is More

The home page layout is simple: several full-width photographs separated by white space and simple copy. The photos display the many beautiful sides of St. John with overlaid buttons navigating to different areas of the site. The initial concept was Randle’s. I chose the photos, wrote the words and styled with CSS.

We used the aforementioned disappointing slider plugin for all of the photos on the front page. I would have chosen to do it with pure HTML and CSS. BUT Randle was super enthused about the plugin, and I can’t have my way about everything. So I resigned myself to try it.

Originally, Randle wanted a parallax effect on these photos and some light animation. We kept it this way for a few months. But, ultimately the effect was too busy. To my profound relief, Randle agreed to turn off all parallax and animation before our most recent round of revisions.

 

Styling our Main WooCommerce Shop Page

When WooCommerce is installed, it creates a Shop Page that operates like a clickable table of contents for your online store. A taxonomy for product categories is installed at the same time. At its most basic, the Shop Page displays these top-level categories in a photo grid that includes links to each product category.

We call this our Services page. Like the Home Page, it includes a hero-style header, but this one includes three action options.

The copy persuades travelers to book their activities early so that they can truly relax and be inspired on vacation. It also explains – in the least amount of words possible – how the Paradise Found website works and how it can help them.

At the bottom of the page is a photo menu that takes the user to the top level categories. I’ll be discussing the photo grid menu that displays on almost every WooCommerce page in more detail below.

 

Customizing the WooCommerce Product Category Pages

The product category pages are a high traffic area of the Paradise Found website, and it was important to Client Randle that each product category page offered a unique experience. Meaning, he wanted each product category to have its own header image. This absolutely makes for a richer website experience, but (a word to the wise) choosing every photo also made for quite the time-consuming task.

Randle also wanted to use travel quotes throughout the site to reinforce the inspiration that travel, at its best, can provide. I chose the quotes based on the page topic and the image used.

 

CSS Challenges: Using Flexbox to create a dynamic photo grid

The biggest challenge with the product category pages was in styling the photo grid menus included with WooCommerce. Randle did not like the Storefront theme’s out-of-the-box styling, a photo grid with hefty margins.

He wanted a more immersive experience that echoed the full-width hero-style images at the top of each page. He also wanted to include some light animation, creating a subtle effect of motion.

Sounds easy enough! And if the categories and products were to be static, it would’ve been. BUT, since — especially on the bottom-level product pages — the number of offerings is subject to frequent change, the grid needs to be dynamic. It also needs to be responsive. (I mean, duh. It’s 2017.)

If there were margins between the images, a dynamic grid would be unnecessary.

Grids undoubtedly look more pleasing and complete with an even number in all rows. But when there are wide margins between the photos, the imbalance of fewer photos in the last row are merely a mild annoyance.

Take away margins and make that grid full-width and the same imbalance turns into a jarring eyesore.

Thankfully, with the help of this post by Heydon Pickering, it’s now impossible for one category photo to end up an orphan dangling alone on the bottom.

If there are three categories and a fourth is added, the grid will resize to be 2×2. Add a fifth category and the grid will resize again with three photos on top and two on bottom. Add a sixth and it will resize again to the beautiful 3 and 3. Add a seventh and the grid will be 3 on top, 2 in the middle and 2 on the bottom.

The menus look best when there’s a multiple of three categories or products, but even without, the square photo grid remains balanced.

In the following screenshot, the number of restaurants is one less than a multiple of three, resulting in two square photos in the last row.

 

 

 

CSS Challenge: Making Photos Both Blend In and Stand Out

Another challenge created by the full-width, no margin photo grid was figuring out how to keep the photos looking good next to one another. Since, especially for product photos, we’re largely dependent upon what our vendors supply. I needed to find a way to ensure these photos wouldn’t clash.

So using CSS, I decreased the saturation point for the photos in the menu grid. And when a photo is hovered over, a subtle CSS animation scales the photo up, which gives a motion effect, and the color goes from under-saturated to over. This shows off the vivid colors of the Caribbean without overwhelming the entire page. You can see this effect above with the Cafe Concordia square and below with the Snorkeling category.

 

 

Styling the WooCommerce Bookings Product Page

The product page itself also required quite a bit of design work to conform to Client Randle’s vision – both in terms of design and function. Not only did we change the page layout and design elements to fit better with the brand aesthetic and business goals, but we also had to integrate the checkout forms for three different WooCommerce extensions: Bookings, Vendors and Deposits.

The calendar and checkout form required extensive styling, some of which was tricky, especially when coding for responsiveness. This is where several plugins come together and need to collaborate. And hence, where the conflict arises. We succeeded in the end, but it wasn’t without frustration and compromise. Styling and configuring the integration of the WooPlugins continued to present the same challenges throughout the checkout process. We have made it work, and I’m happy with the result. Mostly. I’ve chosen to omit screenshots of the entire booking / checkout process for the sake of brevity.

I created a template to use for formatting the descriptions for consistency, since I would not be the one setting up the product pages.

 

 

 

Writing and Designing a Sign-Up/Landing Page with Several Audiences

We needed to build a landing page to send St. John vendors that would quickly and easily explain what Paradise Found St. John is about, how we can help one another, and links to a sign-up form specifically for their type of business.

Randle put together a mockup of this page, which I used as a basis for my work designing, copywriting and coding.

It was a challenge to describe (in as few words as possible) how the different players convene to make Paradise Found work. I also wanted to design the page so that it is engaging and easy to read.

 

 

 

Phew! That was a lot of ‘splainin’. And I still feel like this was a breezy summary! If you’re still here, I commend you.

 


FOOTNOTES

¹ Said plugin that I will not name but will link to has a beautiful website that uses virtually none of its own technology. Lol. So you buy the plugin thinking you’ll be able to pull off the elegant animations displayed on the site, but then you find out that you can’t. *face palm emoji*

 

 


 

Think we’re a website match made in heaven?
Here’s some ways we can work together.

Questions first?

 

Wanna keep track of me?

Sign up for my email list in that gold box down below.
Follow me on Instagram too. Just click the purple button under the pretty grid of photos.

Your thoughts?