Storefront Editor

Led the con­cep­tu­al explo­ration, and pro­duc­tion design of the desk­top edit­ing experience.

Shopi­fy had already tak­en steps to make what you see is what you get edit­ing pow­er­ful and flu­id, with the launch of the store­front edi­tor in 2015. The prob­lem is that edit­ing your theme is made up of fixed set­tings. Want to add mul­ti­ple image and text sec­tions? You can’t. Want to to reorder con­tent? You can’t. Mer­chants want intu­itive dynam­ic con­tent edit­ing. We set out to solve that in a way that aligns with Shopi­fy’s strate­gic direc­tion for the Online Store.

We had a clear goal to begin with: Make dynam­ic, drag and drop con­tent edit­ing pos­si­ble. The chal­lenge was: how do we make that hap­pen? I began by explor­ing dif­fer­ent con­cepts of how inter­act­ing with con­tent. What might it look like to add con­tent? To edit con­tent? Our ini­tial approach was one of control—control the pre­sen­ta­tion, and the lay­out, of con­tent completely. 

Although this approach was sim­ple to con­cep­tu­al­ly explore, and test­ed well in con­cept test­ing ses­sions, it soon became appar­ent that this approach was not aligned with the strengths of the online store: lever­ag­ing unique designs by our part­ner community. 

Upon this real­iza­tion, the dev lead and I tried a dif­fer­ent approach—let’s look at as many pat­terns of web­site con­tent struc­ture, and see what we learn. After review­ing dozens of sites, we had clear and resound­ing learnings.

Learn­ing 1: Stores that share the same con­tent hier­ar­chy, often do not share the same pre­sen­ta­tion. In oth­er words, just because you store the data in the same way, it does­n’t mean you’d want to show­case it in the same way.

Learn­ing 2: Store con­tent is made up of vari­able hier­ar­chies of con­tent. In oth­er words, some­times con­tent is a sin­gu­lar object, some­times it’s mul­ti­ple objects, some­times it’s mul­ti­ple objects, with nest­ed con­tent inside. It’s unpredictable.

The approach we need­ed to take for #1 was clear — Themes must con­trol pre­sen­ta­tion in order to be able to offer the var­ied appear­ance mer­chants had come to expect.

#2 Was more dif­fi­cult. Some “blocks” were 1 lev­el, oth­ers, could be 2, 3, or even 4 lev­els of nest­ed con­tent. After explor­ing the pat­terns we researched, we had an aha! moment, when I stum­bled upon call­ing the con­tain­ers for blocks “sec­tions”. All of a sud­den we had a way to facil­i­tate 2 lev­els of con­tent nest­ing. The high­est lev­el would be called a sec­tion, that option­al­ly con­tained blocks. We decid­ed that this stuck an appro­pri­ate bal­ance, of con­trol and flex­i­bil­i­ty. It would give most mer­chants the con­trol they need­ed to build what they needed.

I revis­it­ed the inter­ac­tion design with this new con­cep­tu­al mod­el. Upon re-explor­ing, it became clear that inter­act­ing direct­ly with a sec­tion was rel­a­tive­ly sim­ple, but select­ing a block with­in a nest­ed sec­tion could be more com­plex. For this rea­son we decid­ed to move the edit­ing con­trols into the side­bar exclu­sive­ly, and use the pre­view for nav­i­ga­tion, and a true pre­view. Dis­con­nect­ing the edit­ing from the con­tent direct­ly made it impor­tant to visu­al­ly con­nect the two spaces with sim­i­lar imagery, iconog­ra­phy and content.

Upon launch, the prod­uct was very well received by mer­chants. Mer­chants loved it, but they want­ed to be able to use the pow­er­ful sec­tions on all of their online store pages. Since launch, the updat­ed themes and theme edi­tor have become the new stan­dard for cre­at­ing a Shopi­fy store.

This project me the impor­tance of know­ing the com­pet­i­tive advan­tages of your prod­uct ear­ly on. Know­ing com­pet­i­tive advan­tages is help­ful to deter­mine areas of explo­ration worth con­sid­er­ing first. It also high­light­ed the impor­tance of hav­ing a deep under­stand­ing of exist­ing user behav­iors and actions. Last­ly, it made clear that cre­at­ing some­thing total­ly new and inno­v­a­tive takes a lot of time to get right, com­pared to projects where it’s an incre­men­tal fea­ture addition.