Project
Sweet Dreams Nursery
Role
UI Engineering, Data Automation & Microsite Development
Period
2016
A curated nursery theming experience powered by data-driven updates and seamless purchasing integrations. Built responsive-first with lightweight animations and automated content pipelines.
Beautiful Microsite
Responsive interactive UI
Data Automation
Excel → JSON pipeline
Easy Purchasing
Catalog API integration
01
Responsive Interactive
Render and interact across devices
Interactive Render
The experience renders a curated nursery theme with interactive hotspots, overlays, and purchasing hooks. It was engineered to be responsive by default so customers could explore on mobile and desktop interchangeably.
Content loads fast and interactions stay smooth by leaning on CSS animations and minimizing external libraries.
Mobile View
All projects were responsive by default.
02
All about Data
Formatting and using structured inputs
Formatting Data
Merchandising, Marketing, and Creative teams curated combinations monthly via Excel. To streamline production, I reformatted their inputs into a clearer template that was easy for them to update and reliable for ingestion.
Using Data
With a teammate, we built Excel macros to convert the structured sheets into JSON. I then wrote a JavaScript engine that generated the experience from that data, automating repeatable monthly updates.
Sketching with Data
With data modeled, I produced implementation sketches to align design intent with engineering constraints. Designers collaborated closely and adjusted visuals based on functional requirements, so every update stayed predictable for each team.
03
Bells and Whistles
Delightful interactions with practical overlays
Bouncing In
The experience opens with a gentle category bounce, channeling the excitement of an expectant nursery. Animations are pure CSS to keep payloads small and performance high.
Inside Info
Tapping the info icon reveals an overlay with a creative theme description that explains color choices and inspiration.
Get those Colors
A paintbrush button opens a palette overlay. In partnership with Home Depot, we surfaced brand and paint colors so customers could recreate the theme at home.
Plus Icons
The primary content lives behind + hotspots placed across the scene. Each popup fetched product details from the catalog API and enabled fast add-to-cart.