AtmosFX e-Commerce Redesign

Research-informed Shopify e-commerce redesign that clarified product taxonomy, holiday discovery, and responsive buying paths through prototype-led IA work.

  • RoleSenior UX Designer
  • Timeline2018
  • ScopeShopify / Ecommerce / Information Architecture
  • Shopify
  • Ecommerce
  • Information Architecture
  • Responsive Prototype
  • Analytics
AtmosFX e-Commerce Redesign case study cover.

Overview

Brief

Clarify holiday-decoration discovery, product differences, and purchase paths in a Shopify storefront.

Role
Senior UX Designer
Constraint
Evolving categories and terminology made it hard to distinguish single scenes, collections, and packaged products.
Outcome
Produced a full responsive prototype and shipping direction for the Shopify transition.

Project context

my role

Senior UX Designer

client

AtmosFX

team

  • 1 UX Designer (incl. me)
  • 3 Devs
  • 2 Executives
  • 1 Social Promoter

tools used

Feature Design Lead Design Strategy User Experience Information Architecture Prototyping Testing Analytics Visual Branding…

platform

Desktop + mobile web commerce

FEATURED EVIDENCE

Highlights

A quick scan of the moments that best explain the problem, the pivot, and the payoff.

Why it mattered

Story

Hypothesis

Clearer navigation, product structure, and help guidance would make the shopping experience easier to understand and buy from.

Insights

Heuristic evaluation, competitive analysis, SurveyMonkey research, and card sorting pointed to unclear navigation terminology and weak distinctions between single scenes, collections, and packaged products.

CASE STORY

Flows

Each lane isolates the clearest evidence so reviewers can scan the work in order.

01

Wireframes · Structure and flow logic

Information Architecture

3 frames

02

Design · Finalized UI and specs

Storefront + Shopping Flow

4 frames

03

Validation · Testing and refinement

Responsive + Support Experience

2 frames

CASE EVIDENCE

Deliverables

WIREFRAMES

Information Architecture

3 assets flow

DESIGN

Storefront + Shopping Flow

4 assets flow

VALIDATION

Responsive + Support Experience

2 assets flow

How it moved

Decision points

  1. Direction Chosen path and rationale

    Restructure the IA around clearer holiday-oriented product groupings, breadcrumbs, and related product or content pathways, then test the direction in responsive prototypes.

  2. Validation Testing and refinement

    Heuristic evaluation, research synthesis, weekly executive check-ins, and a full-site Axure prototype shaped the direction.

  3. Engineering Handoff, specs, implementation

    Handoff to Shopify developers included responsive flows, e-commerce feature designs, help content, related-content pathways, and Google Analytics funnel planning.

Resulting shift

What changed

  • Extensible IA for evolving product lines
  • Clearer paths between single scenes and collections
  • Responsive Axure prototype across desktop, tablet, and mobile
  • Added trust surfaces such as About, Press, and Help & Support

Tools

Tools used on project

The working set used to research, prototype, align, and ship this case.

  • Photoshop
  • Axure RP
  • Sketch
  • Zeplin
  • Google Analytics
  • Microsoft Office
  • Microsoft Visio

See it in Action

A quick walkthrough of the decision path, interface behavior, and delivery proof behind AtmosFX e-Commerce Redesign.

Captions and speed controls remain available in-player for fast review.

Worked with the following clients