Callaway Pre-Owned Redesign

UI/UX Design

Overview

Callaway Golf Pre-Owned (CGPO) is an e-commerce store which sells used golf equipment. With the last redesign being in 2014, it was in need of a freshen up.

My task was to lead the design process, focus on creating a modern layout and style, make the site more mobile friendly and adjust functionality and layout to improve usability and drive conversions. Below I’ve focused on three areas I helped improve.

Project Date

July 2018 - September 2018

Tools Used

Sketch, Photoshop, Overflow, InVision, HTML/CSS/JS

 

Project Objectives

Visual Refresh

Develop a more consistent visual identity beginning with wireframing and then high-fidelity designs.

Improve Functionality

Identify ways to improve the customer journey through analytics, user flows, and enhancing for mobile.

CMS Friendly

Make the site easier for the content team to update and personalize based on customers' browsing history.

Design Components

The old website lacked a defined style: different fonts were used at random, there were multiple colored buttons, and the images and promotional designs lacked consistency. I created several design components that were to be integrated into the site redesign. I drew back on the chaotic color scheme and kept things neutral. Blue was chosen as an accent color to help CTAs and buttons stand out. White components with a subtle drop shadow against a gray background add some dimension. Lifestyle images of pro players and clubs should be used throughout promotional banners.

 

Typography

Barlow Condensed is used for headers and Roboto for body text. Barlow Condensed was chosen because it has decorative qualities that would work well for headlines which call out promotions. A Condensed font would allow more text to be packed into one line. Roboto is extremely readable and provides contrast while complementing the headers.

 

Homepage

On the old homepage everything was contained to a fixed-width including the navigation and hero. While this didn’t completely inhibit the experience, it did seem dated and like a missed opportunity utilize horizontal space to better showcase promotions. There were also moving parts like 'tickers' or looping 'carousels' which made pages feel busy and drew your eye from promotions and personalized product recommendations which should hold more importance.

 

 

Easier to maintain & organize

The new design refocuses the user experience around promotions which are now full-width and hold more prominence on the page. Our old promotional banners were mostly image based and lacked live-text which made for a bad mobile experience. These were difficult for our content team to update and usually required the help of a designer/developer. New heroes and banners now use live text and integrate more seemlessly into our CMS which means content editors can update with ease.

Product Page

CGPO's product page is very different to your typical product page. Instead of a few configurations and an 'add to cart' button, you have a large selection of inventory to choose from per product based on condition and various other specifications. This is best shown in a table format which allows for an easy comparison. One of the biggest improvements made during the redesign was making the table responsive as it wasn’t before and mobile purchases suffered. I designed a new mobile & tablet experience which broke different options in the table out into individual cards.

 

 

User Flow - Mobile Experience

To visualize how to make the overall user experience more seamless, I created a user flow that mapped out the path a user would take to successfully add a product to cart, customize their purchase, and filter their results. For desktop, we move the grid as close to the fold as possible without compromising other essential components such as the image gallery, description and pricing.

 

Category & Cart Page

The category and cart pages received an updated styling along with the remainder of the site. The addition of a "Quick Cart" improves the customer's shopping experience as they are no longer redirected to the cart page and away from browsing. Instead a slider appears from the right - the customer can proceed to checkout or carry on browsing.