Market Segment
Roles
About Blacktop Hoops VR
The world's first competitive Virtual Reality street ball game
Vinci Games pioneered a new era of immersive gaming, chaining together flashy dribble tricks, shots, and high-flying dunks to finish off opponents in epic games of 1-on-1 arcade basketball.
Project Scope
UI that enhanced the game’s bold stylized visuals
The project aimed to redefine the streetball experience in VR by crafting an interface that matched the game’s energy and pace.
The game already had beautiful environments and energetic characters, so I was tasked with creating UI that complimented those things while feeling like it still tied everything together.
UI in Practice
Quick Overview
The panels were designed with bold black and white outlines to capture a comic-inspired look while allowing the vibrant world behind them to stand out
The navigation bar was designed to feel playful and rooted in the sports theme.
Each tab uses a ball-inspired highlight to reinforce the game’s identity and add a sense of motion and energy to the interface.
The daily reward and claim animations were designed to feel snappy and satisfying, using bold motion and playful timing to reinforce the game’s energetic style.
Competitive Analysis
Learning from the Competition
To refine the user experience and visual identity of Blacktop Hoops VR, I analyzed leading titles in the VR sports space: Gym Class and Big Ballers. This comparison helped identify key UX strengths, visual trends, and player engagement strategies, guiding design decisions that set Blacktop Hoops apart with a unique and stylish identity.
The goal was to find a look that felt both authentic and exciting in Virtual Reality.
We started with 3 main concepts:
Sports Urban, Futuristic Hero, and Playful Arcade
Colors
Selecting the right colors
Since the game’s world was already so bright and colorful, I chose a neutral dark base paired with a flexible accent color that complemented every environment. The darker foundation helped the vivid visuals stand out even more, giving the UI a sleek, comic book-inspired feel that enhanced the stylized characters and settings.
Main Color
Base Color
Contrast Color
These fonts were chosen to reflect the game’s bold, energetic tone while keeping the interface clear and readable. Together, they balance playful personality with a strong competitive edge.
Title Font
Playful, modern, and easy-to-read
Unbounded
Body Font
Stable, expressive, and clean
Smooch Sans
Asset Gallery
Filling the world with content
200+ Assets, screens, and deliverables
Thank you
Tools
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="wHJ_x2rGt-2076229515-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(43, 7, 2)"/><stop offset="1" stop-color="rgb(79, 12, 3)"/></linearGradient></defs><path d="M 0 8 C 0 3.582 3.582 0 8 0 L 32 0 C 36.418 0 40 3.582 40 8 L 40 32 C 40 36.418 36.418 40 32 40 L 8 40 C 3.582 40 0 36.418 0 32 Z" fill="url(%23wHJ_x2rGt-2076229515-linear-gradient)" height="40px" id="wHJ_x2rGt" width="40px"/><path d="M 25.973 0.056 C 26.812 0.19 27.47 0.68 27.828 1.436 C 27.986 1.77 28 1.865 28 2.594 C 28 3.355 27.991 3.406 27.796 3.814 C 27.549 4.33 27.116 4.775 26.658 4.983 C 25.099 5.689 23.354 4.948 22.931 3.399 C 22.778 2.841 22.817 1.99 23.016 1.551 C 23.376 0.753 24.093 0.217 25.016 0.054 C 25.429 -0.018 25.513 -0.018 25.973 0.056 Z M 7.192 1.657 C 7.241 1.595 7.886 1.577 10.026 1.577 C 12.144 1.577 12.823 1.596 12.905 1.657 C 13.035 1.753 20.73 23.214 20.703 23.403 C 20.684 23.531 20.646 23.534 18.317 23.55 C 16.774 23.561 15.923 23.544 15.871 23.502 C 15.828 23.466 15.394 22.293 14.909 20.895 L 14.025 18.353 L 10.109 18.37 L 6.192 18.386 L 5.378 20.878 C 4.93 22.249 4.526 23.415 4.481 23.469 C 4.409 23.554 4.119 23.565 2.209 23.55 C 0.031 23.533 0.019 23.533 0 23.398 C -0.011 23.324 1.524 18.863 3.411 13.485 C 5.298 8.106 6.888 3.55 6.945 3.359 C 7.002 3.168 7.066 2.725 7.088 2.374 C 7.11 2.023 7.157 1.7 7.192 1.657 Z M 10.067 5.503 C 10.045 5.477 9.946 5.802 9.847 6.225 C 9.748 6.648 9.407 7.827 9.089 8.845 C 8.771 9.863 8.342 11.254 8.135 11.936 C 7.928 12.617 7.686 13.387 7.596 13.647 C 7.506 13.906 7.432 14.128 7.432 14.139 C 7.432 14.151 8.63 14.16 10.095 14.16 C 11.56 14.16 12.758 14.144 12.758 14.124 C 12.758 14.105 12.63 13.697 12.472 13.219 C 11.872 11.392 10.707 7.664 10.414 6.629 C 10.245 6.035 10.089 5.528 10.067 5.503 Z M 25.412 6.98 C 27.293 6.979 27.587 6.992 27.675 7.079 C 27.765 7.169 27.775 8.003 27.775 15.313 C 27.775 20.798 27.754 23.486 27.709 23.569 C 27.645 23.687 27.552 23.692 25.432 23.692 L 23.222 23.692 L 23.123 23.543 C 23.036 23.411 23.027 22.482 23.042 15.248 C 23.056 8.088 23.07 7.094 23.155 7.041 C 23.21 7.006 24.163 6.98 25.412 6.98 Z" fill="rgb(240, 160, 41)" height="23.692306981366755px" id="Kh_FD_8M9" transform="translate(5 8)" width="28.000000159715647px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="nTbHpTelo-3820376089-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(22, 29, 50)"/><stop offset="1" stop-color="rgb(28, 44, 92)"/></linearGradient></defs><path d="M 0 8 C 0 3.582 3.582 0 8 0 L 32 0 C 36.418 0 40 3.582 40 8 L 40 32 C 40 36.418 36.418 40 32 40 L 8 40 C 3.582 40 0 36.418 0 32 Z" fill="url(%23nTbHpTelo-3820376089-linear-gradient)" height="40px" id="nTbHpTelo" width="40px"/><path d="M 1.712 0.042 C 4.685 -0.05 8.128 0.016 8.889 0.18 C 11.947 0.836 13.785 2.421 14.448 4.972 C 14.625 5.654 14.645 5.91 14.606 6.977 C 14.572 7.905 14.513 8.348 14.36 8.811 C 13.946 10.068 13.186 11.118 12.151 11.864 C 10.615 12.97 8.905 13.395 5.896 13.418 L 4.213 13.431 L 4.189 16.478 C 4.171 18.782 4.138 19.541 4.053 19.593 C 3.991 19.63 3.096 19.662 2.064 19.663 C 0.593 19.664 0.165 19.638 0.085 19.546 C 0.01 19.459 -0.011 16.831 0.005 9.76 L 0.029 0.093 L 1.712 0.042 Z M 5.782 3.625 L 4.259 3.624 L 4.259 9.88 L 4.918 9.938 C 5.281 9.971 6.008 9.957 6.533 9.908 C 8.108 9.762 9.041 9.416 9.694 8.737 C 10.276 8.133 10.385 7.823 10.393 6.762 C 10.398 5.983 10.368 5.782 10.19 5.411 C 9.784 4.565 9.011 4.012 7.877 3.755 C 7.494 3.669 6.805 3.626 5.782 3.625 Z M 26.929 5.159 L 27.183 5.285 L 27.183 7.026 C 27.183 8.723 27.179 8.767 26.997 8.767 C 26.894 8.767 26.7 8.712 26.565 8.646 C 25.397 8.067 22.801 7.721 21.673 7.993 C 21.192 8.109 20.815 8.489 20.815 8.858 C 20.815 9.429 21.527 9.903 23.545 10.678 C 26.802 11.929 28 13.174 28 15.305 C 28 17.509 26.558 19.127 24.034 19.757 C 23.099 19.99 21.257 20.07 20.015 19.932 C 18.363 19.748 16.853 19.284 16.763 18.933 C 16.737 18.832 16.727 18.023 16.741 17.136 C 16.772 15.256 16.682 15.358 17.859 15.857 C 19.033 16.356 19.884 16.538 21.27 16.588 C 22.679 16.639 23.168 16.551 23.559 16.177 C 23.743 16 23.818 15.842 23.818 15.629 C 23.818 15.047 23.336 14.691 21.725 14.081 C 18.175 12.738 16.813 11.398 16.813 9.249 C 16.813 6.885 18.642 5.056 21.39 4.671 C 23.036 4.44 26.007 4.702 26.929 5.159 Z" fill="rgb(108, 163, 244)" height="19.99999984219679px" id="zBZiQQENY" transform="translate(6 10)" width="28.00000037393142px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="XTmckP05B-132133884-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(28, 28, 28)"/><stop offset="1" stop-color="rgb(71, 71, 71)"/></linearGradient></defs><path d="M 0 8 C 0 3.582 3.582 0 8 0 L 32 0 C 36.418 0 40 3.582 40 8 L 40 32 C 40 36.418 36.418 40 32 40 L 8 40 C 3.582 40 0 36.418 0 32 Z" fill="url(%23XTmckP05B-132133884-linear-gradient)" height="40px" id="XTmckP05B" width="40px"/><g d="M 4.271 26 C 6.629 26 8.543 24.065 8.543 21.681 L 8.543 17.362 L 4.271 17.362 C 1.913 17.363 0.001 19.296 0 21.681 C 0 24.065 1.913 26 4.271 26 Z M 0 12.87 C 0 10.486 1.913 8.551 4.271 8.551 L 8.543 8.551 L 8.543 17.189 L 4.271 17.189 C 1.913 17.188 0.001 15.255 0 12.87 Z M 0 4.319 C 0 1.935 1.913 0 4.271 0 L 8.543 0 L 8.543 8.638 L 4.271 8.638 C 1.912 8.637 0.001 6.704 0 4.319 Z M 8.457 0 L 12.729 0 C 15.087 0 17 1.935 17 4.319 C 17 6.703 15.087 8.638 12.729 8.638 L 8.457 8.638 Z M 17 12.87 C 17 15.254 15.087 17.189 12.729 17.189 C 10.37 17.188 8.458 15.255 8.457 12.87 C 8.457 10.486 10.371 8.551 12.729 8.551 C 15.087 8.551 17 10.486 17 12.87 Z" fill="transparent" height="26px" id="UXJRttjtb" transform="translate(11 7)" width="17.0000005225412px"><path d="M 4.271 8.638 C 6.629 8.638 8.543 6.703 8.543 4.319 L 8.543 0 L 4.271 0 C 1.913 0.001 0.001 1.934 0 4.319 C 0 6.703 1.913 8.638 4.271 8.638 Z" fill="rgb(10, 207, 131)" height="8.637989044189453px" id="p3gNa43mR" transform="translate(0 17.362)" width="8.542798564838563px"/><path d="M 0 4.319 C 0 1.935 1.913 0 4.271 0 L 8.543 0 L 8.543 8.637 L 4.271 8.637 C 1.913 8.637 0.001 6.704 0 4.319 Z" fill="rgb(162, 89, 255)" height="8.63747084736978px" id="BWkFUc_Fh" transform="translate(0 8.551)" width="8.542798564838563px"/><path d="M 0 4.319 C 0 1.935 1.913 0 4.271 0 L 8.543 0 L 8.543 8.638 L 4.271 8.638 C 1.912 8.637 0.001 6.704 0 4.319 Z" fill="rgb(242, 78, 30)" height="8.637989116351385px" id="oR03KYLgT" width="8.542798564838563px"/><path d="M 0 0 L 4.272 0 C 6.629 0 8.543 1.935 8.543 4.319 C 8.543 6.703 6.629 8.638 4.272 8.638 L 0 8.638 Z" fill="rgb(255, 114, 98)" height="8.637989116351385px" id="dx1mXWxp8" transform="translate(8.457 0)" width="8.542798564838563px"/><path d="M 8.543 4.319 C 8.543 6.703 6.629 8.637 4.272 8.637 C 1.913 8.637 0.001 6.704 0 4.319 C 0 1.935 1.914 0 4.272 0 C 6.629 0 8.543 1.935 8.543 4.319 Z" fill="rgb(26, 188, 254)" height="8.63747084736978px" id="TcgqajDnW" transform="translate(8.457 8.551)" width="8.542798564838563px"/></g></svg>)
Deliverables
UI/UX Design System
UI Visual Direction
VR HUD Design
Marketing Templates
Game Implementation Assets
Asset Optimization
