wireframing Archives | Samantha Soper

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

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

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

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 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.

Project Tag: wireframing

HostGator Blog Theme on WordPress

HostGator Blog Theme

Current Live Site

UX Planning

Sketch Concepts

Wireframe Mockups

Tools Used:

Golf Town Blog on WordPress

Golf Town Blog

Current Live Site

Result

Credits:

Golfsmith Home Page Enhancements

Golfsmith Home Page

Progression

UX Planning for 2016 Redesign

Competitive Analysis

Wireframes and Prototypes

A/B Testing

Conclusion

Credits:

Custom Clubmaking Widget on Golfsmith

Custom Clubmaking Widget

Screenshots

UX Planning & Prototypes

Conclusion

Golfsmith Blog on WordPress

Golfsmith Blog

Screenshots & Wireframe

Result

Credits:

Golfsmith Fair-Way Promise Page

View the Golfsmith Fair-Way

Like what you see?