Tonkadale
Content re-organization and styling of educational resources for greenhouse customers
Project Overview
The client had goals to become a trusted local resource for all things related to houseplants and gardening in the Twin Cities area.
They brought me in to create solutions for several hub pages that could organize their learning resources while being easy to maintain for a team without advanced coding knowledge.
This project was all about balancing between utilizing their non-technical site features (Shogun Page Builder and BigCommerce) and writing custom code to accomplish their goals, along with training materials to help in maintaining content.
My Contributions:
- A custom "Learn" Hub page to house major content categories
- A custom "Video Library" page to house and filter video tutorials
- An updated "Blog" listing page
- A "Plant Care A-Z" index page to display basic information for 50+ individual plants
- A custom "Podcast" page to provide background and episode links to encourage subscriptions
Technologies Used:
- Figma
- BigCommerce with Shogun Page Builder
- Stencil-Cli, a handlebars-based theme engine
- Javascript
- CSS
Process
First, I met with the business owner to determine their goals for this page, which was to organize helpful customer resources, as well as position the business as a leader in educational content for the local area.
We brainstormed additional pages that could be created to support the overall business goals, such as an additional hub page for housing videos and perennial-specific content. Then, I produced high-fidelity wireframes, performed a content taxonomy audit of blog and video content to recommend tags and consistent organizational filters, and built out the pages utilizing the Shogun web builder app.
For theme changes, I installed a local version of their site theme, run on BigCommerce, to edit and preview style updates on my local machine, prior to recompiling and uploading an adjusted custom theme to the site.
For certain features, such as the filters on the video page, I created custom HTML blocks with styles and scripts to add custom layout and functionality on top of what was possible using their page builder tool. To assist with future editing of these areas, I created custom documentation and flow documents to guide internal media employees through the process and provide future reference.
Support & Documentation
Blog Tagging Audit
Visual organization and breakdown of a selection of blog articles, organized into a recommended tag structure
Update Guide Documentation
A thorough visual guide to updating content on the Video Library page, used for training and during updates by the greenhouse's media coordinators.
Full Page Visuals
Learn Hub Page
The jumping off point for the various learning resources and subpages, this page had to handle a lot of various content-types, feature timely content, and house easy access to common downloads, all in one place.
Across the board, every major page in the project included a new hero image section. The greenhouse brand style features bright, lively photography often. This area gives this photography a place to shine, and provides a visual opportunity to support page content. These images are rotated often.
The top of the page organizes sub-pages with visual previews to support the subject matter.
The middle content helps highlight timely resources, updated weekly.
The bottom section holds support visuals and downloads with a custom-styled vertical tab interface. Built to be a reusable pattern, the client just has to apply a class in their page builder to turn the default provided horizontal tab component into this vertical version.
Video Library Page
The greenhouse films regular video features and tutorials that they host on Youtube. However, they didn't want to rely on sending users a Youtube channel, and wanted to be able to support video content with product suggestions.
To solve this, I created two options for a layout - one that was a simple list, and another with more advanced features.
The client chose the advanced layout, which included new theme styles, and script to filter a list of video links by tag. Each video links to a page that displays the video in an embedded player.
Here, the client can use the BigCommerce and Shogun Page Builder plugins to add supporting product links.
To assist the client with updating this page, I created the support document above to outline the process and provide a visual breakdown of the code structure.
Care Card A-Z page
Previously, this page was an extremely long list of accordions, each that held a single image with no supporting text. The updated layout adjusted the accordion contents to display image contents as true web text.
Work included custom layout classes, custom classes to add to page-builder features to quickly apply the style anywhere needed, and a scripted alphabetical navigation.
