Creating a Modern
Store Design Experience

Role: UX Research and Design Intern

Timeline: Fall 2019

Tools: Figma and Origami Studio

Context

In the Fall of 2019, I worked on the Online Store team at Shopify HQ in Ottawa, Canada. Our team oversaw the website builder tool—called the Theme Editor—that empowered entrepreneurs to seamlessly design and update the look and feel of their online storefront.

Problem

In 2019, the no-code movement had made leaps and bounds. Competitors such as Webflow had drag and drop site builders that were only limited by the imaginations of their users.

In contrast. Shopify did not have modern drag and drop design capabilities, draft changes or content portability when a merchant wanted to change a theme. Thus, merchants felt that our Theme Editor’s no-code paradigm of modifying a pre-designed template was restrictive and unoriginal.

Goal

I worked on figuring out how our diverse app ecosystem would seamlessly integrate in this new paradigm of drag and drop customization.

To measure success in this project, I partnered with our data team to look at conversion rate from the old paradigm to the new online store editor, the number of support calls regarding app installation, configuration and deletion and lastly the install rate of apps in this site builder.

Evolution of the competitive landscape in the online store builder ecosystem

Feature
Parity

Shopify’s ethos has always been to empower app partners to leverage our APIs to fill in the gaps we were unable to provide our merchants. But as we scaled, this "wild west" ecosystem had gotten a bit out of control; app partners no longer abided by our design system and the experience was fragmented.

One of many examples of the contrast in experience between configuring two different apps

Code
Required

Installing 3rd party apps was cumbersome for merchants. Apps that connected with one’s online store required merchants to go into their online store’s code and manually paste in a code snippet the developer provided. This approach was inaccessible at best and untrustworthy at worst.

Having to manually edit store code alienated a lot of our non-technical users

Complex
Journey

To understand the pain-points in the app installation and configuration workflow, I catalogued all our support desk's tickets to identify key areas for improvement. I discovered the old ecosystem was set up in a way so that merchants would constantly have to jump back and forth between their dashboard and the editor to see how their app changes affected the look and feel of their stores.

A visualization of how fragmented the workflow was for merchants, sections in orange identified high friction points

Simplified
Workflow

The first goal was to create a "what you see is what you get" experience. The workflow needed to empower our merchants to configure their online store in a safe space: the editor. By integrating apps within the editor, merchants could concurrently work on configuring their apps and see how it would affect their store in real time.

An example of the contrasting configuring experiences across apps

Sections
Everywhere

Surfacing these apps was the main challenge that had to be tackled. A majority of apps were comprised of several children apps, each catering to a specific feature/functionality. I explored various ways to reinforce this parent-child relationship in the design through collapsable menus or creating associations through the app icons.

The explorations and final design for app sections in the Online Store Editor

Singular
Workspace

A major pain point for our merchants was having to jump between the store editor, their live store and the dashboard whenever they wanted to configure their apps. To address this disconnected workflow, we brought the front-end functionality to the Online Store Editor and maintained the back-end functionality in the dashboard.

The explorations and final design for app configuration in the Online Store Editor

Final Flows

After exploring various concepts and going through several rounds of user testing with merchants from a wide variety of technical capabilities, I settled on a final concept. Since this was part of a major paradigm shift, I also got to do a little strategy work on the side with product, marketing, developer relations and support to figure out our launch strategy.

The final flow for adding an app section
The final flow for configuring app sections
The final flow for deleting an app section

Retro

Being part of a massive paradigm shifting project was an amazing learning experience. I got to see the full product life cycle and witness how game changing a product can be for our users and for the company. Preliminary data shows the success of the launch:

  • Conversion to the new paradigm is high with 91% of our merchants have fully onboarded and stayed in this new store editor experience
  • Support tickets and costs are down 12% as merchants better understand these apps and that support is provided by 3rd parties
  • Installs for apps are up as 95% of merchants now feel safe experimenting with and better understand how to add and delete apps online store

Shopify announcing app sections at the fully virtual (Re)unite 2020!