Designing a Scalable, Mobile-First E-commerce Experience for Phantom Fireworks

Role:
UI/Visual Designer · UX Leadership · Design System Creator

The Challenge

Phantom Fireworks, a well-known brand in the pyrotechnics industry, approached me with a focused challenge: create a mobile-first e-commerce experience for their flagship domain, Fireworks.com. Due to legal restrictions across various U.S. states, customers can't buy fireworks online in most jurisdictions, but they can locate a store near them. That made local search, location visibility, and seasonal flexibility the most critical parts of the experience.

The site had to reflect their established brand while feeling fresh, exciting, and optimized for users on mobile. I was tasked with leading the design effort and building a system that could evolve with their seasonal promotions, special events, and user behaviors.

My Process

1. Discovery & Requirements Gathering

I began the project by diving deep into Phantom’s goals through stakeholder meetings. We clarified what was most important:

• Make it easy to find store locations
• Emphasize seasonal themes (Fourth of July, New Year’s, etc.)
• Maintain strong brand consistency across all devices
• Empower Phantom’s team to update content and styling with ease

2. Wireframing & UX Iteration

Once aligned, I created wireframes that prioritized location search, clear product categories, and mobile ergonomics. We iterated rapidly, testing user flows and visual hierarchy until the experience felt natural and focused.

3. Establishing the Design System

One of my proudest contributions to this project was building a robust design system in Figma. The system:

• Established scalable typography, color, and spacing rules
• Included reusable components for cards, buttons, and banners
• Made it easy to skin the site for holidays and events via themed imagery and CSS
• Future-proofed the interface for content expansion, like social feeds and blog content (though these didn’t make it into the final build)

4. Visual Design & Prototyping

With the system in place, I shifted into high-fidelity mockups. Three mobile visual directions were explored—each focused on energy, simplicity, and emotional impact. The final direction blended bold color, clean iconography, and a celebratory tone, mirroring the brand’s joyful and explosive nature.

Clickable prototypes were built in Figma to aid stakeholder buy-in and handoff.

Collaboration & Handoff

Development was handled by an external agency. I collaborated closely with them as a design stakeholder, ensuring that the build adhered to the design vision, and that key mobile behaviors and interactions were preserved.

Key Takeaways

• Design Systems Save Time: By investing early in a scalable system, we enabled the client’s team to quickly theme and update the site post-launch without needing major redesigns.
• Know What to Cut: Two promising features—blog content and a social feed—were eliminated during scoping. This reinforced a vital design truth: Not everything has to launch on Day One.
• Designing for Mobile First is Non-Negotiable: With the majority of traffic coming from mobile, designing from the smallest screen up ensured clarity, hierarchy, and faster iteration.

Outcome

Phantom walked away with a design system and mobile-first architecture that looked professional, was contemporary and functioned well. The final product was flexible enough for promotions, scalable for future updates, and rooted in a strong, reusable visual language.

While the launch and engineering were completed by another agency, my design foundation ensured that Phantom Fireworks had everything they needed to keep the spark alive.