My name is Vitaly. I’m co-founder and editor-in-chief of Smashing Magazine, which is an online magazine for designers and developers. We’ve been working with Dan on a new creative direction for the big relaunch that the magazine is going to have actually next Thursday. This is going to be open beta, and then we’re going to go release. Yeah, so Dan is mostly responsible for designs for mock-ups for our direction, also looking to where should magazine evolve? In terms of the branding, and also in terms of its presence or visual identity, so to say. We wanted to discover on our own what the new Smashing Magazine should be like, and this is where Dan helped us.
Team — Smashing + SuperFriendly
May 2016 — August 2016
- Creative direction
- Socratic method
- Art direction
- Hacking CSS
You had a magazine that you’ve been running for a couple of years. When did it start?
It all started back in 2006, in September 2006, with an almost naked WordPress theme. This is how far we’ve come, so far.
Where all good publications start.
True, true. I guess so.
You’ve had a site that you’ve been running for years, since then, but there were a couple of problems to solve in the new site. Can you talk a little bit about that? What did you want changed? What did you need different? What was broken? What was on your wish list?
One of the main issues that we had is that we’ve always been running out of space, literally space on the site. In terms of layout, it was a big problem. The magazine, when it emerged, it was all about publishing content, then we found a way of how to monetize the content. Obvious idea was to actually run advertising on it. There was always this important separation between content and advertising, so we would never do sponsored articles. We’d never try to, in any way, compromise the editorial integrity, as we called it, right?
Then, of course, we had more and more ads. The advertising became more and more important to us. It was actually the thing that helped us survive for all these years. I mean not survive, more like thrive, I guess. That would be another way of putting it. It has become extremely important, and obviously took a lot of space on the site, right? In terms of layout, we had a huge sidebar where lots of ads just were placed in. With time, we discovered that advertising revenue is not the only thing I should be relying on, so we tried to diversify. We started working on our products, e-books, books, conferences. We also had this idea of creating a news product, which was a membership.
We found that it was very hard for us to push our products because we dedicated most of the available space to content, which we wanted to dedicate. This was supposed to be taking most of the spotlight on the page. Also, another part which was really remarkably visible was the ads, and we couldn’t just dismiss the ads. We had to figure out a way to display our products in the proper way as well. At the same time, we always felt like if we want to evolve the magazine, for example with the membership, it’s difficult to find a place where the membership, as a product, could be displayed properly. We would need to do some major changes, because it just didn’t work in the old layout.
It was super responsive and super flexible and everything but, in the end, we just couldn’t deal with this fact alone. Then, the other thing from a technical perspective, which was also big driver for the redesign, was the fact that we were running different platforms for different things. Our job board was running on Ruby; it was a separate development. We’d been using Magento for a while, then we moved to Shopify for the shop, we were selling books and stuff. The magazine, its own, was running on WordPress, right?
Integrating all this content somehow to present them nicely in the magazine was a lot of work. It was just horribly tough. Because we wanted to display the products prominently and highlight them, we needed a way to integrate everything in one place. This is where the relaunch, the thought of a relaunch, came into place. The same time, we’re thinking also about not just rebranding, because we want to be rebrand, because we felt like we just need to do a redesign, but more like it felt that we want to explore what else we could do, right?
We want to explore how people see us, our readers see us. We want to be there, in terms of reinventing or rethinking the way the publishing should look like or appear in 2017. It was 2016 or ’15 when we started doing it. It was more like 2016. It was really about thinking, rethinking and re-envisioning of the way we should be producing content and how we should be highlighting the products.
What led you to SuperFriendly to help with that?
To be honest, I’ve known Dan’s work for many years. It wasn’t like a, “Hey, let’s just Google somebody who knows stuff.” I’d been respecting the work you’ve been doing, and I’d been respecting the articles that you published, even on your blog, where you share your process openly. The process, the methodologies, the workflow. It felt like, in many ways, we could be experimental. We could be creative. We could be trying to break out of, what we consider to be, all those good old classic layouts, right?
I felt like if we want to really try to explore and try something crazy and experimental, just to see what works and what really fits with our brand, then Dan’s work would be just a great fit for it. This is what actually, eventually led us to you.
I know we’d talked for a long time, for years, about things like this, about responsive design, about workflows. I’ve spoken at your conferences. I’ve written as part of your books. Getting this to try out that process and action, how did it go? Was it true to form? Was there something unexpected? How did it go?
Yeah, that’s a very good question. This is actually also a reason why it was important for me to play out, because I just wanted to work with you, to be honest, at some project. I’m also writing articles and I’m also contributing to books, and we are a publisher. We want to also preach what we are saying, right? It was important for us to look into okay, if we do stick to this workflow, which is what we believe in, and because I’m running a consultancy, I’m trying to implement some bits here and there that you are talking about and Brad [Frost] is speaking about and so on and so forth. Kind of looking to okay, so what would the process be like in a pretty big project like redesign or relaunch of Smashing Magazine? It was really actually fun, I would say, because I think one of the first conversations we had is, “Dan. I want you to break things.”
“I want you to do something crazy.” I remember sending you a screenshot of probably the weirdest Flash-like layout I’ve ever created in my life, which was all weird and crazy corners and circles and I don’t know. You said, “Okay. This is maybe not the best way of doing this, but I know what you mean.” I remember that. That was an interesting conversation. It was interesting to look beyond the scope of what we would normally do, right? Really try to break out and experiment, something that would maybe match our vision but also be creative enough to not bore you. Let me put it this way.
Awesome. I can say, from my perspective, it was also a lot of fun on my end. One of the things that I try to do on every project, but I think we really did a lot on this one, was even though it was a small project that we did, it was really about what is the thing that is unique to Smashing as a brand?
Yeah. I know from being part of many conferences that you’ve done, that there’s a certain vibe, there’s a certain tone that comes across in the Smashing events. That wasn’t really coming through on the site. I know for the first couple of weeks when we were working on this, it was really about exploring, how do we get that energy, off-kilterness, this quirkiness that comes from the events? Honestly, from you and your brand and the whole entire Smashing brand, not just the events but the books, the magazine, all of it, and how do we infuse all of that stuff into the website? I know a lot of that, if we can speak candidly, was uncomfortable for both of us to figure out what does it actually look like? Maybe you could talk a little bit about that from your perspective. We landed on colors and typography that were a bit non-traditional, things like that. Maybe you can say how you were reacting to that.
“Even though it tests poorly, I believe in this idea. I think it’s a thing that people need to get used to.”
Yeah. I think it was all about, maybe in the beginning, it was really all about resolving my inner conflict, to be honest, and also maybe our company’s conflict. The reason why is because we’ve been going in this direction, trying to become an established, well respected, professional magazine, professional publication, which is when you hear things like that, a professional, respected publication, supposed to be kind of serious, kind of formal, kind of maybe boring, in a way, to be honest, right?
This was one thing that was important for me, as editor-in-chief, to move to this direction, to become this source of information that people could trust and rely on, on one side. On the other side, we’ve always been a little bit weird, in a way. A little bit “creazive”, as I would put it, “creazive” literally. Like crazy and creative in a way. Then, really being willing to experiment in the things that nobody has done before.
It could be things like planking with audience on stage at a conference or it could be something like, I don’t know, having lots of cats and thousands, literally thousands, of balloons in a venue so it all bursts at the same time. Kind of stuff like this, and obviously this was not coming through on the site at all. When we designed it with Elliot Jay Stocks, it was 2012 when we actually launched it, I mean we didn’t even have a conference at the time. The first conference took place in September 2012. We didn’t really have any external view of, not an external view, but any appearance outside of the scope of the books and the magazine, right?
Once we got there, when we came public, it was the same thing. For me, it was really important to rediscover what it actually means to be Smashing at this point, right? Because when we started talking to people as well, when you started looking to what the brand means, you started talking to me about things which were really surprising to me. I didn’t see Smashing this way ever before, at all.
Things like playful, informal, quirky… this is the stuff that you mentioned. If somebody asked me, “What is Smashing?” I would probably say, “Reliable, professional,” this kind of thing. I would never say playful or quirky or I would probably say friendly and open-minded, but not quirky. That’s definitely not something I would use. This, in the end, reflected in pretty much everything we did. This had a tremendous impact on the entire workflow and also on the decisions we made along the way. I was not very happy the decisions we made in the beginning. Like the choice of the typeface or the color scheme or even sometimes layout. I felt like, this is not quite right.
One thing that was really resonated quickly with me, at the same time, was the fact it was all about community, right? When you said, “Well we should be highlighting people behind the scenes. We should be highlighting this tone and this feeling of community.” As a result, we ended up having the biography, which is often the byline somewhere, the bottom of the page, becoming one of the most prominent parts or components on the page. It’s now coming before the article comes in.
Now, I run tests. People hate it, they really do. They feel like, “Oh this is out of place. This should not be there.” I totally believe that it should be there, because it really reflects the brand as well. I think this really matches well with what we wanted to achieve in the first place. I think this is really, really important, even though some people might need some time to get used to it, right?
For me, it was all this weird process when I felt like, “Okay. We’re going to look into what Dan is going to propose, and then I’m going to be very critical. I’m going to look into it and step back and rethink.” We went back and forth about the typeface, for example. We went back and forth about all the different explorations that you proposed. What I found really interesting though is that whenever I said, “Well this is not going to work,” or, “This is not good because whatever,” you really challenged me, which made me think about maybe, yeah, maybe it could be working at certain point.
It was the same with Sara Soueidan as well, when she started coding. At some time, at some point, she felt like this layout ... I mean we just can’t do it with CSS. Then, she started talking to you and you pushed back. You said, “Of course, you probably can do something like that.” Then, she came to me and said, “Well we can’t do it this way. It’s going to be very dirty code.” I said, “You know, I like dirty code. That’s perfectly fine as long as it works.” She was pushed to navigate in this weird space and, in the end, she came up with a beautiful solution, right? At least, she thinks now that it’s beautiful, I think. Not sure if it’s actually beautiful, but it’s really, really cool.
(Note: You might also enjoy reading Sara’s Smashing Magazine case study.)
No. I think it is. I think this is a good point that you bring up. We should talk a little bit about the collaborators too. I remember when we were talking about what makes Smashing different than all the other web magazines that are out there, and publishing sites that are out there, on this topic, one of the things in talking with Sara about this was we really need to highlight the authors. The authors and the community really are a big part of what makes Smashing Smashing. No other magazine celebrates that in the same way.
I think that it was a risky move on your part. It was easy for me to just design something, right? It’s just a comp, let’s put it there, but you had to make the final decision and say, “Yeah. We’re going to actually do this.” Even to say, “Even though it tests poorly, I believe in this idea. I think it’s a thing that people need to get used to. While it might fail an initial test now, it’s something that as people see more and more, I believe in this concept.” Again, we’ll see if that actually plays out. I think the strength of that kind of collaboration and how we worked on it really led those ideas to bubble up to the top. Maybe, in that vein, you could talk a little bit about there’s a much larger team that’s working on it. What are all the other pieces that I haven’t even seen and I haven’t been involved in?
“Something in the code must be poisoned, because everyone working on this project is becoming a designer.”
Yeah. This has been a very long project. I mean it’s probably been the longest I had so far. I’ve been working on it, I think, from maybe August, September 2015, of course not full-time, but all the bits and everything came together very slowly. When we started working on the project, we’ve been doing creative explorations with Andrew Clarke. At this point, we’re looking at okay, how can we change the layout? What do we need to do? We actually also set up a pattern library at the time. We looked into okay, what would be the scope? What would Smashing look like potentially, right?
Then, we did a lot of comps and we went from one thing to another. In the end, we had some really interesting prototypes we could test as well. Then, we thought, okay. Let’s maybe try something very different. We have this which is great, major parts of what we established already through this process are going to obviously end up in the final design as well. What if we try to do something way crazier? Something that’s totally way off, where people would say, "This is not okay." In the beginning, I remember this conversation, I thought, no. We should have something that people don’t expect or they feel like this out of place or it just feels weird, in a way, or it’s really this amazing wow effect, right?
I remember you telling me, “Why do we need to do this? Why? Shouldn’t it be just readable? In the end, it’s all about the magazine.” We had this conversation back and forth. I felt like, again, we need to highlight the products in a nice way, even if you had a full width ad for the product, should still feel like it’s a part of the experience. Should not feel like an ad, right? It was really an important part of the design as well since now, this is why now, everything is really nicely organized and neatly organized together, integrated together.
Then, of course, it was only one part. The visual design took a while. Then, we also had to figure out a way of how to integrate everything. We’ve been working with Sara, who was the front-end developer, and she basically made it all happen. She believed so much in the vision, which is incredible, that I think, just during this process of building the site, she probably has become a UX specialist and visual designer, just through this process. She kept coming up with ideas and saying, “You know what? I think that Dan wanted to express this in his design,” because we had some mock-ups that were just not finished yet. There are so many fine details always that you need to tweak at the end.
She felt like, "Oh I think that Dan would love to do this." Then, she would go to you, I guess, at least this is what she was saying, she would go to you and then she would get some really quick feedback. Then, she would continue designing mock-ups, which she’s a front-end developer. Then, over time, she also became the UX specialist because she also felt like, "Maybe we should move these things around, change the flow and things like that." She’s been incredible. I feel like, if I look back now, it was really like a dream team. I don’t think we can ever had a better team, if you ask me. Then, of course, while this was being done, we also had the Netlify guys, Matt Biilmann, who is the architect of this new stack that we moved to. Technically, everything will be changing with the relaunch. It’s very different architecture. I don’t know if I should go into details here or not, because it would take another 20 minutes. It was really more about integrating everything nicely. This is where he was spending literally endless nights making it all happen, and building it up from scratch, which was amazing for us as well.
I don’t think that many companies or many projects have this chance, because we could do whatever we wanted. We could have just any e-commerce experience we wanted, move things around, change flows entirely. This is not what you can usually do if you’re relying on things like Magento or Shopify. You have certain things that just exist. I mean you can change them, but it will require a lot of work, right?
Here, we just from start, started really totally rethink what the publishing should be, what the editorial experience should be, what the article should look like. Also what the e-commerce experience should look like, what the job board should look like, all of the stuff which was really great. I mean I had a good time. I had a really good time.
You’re talking about just user experience overall for our brands, right? Not just UX of a website or UX of the e-commerce experience, but really what’s the users’ experience with Smashing as a brand wherever those touch points are?
He is also incredible. He is—I don’t know why—it’s probably something in the code or in the design must be poisoned, because he’s also now becoming a designer or a UX specialist, moving things around and suggesting some fixes, even in places where I feel it’s not like we have to, right? I mean everything together, it’s been incredible. Sometimes I found myself, even when you were submitting comps because we had the time difference, and when Sara was working on a project because she wouldn’t wake up very early, I would find myself waking up, I don’t know, maybe at 3 am or 4 am local time, my time, just to see if Dan submitted something.
Then, I would do the same thing for Sara. Did she submit any code? Now, I’m doing the same thing for Matt, because he’s living in San Francisco and I spend most of my time in Europe. I think, oh maybe he committed this service worker fix or whatever. This is what keeps me busy, I guess, at night.
It sounds exciting. It sounds like you should also get more sleep, but it also sounds like you’re excited for it.
That’s true, that’s true. Yeah.
Nice. I don’t know if this is confirmed or true, but I hear rumors of a progressive web app or something like that on the Smashing side too.
Yeah. At this point, this is just a given. I mean there is nothing else to do, I think. It’s not that hard for us, because we’ve already moved to HTTP2 actually a year ago or so. We are running on HTTPS, and we’ve been using service workers for almost a year as well. Been working with Cloud Four and with Jason Grigsby and Lyza Gardner on it, so it’s been around for a while. At this point, it’s just moving from an existing setup that we already have on the new one. Service worker is already running and Manifest is running, so it’s basically a progressive web app, yes. It’s just, at this point, it’s just five minutes to get to progressive web apps so why not?
Sure, awesome. As we round out, thank you. This is all great info. As we round out, just a couple of questions for you. What could we have done differently? As you look back, hindsight is 20/20, what should we have done differently? What are some things that you’re like, “Oh I wish this could have gone a different way?”
That’s a good question. I think, at this point, well first of all, I have nothing to complain about. I feel like I probably should have dedicated a bit more time, be right on the project. We felt like sometimes the timing is a bit off, because I’m speaking at a conference or you don’t get any feedback from me for two days. Or maybe you’ve been busy on something for a couple of days, and then it’s always very difficult to plan. We never know how much time it’s going to take. Maybe being there, just fully dedicated, for feedback or anything else, that could have been done better. Apart from this, I really don’t know.
I feel like also maybe one other thing that I would have done differently would be to set up all the flows, all the touch points, early on so they merged over time, right? Where we started looking at okay, so do we need to maybe change the checkout experience after all? Some of the things actually came a bit later after the design was already there. Maybe I could have done this better as well. When you had to redo or redesign or rebuild some parts already, I mean nothing major, but still had this maybe. Beyond that, I don’t think I would change anything.
Cool. Last question for you, for other clients, prospective clients that are thinking about working with SuperFriendly, what should they know? What should they be prepared for? You already touched on a little bit of this, but what should they be looking out for?
I think that one thing that many clients probably will not be expecting when they start working with you is the fact that when they propose something, they really need to have a good argument, good reason why they want to change. Quite often, when you propose something, you will be getting a very straight response from you, which is going to be very simple and probably going to contain just four letters, w-h-y with a, not exclamation mark, probably with the question mark. Then, they will have to explain why exactly they need this.
I think it’s important to really have a clear understanding of what you want to achieve, and what you don’t want to achieve as well. Being aware of where your brand is placed, so where your position is and how you want to be perceived. This will be helpful. Beyond that, I mean I’ve known your workflow for many years now, so I don’t think ... It was not surprise to me to figure out how you would actually do this. It might be useful to know that you have to think about components early on. You should not think about the entire page layout first. This will be a part of it, but actually thinking components early on is really important, is really, really helpful.
One more thing I want to mention, because I forgot two people working on the project and it would be unfair to them to not mention them.
One of them is Markus [Seyfferth], who is sitting right next to me now. He has been the one who has been, well, guiding the project throughout all this months, right? Taking care of all the fine details, like contracts and stuff like that, but also giving feedback, reporting issues, even bug fixing and eventual CSS changes as well. This was important obviously to have somebody who, like Markus, who would actually guide the project like managing project. That was also important role.
Then also, in the beginning, we had Marko [Dugonjić], a front-end developer here at the company, who was basically prototyping very quickly those component that Andrew Clarke was developing or designing, right? He was helping us as well a lot. There must be a good number of people along the way as well that I just forgot. Obviously we had usability testers everywhere, so poor souls. They had to click on buttons that were not buttons but looked like buttons, just because we’re not ready yet.
It was fun project. Looking forward to getting it out there.
Yeah, me too. Vitaly, thank you for taking the time to talk about this stuff. I guess last thing for you, where can people check out the work? I mean I know it’s coming soon. Where can they do that? Where can they tweet about you for all the things that they love and hate?
You can always go to Smashing Magazine. Some people will tweet about it when the relaunch comes out. I’m expecting interesting feedback from people who hate it and who like it. The one thing that I really don’t want to hear, and I hope we’re not going to get it, is “Eh,“ right? If people say like, "Eh," well then it’s probably a bad thing. If somebody hates it, really hates it, or somebody really likes it, then probably we did a good job, I think. If you want to stick around and look into the work that has been done throughout 18 months, you can just go on smashingmagazine.com and find hopefully at the point when this interview gets out, you will find this red beast with lots of cats. We have approximately around 50 cats on the site now. Illustrated cats, not living cats.
That must be a world record.
I think we’re going to get into Guinness Book of World Records at this point.
Excellent. Thanks Vitaly, I really appreciate you taking the time. Have a good rest of the day.
Thank you, Dan.