Designing Shopify Editions
Up against an ambitious timeline and a wide open brief, marketing UXers share how they created a delightful and abundant digital experience
Shopify Editions is a digital experience that showcases everything the Shopify team has built for merchants in the last six months. In a special episode of the Inside Shopify UX podcast, you’ll hear from just a few of the many UXers who helped bring Shopify Editions to life.
Watch this bonus episode of the Inside Shopify UX podcast on YouTube or listen on your favorite podcast app. Subscribe to get ready for Season 3 — coming this fall. We have some fun things planned including two new co-hosts, UX directors Sadia Latifi and Yesenia Perez-Cru, who will join UX director Lola Oyelayo-Pearson.
Shopify Editions includes over 100 products and updates we’ve released across our platforms. You could spend a few hours exploring everything that’s launched (and we recommend you do!) but here are a few highlights to get excited about: Twitter Shopping, Tokengated Experiences, tap to pay with iPhone with Apple, local inventory on Google, and much more.
UX director and host Sadia Latifi chats with Maggie Fost, Stephanie Chan, and Jordan Ouellette about designing and building out the marketing UX elements for this launch, which includes a landing page experience and in-product communications. Maggie is a design director leading a creative team that works on product marketing for all of Shopify’s core offerings. Stephanie is a design lead who works on large merchant-facing marketing projects on the Revenue Marketing team. And Jordan is a senior staff designer who works on a team that focuses on raising the quality across the experiences that we ship.
Origin story
As a company, we take pride in telling the entrepreneurship story and our CEO, Tobi Lütke, wanted to bring that same energy to telling our product story. The idea for Shopify Editions came from conversations between Tobi and Jordan about quality across our products. Both Jordan and Tobi are obsessed with quality. So much so, Jordan started a movement and a new team to address quality across our products.
In their original conversation, Tobi asked to bring back the full Shopify logo in the nav. It’s a seemingly small change, but Jordan knew that it would have implications for the product experience. He spent some time putting options together and shared it with Tobi. Those ideas ended up working well with a concept Tobi already had about sharing more regular product updates. The logo update could signify what “release” our merchants are on. From there Jordan shared some additional expanded mockups on an experience that tells a larger product story.
Those concepts ended up being a springboard for Tobi to solidify the idea and socialize it across the company. And so Shopify Editions was born. At that point it was handed over to a larger team and many, many people built, designed, and marketed it into the reality that it is today. Jordan is happy to be a champion for the idea because he believes it’s a big opportunity to share with merchants all the amazing things we’re building for them. Jordan also says, “We’re lucky to have a CEO that cares a lot about the detail and the quality and creating really great, really great experiences like Editions.”
Maggie, the marketing UX director for this project, expands on what Jordan has already said about Tobi’s involvement in this endeavor. She says, “So many of our leaders at Shopify are founders. And so they know all of the disciplines really well. They’ve been close to it at some point and Tobi is no exception.”
A team effort brining a big platform story to life
Editions was just an idea in late February. With a very ambitious launch date of June, the team had to assemble quickly. Maggie says, “We needed people and we ended up borrowing folks from all across Shopify.” She shared that it was awesome to see a group of people from different teams come together so seamlessly.
After the team took shape, the next step was to figure out how to tell this big platform story. The story needed a theme, but it took a while to figure out how to tie all of the 100 different products and updates together. Maggie shares that at this point it was March, so the team just needed to start on something. So they did — with no content and no concept, just the requirement that it needed to be a vessel to hold all of these updates. Maggie recognizes it’s an uncomfortable place to be as a designer or as a creative team. Stephanie agrees, “I hate starting without even a semblance of a brief, but I think for me when we started that first week, it was just pure curiosity.”
Stephanie says that Maggie was able to make it really fun and set the team up for success even while they were waiting for additional details. With the research she did, Maggie made a fun news bulletin, taking inspiration from The Daily Prophet from Harry Potter. It was a way to get the team the information they needed but also a way to inject fun. She also referenced the Next in Fashion closet as a metaphor for all the things they could do or build with the resources we have at Shopify.
While it can be scary to hear that you have free rein on a project (read: endless options), it can also be really liberating. Stephanie said the one thing they knew from the design principles the team created is that they wanted people to play and explore. Maggie says, “Part of the ambiguous brief was to have it feel really special. And because we don’t have any existing pages on shopify.com like this, it did give us a lot of freedom to just make it what we felt it needed to be.” The team even had the opportunity to change the color of the logo, which can be rare at big brands, but speaks to freedom of expression designers can explore at Shopify.
The creative process
The team started by looking at references with similar kinds of formats, for example long lists. That ran the spectrum of very utilitarian to very entertaining. They also looked at editorial references since the end format is somewhat of a digest. Maggie notes that all of this led to the biggest Figma file in the world. From there this led to two breakthroughs.
The first breakthrough was to lean into the strength of Hydrogen, which is what Editions is built on. Hydrogen is Shopify’s solution for building headless storefronts. Maggie explains, “We thought, okay, Hydrogen is good at building storefronts. What if we made this into a storefront?” That led to a design direction that embodied a storefront. Embedded within that is the second breakthrough, which was showcasing our products as physical products and giving them a uniform visual manifestation. Maggie says, “We love this idea of playing with the digital and the physical and what can exist digitally that can’t exist physically, but have a sense of materiality.”
We landed on creating product tiles. Maggie describes them as squishy. They have a texture, but they’re also animated. She explains the team was very curious about, “What things can happen in the digital world that can’t happen physically? Well, they can have animated packaging and they can spin around and they can float.” All of the illustrations were done in house and each tile has more information on the back that tells you more about the product. In addition to talented illustrators on the team, Stephanie credits motion designer Nik Dudukovic, and front end developer Eric Johnson, for helping get these on the site and making sure they have the right motion and timing. Maggie says, “They’re just this beautiful, bright, tangible representation of each of our products. And I loved the way that this ended up really anchoring our site.”
Not everyone is a fan, and that’s ok
Maggie shares that the team had mixed support internally, some people love it and some don’t. Maggie explains, “I heard from someone new on our product marketing team that said ‘I saw those tiles, the potential of representing our products as products is so strong.’ And we have other people who were like, ‘Do they deserve to be here? Because it suggests that it’s something that does exist physically?’” It was not a unanimous love-fest, but that’s okay. The team had to fight for the tiles to stay.
As a marketing UX leader, Maggie says making decisions and informing convictions around work has a lot to do with the culture. Shopify is a place that supports taking risks. Because this is the first time we’re launching an Edition, there was the expectation that the team would learn a lot from this experience. So knowing the team had the support to try things out and experiment was empowering.
Changing directions when needed
Maggie shares that the brief became clarified as the team was making decisions. She explains, “The more that we started building and the more that we started getting actual content in here and looking at, ‘Okay, how would this product be represented,’ the more we were able to test whether our early assumptions were fair or if we had to throw them out. And we did reverse course on a ton of stuff.”
Jordan shares an example of something they had to throw out in the product admin experience of Shopify Editions. As part of the product admin experience, the team changed the color of the logo to visually represent the update. Because that was a bit ambiguous, they tried adding a reference to the seasonality of when Editions will be launched. They added June [20]22 to live alongside the logo like a badge, which would reference when this edition would launch. But as they thought about it, they realized it would be a confusing experience for the merchant once it became July or August and the badge would still say June 22. Jordan says, “That was something we flagged with the marketing UX team to say, ‘Hey, this isn’t going to work.’ And then from there we came back with a good solution.”
Designing the landing experience
Stephanie describes the process as unique because the team was so collaborative. She says, “We had these Figma pages and there were about eight creatives working in, dividing, and taking pieces.” She continues, “For me, I’ve never worked on a branding project where we were in a software like Figma, where you could really just take each other’s work and riff off it in the moment.” Stephanie describes being in a Google Meet where they were stealing and changing each other’s work on the spot and attributes that to how they worked so quickly.
Stephanie shares a zoomed out version of the Figma file to share a 10,000 foot view to show the enormity of the content. The navigation and making sure people know where they are on the page is also really important. The team made this clear through color blocking and two types of navigation as you scroll down the page.
This much content deviates from what you think about as traditional marketing. Most of the time with sites like this, the marketing team’s aim is to make content easily digestible and snackable. The team took a different approach and focused on abundance. Maggie says, “Tobi really wanted merchants to see how much we’re investing in their success. It should have this holy wow impact when you experience the massiveness of this list.” Stephanie points out that the team did build a lot of signposting and used navigation to help the viewer locate where they are in the experience and where they want to go.
Elements to explore in Shopify Editions
- Connect to Consumer is the theme that connects all of the products and updates together.
- The theme needed a strong, opinionated lockup. The team used Norline font which is a sister to the main brand font, Druk.
- The spinning Shopify Editions medallion is used in the landing page and product experience. The team believes the medallion will persist in future Editions.
- There’s a special developer experience called ‘Dev Mode’. You can flip to dev mode in a couple of places on the site. It’s a stripped down experience that speaks to a more technical audience and helps devs get into the products they want to try faster.
- There’s a hero video, which is a trailer that explains Shopify Editions and is meant to get people hyped up. Another marketing UX workstream paired with an agency, Imaginary Forces, to create it.
- The mega graph highlights the abundance in this release. The paragraph stitches together the products in a way that presents them as solutions you can group together.
- The chapter navigation allows you to scroll through the updates but still know where you are in the experience and has the ability to jump ahead.
- The interactive tiles are animated and you can spin them and play with them.
Designing the product experience
Jordan says it was important to let merchants know about Shopify Editions within the product, but that the experience didn’t distract or disrupt them from running their businesses. The team had a couple ideas upfront that were on a spectrum of subtle to extreme. One option was a change to the logo that would lead to the landing page experience, while another was highlighting the new features and updates right in the product in a carousel. Jordan says that there were many, many iterations the team worked through.
The first concept started small by introducing a coin icon in the bottom left navigation in the product admin. Jordan describes a conversation with another designer about the coin, “This digital/physical object represents the Edition you’re on. And we were saying, ‘How cool would it be if it became a physical thing in the physical world that would represent Editions that had passed.’” The second concept morphed the coin into the Shopify Editions medallion you see in the experience today. With that concept, they tried a carousel modal where you could scroll through the updates. The third concept explored a PIP modal where you could watch summaries of the new features.
While elements of these three concepts made it into the final version, none of them were the exact right fit. Jordan says the team asked themselves, “What are the mechanisms that we have to bring awareness, while getting out of the way and pointing people towards the main thing, which is the site.” They landed on a banner in the home space in the admin. They went through an exercise on the scale of the banner and making sure they had the right amount of information and intrigue. The banner leads to a modal that tells the viewer more about Shopify Editions before entering the site — which includes the video trailer.
The team did a similar treatment on mobile, but it had its own challenges. On mobile they couldn’t change the logo, so they leveraged the app icon. They created a new area in settings where merchants can build a collection of Editions past and they were also able to include an exclusive Shopify Plus icon for plus merchants.
Jordan points to that familiar saying, “Design is done when there’s nothing left to take away.” He shares that the team tried not to be too precious about their work, but one thing that was hard to let go for him was wanting to see the top headlining features within the product. Unfortunately he lost that one, but he says, “In the end, there’s nothing better than pulling back to the bare essentials. Simplicity often wins and I think we landed in a really nice place.”
Learnings from designing Shopify Editions
When asked what they learned from the project Stephanie says, “Working on the next one will be so different because we know what this thing is.” She recalls that when they started this project, they didn’t even know what they were building. She continues, “[In future Editions] we can totally evolve it, but we’re way more set up with a solid foundation.”
Maggie shares, “If this site is infinite scroll, my Google doc of learnings is also infinite scroll. We learned so, so, so much.” She says that they learned a lot about process. It’s important to make space for exploration in the beginning of a project. She also thinks it’s important to purposefully build in the space for more divergent moments throughout the process. She says, “For example, late in the process we realized one type of asset wasn’t really working on the page and it was like, ‘Okay, let’s figure out how we can fix this.’” That forced a pause with more exploration, but she says they didn’t have quite enough time. The next time around, she hopes to build in more time to pause, step back, and look at what the team has built so they can move forward in smarter ways.
Extra Credit
Want to dig in more on the topics discussed in this episode?
Now go forth and explore Shopify Editions. Interested in working on projects that impact millions of merchants? Checkout our open roles on the Shopify UX team.
