Shopify Editions
Motion Design, UX Design team
Created at Shopify 2022
TL;DR
Role
Shopify Editions is a twice-a-year virtual event featuring our new products with merchants and Shopify partners. The goal of Editions is to connect to consumers and also deeper learning of how Shopify’s products are helping our merchant to grow.
The Editions team was new at Shopify, the company has picked different talents from other teams to collaborate together for this exciting project. I was the Sr. Motion Designer in the team, responsible for doing website prototyping, defining motion language, executing video production, and setting up animation templates for our marketing campaigns.
Website prototype
Worked closely with our design lead, designer, and front-end developers to prototype the UX on the Editions' website. I defined some motion language for the progress bar, stickers animation, products feature UI, and transition. I delivered different motion demos to the team to drive through the overall experience and used them to explain the flow to our stakeholders internally.
Target Audience
In the past, Shopify holds an annual technical event Unite targeting our partners and developers in the market, giving them a forum to learn about our products and encouraging them to develop with Shopify. Instead of focusing on one specific group of the target audience, Shopify hopes to connect with their consumers directly, to power the next generation of commerce with innovative new products. As a result, we decided to design two different modes for the website - Mass Mode & Dev Mode
Mass mode is to target the general audience in a fun and approachable way, including adding some stickers throughout the site, a brighter and lifestyle color palette.
Dev Mode targets a technical group of people who are interested in Shopify's back-end system, the products we featured are different that Mass mode and we also included some interactive design throughout the site for the developer to explore.
Transition between Mass & Dev Mode
Progress Bar
The team wanted to differentiate the look & feel between mass & dev mode, this is a demo to demonstrate the progress bar animation in pixel art. Delivered this sample to the dev team for them to replicate the style in code.
Stickers Animation
All these stickers are used in the website and also in marketing videos in our campaigns, some of the animation are delivered in code (Lottie) to the dev team.
Products feature UX
Each chapter showcases one hero product and several secondary products, In order to introduce each product briefly, we decided to add some UI animation on the thumbnail to enrich the content visually. I worked closely with product managers to learn about the function and system of the products, collaborated with a content designer on the function explanation, and then animated the UI and kinetic typography of the thumbnail videos.
Marketing Campaigns
I designed the motion for the Editions Campaigns, featuring some of our merchants, these videos are published on various social platforms such as Linkedin, Instagram, and Facebook. I developed a few video templates for versioning with different content, set up the timing, kinetic typography, and some guidelines, finally, I delivered organized After Effects templates to the contractor.
