Role: UX Research and Design Intern
Timeline: Fall 2019
Tools: Figma and Origami Studio
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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: