JQuery Archives | Samantha Soper

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

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.

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.

Hellas Construction Web App

January 24, 2014December 19, 2018
by Samantha Soper

The Hellas Construction web app was a massive undertaking I conquered singlehandedly. First of all, their website hadn’t been updated since 2009 and became a bit of a Frankenstein’s monster situation. Due to several unnecessary pages, the user experience was highly confusing. Adding projects to the site was slow and regional sales managers needed them quickly. Several of the issues are detailed in the In-Depth UX Analysis and Overview below.

Hellas Construction Web App

In-Depth UX Analysis and Overview

Hellas Sales Portal WordPress Plugin

Beta Training Documentation

Hellas Hearts of Hope Charity Microsite

December 1, 2013October 9, 2016
by Samantha Soper

To launch the Hellas Hearts of Hope charity trip, members of the Hellas Construction team helped gather donations from family and friends. Most importantly, they needed an easy way to receive cash donations from vendors and other contacts. Due to this need, I built a one-page informational site explaining the mission of the trip. For this project, I built a simple, responsive microsite to collect PayPal donations.

Furthermore, I assisted in strategizing the donation campaign and logistically setting reach goals. These reach goals and donation levels helped sponsors visualize how they would be helping the village. Additionally, I wrote all copy for the microsite.

Through the money donated to the site, Hellas Construction was able to provide much needed school and medical supplies to the village of Jucuarán. Additionally, some piñatas and candy were purchased to make a fun day for the children. Most noteworthy, we were able to supply the village with clothing, toys, books, and other materials. These helped them getting through the upcoming holiday season and school year.

View the Hellas Hearts of Hope charity microsite

Visit the site

Roxie Polymers

August 6, 2013April 19, 2017
by Samantha Soper

View the Project

Visit the Roxie Polymers website

Nina Davis, MA, LMT Site on WordPress

January 10, 2013March 29, 2018
by Samantha Soper

Nina Davis, MA, LMT is a biodynamic craniosacral and lymph drainage therapist. Located in Austin since 1996, she treats adults and children. Her gentle, touch-based therapeutic modalities move energy and fluid around the body. Most noteworthy, she was voted Best infant Craniosacral Therapist for three years by the Austin Birthing Community.

About Nina Davis’s WordPress Site

Nina contacted me wanting to expand her business online and spread the word about her small business. Furthermore, she wanted a unique user experience that highlights naturally-occurring fractals. As a result, each page features on a large, natural fractal and matching background. Blue and green menu themes correspond to the fractal image, as well, while a frosted glass pane displays page content. I built page subsections with jQuery tabs.

Current Live Examples

NOTE ON LIVE EXAMPLES: I built this site in 2013 and was not hired to maintain it.
Visit Nina’s website

Screenshots

I collected these screenshots soon after I built the site.

Home page

About Nina page

About therapeutic modalities page

Referrals & resources page

Contact page

Project Tag: JQuery

Spring Golf Look Book 2017

2017 Spring Golf Look Book

Current Live Pages

Example Screenshots

Credits:

Custom Clubmaking Widget on Golfsmith

Custom Clubmaking Widget

Screenshots

UX Planning & Prototypes

Conclusion

Golfsmith Fair-Way Promise Page

View the Golfsmith Fair-Way

Hellas Construction Web App

Hellas Construction Web App

In-Depth UX Analysis and Overview

Hellas Sales Portal WordPress Plugin

Beta Training Documentation

Hellas Hearts of Hope Charity Microsite

View the Hellas Hearts of Hope charity microsite

Roxie Polymers

View the Project

Nina Davis, MA, LMT Site on WordPress

About Nina Davis’s WordPress Site

Current Live Examples

Screenshots

Like what you see?