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