Spalding
Brandsite redesign & e-commerce platform migration
We took Spalding's new brand guide and elevated it into a full design system that gave their online presence consistency and flexibility. We mocked up the site in Figma to bring the new look to life, then built out reusable ReactJS components to ensure efficiency and scalability. Along the way, we migrated their entire store from Sales Force CommerceCloud to CommerceTools, streamlining both the backend and customer experience. The result was a modern, future-proof site that feels as bold and dynamic as the brand itself.
Spalding's redesign was powered by a focused process and tight collaboration at every stage.
When we first evaluated Spalding’s old website, one thing was immediately clear: it was built for desktop first and mobile was treated as an afterthought. Pages were simply scaled down, leaving users with tiny buttons, awkwardly wrapped text and layouts that felt forced into a smaller frame. It technically worked, but the experience didn’t exactly set the stage for a winning play.
The pain was most obvious in the checkout process. For an ecommerce site, that’s the one place where everything needs to be effortless and instead it was clunky and frustrating on mobile. Shoppers often had to tap and scroll far more than necessary and product images didn’t help. They were frequently stretched or distorted, making the buying process feel less trustworthy. Dropping the ball here meant losing customers right at the finish line.
Mobile first wasn’t an afterthought for Spalding’s redesign. It was the foundation.
Spalding’s previous website struggled to keep up with the mobile experience, leaving users with awkward layouts, distorted images and a checkout process that felt more like a hurdle than a help. We rethought the entire approach by starting mobile first, focusing on thumb friendly navigation, streamlined flows and images that scale beautifully across devices.
This redesign wasn’t just about looks. It was about usability, accessibility & creating a seamless path from browsing to purchase. After close collaboration and iteration, the result is a modern, responsive site that reflects the strength of the brand while making the shopping experience smooth from tip-off to the final buzzer.
From the start, we partnered closely with Spalding’s marketing team, working within the brand guidelines they provided while expanding them into a scalable digital design system.
Using Figma, we laid out concepts in a way that made cross-team collaboration seamless. Feedback loops were constant and several rounds of input and iteration later, we landed on a design that everyone felt confident in: mobile-first at its core, but still snappy, responsive and clean on desktop.
Meanwhile, the technical side of the project was just as ambitious. We migrated the ecommerce platform from Salesforce Creative Cloud to a headless architecture in CommerceTools, setting the stage for flexibility and future growth. In my role as a full-stack designer, I worked side by side with back-end engineers to bring our Figma designs to life as reusable ReactJS components, bridging design and development while ensuring strict ADA accessibility standards were met at every step.
The result is a digital experience that is modern, functional and truly user-friendly across devices. The redesign doesn’t just look better. It works better, from the checkout flow to the performance under the hood. By aligning design, engineering and accessibility from the ground up, the new site gives customers a smoother, more reliable shopping experience across every device.
- DevOps
- JavaScript
- User Interface Design
- Frontastic
- Photoshop
- Accessibility Standards
- Design Systems
- React
- Layout Design
- Multi Team Collaboration
- Figma
- E-Commerce
- HTML
- CSS
- CommerceTools
- Prototyping
- Illustrator