DunkZone: Bringing Structure to a Disjointed Design Process
DunkZone is a nonprofit organization dedicated to enhancing youth basketball experiences by providing training programs, skill-building opportunities, and mentorship for young athletes. Their goal is to create an engaging and supportive environment where kids can develop confidence, teamwork, and athletic skills. To support their mission, DunkZone also sells branded merchandise, helping to fund their initiatives and expand their outreach.
When I joined DunkZone as a volunteer UX Designer, the user research and low-fidelity wireframes had already been completed, and the team had begun working on high-fidelity designs. However, there was no cohesion in the design process—every UX designer was working independently, leading to inconsistent layouts, unstructured assets, and inefficiencies in development.
Issues with Clutter!
One of the biggest issues was the lack of asset organization. Each designer was working independently, which resulted in:
Thousands of duplicated assets across different Figma files
Over 300 different colors, creating a chaotic UI
Dozens of fonts, font sizes, and variants, leading to inconsistencies in typography
Different grid systems, making components scale unevenly
Dozens of copied pages with no real changes, cluttering the project
Organizing the Clutter
Solution #1: Organizing the Chaos
To fix this, I took on the responsibility of organizing all design assets. I cleaned up the Figma files, reducing clutter and ensuring all designers worked with a shared library of components. For colors, I streamlined the palette down to 12 accessible colors that aligned with DunkZone’s brand identity. I also standardized one font family with defined size and weight variants, improving readability and UI cohesion.
To further improve developer efficiency, I implemented a clear handoff system:
Design-ready screens were placed in a dedicated "Ready for Development" section in Figma
Screens were properly labeled and annotated for clarity
Components were built with scalability in mind, reducing redundant work
Solution #2: Create a Design System
Beyond just organizing assets, I recognized the need for a structured design system to create consistency across all screens. Since no design system existed, I built one from scratch, focusing on:
UI Components – Standardized buttons, cards, modals, and inputs
Typography System – Defined font sizes, weights, and hierarchy rules
Spacing & Layout – A consistent grid system for desktop and mobile
Color System – A structured palette with accessible contrast ratios
Mobile High-Fidelity Designs – Since no one had worked on mobile screens, I took ownership and designed all high-fidelity mobile pages
This design system eliminated inconsistencies, allowing designers to work cohesively and developers to build efficiently.
Results & Impact
By implementing organization and structure, I was able to:
Increase developer & design efficiency:
Provided a clean design system and clear handoff process, improving overall design and development efficiency by 30%
Reduce clutter:
Removed unnecessary duplicates, streamlining the Figma file
Improve consistency:
Standardized UI components, colors, and typography; resulting in a more cohesive and unified experience throughout the project
Step into a leadership role:
When the Head UX Designer left, I stepped up to lead the design team for the remainder of the project
Enhance mobile usability:
Designed an entire mobile high-fidelity experience, ensuring a seamless experience across mobile and desktop devices
Although I was only part of the project for its final three months, I streamlined the entire design and development process, increasing efficiency by 30%. I introduced the team to a scalable design system, ensuring consistency across all UX/UI elements, and took ownership of designing the end-to-end mobile experience for DunkZone’s e-commerce website. My contributions not only enhanced the project's organization but also set a foundation for future design efficiency and collaboration.