Golfsmith International Archives

Project Tag: Golfsmith International

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

Golfsmith Home Page Enhancements

July 4, 2016September 18, 2017
by Samantha Soper

The Golfsmith home page (HP) enhancements were an ongoing, constantly evolving project. Luckily, I had the opportunity to lead a huge overhaul of the strategy and design of the HP in 2016. Offer sections were cut. Content marketing sections and featured categories were brought in. And engagement and conversion increased because of it. Learn more about my process below.

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.

Early 2014

Early 2015

Late 2015

2016 Redesign

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.

Initial wireframe

Early prototype

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

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.

Custom Clubmaking Widget on Golfsmith

February 4, 2016September 18, 2017
by Samantha Soper

Through collaboration with Golfsmith’s Information Services team, the Custom Clubmaking module moved from a standalone page to a seamless integration within the product pages. Initially, the form was built to feed into a table-based layout. As a result, I cleaned up the PHP code to output HTML in line with more modern standards and IS implemented it without issue. After that, I moved onto redesigning and coding out the CSS, while they worked on the backend.

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.

Wireframe sketch for Custom Clubmaking Widget

Widget wireframe sketch

Custom Club module initial prototype

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.

Golfmas Billboards 2015

December 25, 2015October 12, 2016
by Samantha Soper

Due to my previous billboard experience, Golfsmith picked me to work on the 2015 Golfmas billboards. This billboard displayed in Houston and Austin in front of a couple of their most popular stores. In addition, I created an animated billboard for the Myrtle Beach Int’l Airport.

Animated & Static Golfmas Billboards

Golfmas billboards design — Golfmas billboard design

Golfmas Gift Center 2015

December 25, 2015February 1, 2018
by Samantha Soper

Each holiday season Golfsmith and Golf Town features their top gifting options on their Golfmas gift center landing page. Since I had taken over all UX duties by the end of 2015, the gift centers became my responsibility.

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.

Golfsmith Holiday Gift Center 2015

Golf Town Holiday Gift Centre 2015 – French

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

Golfsmith Fair-Way Promise Page

July 9, 2015February 1, 2018
by Samantha Soper

Guarantees and brand equities play a huge part in gaining customers’ trust. Hence, the Golfsmith Fair-Way promise was created. In an effort to communicate this, the Fair-Way promise needed to live on the website. Since there were 4 tenets, I used the jQuery-UI accordion to hide the details so the customer could focus on the tenets one-at-a-time. During the time of launch, Golfsmith’s branding relied heavily on golf course motifs, such as scorecards and turf. These themes are present in the landing page design.

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.

Father’s Day Gift Cards 2015

June 15, 2015October 12, 2016
by Samantha Soper

I was asked to concept and create the 2015 Father’s Day gift cards, due to my assistance brainstorming the 2014 holiday gift cards. After leading a group brainstorm, I created over 15 concept sketches to illustrate my teams’ ideas. Additionally, I built a prototype case for the toolbox concept out of floral foam, but the creative director had a preference for a classic red toolbox. Once decisions were made, I art directed the photoshoot for the toolbox that was later used across the campaign. I also sourced the stock photography for the turf tie piece.

Father’s Day Gift Cards – Concepts & Final Proofs

Concept sketches

Prototype case for toolbox gift card concept, carved from floral foam

Toolbox gift card (Golfsmith)

Tiger-Jack-Chi-Chi Emmet GolfDigest Ad gift card (Golfsmith)

French Tiger-Jack-Vijay Tremblay GolfDigest Ad gift card (Golf Town)

French Toolbox gift card (Golf Town)

Turf Tie gift card (Golfsmith)

French Turf Tie gift card (Golf Town)

Credits:

Stylist: Lani Stites
Photography and Lighting: Sarah Kerver
Color Correction and Photo Manipulation: Thadeus Keating

Mother’s Day 2015 e-Gift Cards

May 10, 2015July 11, 2016
by Samantha Soper

About this Project

Concepted and art directed the photoshoot for the 2016 Mother’s Day gift cards. These cards were used again for Mother’s Day 2016.

Golfmas Billboards 2014

December 25, 2014February 1, 2018
by Samantha Soper

Due to my animation experience, Golfsmith asked me to create the billboards for Golfmas 2014. This billboard displayed in Houston, Dallas, and Austin in front of their most popular stores. In addition, I created an animated version for the Myrtle Beach Int’l Airport.

Animated & Static Golfmas Billboards

Stop Animation Unwrap Videos | Golfmas 2014 Social Campaign

December 25, 2014February 3, 2018
by Samantha Soper

Golfsmith wanted to go big on social for Golfmas 2014. Merchandising had come up with a last-minute list of daily gift offers, which became known as the Caddievent Calendar. During a brainstorm, a couple co-workers and I came up with the idea to do a stop animation unwrap video. Since Vine was approaching the peak of it’s popularity, we decided that a simple 6-second unwrap reveal would be the most eye-catching across social media channels. It was a tactic retailers hadn’t yet incorporated into their holiday campaigns. Additionally, research showed that Facebook’s news feed algorithm prioritized video content over text or photo posts.

The Caddievent Stop Animation Unwrap Videos

Concept Work & Preparation

This emergency brief came in November 19 and the first product reveal was on December 5. After my initial storyboard made it’s way up the chain, everyone got excited about the video idea, but was concerned about the timing. As a new interactive designer, I was eager to test my mettle on this concept I helped brainstorm. After rising to the challenge by my creative director (CD) to do a proof of concept, I got the ok to move forward for a small selection of products.

Final Videos

I had a wealth of help from the photo studio for lighting and the set and setting up the GoPro, while my CD assisted me with styling the shoot. I single-handedly did all production and post-production work. Shooting began with the opening unwrap sequence and Titleist golf balls. To save time, subsequent products were shot on green screen, then clipped frame-by-frame and added to the unwrap sequence post-production.

Project Tag: Golfsmith International

2017 Spring Golf Look Book

Current Live Pages

Example Screenshots

Credits:

Pro Pages Plugin WP

Current Live Pages Samples

UX Planning

Data Model

2017 Masters Tournament Scripting Sections

Tools Used:

Golf Town Blog

Current Live Site

Result

Credits:

The PGA Pro Sketch Videos

The Results

Credits:

Golfsmith Home Page

Progression

UX Planning for 2016 Redesign

Competitive Analysis

Wireframes and Prototypes

A/B Testing

Conclusion

Credits:

What’s in the Bag? Pro Landing Pages

Current Live Pages

2016 Tournament Scripting Sections

The Results

Custom Clubmaking Widget

Screenshots

UX Planning & Prototypes

Conclusion

Animated & Static Golfmas Billboards

Golfmas Gift Center Screenshots

Golfsmith Blog

Screenshots & Wireframe

Result

Credits:

View the Golfsmith Fair-Way

Father’s Day Gift Cards – Concepts & Final Proofs

Credits:

About this Project

Animated & Static Golfmas Billboards

The Caddievent Stop Animation Unwrap Videos

Concept Work & Preparation

Final Videos

Titleist Pro-V1 & Pro-V1x Golf Balls

Frogger Golf Towel

ECCO BIOM Hybrid 2 Golf Shoe

Credits:

Like what you see?