Inside Shopify UX S2 E12 | Designing Shopify Editions
--
Lola Oyelayo-Pearson: Welcome to Inside Shopify UX. I’m your host, Lola Oyelayo-Pearson, UX Director at Shopify. We are here with some extra bonus content for season two. And first up is an episode to celebrate the release of, drum roll, Shopify Editions. But before we get into that, I wanna give you a quick peek into something different we’re doing for season three. Now, in addition to me, you’ll also see lots of-
Sadia Latifi: Me, Sadia Latifi, UX Director.
Yesenia Perez-Cruz: And me, Yesenia Perez-Cruz, UX Director.
Lola: That’s right, three hosts. Welcome.
Yesenia: I’m really excited to be here to learn more about Shopify Editions, which was a huge feat to bring together product and marketing teams across Shopify to tell the story of our product. Now, I’m really excited to hear about all the work that it took to make it happen.
Lola: Yeah, it’s gonna be pretty exciting. And we’re doing the deep geek version on this episode, not like the marketing version. Like the deep how we made it. So Sadia, tell about it, tell us.
Sadia: I’m so excited for y’all to say this one. So I got to chat with our marketing UX Director Maggie Fost, Design Lead Stephanie Chan, and Senior Staff Product Designer Jordan Ouellette about the creative process behind Editions. We get into the very interesting origin story behind the project and talk about the wild and fast collaboration process between product and marketing. I’m also excited ’cause we went deep in Figma on this one and had a really juicy conversation about how we navigate subjectivity and risk taking and creative work.
Lola: Yeah, I am excited to see the Figma zoom out and zoom in. So let’s dive straight into the episode.
Sadia: Hello, hello. I am very excited to be talking to these fine folk who have been working tirelessly over the last three months on something we just launched this week, our very first Shopify summer edition, which you can check out at shopify.com/Editions. Before we dive into the nitty gritty of that project, I would love for all of you to introduce yourselves. Just tell us your name, where you’re based, and what you do at Shopify. Let’s start with Jordan.
Jordan Ouellette: Hey there. My name is Jordan. I’m a Senior Staff Designer at Shopify, of course. And I work on a team that works only across our product in looking to help elevate and bring up the quality bar of the experiences that we ship. So not dedicated to any one particular project, but kind of many things in many teams in many areas.
Sadia: Free agent.
Jordan: Yeah.
Sadia: Maggie, how about you?
Maggie: I’m Maggie Fost. I am a Design Director leading a creative team that works on product marketing for kind of all of Shopify’s core offering based in Toronto.
Stephanie: Hi, I’m Steph Chan. I’m a Design Lead. My home team was revenue marketing, which is based on large merchant facing marketing. And I’ve been working with Maggie Fost on Editions since March. And I’m based in Vancouver, Canada.
Sadia: Awesome, thanks to all of you for taking the time. Okay, so let’s jump right in. Editions, what are they, Maggie?
Maggie: What are Editions? So at Shopify, Editions is an idea that our CEO actually came up with around the beginning of the year to help us tell our product story better. And the idea is that we’ve done a really good job telling the entrepreneurship story, and that’s awesome, but we have this incredible suite of products that people love, and we haven’t done a really great job of telling that like full platform story. So Editions is a twice annual digital experience that wraps up everything that Shopify has built in the last six months and presents it in a kind of cohesive story.
Sadia: No small feat. I heard there was a pretty interesting origin story to this. You kind of mentioned, like Tobi had a strong point of view on this and I think he actually brought you in Jordan. Can you tell us about that process?
Jordan: Yeah, it kind of started through the work I was doing around kind of looking at the quality bar of our experiences across our platform, and in this work, this is something that Tobi really cares about. And he and I discussed this work frequently. And one thing that kind of came up in discussion one day was, hey, I’d love to bring back the full Shopify logo into our nav. Kind of a seemingly small thing. And so for context, what our experience currently has is there’s the Shopify bag and then the store name lives next to that. And so what he meant by the full Shopify logo was the bag plus the word Merch that it’s our full logo. And so I was like, yeah, cool. I could explore that. They’re seemingly simple. There’s knock on effects to doing something like that for the product experience, but you know, something I was up for looking into. And so one day, I’d kind of put a few things together, shared it with him. And he had said that, oh, this great. My dog was barking in the background.
Sadia: All good.
Jordan: Apologies for ruining the recording. He’s like, this is great. This could work really well for this idea I have around, I forget how we framed it, but kind of product story every half a year. I don’t think we quite had a name for it then, but basically, he’s saying was like, it’d be interesting to leverage the logo now and theme it to the release that we’re on. And so it kind of creates a signifying piece. And right away when he said that, it really was compelling to me in that it resonated through having seeing an opportunity myself to help people see the things that we release or the merchants see the things that we release more often and have a better sense of what’s going on. And so I quickly kind of grabbed onto that idea and started mocking up some concepts around how we could go beyond just changing the logo for that edition and telling a bigger product story. And so I had come up with some concepts for him with that and shared it and he was enthusiastic towards it. And then that kind of became the springboard for him then socializing the idea across the company. And in the middle of that, he was like, hey, I wanna call it Editions. And I was like, love the name. It’s cool and it kind of stuck. And so, yeah, I was kind of just a cheerleader for the idea and kind of just ran with it really early on. And then it kind of got in the hands of the people that really made it happen, which was a huge team, of course. But yeah, I think that there’s little details in between, but I think that kind of gives the broad strokes.
Sadia: I think you’re selling yourself short on cheerleader. Let me just like recap that the CEO DMed you and just like, hey, can I get some help working on a thing? And then you brought that to life. Is that common with you and Tobi? And what is that relationship like in collaboration?
Jordan: Quality has been something that I’ve cared a lot about in our product for a long time. And I’ve had the opportunity recently to champion a team around this kind of theme and cause, and in the middle of kind of ramping up this team and project, it was known that this is something that Tobi also cared about. And so I had just reached out to him. And we had interacted previously, but not as regularly, just like on miscellaneous projects over the years. But anyway, so I had reached out and just said, hey, I’m gonna be championing this project and I’d love to meet with you and just kind of make sure we’re aligned philosophically on kind of how we’re thinking about this work, because if he’s a gonna be a big stakeholder in it, I wanna make sure that as someone leading this effort, driving in the right direction, and that’s aligned with leadership. And so we grabbed a quick call one day and talked about that work. And from that point on, we had kind of been in touch regularly, whether it be meetings with the team or in touch on Slack. And so over the course of that, I shared things with him, he shared things with me. We talked regularly about the work that we’re doing, and there’s ebbs and flows sometimes where we don’t talk often. And then sometimes it’s very regularly throughout the week. It just depends on kind of what’s on the go. But yeah, it ebbs and flows, but there’s definitely like I think a trust, I hope, that builds up with him as a team and as myself. But yeah, so these random things kind of come into play. It’s a lot of fun. He’s fun to collaborate with, so it’s great. We’re lucky to have a CEO that cares a lot about the details, of the quality-
Sadia: For sure.
Jordan: And creating really great, really great experiences like Editions. So, yeah.
Sadia: That’s awesome. So, okay, you turn a random thing into a concept. Maggie, you are on board as the Marketing UX Director on this. My understanding is that this project was done pretty unusually and like broke a lot of traditional rules for product launches. Can you talk a little bit about how you came into the project and sort of what was unexpected about that?
Maggie: Sure. And I’ll build on also Jordan’s point about Tobi being hands on. I think that is part of the origin story of this project is that so many of our leaders at Shopify, our founders, and so they know all of the disciplines really well. Like they’ve been close to it at some point, and Tobi’s no exception. So this project came from him in February, I think, and the decision was maybe kind of late February. The decision was we were gonna launch this in June. And it was an incremental work stream on top of everything that everyone had going. And so we needed people. And we ended up just like borrowing folks from all across Shopify, which was kind of awesome in that all these people were coming together around this thing that hadn’t been done before. And most of us hadn’t worked together before. So that was the first unusual thing, was it was this ephemeral team that just assembled from all different corners. And then the second aspect that was really unusual was we knew that this was gonna be this big platform story. We knew we wanted it to have a big theme, but it took a while to get those pieces in order. So like figure out what are the, it ended up being, it’s like 130 different products that are shipped. How do we stitch this together? None of that was sorted, and we needed to get started anyway, because it was at that point March and this thing was launching in very short time. So we started with no content and no concept. All we knew was we needed this kind of vessel, which isn’t an uncomfortable place to be as a designer, as a UX or as a creative team. Likewise, like didn’t know how it was gonna stitch into the product experience with Jordan. It kind of came back around and Jordan ended up helping lead how this showed up in the admin. And we didn’t know how it was gonna connect to our dotcom. There were a ton of open questions and nevertheless, we had to just dive in.
Sadia: I wanna pull you in here Steph, like this idea of working on creative concepts without a brief blows my mind. I would’ve been like, I can’t start. Like how did you think about working that way? How did you get started without sort of the core details of a brief nailed?
Stephanie: Yeah, I totally agree. 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. And Maggie really set us up the best way she could. She did a ton of research and kind of pulled together a deck that had some thought starters that were hilarious but also super relevant, like the Daily Prophet from Harry Potter, like sort of like a magical newspaper. So that idea of a news vehicle but things could be special and pop out. And another one was the closet from-
Maggie: Next in Fashion.
Stephanie: What’s the show called? Next in Fashion, where they reveal all of the tools and fabrics and things you can use to build, which is kind of like our products at Shopify. And then the final one was showing the OffLimits Cereal site, which is a really innovative, cool product site. So that was kind of like the germ of the concept that we ended up with.
Sadia: Cool, and I’m really excited that we’re gonna like dive into the work pretty soon. I just wanted to also share, like from what I understand, you had a ton of free rein and permission. And it was like kind of an aggressive timeline, but you got a ton of staffing support. Like people move teams for this temporarily. And I think you were told, correct me if I’m wrong, like it doesn’t have to look like anything that we’ve done before. Was that scary? Was that liberating? What did that sort of unlock? And anybody answer on this one. I’m super curious what that was like.
Stephanie: I think it was liberating. Yeah, we started, and I think Maggie helped make that fun. We just started with some directions that we felt looked delightful and were inviting, because one of the design principles we wanted to hit was to get people to want to play, like to explore and play. But yes, that can be definitely scary and way too much. And there’s too many options out there, but yeah, somehow we made it work.
Maggie: Yeah, I feel like that was part of the ambiguous brief was to have it feel really, really special, for lack of a better word. 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. And in fact, like when you look at it, there are just a couple little aspects that tie back to our main brand. One is the logo, which was changed. And again, that’s just like really a surprise for me to work at a brand where they’re like, sure, change the color of the logo. Whatever, no big deal. So that was exciting. And then some of the typography relates back to other things that you’ll see coming from Shopify. But also if you look at Shopify, the way the Shopify shows up, it’s really already a brand that covers quite a spectrum. So it’s loose.
Sadia: Maggie, can you tell us a little bit more about the early creative process and how you kind of got to the concept that we shipped?
Maggie: Yes, I would love to. So this team came together and explored. I mean, we started by looking at references that are out in the world of similar kinds of formats, like long lists. So everything from like very utilitarian to very entertaining. And it one into the spectrum. We looked at a lot of editorial references, ’cause this is kind of a digest. And so we thought, we have formats that work for this, and it led to like the biggest Figma in the world, for sure. We have just so, so, so many pages. So two other kind of breakthroughs, I would say, within the early creative process that are worth mentioning. The first one was this idea of leaning into the strength of Hydrogen, which is what this site is built on. It’s Shopify solution for building headless storefronts. And we thought, okay, Hydrogen is good at building storefronts. Like what if we made this into a storefront? And there was a whole design direction that was like very much looking like our storefront. And embedded within that is the second idea, which was showcasing our products as products, and giving them a uniform visual manifestation. And we also loved 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. So we landed on this idea that I would be delighted to share, and you’ll see it on the site of product tiles. So they’re squishy, they have a texture, but they’re also animated. So we thought about like, as I said, what things can happen in the digital world that can’t happen physically? Well, they can have animated kind of packaging, and they can spin around and they can float. So all of these illustrations were done in house, and they tell a little bit about the product. And on the back is a little phrase that tells you a little bit more. And 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.
Sadia: The 3D object piece of this seems like a real breakthrough. And I’m curious if you could just nerd out a little bit on like how we got here and then how did you sort of know, yep, this is it.
Maggie: Yeah, Steph actually was much closer to kind of the engineering feat that had to happen also for this to become a reality, because it was not easy. But Steph, I don’t know. Would you like to talk about that kind of building process?
Stephanie: Sure. We have a really talented motion designer, Nik, who I think he stayed up many nights in a row or rendered many nights in a row to get these completed. But then on top of that, super talented dev named Eric Johnson, who I think he’s been spending weeks trying to get these interactive on the site and looking beautiful and having the right motion and timing. And he just landed on a really great place last week. So it’s a lot of-
Sadia: It’s awesome.
Maggie: Yeah, resources and investment, but totally worth it, ’cause that’s the motivating piece on the site and kind of surprising and delightful.
Sadia: For sure.
Maggie: We’ve had mixed support, I’ll also just say, internally. Like some people love it. I heard from someone new on our product marketing team, and she was like, “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? ’Cause it kinda suggests that it’s something that does exist physically, so like it was not a unanimous like love fest. I just wanna say that out loud as well, ’cause we had to fight for them to stay.
Sadia: You’re pulling on something I also wanted to talk about with you. Look, like this is not your first rodeo on creative campaigns. And also, creative work is often so subjective, and it’s like really hard to do something that’s universally loved. And sometimes, actually, that’s the point. How do you think about this? Like when you’re getting that internal like mixed reaction, how do you, as a marketing UX leader, kind of think about like making decisions and forming convictions around work.
Maggie: That is a great question and has so much to do with the culture of Shopify, because I do really feel that this is a place that supports taking risks, and everyone kind of did set the expectation. Like look, this is the first one. We’re gonna learn a lot. And so knowing that you have that support, that we’re gonna try stuff out, this is experimentation. We do not have the perfect recipe to like slam dunk this on our first go went a really long way to us being able to take those risks. So I love that aspect of it.
Sadia: You hit it, really. It was just like, how do you get that conviction? How do you feel like comfortable in the choice that you make basically around the work? But I think you’re right, like so much of it depends on just like, does the environment support that level of risk taking and not knowing all the answers before you ship something, right?
Maggie: Yeah, yeah. And I mean, that’s also where I think this aspect of the brief became clarified as we made decisions and certainly like some post-rationalizing, as one does.
Sadia: Sure, sure, sure.
Maggie: But also, I think the more that we started building and the more that we started getting actual content in here and looking at like, okay, how would this product be represented? The more we were able to test whether our early assumptions were fair or actually we had to throw them out. And like we did reverse course on a ton of stuff. Actually, Jordan, like it was interesting working with Jordan’s team because in many cases, what was happening in the admin experience acted as a forcing function for us to gain more clarity on the digital experience, and Jordan, you have a good example of that.
Jordan: Yeah, so I mean like, there’s a lot we could say about the in product thing. We’ll get there, I’m sure. But there’s one piece of this, which is like, what do you call the Editions beyond the visual signals that you can give? And even that, like, you need something more concrete than a color, because why is the Shopify bag some random gradient color now? To merchant logging in that day, it’s like, well, why? Did Shopify change their brand? And so you needed something a bit more concrete to like pair with that and create as a kind of a mechanism to direct you towards learning more about it and all these things. And so one of the things is like, yeah, what do you call it? And at one point, I think the marketing UX team had landed on, we would seasonally call it, I think we said like June ’22. Like as in 2022, as in when we released it. And when we got that in the product and it’s living alongside the logo as like a badge to help support the understanding of this color change, for a merchant, once they get beyond like June they’re in July, and I have this badge that says June ’22, why does my admin say June? It’s already like somewhat ambiguous to where like, if I don’t interact with it, it’s like saying the month of something. But we hope people will be curious enough to go and discover it, but it’s even more weird for those that don’t know and know that this thing now says last month’s month. So that was something we had kind of flied with the marketing UX team to say, hey, this isn’t gonna work.
Sadia: Yeah, this is gonna make-
Jordan: And then you all had kind run with it from there and came back with a good solution, I think.
Sadia: Ah, those small decisions.
Jordan: Yes.
Sadia: Ah, this thing that makes so much sense in a marketing context actually will render that marketing work that is so wonderful like really perishable if we don’t name it the right thing. So that’s a great example. Steph, I would love to see some more work, if you don’t mind sharing a little more detail on the actual landing experience that we shipped.
Stephanie: Sure, I’d love to. I kinda wanted to talk a little bit about our process. I think it’s really a unique process we used in that it was so collaborative. We had these Figma pages, and there were about like maybe eight creatives working and dividing and taking pieces. And for me, I’d never worked on a branding project where we were kind of in a software like Figma where you could really just like take each other’s work and like riff off it in the moment. Like basically, like grab it, change it. What do you think? Okay, what about this one? What about this change? So I think the process that we ended up using, which was highly collaborative in a Google Meet, sort of stealing and changing each other’s works
Sadia: That’s awesome.
Stephanie: In the spot was how we got where we got so quickly.
Maggie: Among strangers, too.
Sadia: I’d say it requires a lot of trust to let someone touch my stuff, right?
Stephanie: Yeah, yeah.
Sadia: That’s awesome.
Stephanie: But I think it was kind of exhilarating.
Maggie: Yeah, I’m so glad you pointed that out, Steph, ’cause that’s like the most special part, I think, of this project, actually was the experience of collaboration and generosity. It was just like-
Stephanie: No one’s precious.
Maggie: Yeah.
Stephanie: Yeah, totally. So this is a Figma. The actual page will be a lot more dynamic than this, but we love to zoom out and show the website like this.
Sadia: Long.
Stephanie: Like yeah, 10,000 foot view to show the enormity of the content. And then to also start to talk about how we needed to solution the navigation and making sure people would know where they are on the page and sort of get oriented. And so we did that through color blocking, through two types of navigation as you scroll down the page. And I can run through the page and some of the design decisions we made. So Connect to Consumer, Maggie revealed, was the theme. We went through a couple iterations, but landed on this design. We felt the theme was such an important piece of this Editions that it needed quite a strong opinionated lockup. So this Connect to Consumer lockup is in a special font. That’s like a sister to drop, which is the main brand font that we landed on. Our Editions medallion, which is what Jordan is using in product. I think that’s going to be the one element that might persist into the next Editions coming up. There’s a special developer experience called dev mode that you can flip to in a couple places on the site. So at the top here is one way, and I’ll show you what that looks like in a minute. Here at the top is the hero video, which is being worked on by another work stream with imaginary forces. And it’s very fun and cool. It’s kind of like a trailer explaining a bit about Editions and kind of getting people hyped up. And then this area is we’re calling the mega graph. So the idea of abundance and just leaning into we’ve shipped so much and there’s so much and like this is how it all sort of fits together was the idea behind this mega graph. So the top part links into the theme, and then the paragraph sort of stitch together the products in a way that present them as solutions that you can group together. We are really excited about that when we developed it, because it is one of the first times that we are sort of talking about our products in that way.
Sadia: I wanna pause here, ’cause this really struck me as well as like the entire length of the page, ’cause it seems like very counter to what we are told about marketing and people’s attention spans. And it should be like snackable and bite sized and it’s scannable. And I feel like this is kind of taking a really different opinion. So was that something that the team always knew, or like how did that decision kind of get made?
Maggie: Yes, it was like part of the brief was this sense of abundance. Tobi really wanted merchants to see how much we’re investing in their success and it’s like, wow, it should have this like holy wow impact when you experience this, the massiveness of this list. So it’s intentionally very, very long page. As Steph pointed out, that we did build a lot of sign posting and kind of ways to get to what’s meaningful to you. But yeah, it’s a super long.
Stephanie: So here, if you can imagine, this chapter nav will stick to the top and then flash through the different chapter colors as you scroll down the page. You can also use it to sort of click and jump to the chapter you’re interested in. And yeah, this is the first chapter. Let me jump to actually the prototype, because we wanna see these tiles in action on the page.
Sadia: This podcast was not sponsored by Figma, but we are very big fans.
Maggie: Yeah, it kind of was, totally.
Stephanie: Okay, so this is what you’ll see. On desktop, most user users will see an interactive tile that they’ll be able to spin and play with.
Sadia: So fun.
Maggie: Yeah, this design has evolved a fair bit from Figma, but that’s something that we have held onto.
Sadia: And honestly, that’s pretty special, right? Like first thing to cut, let’s not make this interactive. Yeah, it sounds like-
Maggie: We did cut that at one point, and then it came back. But yeah, it’s been just sort of ever shifting list of priorities as we sped to launch.
Stephanie: I’m gonna jump to-
Sadia: Dev mode. I’m stoked about dev mode.
Stephanie: Yeah.
Sadia: Why did we do it? What are the biggest differences? What did you have to trade off on? I’m so curious about this.
Maggie: Actually, I mean, this was another design evolution. Tobi really wanted this to feel, he initially insisted that it’d be one unified experience, and that there be sort of interesting ways to uncover stories particular to devs. And for a more general audience, our marketing is reaching a number of different people, but primarily merchants, developers, and partners. And the way that they use our products and what they’re interested in can be very different around one particular product. So a highly technical merchant might get kinda close to what a dev story would be. But we also have millions of small businesses who are never going to need to know what Hydrogen is, right? They’re gonna choose one of our themes and get their store up and running really quickly. So it is really two very different audiences. And we had to kind of guess on this main portion what level of technical proficiency most of our audience would have and tune the copy that way. But the dev mode was our way to be like, hey, highly technical folks, we get you and we know that you probably want like less storytelling and you wanna get your hands into the products as quickly as possible, so it’s a bit stripped down. We always thought of it as kind of like just the facts protein packed, and we all kind of love how stripped down it is. It’s like super, maybe, it also has many fewer products. So it’s a curated list, different nav, different experience.
Sadia: Cool, let’s maybe see like a bit of an example of how it feels different.
Stephanie: So you can enter dev mode at the top here. I’ll show you what that looks like.
Sadia: Ooh.
Stephanie: Yeah, so I’ll do it again.
Sadia: Look at that transition.
Stephanie: There’s fun little transition that has some Easter egg copy in it, including “talk devy to me.”
Maggie: I didn’t know that until just now.
Stephanie: No one will really know. It’s just kind of-
Sadia: Well, I was gonna ask, I was gonna be like, what is one thing that, like a tiny little Easter egg detail thing that you hope people notice, and there it is.
Stephanie: Yeah, totally. It’s not shown here, but when you exit Dev mode, there’s like a rocket ship, like ASCII art thing that comes up. So, yeah. Dev mode certainly is a place where we try to have a little bit more, not more fun, but hide those elements that technical folks might think are funny or interesting.
Jordan: This is the first time I’m seeing this, and I absolutely love the like terminal loading situation.
Sadia: Cool.
Jordan: That’s like one of the things that’s so unnecessary, like a “unnecessary,” like it could click the button then you’re in dev mode, but it’s like that extra attention to detail that really took it from like being good to being really great. And I think, well, like I know this word delight is so controversial. I don’t use it myself, but that’s like, I felt quite delighted when I saw that. And I’m sure running dev, like I can imagine, someone that has like a craving for nostalgia might see that or just using might see that.
Sadia: I love when we like invest in those. Like if you know you know moments. It’s not for everybody, but like it’s for you. And if you catch it, you will really, really like value it and really think that we get you ’cause we do. And so I think that’s awesome, and you’re right. Like rare again to not just like cut that for scope reasons, but actually you’re like, no, no, this is essential to making this land. It’s really cool.
Stephanie: And none of the designers are devs. So we brought in other design teams from the ecosystems team. We talked to our own team of developers just to see if they thought some of our ideas were cool. So yeah, it was definitely a big collaborative process. And then some of the design decisions we made were like Maggie said, to strip out some of the things, the extraneous details like the product tiles, some of the like product highlights, and add in a couple of design details that are special for developers, like you can see the chapter nav at the top. As it fills up, it’s pixelated. We added some grid lines and divider markers that are sort of taken from inspect mode that developers would recognize. And as you can see, it’s all dark, which we personally love. I think because it just looks clean. It’s beautiful. And it sort of features the product features, as you’ll see on the actual site in a really beautiful way.
Sadia: Really good reasons for the main site to be for everybody. But then when you get into that tailored audience view, like the sort of detail risk just like just breeds a lot of really interesting possibilities when you really know your audience and commit to them. So it’s really awesome to see. Thank you so much for sharing that. I wanna make sure we get to product. And in product, so Jordan, I’d love to kind of get a sense for how you approached connecting the dots of this like very dynamic thing that’s happening on these pages with what is often like a very brass text place where merchants get their work done.
Jordan: Yeah. It was a lot of fun in dynamic. It’s been like a couple months now maybe. And so it all feels blurry, but it sure will come back as I talk through it. But I think, yeah, the important thing was that we wanted merchants to know that this was a thing, but in a way that got it of the way and allowed their admin to continue being a tool and not be disruptive, ’cause at the end of the day, they’re paying for this product to help them run their business. And we’re not there to be a billboard in their admin. So that was really important as a principle. And so it kind of became the question of continuously, like how far do we go with bringing us in? We had the extremes of like, do we just change the logo and you click on it and you can go to the website, or do we bring a lot of the highlighting features that have been added or changed right into the product, and whether that just be like a carousel telling you about like the highlights, or all the way down to like calling individual changes on individual pages? So there’s a lot of back and forth on that, and I can kind of walk you all through how we progressed through that. There was many, many, many, many iterations of this. So this is actually right here is the original, one of the original things I shared with Tobi after his request to, well, actually it wasn’t a request. He just kind of mentioned this idea. And so we just ran with it. But the funny thing is that the logo was kind of the impetus or like the starting point of that conversation. And finding out that this original concept I shared with him didn’t even take advantage of the logo, I kind of became really, myself and another designer that was helping me became really in love with this idea of like a coin, if you will. So this like kind of digital slash physical object that represented the Editions you’re on, and how weird saying like how cool could it be if it became like a physical thing in a physical world that like represented Editions that had passed? But anyway, but I included the full logo here at the top, as you could see as we’re messing around with other things in the nav. But we put this coin, what we’d refer to as in the bottom and called it like whatever, whatever we called it at the time. Edition one or two. We didn’t land on anything. And so, the thinking that we had had was, there’ll inevitably be a site, but we really like the idea of not having to make merchants go off to a website out of the context of what they’re doing to get a sense of like what is this thing? And then what are like the highlights? Like what are the main thing? Like what are the things to get really excited about aside from all the like granularity of it all? So we had this idea, if I clicked on this that we’d prompt a model where you would kinda see like what’s new in this edition. But even that language alone kind of helps you start to understand, okay, this is like a thing about new things in my product. Cool. And you might have a running carousel with animated gifs or whatever of like product by product, like the highlights, if you will. Maybe not everything we ship, but like some of the big stuff. And at this point, this is pretty generically our Polaris design system, ’cause it feel branded, because we didn’t have a brand yet. As you can see, I just used some random kind of color way thing near at the bottom for the coin, but it was kind of wire framing at this stage, if you will. So yeah, so the idea is it could carry itself through the top pilots and shared this with Tobi and he’s like, cool, I like it. But like I want like a website that is like, I love a website that like really tells a story. And at that point, I didn’t need to design the website for this idea to take off. So from this point, Tobi socializes, the ball gets rolling, making your team do all their amazing initial exploration. And at that point, the project had kind of officially kicked off. I had something to start kind of working with to try to bring this to life into the product for real. And one of the first concepts that you’d seen earlier creative-wise was this, I don’t know. Maggie, how would you describe it? Cereal boxes.
Maggie: Storefront.
Jordan: Storefront cereal boxes, yeah. So they had like a medallion or coin sorts, and so we leveraged that the way that we did that initial concept, fully well knowing that the logo would likely become a discussion again, but it was just like about getting momentum at this point. And so we kind of put this in the corner, and we thought if I click on it, I might see the cereal boxes that represent those main products. And we had a whole bunch of cool prototypes around, like hovering these boxes and they like highlight as I hover them and I can click on one. If I click on it, I then like see the details of that product. And maybe it has like a navigation on the bottom where I can like hover. You can see here like hover the boxes and they pop up and I can go into them. And we wanted this to like, you know, feel like it came to life in a product while being out of the way. And we thought using a motto would do this. At this point, doesn’t feel like Polaris, but it feels like a bit of a glimpse into the Editions site that they could then go and see and learn more about. So that was that exploration. And then we were talking about maybe what I’m on a page that has a new feature to highlight. We might like put a pip on this and I can click on it. And then it’s dynamic at this point to tell me a bit about that individual new feature. And so in this case, there might be like a quick summary video about it, and I can click explore more and then go to the site and see more things. We quickly started to can all of the extra kind of depth of all this. And we’re like, no, let’s keep it focused. There’s a lot of complexity that comes with doing something like this, but also, it starts to kind of be a bit too loud for merchants probably, and a bit too much calling attention to ourselves. So we started to like kind of pull back from the creative because Maggie and her team were still trying to really establish what the creative direction was officially gonna be. And so we started to talk about like, what are the mechanisms that we have to kind of bring awareness while getting into the way and point people towards the main thing, which is the site. And so we just kind of threw a random color on the logo. We’re like, we’re probably gonna theme the logo. If we’re gonna color the logo, we need a badge. And that was the thinking here with like the Fall ’22, at what point we were referring to it in that way. And kind of went back to the months and then back to the seasons. But as I mentioned earlier, the badge really helped kind of make the connection to the logo and understand, okay, like we didn’t just change the color of the logo. It’s not that we’re now red from green, but rather, there’s like this kind of this bigger thing happening here. But then, as you can see here, like in our home area of the product, for example, these blue kind of blocks represented the different ways we could start to, beyond the logo, maybe make mention of the Editions. So we talked about like a thin slim banner at the top that was just very simple and said like learn more, like kind of a lead into maybe an introductory model, like we had explored earlier. Maybe it takes a bit more space. Like it becomes a bit more rich maybe. Maybe it’s like a first card in a feed, or maybe it’s some sort of takeover at the top. Or maybe it’s like a combination of banner, like it kind of fit into the product banner plus home cards, which is where we tend to use to highlight new features and maybe like a call out to this thing is related to the Editions. So kinda went through this exercise and went far, up and down scale of what was possible. And we started to think the banner seemed like a reasonable way, and then how do we bring that brand into the banner, and how far do we go with it? And you can see we explored a bunch of different ways about this. And we ended up landing on trying to bring some of the excitement of the brand to it, but while not screaming too loud to where it was a billboard. And to where we ended up forgetting further creative direction and landed on something close to this but not quite. And there’s little pieces that are different in this. The badge has a number and the banner has the stickers poking out. And some of that we moved away from, but then, we were pretty opinionated on that we wanted though the banner to kind of be a lead into telling you a bit more before you went to the site. And at this point, we had some pretty strong creative direction, and we knew we wanted to introduce it with the video that was gonna be like the headliner of the site. And this aid merchants from having to go off to the site and away from the work they were doing in a kind of a quick in and out. And we are also I think really struck like working through how much of the hierarchy that we represent in this as well. There is like chapters which contained features and all these things. And so some of that had been explored, but in this case, we had kinda got to the point where we’ll just highlight some of the top headlining features. And we thought that you could navigate through those, like we’d explored previously. And then at the end of this, you can see explore more, and then they would bring you to the site. In the end, I think Tobi wasn’t really sure we needed this in addition to the site, no pun intended. And we really ended up stripping it really back to the bare essentials, and he’s just saying, I love that it’s like design is, how does it go? Design is done when there’s nothing left to take away, something like that.
Sadia: Sounds right.
Jordan: Yeah, after my long ramblings of kind of the process we went through, we landed on what was a pretty stripped back banner that like brought in the medallion and the brand and helped you make that connection over to the logo and like see, oh, these things are connected and the badges there to reinforce, but otherwise, it still kinda feels like background, out of the way, not too loud, and kind of just fitting in place. And then if I click this, we would limit it to just like a single kind of step that is just kind of leading you into the idea of like, hey, there’s like a high level summary of what an Editions is. You can watch a video that’s kind of a trailer for it. And then you’d click See All Updates and go to the website and see all of that there. And then beyond that, of course we had to solve for our mobile experiences. And so we were doing a similar thing there. This gradient was just placeholder. And we had a problem on mobile specifically though is that we couldn’t change the logo. And so we thought, well, we can leverage the app icon. And so we created this new area in settings for app icon, where merchants can build a collection of Editions past, and they can choose to use that as the logo for their app. And even for Plus merchants, we’re gonna give them the option to have an exclusive plus icon, which is kind of a nice kind of knock on effect to all this stuff. I think that kind of gives a pretty good, oh, here’s the plus version. You can kind of see that there. I think that gives a pretty good high level run through. I’m sure there’s a lot of that we could dig into, but I’ll pause there.
Sadia: Yeah, it’s so cool to see this. And like, first of all, you’re doing a bunch of stuff also without knowing the creative. Then the creative direction comes in, you have so much to work with. And then you’re like, okay, can I bring that typeface into the admin?
Jordan: Yep.
Sadia: And then, and then it’s this process of eliminating and eliminating and eliminating, and it sounds like you’re not too precious about it, right? And you’re always kind of remembering, what are merchants doing right now?
Jordan: Yeah. I think I was, yeah, I think we weren’t too precious about it. I think the one thing I was precious about was like being able to see the top headlining features in the product. And I’d fought pretty hard for that. But unfortunately lost it. But I was okay. I do, in the end, there’s nothing better than like pulling back to the very essentials, right? And simplicity often wins. So I think we landed in a really nice place.
Sadia: I did wanna ask everybody in the group, we just got one from Jordan, but like something that didn’t make it that you’re like, ah. And I hope there’s a way to do that again.
Maggie: One of the things that you’ll see on the site are some interactive features built into the page, and our devs did the most incredible like hack, meaning hack process, not hack to make those happen. So the ones that are gonna be part of the page are super cool. And they had so many creative ideas around how to demonstrate our products through interactive experiences. And unfortunately, we just didn’t have the time to build any of those out. So that’s one thing that next time around, like leveraging the creativity of our developers in collaboration with our designers, there’s so much potential there. And I can’t wait to lean into that for next edition.
Sadia: Okay, so Editions is launched. Amazing work. And now you have to work on the next one. I’m also curious, like what’s something you learned, it could be about the process as well. I think, Maggie, you just maybe mentioned one, but just wanna create space for any other thoughts. And like, I’m gonna do this completely differently next time. Lesson learned. Anything from anybody on that?
Stephanie: Well, I mean, working on the next one will be so different because we know what this thing is. And the funny thing about when we started this one is we didn’t know what it was. Was it a store? Was it a list? Is it a newspaper? So, I mean, we can totally evolve it, but we know at the core what this thing is doing. So I think we’re many, many, we’re way more set up with a solid foundation.
Maggie: I mean, if this site is infinite scroll, my Google doc of learnings is also infinite scroll. We learned so, so, so much. One of them is around process and when to build, ’cause you make space for exploration in the beginning of a project, right? And it’s like, you go from divergent to convergent. And I think we need to purposefully build in the space for more divergent moments throughout the process. So like 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. And that forced a pause with more exploration, but not quite enough time. And had we intentionally built that into our process of like, okay, let’s pause, step back, look at what we’ve built, put it up on the wall. The version of that that is a digital experience in 2022, stand back and build in a couple of days for us to like readdress the problem, that’s what I really, really desire to take forward to the next one.
Sadia: Awesome. Well, congratulations, y’all. I hope you get a little bit of a break after this, but again, if you have not seen it, go check out shopify.com/editions. There’s so much to dig into on that infinite scroll page and dev mode. Thank you all for sharing your insights. That’s really exciting. Thank you.
Lola: Thank you for listening to this special episode of Inside Shopify UX. Shopify Editions is an example of the amazing work our marketing design team does. And we are currently recruiting for marketing designers and marketing content designers. Find out how to apply by visiting shopify.com/careers/teams/ux. Our next episode focuses on UX recruitment at Shopify, bringing you an insight into our hiring process. Inside Shopify UX is hosted by me, Lola Oyelayo-Pearson, with my special guest hosts,
Sadia: Sadia Latifi.
Yesenia: And Yesenia Perez-Cruz.
Jen Shaw: Produced by Jen Shaw.
Isabelle Hamel-Carassi: Assisted by Isabelle Hamel-Carassi.
Michael Busse: Edited by Michael Busse.
Alisha Giroux: With art and graphics by Alisha Giroux.
Dani Chavez Ackermann: Dani Chavez Ackermann.
Trevor Silvani: And Trevor Silvani.
Matt Griffin: Music by Silent Quiet Spaces.
