content marketing Archives

HostGator Blog Theme on WordPress

September 7, 2018September 13, 2018
by Samantha Soper

After the successful implementation of the Bluehost blog theme, I was referred to their sister company for the HostGator blog theme redesign. While the Bluehost project was more development-focused, HostGator’s team wanted full UX design, theme development, and implementation.

HostGator Blog Theme

First of all, I single-handedly took this project through UX design and development to final implementation in under six months. Significant improvements to SEO, schema markup, and customizability were the HostGator team’s most important objectives. Therefore, those requests were kept in mind throughout the design and development process.

Current Live Site

UX Planning

As a result of my blog questionnaire, I learned that their content manager was inspired by FitBit and Hubspot’s blogs. Additionally, they wanted a more modern look using colorful flat graphics, matching their new brand direction. They also liked board-style content blocks and subtle hover effects.

Sketch Concepts

Home Page Wireframe Sketch Options

Single Post Wireframe Sketch Options

Archive Page Wireframe Sketch Options

Wireframe Mockups

Home Page Wireframe

HostGator Blog Single Post Final Wireframe

Single Post Wireframe

Archive Page Wireframe

Tools Used:

Lean WordPress Theme Foundation: _S (UnderscoreS)
WordPress Test Data: WP Theme Unit Test
Framework: Bootstrap
Class for Recent Posts Widget Adjustment: Extend Recent Posts
Class for Category Meta Additions: Catapult Taxonomy Meta Class

Bluehost Blog Theme on WordPress

March 2, 2018August 29, 2018
by Samantha Soper

A former colleague, Machielle Thomas, contacted me to build the Bluehost blog theme, since they were looking to redesign. They had worked with their in-house designer some mockups, but they didn’t have a developer on staff with time available to complete it. Their blog was built on WordPress and Machielle worked with me during the Golfsmith blog build. As a result, she knew my experience and skillset would be a good fit for the project.

Bluehost Blog Theme

Based on the provided homepage and single post mockups, I built out the blog in a short time frame with little other creative direction. Significant improvements to SEO and customizability were the Bluehost team’s most important objectives. Therefore, those requests were kept in mind throughout the development process.

Current Live Site

Tools Used:

Lean WordPress Theme Foundation: _S (UnderscoreS)

WordPress Test Data: WP Theme Unit Test

Framework: Bootstrap

Kettlebell Kings Character Concept Art & Illustration

January 18, 2018May 1, 2018
by Samantha Soper

When the art directors working with Kettlebell Kings put out a call for a figure illustrator on Facebook, I answered. The company was looking to enhance their social content with infographics of their workouts. My digital illustration and figure drawing experience was especially relevant for the gig.

The Kettlebell Kings Character

Concept Art & Model Sheet

First of all, I had to help them come up with the character concept for the figures. The client wanted a character based upon their logo, but with a comic book twist. Additionally, the art directors were inspired by the workout infographics on Deezify and vintage Charles Atlas illustrations. After a couple of rounds of proofs, the client agreed on the concept below.

Kettlebell King Model Sheet

Studies & Initial Concept Sketch

Early Character Proofs

Kettlebooty Figures & Infographic

Click to enlarge.

Band Goblet Squat Illustrations

Curtsy Lunge Illustrations

Kettlebooty Infographic by School of Life Design

Credits:

Art Direction & Graphic Design: School of Life Design

Spring Golf Look Book 2017

May 5, 2017August 11, 2017
by Samantha Soper

Due to my speedy coding time, I was assigned to UI development for the 2017 Spring Golf Look Book by Golf Town’s (GT) marketing team. First of all, GT’s in-house studio designed the look book microsite’s UX and interface. After approval, the lead designer and I coordinated on the specifics of implementation and graphics delivery.

I utilized the Bootstrap framework and I implemented jQuery carousels and waypoints, while developing this project. In addition, I used CSS3 gradients and Google Fonts to match the designer’s mockup without relying on images. Furthermore, the microsite is fully responsive and translated for English and French.

2017 Spring Golf Look Book

Current Live Pages

Example Screenshots

Microsite Landing Page for 2017 Spring Golf Look Book in English

Men’s Look Book Scroll-through Animation in English

iPad Men’s Golf Look Book in French

Find Your Golf Style Men’s Look Book Page

Mobile Men’s Look Book Page in French

Microsite Landing Page for 2017 Spring Golf Look Book in French

Women’s Look Book Scroll-through Animation in English

iPad Women’s Golf Look Book in French

Find Your Golf Style Women’s Look Book Page

Mobile Women’s Look Book Page in French

Credits:

UX/UI Design: Tevin Castle

Pro Pages Plugin on WordPress

April 6, 2017September 16, 2017
by Samantha Soper

The Pro Pages plugin generates a WordPress (WP) custom post type for information about various PGA Pros. Each Pro Page contains equipment, apparel for major tournaments, and a Twitter feed.

This project was an effort to migrate my successful What’s in the Bag? (WITB) PHP application built for Golfsmith over to Golf Town. Due to inconsistencies between the two server environments, I rebuilt the application as a WordPress plugin on the Golf Town blog. Additionally, I worked closely with GT’s IT to initiate a hosting relationship with WPEngine.

Pro Pages Plugin WP

Current Live Pages Samples

UX Planning

Data Model

On the WP admin side, equipment and apparel items are added as repeatable field groups. When a Golf Town (GT) product URL is placed into a product URL field, a combination of AJAX and CURL pull the product title and image from the GT e-commerce site. This OOP plugin is i18n compatible, with French-Canadian l10n files.

2017 Masters Tournament Scripting Sections

These elements were live on the Golf Town blog during the 2017 Masters tournament. While these sections only remain active on the page for a couple of weeks after the tournament, I captured screenshots to preserve my work.

All Players Masters scripting archive on GT Blog in English

All Players Masters scripting archive on GT Blog in French

Jordan Spieth Masters scripting on GT Blog in English

Jordan Spieth Masters scripting on GT Blog in French

Rickie Fowler Masters scripting on GT Blog in English

Rickie Fowler Masters scripting on GT Blog in French

Rory McIlroy Masters scripting on GT Blog in English

Rory McIlroy Masters scripting on GT Blog in French

Sergio Garcia Masters scripting on GT Blog in English

Sergio Garcia Masters scripting on GT Blog in French

Dustin Johnson Masters scripting on GT Blog in English

Dustin Johnson Masters scripting on GT Blog in French

Tools Used:

Object-Oriented Plugin Foundation: WordPress Plugin Boilerplate
Field Generator: CMB2
Twitter Feed: TweetPHP

Golf Town Blog on WordPress

March 31, 2017August 9, 2017
by Samantha Soper

The Golf Town blog came into play as a way to move several successful digital programs over from Golfsmith. Unfortunately, the What’s in the Bag (WITB) PHP applications that I built for Golfsmith didn’t work on Golf Town’s server environment. Due to this, I made the suggestion that the WITB Pro Pages content be incorporated into the blog.

There was a rush to get the WITB Pro Pages plugin live before the 2017 Masters. Starting with the old Golfsmith blog on my own development environment, I had a contractor begin working on modifying the template to match Golf Town’s branding. I focused on getting the WITB plugin built out and set up full localization on the Golf Town template, once styling was completed. I coordinated with Golf Town’s IT staff to set up WPEngine hosting for the blog and then handled a portion of the MySQL migration to the new hosting location.

Golf Town Blog

Current Live Site

Result

Major Canadian golf news sites have already started to partner with the Golf Town blog. By August, ScoreGOLF teamed up with Golf Town to announce their yearly Top 59 Canadian Golf Course Countdown. In addition, the blog nets over 28,000 views on peak traffic days.

Credits:

Additional Theme Development: Shelby Pickett

PGA Pro Sketch Videos | 2016 Tour Social Campaign

July 27, 2016February 1, 2018
by Samantha Soper

Golfsmith’s social media manager wanted to end the 2016 tournament season with a bang. He asked me to do some PGA Pro sketch videos for the 5 Players to Watch at the PGA Championship blog post, after seeing the Facebook response to one of my time lapse art videos. During my weekend, I illustrated portraits of each of the featured players, as well as a title card. In addition, I provided art direction to the photography studio on lighting, stage set-up, and video production. As a result of my planning and pre-drawing, we were able to wrap shooting in two and a half hours.

The PGA Pro Sketch Videos

Which pro will win big @PGAChampionship ⛳🏆🏌

Check out our list of guys we think just might; https://t.co/lL4ZgsOLBu pic.twitter.com/RBmsQbASiF

— Golfsmith (@Golfsmith) July 28, 2016

Good opening round of 67 from The Open Champion. 🇸🇪👍🏌#PGAChampionship pic.twitter.com/ESgSuNAKFi

— Golfsmith (@Golfsmith) July 28, 2016

A fan favorite this week at the #PGAChamp #BEEF @BeefGolf 👍💯🏌 pic.twitter.com/1uh5eRdbCh

— Golfsmith (@Golfsmith) July 30, 2016

The Results

Due to the new approach to content, the marketing department got a lot of recognition throughout the company for their innovation. Most noteworthy, PGA pro and fan favorite Andrew “Beef” Johnston retweeted the sketch video of him from Golfsmith’s Twitter. The tweet got a huge boost in organic reach and engagement, while also making Golfsmith look like they have their finger on the pulse of the pro-golf circuit.

That's wicked 😀 https://t.co/tr1XAGvfy5

— Andrew'BEEF'Johnston (@BeefGolf) July 30, 2016

Credits:

Copywriter: Alex Kroviak
Social Media: Adam Foster
Film and Studio Set-up: Sarah Kerver and Mark Seeger
Video Production: David Adams

What’s in the Bag? Pro Golfer Pages

July 2, 2016August 9, 2017
by Samantha Soper

What’s in the Bag? (WITB) pro pages were birthed from discussions between the e-commerce and content marketing teams. They wanted to bring major tournament outfits (scripting), Twitter feeds, and the equipment in the bags of selected pro golfers to the websites.

While they had featured simple tournament scripting landing pages in previous years, they needed my user experience and UI development expertise to pull off their idea. In total, the WITB pages represent the bags of 20 PGA and LPGA pros. Furthermore, the Twitter wall features live tweets from over 100 different pro golfers.

During major tournaments, the WITB pages are enhanced with a tournament scripting “What the Pros Wear” section, through coordination with select vendors. Additionally, this multi-layer PHP web application also deployed internationally on Golfsmith (US) and Golf Town (CA) in English and French.

What’s in the Bag? Pro Landing Pages

Current Live Pages

NOTE ON LIVE EXAMPLES: As of 11/4/16, Golfsmith is no longer conducting business and all associated websites are offline. However, you can check out the Golf Town Pro Pages plugin, which I used this PHP application to build.

2016 Tournament Scripting Sections

These elements were live on the Golfsmith and Golf Town sites during the 2016 Masters, US Open, and PGA Championship. While these sections only remain active on the page for a couple of weeks after the tournament, I captured screenshots to preserve my work.

Jordan Spieth Masters scripting on Golfsmith

Jordan Spieth Masters scripting on Golf Town in French

Rickie Fowler Masters scripting on Golfsmith

Rickie Fowler Masters scripting on Golf Town in French

Rory McIlroy Masters scripting on Golfsmith

Rory McIlroy Masters scripting on Golf Town in French

Bubba Watson Masters scripting on Golfsmith

Bubba Watson Masters scripting on Golf Town in French

Jason Day Masters scripting on Golfsmith

Dustin Johnson Masters scripting on Golfsmith

Jordan Spieth US Open scripting on Golfsmith

Jordan Spieth US Open scripting on Golf Town in French

Rickie Fowler US Open scripting on Golfsmith

Rickie Fowler US Open scripting on Golf Town in French

Rory McIlroy US Open scripting on Golfsmith

Bubba Watson US Open scripting on Golf Town in French

Jason Day US Open scripting on Golfsmith

Dustin Johnson US Open scripting on Golfsmith

Rickie Fowler PGA Championship scripting on Golfsmith

Rickie Fowler PGA Championship scripting on Golf Town in French

Jordan Spieth PGA Championship scripting on Golfsmith

Rory McIlroy PGA Tournament scripting on Golf Town in French

The Results

As a result, during major tournaments, the pages drove huge traffic spikes and increased revenue for both brands. Due to marketing efforts around this application, our email team participated in a Lunch & Learn with LiveClicker at the 2016 Experian Client Summit.

Golfsmith Blog on WordPress

December 14, 2015August 8, 2017
by Samantha Soper

The Golfsmith blog was an effort to bring Golfsmith to the content marketing forefront and to direct social traffic towards the website. First of all, I researched and created wireframes of the best option for the blog layout and content organization. In addition, I set up the blog, installed the appropriate plugins, and developed the WordPress template. To complete the project on a rushed timeline, I trained a contractor and coordinated with him on wrapping final stages.

Golfsmith Blog

Screenshots & Wireframe

Blog Home Page on Tablet

Blog Post on Mobile

UX Wireframe of Blog + Icon Sketches

NOTE ON LIVE EXAMPLES: As of 11/4/16, Golfsmith is no longer conducting business and all associated websites are offline. However, you can check out the Golf Town blog, which I used this template to build.

Result

Within a year of launch, the blog ranked #1 on Golf Assessor’s Top 50 Best Golf Blogs. Furthermore, the blog was awarded #6 in Feedspot’s Top 100 Golf Blogs on the Web.

Credits:

Additional Theme Development: Isaac Franz

Project Tag: content marketing

HostGator Blog Theme on WordPress

HostGator Blog Theme

Current Live Site

UX Planning

Sketch Concepts

Wireframe Mockups

Tools Used:

Bluehost Blog Theme on WordPress

Bluehost Blog Theme

Current Live Site

Tools Used:

Spring Golf Look Book 2017

2017 Spring Golf Look Book

Current Live Pages

Example Screenshots

Credits:

Golf Town Blog on WordPress

Golf Town Blog

Current Live Site

Result

Credits:

PGA Pro Sketch Videos | 2016 Tour Social Campaign

The PGA Pro Sketch Videos

The Results

Credits:

Golfsmith Blog on WordPress

Golfsmith Blog

Screenshots & Wireframe

Result

Credits:

Like what you see?