Skip to Content
2018.06.25

East Fork Pottery

See Live Project

Pushing the Shopify plat­form to its lim­its to cre­ate a smooth and play­ful ex­pe­ri­ence.

Alex & Connie Mattisse run Eastfork Pottery out of Asheville, NC. They both have a strong de­sign sense, and a clear un­der­stand­ing of their brands iden­tity and point of view.

This meant that the chal­lenges of this pro­ject cen­tered around push­ing Shopify to­wards a more con­tem­po­rary client-side user ex­pe­ri­ence, in­clud­ing lazy-load­ing grid items and smooth client-side page tran­si­tions.

home

The pro­ject had a strong ed­i­to­r­ial de­sign as­pect, sim­ple lay­out with strong ty­pog­ra­phy and pho­tog­ra­phy.

pottery

The cat­a­log view used a stag­gered grid that re­peated every 15 items. This meant I needed to re­quest pag­i­nated sets of items in mul­ti­ples of 15, then re­peat the lay­out within the pages.

modal

A quick shop­ping modal from the cat­a­log view al­lows for brows­ing and adding items to the cart with­out go­ing back and forth to in­di­vid­ual item pages. The color op­tion swatches swap the ac­tive im­age for quickly pre­view­ing the many col­or­ways.

description

The prod­uct de­tail pages needed to carry the ed­i­to­r­ial feel, and al­low for the voice to ex­ist for prod­ucts.

[TK] The reg­istry

[TK] The an­i­mated logo good­ness.

cart

The UX for the cart needed to avoid the stan­dard form sub­mis­sion for up­dat­ing the cart con­tents. Abstracting the cart in­ter­ac­tions into an API that can be called by use ac­tions on the DOM was crit­i­cal — and al­lowed us to have nat­ural up­date meth­ods tied di­rectly to in­put in­ter­ac­tions.

[TK] The quiz thingy, and the need to add ar­bi­trary data to the cart that gets car­ried through to the pack­ing man­ager.

[TK] The add a gift card bit

about

Another in­ter­est­ing de­sign mo­ment was the im­age treat­ment on the long-form con­tent pages. Each page as a unique col­or­way in ref­er­ence to the sea­son glazes (configurable for each sec­tion from the Shopify Admin in­ter­face), and they im­ages are a gray-scaled and mul­ti­plied over the back­ground color. On hover, the im­age tran­si­tions to a full-color treat­ment. Animating the tran­si­tion be­tween these sates is tricky — CSS blend modes can­not be tran­si­tioned as they are bi­nary states. The ef­fect is achieved by hav­ing two im­ages, one with the mul­ti­ply & grayscale, and one full-color but trans­par­ent po­si­tioned above it. On hover, the opac­ity of the top im­age is tran­si­tioned, pro­vid­ing the de­sired ef­fect.