My Role
Lead UX/UI Designer
Platform(s)
Web (desktop & mobile app)
Timeline
Jun 2022 – Dec 2023
Team
1 Designers, 2 Developers
TL;DR
Responsibilities
Lead UX Engineer. Responsible for end-to-end design direction, systems architecture, interaction design, and cross-functional decision-making across the full product.
Results
A custom team apparel platform that reduced ordering friction, centralized artwork, and enabled mobile customization with AI-assisted placement.
Highlights
Led design of the Locker Room, AI customizer, and real-time browsing. Built the design system and shifted the product to center on artwork over traditional ecommerce flows.
Problem & Constraints
Ordering custom team apparel is simple in theory, but in practice coaches manage rosters, parents want options, and dealers juggle complex workflows across fragmented tools. Existing solutions were either too design-heavy or overly complex for real-world teams.
The challenge was to rethink the experience for parents, coaches, and dealers while keeping it simple, scalable, and mobile-friendly without losing power.
Every major decision on Bruce started with a question:
Who is using this screen, and what do they need to walk away feeling like it was easy?
Process & Key decisions
Every major decision on Bruce started with a question: who is actually using this screen, and what do they need to walk away feeling like it was easy?
Browse Products
Finding the right gear should feel like shopping, not filing a request form.
The product browsing experience was designed to work like a best-in-class ecommerce site, but with one key difference: everything responds to the team context. When a user switches their active team, the artwork, colors, and visible product catalog update to reflect what's relevant to them. No starting over, no extra steps.
Users can filter and sort through listings, apply their team's artwork to any product dynamically, and see color updates reflected in real time before anything goes into the cart. It's the kind of interaction that seems small until you've spent an hour clicking back and forth in a clunky configurator. We made sure it wasn't that.
Edit and Customize Artwork
The customizer is where the product really earns its keep.
Users can edit fonts, text, and colors, add or remove graphics, and customize the front, back, and sleeves of any product. Bruce steps in to handle the tedious parts automatically: player name and number placement follows league-standard rules without the user needing to know what those are. Customized designs can be shared with others for review or approval, and sending a finished creation straight to the cart takes one tap.
The whole experience was built to be fully functional on mobile. Not "mobile-friendly" in the sense that it technically loads on a phone. Actually usable. Because the reality is that a lot of the people customizing these products are doing it from a parking lot or stands.
Locker Room
Think of it as a team's home base inside the app.
Each team gets its own Locker Room: a persistent space where team identity lives. Coaches or managers can add the team name, mascot, school or organization, initials, colors, and graphics, and all of that information flows automatically into the customizer and ecommerce screens. When something changes for the team, it changes everywhere.
The Locker Room serves as the artwork management hub. Users can juggle multiple uploaded artwork files, switch between them seamlessly, and pull from a library of over 10,000 integrated templates when they need a starting point. It's a small concept with a big payoff: instead of rebuilding context every time someone opens the app, their team is already there waiting for them.
Design System & Components
Building scalability from day one was critical. I established a system in Figma paired with coded React components to ensure consistency between the editor, shopping, and management flows.
Building out the design system was a deliberate part of the process, not an afterthought. Components were designed to be flexible enough to work across the ecommerce, customizer, and management flows without losing visual coherence. Color tokens, typography scales, and interactive states were all documented so that decisions made at the component level stayed consistent whether a user was browsing products, managing their team, or reviewing an order.
The result is a UI that feels like a single cohesive product even though it's doing a lot of different things at once.
Final Experience
What started as a complex multi-sided problem ended up as something that feels genuinely simple to use.
Bruce brings together team management, artwork customization, product browsing, and order management.
The AI assistant handles the tedious parts. The Locker Room keeps everything grounded in team context. The customizer gives real creative control without requiring design experience. And the whole thing moves at the speed that coaches, parents, and dealers actually need.
The final experience is one that respects the user's time, which turns out to be the most important design decision we made.
Impact & Findings
Mobile Optimization
Designing mobile-first, rather than adapting desktop flows, produced a customizer that exceeded usability expectations on small screens. Mobile users completed the flow at rates comparable to desktop, validating a truly functional, not just accessible, experience.
Centralizing artwork
Centralizing artwork in the Locker Room removed the biggest ordering bottleneck. Teams could manage everything themselves, cutting back-and-forth and speeding up orders.
AI Integration
AI-assisted name and number placement eliminated a confusing, error-prone step. By automating placement, Bruce reduced mistakes and increased user confidence before checkout.