Bradley Baseball Case Study
Tools
Figma, Shopify, Google Suite
My Role
UX/UI Designer
Project Duration
3 months
Overview
Bradley Baseball Gloves, a youth baseball/softball glove company founded in 2016, underwent a comprehensive website overhaul to enhance the online shopping experience for both kids and their parents. The aim was to streamline navigation, expedite access to essential information, and ultimately drive increased sales.
“Bradley Baseball aims to change the game with properly shaped leather baseball gloves that are built to work on a kid's hand.” - Jeff Bradley, Founder & Owner
Background
Bradley Baseball Gloves, founded in 2016 by Jeff Bradley, specializes in youth baseball and softball gloves. Drawing from his lifelong immersion in baseball, Jeff identified a gap in the market: while professional-grade gloves abounded, those tailored for young players often fell short in quality. Determined to rectify this disparity, Jeff embarked on a mission to craft top-notch youth gloves characterized by proper fit, easy break-in, and a crucial boost in players' confidence. Thus, Bradley Baseball Gloves emerged, dedicated to empowering young athletes and enhancing their game.
Problem
The Bradley Baseball Gloves website poses challenges with its navigation, presenting an outdated and cluttered interface.
Solution
My solution involves conducting a website redesign aimed at enhancing the user experience for both the owner and browsing clients. The owner's vision is for the site to embody characteristics of cleanliness, playfulness, and approachability, ultimately with the objective of boosting sales.
Methodology
Empathize - Engage in thorough research, competitive analysis, interviews, and journey mapping to grasp the nuances of the project.
Define - Consolidate research findings to sculpt a precise profile of the ideal Bradley Baseball customer.
Ideate - Transform concepts into reality through the creation of user flows, task flows, low-fidelity wireframes, and UI designs.
Prototype - Integrate all elements into a cohesive new Shopify Theme prototype.
Test - Conduct usability tests to pinpoint errors and areas for enhancement.
Implement - Refine the new Shopify Theme based on insights gleaned from usability tests, ensuring a seamless final product.
Empathize
Understanding Bradley Baseball, its objectives, competitors, and clientele was pivotal in my design process. I delved into extensive research, conducting a thorough company analysis, interviewing the owner, and scrutinizing market trends and competitors.
During my market analysis, I identified Rico Gloves and 44Pro as Bradley Baseball's closest competitors in the online baseball glove market. To facilitate a comprehensive comparison, I evaluated all three platforms based on identical parameters.
Given Bradley Baseball Gloves' utilization of the Shopify platform, I sought Jeff's insight on other Shopify sites he admired, citing Shadyrays and Everyday California as examples.
My main findings during the Empathize phase centered on Jeff's desire to revamp the Bradley Baseball Gloves website, aiming for a cleaner and more modern aesthetic. Presently, potential customers encounter difficulties navigating the site, primarily due to the extensive product listings spanning over eight pages. Additionally, the current theme feels outdated. Despite these challenges, the site remains successful, necessitating a careful balance between modernization and maintaining the brand's established identity.
Define
I opted to consolidate my research findings and translate them into two personas representing the ideal Bradley Baseball customer. This approach ensures that I maintain a specific individual in mind throughout the website creation process. Leveraging my background as a former D1 softball player, I drew upon my past experiences to craft personas that resonate authentically with the target audience.
Personas
Ideate
In this phase, it's time to bring the project to life. I accomplished this by crafting a sitemap, user flow, task flow, low-fidelity wireframes, and UI kit.
The sitemap serves as the foundation for the Bradley Baseball website. Jeff opted to keep relatively consistent overall structure to the old site to avoid confusing customers. The main tabs were strategically organized to effectively present information about the products. With the sitemap established, the subsequent flows and overall organization of the website fell into place seamlessly.
For the user flows and task flows, I concentrated on delineating the primary paths customers would follow on the site, focusing on purchasing a stock glove and customizing a glove, which are the most common actions users undertake.
Understanding the pivotal role of product photos in online purchases, I prioritized this aspect when crafting the low-fidelity wireframes. Introducing a photo gallery titled "On the Field," showcasing the gloves in action during games, aims to immerse kids in the experience and envision themselves using Bradley Gloves.
Finally, the UI Kit was developed, leveraging Jeff's existing logo and branding colors. While a few variations of the logo were created for versatility, minimal adjustments were needed since the project is based on Shopify, which provides its own suite of icons, buttons, fonts, and more.
With the completion of the low-fidelity wireframes and UI kit, it's time to integrate all components harmoniously.
Sitemap
User Flows
Task Flows
Low-fidelity Wireframes
Logos
High-Fid Wireframes
Below is a comparison between the original website screenshot and a high-fidelity wireframe of the revamped product listing page. This enhanced product page is crucial to the project for two primary reasons:
Product Title Consolidation: Prior to the revamp, product titles were excessively lengthy and convoluted. For instance, a glove might have been labeled as "11.25” I-Web, T2 Next Play Series 24 (Camel/Tan/Black)". To simplify, I consolidated the title to "I-Web, Next Play Series 24". Shortening the title streamlines the browsing experience, avoiding overwhelming customers with excessive information.
Color Variants and Size Variants: To further streamline the browsing process, I grouped gloves of the same model together within one product listing. This includes various sizes and colors. For example, "11.25” I-Web, T2 Next Play Series 24 (Camel/Tan/Black)" and "11” I-Web, T2 Next Play Series 24 (Camel/Navy)" are now represented as "I-Web, Next Play Series 24" with size variants for 11” and 11.25” and color variants for Camel/Tan/Black and Camel/Navy. This consolidation enables customers to save time by viewing all available options within a single page, eliminating the need to navigate through individual product listings for each size and color.
Original
New Iteration
Key Addition
The introduction of product filters revolutionizes the browsing experience. Previously, customers had to navigate through eight pages of products to locate their desired glove. With these filters, customers can swiftly refine their search by Size, Color, and Throwing Hand preferences, expediting the process and enhancing overall usability.
Zoomed in:
Implement
The initiative to construct a new Shopify theme commenced. Given the Shopify platform's capabilities, I didn't need to replicate all the high-fidelity wireframes and iterations on Figma. Instead, I kept the new theme I was working on as a draft until Jeff and I were fully satisfied with its readiness. Below, you'll find some before-and-after comparisons of the pages I revamped.
Original
New Iteration
Conclusion
Jeff’s vision for the new site aimed to exude cleanliness, playfulness, and approachability, all with the ultimate goal of boosting sales. He feels that my design perfectly captured these attributes.
Reflecting on the process, I recognize the potential for further enhancement through a deeper understanding of CSS. While I managed to implement some basic code, additional CSS proficiency would allow for more extensive customizations. Nonetheless, Jeff is thoroughly satisfied with the new version, as I successfully integrated all his requests.
In conclusion, this project proved to be a success. With the updated website, I am confident that Bradley Baseball Gloves will elevate the customer experience and drive increased sales!
Post-Implementation Metrics
Since launching the new website, there has been a notable 34% decrease in page views alongside a commendable 6% increase in conversion rate. These metrics underscore the success of simplifying the site by reducing the number of product pages, thus facilitating smoother conversion of visits into sales.
Furthermore, Jeff has shared positive feedback from many returning customers who have praised the "new look" of the site. This feedback is particularly significant given that a majority of Bradley Baseball's clientele consists of repeat customers.