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

• Official HostGator Blog
• Sample Single Post — How to Promote your Blog on SnapChat
• Sample Archive Page — Marketing Tips & Tricks Category Archive

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

Wireframe Mockups

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

The post HostGator Blog Theme on WordPress appeared first on Samantha Soper.

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

• WITB Archives Page (EN)
• WITB Archives Page (FR)

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.

Tools Used:

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

The post Pro Pages Plugin on WordPress appeared first on Samantha Soper.

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

• English Blog Home Page
• French Blog Home Page

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

The post Golf Town Blog on WordPress appeared first on Samantha Soper.

Golfsmith Home Page

Progression

Since the start of my employment with Golfsmith, the HP changed drastically. Consequently, I assisted the UX Manager in the UI CSS development for updates made in 2015 and led the header redesign in late 2015. As stated above, I had the opportunity to lead the 2016 redesign project. The screenshots below are a brief overview of the progression of the HP.

NOTE ON LIVE EXAMPLES: As of 11/4/16, Golfsmith is no longer conducting business and all associated websites are offline.

UX Planning for 2016 Redesign

Competitive Analysis

I started out by monitoring the HP content strategy of top retailers. Therefore, I focused on Golf Galaxy, DSG, Academy, REI, and SportChek as competitors in the sports and outdoors category. Due to breadth of brand offerings and clean design, I also focused on Gap, Home Depot, Sephora, Target, and Williams-Sonoma.

At Golfsmith, we updated the HP daily with several savings stories. After monitoring competitors for a couple of weeks, I noticed some strong differences in their HP strategy and scheduling.

Wireframes and Prototypes

Another thing I noticed during my competitive analysis were common threads throughout each HP. More oft than not, the HPs included the following:

• Featured category call-outs
• Link to a new arrivals category
• Eye-catching call-out to the sale/clearance/deals page
• Content marketing features
• An incentive to join the loyalty program
• High-rated, recommended products

Opposite to this strategy, Golfsmith was loading the HP with product offers and savings stories. Hence, my suggestion was to move towards the category- and content-based home pages trending in retail at the time.

After a few wireframe iterations, we reached a balance that the marketing, e-commerce, and merchandising teams could agree on. It seems like the roll-out of Amazon’s category-based HP might have strongly influenced the final decision.

A/B Testing

Finally, once the home page was developed, A/B testing of the new HP against the old was performed through Optimizely. The test reached statistical significance within a couple of days.

Conclusion

As a result of A/B testing, the newest version of the homepage produces significantly higher customer engagement and increased revenue. In conclusion, overall revenue has seen a steady increase since launch.

Credits:

• 2016 UI Development Collab: Bastien Buchaca
• 2015 Redesign Lead: Omar Gonzalez

The post Golfsmith Home Page Enhancements appeared first on Samantha Soper.

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.

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.

The post What’s in the Bag? Pro Golfer Pages appeared first on Samantha Soper.

Custom Clubmaking Widget

After the first pass, I had succeeded in giving the module a more modern look and feel. You can see this first version in the UX Planning & Prototypes section below.

Due to the potential length of the widget, jQuery UI’s accordion widget was implemented to save space. I worked directly with a member of the IS team at their computer to implement the front-end jQuery calls. The final launched version is in the screenshot below.

Screenshots

NOTE ON LIVE EXAMPLES: As of 11/4/16, Golfsmith is no longer conducting business and all associated websites are offline.

UX Planning & Prototypes

As stated above, the widget initially used a table-based layout. While organizing the information into a wireframe, I realized the tables would cause some issues. In addition, I read through the PHP code to plan for all the variable options.

Conclusion

After launch, custom club orders more than doubled within the week, a trend which continued until close of business. Furthermore, custom clubs widget performance continually increased revenue since its launch. It seemed like the improved and easier-to-use custom clubs experience was a hit with customers.

The post Custom Clubmaking Widget on Golfsmith appeared first on Samantha Soper.

Golfmas Gift Center Screenshots

NOTE ON LIVE EXAMPLES: As of 11/4/16, Golfsmith is no longer conducting business and all associated websites are offline.

The post Golfmas Gift Center 2015 appeared first on Samantha Soper.

Golfsmith Blog

Screenshots & Wireframe

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

The post Golfsmith Blog on WordPress appeared first on Samantha Soper.

View the Golfsmith Fair-Way

NOTE ON LIVE EXAMPLES: As of 11/4/16, Golfsmith is no longer conducting business and all associated websites are offline.

The post Golfsmith Fair-Way Promise Page appeared first on Samantha Soper.

Hellas Construction Web App

In-Depth UX Analysis and Overview

Hellas Sales Portal WordPress Plugin

Beta Training Documentation

The post Hellas Construction Web App appeared first on Samantha Soper.