SPARTAN CAMERA
Redesigning a Technical E-commerce Storefront
Role Lead Designer
Scope Full storefront portal
Tools Figma, ClickUp, Google Workspace
Status In Development
Spartan Camera sells cellular trail cameras with data plans that keep them connected to the internet.
My job was to modernize the store, make shopping easier, and give customers clear, honest information without making them figure everything out themselves.
I handled UX research, competitor analysis, and page structure. I also created a design system to help the marketing and development teams build and maintain the storefront.
I'm highlighting a few parts of the redesign here, but feel free to explore the full Figma project and design system below. :)
[01] Collection Pages
The original collection pages tried to show just about everything at once. Camera models, variants, carriers, bundles... all hanging out on the same page.
It made browsing the lineup much more tedious than it needed to be, especially for someone who didn't know which camera they wanted in the first place.
+++ Solutions +++
The redesign separated the collection by camera model and introduced filters commonly used in the trail camera industry, making it easier to narrow our lineup without having to dig through every product variation right from the start
A spec comparison module was also added for users who wanted to get a little more technical before making a decision.
Oh and we moved the bundles into their own collection for more experienced users who already knew what they wanted and were looking to buy in bulk. This helped keep the browsing experience focused for new customers without taking those options away from returning ones.
+++ Impact +++
A new shopper no longer has to scan the whole lineup just to figure out where to start. They narrow, compare, and move on, instead of sorting variants, carriers, and bundles all at once. An experienced shopper still gets to bulk options fast, without those options crowding everyone else's view.
[02] Product Pages
These pages were outdated as hell, but the biggest issue I had was the amount of technical information it left out.
Things like product manuals, feature breakdowns, accessories, and even a simple product spec were all hidden under an easy-to-miss description. Which is pretty important information a technical product should display, if you ask me.
+++ Solutions +++
The redesign brought the relevant device information into one place. Users could access the product manual, view available bundles, and find compatible accessories without having to spend a whole frikin' season hunting for them.
Most importantly, we added a dedicated warning message for users who selected an international model, along with all the available bandwidths supported by the international variant. This was particularly important information since selecting the wrong model could mean buying a camera that wasn't compatible with the user's network.
Feature highlights were also added to each product page to highlight the things that actually differentiate each camera, like photo quality, battery life, live streaming capabilities, and other model-specific features.
A spec table section was built to provide the technical details you'd expect from a modern hardware product.
...wild concept, I know.
+++ Impact +++
In the redesign, a shopper can find the manual, the spec, the accessories, and what actually makes each camera different, before they get to checkout. No more digging for technical info under an easy to miss description. That is what the new PDPs are built to do, and it is a hell of a lot clearer than the old pages were.
[03] Data Plans
This was probably the most important page in the storefront.
Buying the camera is one thing, but getting that camera connected to the internet with our data plans is what turned it into a real product.
Something our original data plan page was not making easy.
It presented users with a large table of plan types, prices, subscription terms, and shared-data options. Everything was technically there, but understanding what any of it meant required a fair amount of effort.
Someone had apparently decided that putting the entire thing into a table was the simplest solution. or maybe they had just given up...
+++ Solutions +++
I decided that an entire overhaul of the page was necessary, focusing on the most important thing the user wants to know: "How much am I actually going to pay?".
The new design replaced a never ending table with an interactive plan selector that helped users understand subscription prices, shared plans and monthly billing comparisons
The result was a much more approachable experience for new customers, while still giving experienced users the information they needed to compare plans.
We also received good feedback from our support team who appreciated the honest monthly breakdowns and the shared-data rules explained in a way that didn't require much investigation.
+++ Impact +++
In the redesign, pricing, subscription terms, and shared data options are laid out around the one question that actually matters: "how much am I actually going to pay?".