SureFire / eCommerce website / UI design & project leadership
BUILT TO PERFORM.
DESIGNED TO CONNECT.
A complete redesign of SureFire.com. As Lead UI Designer and Project Leader, I led a team of designers and developers to bring the brand, its products, and the shopping experience together.
Explore the work
Client
SureFire LLC
Project
eCommerce website redesign
My role
Lead UI Designer & Project Leader
The project
THE BRAND.
THE EXPERIENCE.
ONE DIRECTION.
The brief was clear: create a clean, simple website that communicates SureFire’s value and makes its products easier to explore, without compromising the brand.
I led the redesign from research and planning through UI design and coordination with the development team. My responsibilities included CMS selection and integration, project management, copywriter coordination, and digital asset and media generation.
Internal and external interviews helped inform the build, with a focus on addressing the previous site’s UX problems, simplifying navigation, and reducing friction in the purchase flow.
LEAD UI DESIGNER
Shaping the visual interface, organizing information, and developing desktop and mobile layouts around product discovery and a clear brand presentation.
PROJECT LEADER
Leading designers and developers, coordinating content and assets, and connecting design decisions with the requirements of the website build.
“We need a site that will sell the product, but not cheapen our brand.”
01 / Desktop experience
BRAND PRESENCE.
PRODUCT CLARITY.
From the homepage to product listings and detail pages, the redesign focused on a clear path through the catalog. Select any image to explore the original work.
Design objectives
LESS FRICTION. MORE FOCUS.
- Keep the interface clean and simple.
- Make navigation easy to understand.
- Visually communicate the value proposition.
- Reduce friction in the purchase flow.
- Address UX problems from the previous site.
02 / Mobile experience
THE SAME BRAND.
A SMALLER SCREEN.
The featured homepage sits alongside the navigation sequence, showing how the brand experience carries through to browsing on mobile.
03 / Wireframes & UI
STRUCTURE
BEFORE STYLE.
Wireframes and interface studies connected page structure and content hierarchy with the visual experience.
MOBILE / WIREFRAMES & UI
04 / Information architecture
A CLEARER MAP.
A STRONGER FOUNDATION.
Information architecture established the structure behind the interface, organizing the website before the details of individual screens.
05 / Before & after
THE STARTING POINT.
THE NEW DIRECTION.
Original website captures alongside the redesigned product experience. A visual record of the project’s transformation.
BEFORE / ORIGINAL WEBSITE
AFTER / REDESIGNED EXPERIENCE
Images document the original redesign project. The current live website may differ.
Your next website
MAKE YOUR
NEXT MOVE COUNT.
Bring your brand, your content, and your digital experience together. Let’s talk about what you’re building.
Let’s build your website