Creating an Immersive Experience with Pencil Hoops
Pencil Hoops is an interactive, people-friendly website designed for NBA fans who appreciate the art of pencil sketching. It blends minimal design, accessibility, and engaging experiences, combining stunning pencil sketches with interactive animations and dynamic sound effects to bring NBA moments to life.
Hey there! This isn’t just a case study; it’s a work of Art
Don't forget to hover :)
“Wow! Just Wow!! I don’t even know what I’ll change. It’s so fun & easy to use.” - Tunde
Content
Quick Overview
01
Research and Insights
02
Design Process
03
Impact and Feedback
04
Collaboration
05
Reflections and Learnings
06
01
Quick Overview
Product Overview
Pencil Hoops is a concept website created to give NBA fans a fresh, fun way to enjoy the game through pencil art.
We used Figma and Adobe Illustrator to design a clean, simple interface with interactive features.
People who tested it said it was fun, easy to use, and really cool to look at.
My Role
I came up with the idea for Pencil Hoops and led the design from start to finish. I designed the website,
collaborated with a pencil artist for some of the sketches,
and worked closely with the developer to bring everything to life.
I also added creative touches like basketball swoosh sound effects on clicks and interactive illustrations that come to life on hover.
Plus, I ensured a smooth and detailed handoff to the developer.
Impact
Test users loved it, saying it was fun, easy to use, and visually engaging. The feedback was overwhelmingly positive, with many highlighting how enjoyable and intuitive it felt.
02
Research and Insights
The Problem
NBA fans needed something fun and refreshing, something that showcased the beauty of NBA moments through a unique artistic lens. Most NBA-related websites were cluttered, hard to navigate, and lacked the engaging experience fans really wanted.
Research and Design Insights
I explored other NBA websites to see what worked and what didn’t.
Through this research, I also realized that the NBA is seen as the 'cool sport', and my design needed to reflect that vibe.
This insight drove my focus on elegance and style, influencing my choice of fonts and the overall simplicity of the design.
- 1 Most sites were cluttered, filled with ads, and difficult to navigate.
- 2 Fans preferred simple, easy-to-use platforms.
- 3 Clean designs with engaging visuals kept users interested.
03
Design Process
Laying the Foundation – Sketches and Structure
I kicked off the design process with paper sketches to map out the structure and focus on intuitive navigation. My goal was to answer key questions:
- Where am I?
- Where can I go?
- How do I get there?
These sketches helped me visualize the user journey and identify potential pain points early on. Once the structure felt right, I moved into Figma and Adobe Illustrator to create digital wireframes. During this phase, I collaborated with the team to ideate on unique elements, like the basketball net-inspired cards for the "Did You Know" section and basketball-shaped icons for the next and previous buttons, which were initially sketched by our pencil artist.
Bringing Designs to Life
With the wireframes in place, I focused on interactivity and user engagement. I integrated progressive disclosure to minimize clutter,
especially for mobile users, ensuring a clean and focused experience.
To make the design feel dynamic and fun, I added interactive elements
like on-hover animations that transform cards from pencil sketches into colored, animated GIFs.
I also introduced basketball swoosh sound effects on click events, adding an unexpected but delightful touch that aligns
with the NBA’s energetic vibe.
Smooth transitions and micro-interactions tied everything together, making the interface feel seamless and responsive.
Visual Aesthetics and Style
The NBA isn’t just a sport, it’s a culture, and I wanted the design to reflect that. During my research,
I realized the NBA is often seen as the “cool sport,” and that insight drove many of my design decisions.
I focused on elegance and style, which influenced both the typography and the overall simplicity of the layout.
I chose a clean, light-themed color palette with shades of gray and charcoal black to create a modern, sophisticated feel.
Typography was carefully selected to resonate with the NBA audience, bold, sleek, and contemporary.
The navigation remained minimal and user-friendly, allowing the content to shine without distractions.
High-Fidelity Designs and Final Touches
After refining the visual style, I transitioned from low-fidelity sketches to high-fidelity designs. The pencil artist’s sketches,
like the basketball-shaped next and previous buttons and the board-and-net concept
for the "Did You Know" section, were digitized using Adobe Illustrator to create polished SVG assets.
I also incorporated NBA-themed content, such as “Inside Kyrie’s Bag of Tricks” and “Historical Moments in the NBA,” to keep fans engaged.
Throughout the process, I maintained clear communication with the developer,
ensuring a smooth handoff with detailed documentation and well-organized design assets.
04
Impact and Feedback
Since Pencil Hoops is a concept project, there are no concrete analytics. However, user feedback has been overwhelmingly positive, highlighting the website’s simplicity, immersive design, and engaging user experience.
- “You really tried in the design as a lot of things are really modular and reusable” - Ovi.
- “Wow! Just Wow!! I don’t even know what I’ll change. It’s so fun and easy to use” - Tunde
These insights reinforced that the design decisions—focusing on simplicity, interactivity, and a ‘cool’ NBA vibe—resonated well with the target audience.
05
Collabration
Animations and illustrations by
- Walker TKL
- Robertino Zambrano
- Patrick Truby
- Keshizumi_k
- Dave Merrell
- Seung Eun Kim
- Brit Sigh
- Oluwaseun Adimi
- Kamil Oseni
- Takehiko Inoue
Developed and Designed by
- Walker TKL
- Robertino Zambrano
06
Reflections and Learnings
Reflections and Learnings
What worked well The integration of interactive elements, like hover animations and sound effects, created a fun and engaging experience for NBA fans. These small details made the design feel dynamic and memorable. What I'd do differently If I were to do it again, I’d focus more on gathering detailed user feedback during testing. This would help refine the user experience even further and uncover insights I might have missed. Key takeaway Simplicity and thoughtful design can completely transform how users engage with niche content. It’s not always about adding more, it’s about adding meaning where it matters.
Personal Story
One of the biggest challenges I faced was figuring out how to make the website creative, simple, and unique.
After experimenting with a few ideas, I ended up with the concept of pencil sketches that come to life, animated and colored, when users hover over them.
It was an exciting design challenge that really pushed my creativity.
Seeing everything come together during development was incredibly rewarding, especially when we added basketball sound effects
like the satisfying swoosh on clicks.
Working with the developer and the pencil artist was not just fun, it showed me how far creativity can go when you’re passionate about bringing an idea to life.