An expanding catalog blurred the differences between digital decorations, collections, and gear, making product discovery and purchase choices harder to understand.
Role
Senior UX Designer
Constraint
The direction had to accommodate changing product lines, responsive layouts, and a Shopify implementation handoff.
Outcome
Produced responsive storefront and shopping-flow directions, a full-site Axure prototype, and a Shopify developer handoff. The available record does not establish conversion impact or that every concept shipped.
Project context
Why it mattered
Story
Hypothesis
Clarify the product model and the routes from discovery to purchase before refining surface details.
Insights
The heuristic evaluation questioned whether a new visitor could tell what AtmosFX sold. The project research summary also records unclear navigation terms and weak distinctions between individual scenes, collections, and packaged products.
I led the UX direction across research synthesis, information architecture, interaction design, and responsive prototyping. I worked with executives and Shopify developers; the project record documents a developer handoff, not sole implementation by me.
Diagnose the discovery problem
I explored ways to separate shopping from guidance and make the catalog easier to scan. The navigation model below is one exploration, not a claimed final test winner.
RESEARCH
Give the catalog a clearer shape
01 / 03
01 · Research
Storefront clarity finding
A heuristic note asks whether first-time visitors can tell what AtmosFX sells from the home page.
Make product differences visible where people buy
A shopper choosing a decoration also had to understand what came in a collection, what could be bought as an individual scene, and which format or display mode fit their setup. The results wireframe separates product types and display uses; the product-detail concept brings the purchase choices together.
DIRECTION
Explain the purchase choices
01 / 02
01 · Direction
Collection and scene choices
The product-detail concept shows a collection, individually priced scenes, a format choice, and display-mode guidance together.
Prove the direction across screens and hand it over
The work extended beyond desktop layouts. Mobile states and a full-site Axure prototype made the proposed navigation and shopping experience concrete for review. The project record documents a handoff of responsive flows, commerce features, help content, related-content routes, and analytics funnel planning to Shopify developers. These artifacts establish design and handoff work, not a measured commercial result or proof that every screen launched.
DESIGN
Carry the direction into implementation
01 / 02
01 · Design
Mobile discovery state
Mobile navigation and a narrow storefront state make the responsive direction inspectable.
The lesson was to resolve the product model first: a clearer interface only helps when people can tell what they are comparing and buying.
How it moved
Decision points
Resulting shift
What changed
Explored navigation models and storefront routes for a changing product catalog.
Designed product-detail states that distinguish a collection from individually priced scenes and show format and display-mode choices.
Created a responsive Axure prototype and implementation direction; no measured sales or conversion result is established here.
See it in Action
Research-informed Shopify e-commerce redesign that clarified product taxonomy, holiday discovery, and responsive buying paths through prototype-led IA work.
