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.

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.