The drummer’s choice: A case study about an app.

Creating a native iOS app.

Fall 2025.

The ask: We were tasked with creating a fully functional, polished SwiftUI app with broad audience appeal. I chose to design an app for DW Drums. My goal was to make it feel as authentic as possible to the brand and serve as a natural extension of the experience on their website.

The problem: While DW is known for making some of the most iconic drum sets in the world, not all of them come with snare drums — especially at the custom level. And although there are several types of kits available, the selection pales in comparison to the dozens of snare drum options DW offers. So, which one do you choose?

The solution: I set out to create a “studio setting” where users could try out and hear the various types of snare drums DW makes — something their website currently lacks. I focused on seven core snare types (based on shell material) and built an experience where you can actually hear the difference between them. As a drummer myself, I recorded all seven drum hits for the app.

AI helped me add a subtle animation so the snare visually “shakes” when struck, and I added haptic feedback so the interaction feels more tactile.

The rest of the app supports why DW is recognized as a leader in the category. From showcasing a sampling of their woods, finishes, and hardware options, to highlighting some of the world’s top drummers who choose the brand, the app gives users a deeper look at what makes DW so special.

**Phased approach: **Phase 1 focused on building a fully functional app from the ground up using only the tools and concepts covered in class. This phase tested our ability to design, code, troubleshoot, and independently create a compelling experience without any AI assistance.

While I achieved most of my goals, I encountered one significant challenge late in development: the “sticky brand header.” It performed perfectly within all my subviews, but once linked to the main ContentView, it caused an overlapping issue with the image below it — something I couldn’t code my way out of at the time. With some creative padding adjustments, I was able to get past this milestone.

I took the time in Phase 2 to polish a lot of the earlier work, including reconstructing the “sticky header” completely differently, adding footers, focusing on typography and art direction, adding footers, button state interactions and more.

During this phase, I polished much of the earlier work, including completely reconstructing the sticky header, improving typography and art direction, adding footers and button-state interactions, and refining transitions and animations. I was proud of Phase 1, but Phase 2 allowed me to significantly improve the experience and push the app further.

A few notables… – Splash screen fading animation – Custom carousel colors – Tabbed galleries with pop-ups – Haptic feedback and micro-animations – Nano-banana studio drum set image (custom reconstruction based on a DW photo) – “Put headphones on…” intro animation and fade-out in the studio view

[embed]

Results: I’m super happy with how the app turned out. I incorporated many lessons from the course into an experience that feels appropriate for the content. I accomplished the goal of giving drummers a clearer idea of what to expect from different snare types before making an investment. And by leaning into DW’s identity and visual direction, the app feels naturally aligned with the brand.

Technical Achievements: Navigation styling and customization: Use of UINavigationBarAppearance to adjust title fonts and colors globally.

Scrollable layouts with custom footers: Controlled scroll behavior, ensured footers stay visible, and refined layout inside extracted views.

Page-style UI using TabView + .page style: Customized page dots using UIPageControl.appearance() with brand colors.

Extracted reusable functions: Separated logic like playSnare() and hapticHit() into clean, reusable helpers.

Reusable extracted views: Modularized components such as pop-ups, footers, and galleries for cleaner structure.

Custom pop-up gallery system: Built full-screen overlays, captions, close buttons, and typography with consistent UI styling.

Tabbed image gallery with swipeable tabs: Customized and replaced galleries, preserving the original component’s UI.

Full-screen overlays with tap-to-close gesture: Used ZStacks, full-screen frames, and custom close animations.

Custom splash screen with timed animation: Used ZStacks, opacity transitions, and timed state changes.

Image pulse/bounce animations: Triggered animation with @State, short-duration timing, and DispatchQueue delays.

Audio playback with AVFoundation: Used AVAudioPlayer to load and trigger snare samples on tap.

Haptic feedback integration: Used UIImpactFeedbackGenerator for tactile response.