Episode Transcript

Karen:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week we are bouncing through the air, we are so excited that Kirstin Benson and Neil Renicker are here to talk to us about Instant.me. Welcome, welcome.

Neil:

Thanks for having us.

Kirstin:

Thank you. We’re excited.

Ethan:

But before we dive in, a few words about our sponsor. I couldn’t be happier to have Gather Content back as a sponsor on the podcast. You see, Gather Content is a content collaboration platform. It helps teams plan, organize, and produce all their web content in one place. They provide structured templates and simple workflows to make collaboration and production easy without the shuffling around of Word documents and unnecessary emails. Centralizing the editorial process will make approval of content easy, so everyone knows what they’re responsible for and when they’re responsible for it. And what’s more, Gather Content has recently published a free online guide to Content Strategy for Website Projects, which they’ve written for all the people who want to make smarter, content-led decisions on their designs. So every responsive design, I believe, benefits from a content-first approach. But as Gather Content’s guide says, that doesn’t mean waiting until all the content is written. Instead, it means considering and thinking about content at every single stage of your project. And Gather Content’s guide can help you do just that. So whether you’re working in an agency on client websites or maybe you’re working on an in-house team, Gather Content’s guide should help you more effectively contribute to your digital projects. You can read it online for free at gathercontent.com/RWD, or check out Gather Content’s products at gathercontent.com.

Karen:

So, what I would love is if you could both start off, introduce yourselves, tell us a little bit about the product and a little bit about who you are. Kirstin, do you want to go first?

Kirstin:

Absolutely. I am, as you said, Kirstin Benson. I am the editorial director of Instant.me, which is Time Inc.’s brand new web-focused video-only editorial outlet that’s dedicated about obsessively covering the lives of digital stars and what’s happening in digital media.

Neil:

And I’m a senior product designer at Postlight. We’re a digital product studio based in New York, although I actually work remotely from Chicago.

Karen:

Well, we’re really thrilled that both of you could join us. So I’d like to start off, maybe, Kirstin, you could talk a little bit about the strategy for Instant.me, and I’d be particularly interested in the question around—given the audience you’re trying to reach, given the digital-focused nature of this product, why was responsive design the right solution as compared to an app or a mobile-only product.

Kirstin:

Well, Instant.me was conceived a little over a year ago when someone within Time Inc., an executive, said, “Why isn’t there a People magazine or an Entertainment Weekly for digital creators?” They’ve become such a huge force and there’s really no media outlet that’s dedicated to covering them the way we think they deserve to be covered. And so, out of that, Instant.me was born, and it’s funny because there’s so many iterations.

In the beginning, people thought, “Oh, this might be just like your traditional website with maybe polls and articles, and we might have a print version,” pretty much the same product that Time Inc. has been creating for years and years. Then it was like, you know what? This audience doesn’t want that. This audience wants Gen Z and millennials thirteen to thirty-four. They like the video content, they want fast bite-sized content. So why don’t we create something that’s up their alley and something that can be delivered to them both on a platform, which we’ll talk about today, but then also on their social feeds and live natively where they already are ingesting their favorite stuff.

So, Instant is all video. We release ten videos every morning and they’re all a minute or less, and that is instant, it’s an instant edition every morning, each piece of content lives both on the responsive site but then also on social platforms. I can speak to the audience development decision of why we decided to do a site instead of an app, but I’ll let Neil talk about, beyond the audience development component, what went into creating the Instant.me channel and making it app-like.

Neil:

Sure, absolutely. So, it’s interesting, when we thought about responsive design for Instant, we actually had the opposite discussion we often have, where we’re trying to convince stakeholders to go responsive down from a desktop website. We were actually discussing the opposite, where it was a given from the outset that we wanted a responsive design, a mobile-focused website, and we had to sort of discuss if we actually wanted a desktop experience or not. So, initially the plan was mobile only and we’d have a big splash page on the desktop that said, “Hey, visit this on your phone!” But I’ve used and loved Vine’s TV mode, which is fantastic. So we started having discussions and actually doing prototypes around what a desktop experience would look like.

So, I will say that we spent a lot less time on large screen work. There were really a lot of interesting and technical performance challenges on the mobile web, so we focused most of our effort there and kind of got a fast desktop experience for free. Of course, there was some design work around the desktop, but it was secondary to the mobile approach.

Ethan:

Well, that might segue nicely into my next question, which is really how you talked about the needs of the mobile user and the desktop user. Did you sort of see them as roughly equivalent, all needing the same information regardless of the device? Or did they actually need different things under certain circumstances?

Neil:

I think for desktop users, we were thinking TV mode. So, kick back and watch quick accessible content that you might watch in a five or ten-minute sitting. On mobile, I think the needs were very different. Kirstin can speak to the audience, which she knows better than I do, but we were thinking more Snapchat mode, moving quickly, maybe you want to see a few short clips, and maybe share it with my friends quickly and then move on.

Kirstin:

And I think what was really important for us, like Neil mentioned, is almost programming Instant.me like a network. So, all of our content, each piece belongs in a larger franchise. So to give you an idea, we have something called the Instant Mix, where we take a hot song of the week and then we find the hottest YouTube covers, mix them together and then really champion this upcoming artist, and give you a bunch of facts that roll out on top of the screen while you’re watching. And so this little biit of content rolls out every morning, and then it immediately autoplays into the next piece of content, so you really get a sense of programming, and that was important for us too because we really wanted to brand Instant.me as a place where people knew what they were going to get every day. We’re not just a content farm rolling out, chasing the news. We’re ahead of it and are focused on our franchises.

Karen:

I’d be curious, from both of your perspectives, how you scoped a project of this scale. As you’re working with a partner like Postlight, how did you figure out what was going in this site, how long it was going to take to build, what would be required?

Kirstin:

Neil, I’ll let you take this one because I think you were a part of the project a bit before I was, even.

Neil:

Sure thing. So at Postlight, we talk a lot about the process of creating and shipping software, which inevitably can be a messy process, so we tend to take a pretty grassroots approach to it. So instead of coming to a wonderful client like Time with a shiny proposal, it’s more likely that we get in a room and talk about where the client needs to go, how we can help them cut risks, build a prototype quickly, and then work together as partners to get the project out the door on time, and of course built right.

I think Instant started that way in a lot of ways. Postlight was engaged with some other larger projects internally at the time, and a project manager pulled us aside and briefed us on a brand new “secret project that we’re working on,” were his words. And Time’s creative team actually had an excellent prototype, kind of a static prototype that you could scroll through, but it didn’t have a sense of product, so that’s where we started actually scoping things out. We built a few prototypes that were working code, and some of that code actually ended up in production, which is great. So, we started asking what a really stripped down version of Snapchat Stories would look like on the web, and we took it from there.

Karen:

I’d also love to know a little bit about the publishing process. What does the team at Time Inc. use to manage and maintain the site, and what did you have to build in order for them to be able to update it on such a fast basis?

Kirstin:

That is an excellent question. We actually work off of a custom CMS, and I’ll let Neil dive into what went into creating that, because he was key. But the team uploads content throughout the day and then is able to schedule it to run in the morning. The CMS itself is very simple, but that’s all that we really needed. We needed the ability to ingest Brightcove videos, that’s where we’re hosting our video content, and then just add a little description and a title to each video. So it’s a very simple back-end, at least from the user’s standpoint, and I’m sure there’s a lot going on that I don’t see.

Neil:;

Yeah, I think it is lightweight in a lot of ways, and as Kirstin said, the Brightcove component was really important for us. Because we got a lot of great things for free, things like caching of videos, which help us with speed and all that. The CMS, from our perspective, was, again, pretty lightweight. It was all custom, but it was really a pretty simple React app. That allowed us to focus on things like speed from the APIs perspective, and also speed for editors to actually publish their content.

Interestingly, the CMS itself is mostly a desktop experience only. So, it’s interesting that we were mostly focused completely on small screens for the user’s app, but then for editors we were mostly focused on the desktop because that’s where they’d spend most of their time.

Ethan:

I’d love to hear a little bit more about the design process that went into Instant.me. Specifically, when Postlight was partnering with Time Inc., how did you actually start showing them layouts? Was this a very prototype-driven process? Were you using more traditional design tools? Just tell me a little bit about how you started talking about the visuals.

Neil:

So, it’s a deceptively simple application. It’s light and easy and fun to use, but there’s some pretty interesting things behind the scenes with regards to autoplaying video on mobile Safari specifically. At the time, iOS10 had not been released, which now gives us inline video playback without the popup modal. And Kirstin’s team and the product folks at Time were adamant, and correctly so, that they didn’t want that experience, they wanted a more immersive experience. So we had to do some interesting technical hacks to actually polyfill that behavior and get video playback inline. So, a lot of our early prototyping was actually around the question of can we pull that off, can we technically make that happen. And the fantastic engineers at Postlight of course did it, because it’s live in production today. A lot of the time was, as I said, scoping that, can we actually do that, or are we going to have to do something creative to get around that, like panning static images or using GIFs in place of the video to entice users to click.

Ethan:

That sounds great. So, would it be safe to say that this was more a prototype-driven design process, that there wasn’t a lot of flat comps or mockups being passed around? How did you actually get client approval on the visual look?

Neil:

Absolutely, that’s right, yeah. Very little static design. We used Principle to scope out some animations; and then a lot of actual React code with JavaScript, prototyping animations, prototyping the video playback behavior. That was really key for us, actually.

I think it’s interesting to note that a really important component there was actually using automated deploys with a company called Netlify. So, it’s really just a static site environment, it worked great for our React app. You can set it up to auto-deploy each new pull request on GitHub, so essentially that gave us a unique URL to pass around internally at Time for each new feature we built. So, I really can’t overstate the importance of that, it was really critical for us in sharing working code. Early on it was prototypes, and then a lot of that prototype code was deployed in the production app.

One other thing I’ll mention, another important component for us as a distributed team—I’m in Chicago, I have Postlight colleagues in New York City, Time is in New York, and Kirstin is in L.A.—we used video screen recordings quite a bit, where we would build out working code and then actually fire up a screen recording and talk through the work, and then share that video with stakeholders at Time. That was really key for us to get feedback and bridge the distance gap as we worked on this project.

Kirstin:

And it was amazing, because those little videos that you were creating, Neil, went over insanely well. You would have thought you were the Wizard of Oz the way people reacted to those. I’ve since taken up using video recordings like that to demonstrate stuff for clients as well, and it just always goes over very well. So, it’s a little trick. Thank you for teaching it to us. [laughs]

Neil:

Fantastic. I think it’s also important to note that Kirstin had early access to some of this work before she started putting content in the CMS, before the product was live–a month or two before. So, she gave great feedback from an editor’s point of view and from someone who really understands the audience better than any of us product folks. She had a great grasp of what her goals were as an editor, what her audience was looking for, even down to interaction, like how a pause button works when you tap it. So that was really key for us in making the product better before it even launched.

Karen:

If I know anything about working with large publishers, I bet there were a lot of people who wanted to take a look at this before it went live. Can you talk about how you managed the reviews with the broader group of stakeholders, and maybe even how prototypes or the video recordings of different interactions might have helped facilitate those conversations?

Neil:

We at Postlight worked with a fantastic product team at Time, and they actually handled a lot of the review process in terms of the legal sign-off—and there was some of that, there was a little back and forth. But it was really a fantastic project from Postlight’s perspective because we were able to really collaborate with Time and do what we do best, which is shipping product, and leaned on them to do what they do best, which is creating fantastic editorial content. So again, a lot of the legal ramifications and sign-off on the work was pretty smooth from Postlight’s perspective. It was a greenfield project, everyone was excited about it, even from the very top of the company, and it was really just a fantastic project to work on from that perspective.

Kirstin:

Thanks to the enthusiasm from the executives within the company, we were really able to work at the speed of light, especially for the size of corporation that Time Inc. is. So Rich Battista, who has since been named the CEO and president of Time, loves Instant. He was enthusiastic from the beginning; he interviewed me, which at the time he wasn’t necessarily hiring people like me, but he was just so excited about the project and passionate about it that it was important to him, and we could really feel that on Neil’s side and on my side. And by the time I came into the project, which was about two months before we went live, so in April of 2016, a lot of this had been really cooked and they were down to a couple of responsive designs, right Neil?

Neil:

That’s correct, yes.

Kirstin:

And you guys were so receptive to my feedback, which was exciting because oftentimes I think there’s a little bit of a clash between editorial and the product side, with both sides thinking that they are the ones who should be heard no matter what. I think we had a really open line of communication, so Neil and I spoke probably more than I spoke with anyone, especially in the beginning, and were really in line from day one.

Ethan:

I’d love to hear a little bit more about performance. It sounds like a big part of the identity of Instant.me is speed, getting content very quickly and publishing very quickly. Was the speed of the responsive design something that was very important as well? And if so, how did you actually talk about that while you were designing the website?

Kirstin:

I’ll let Neil tell you about the technical aspect, but I will tell you that we were launching at VidCon 2016, which, if you’re not familiar, is like the mecca of all things digital stars, it’s basically the Comic-Con for social media stars and it’s thousands and thousands of people at the Anaheim Convention Center. We kept telling these guys, “Look, it’s going to be a bunch of people with no cell phone reception and no WiFi, and these videos have to play! If they get to the site and they try to load it and it’s not loading or it’s freezing, we’re dead in the water!” So that’s how we talked about it from the editorial standpoint, and I think that pressure was felt certainly on the product side, right Neil?

Neil:

Absolutely. So from the get-go, we were emphatically mobile-first on this, so performance was far more than just an afterthought. So, it is a React application, so we knew that rendering code on the server would be a must-have for things like SEO and performance. And then we’re also doing some pretty interesting work where we don’t actually render anything except a dummy placeholder until the video is in view. So what that means is we’re not rendering a bunch of video elements on the screen–when you’re viewing a single Instant, there are no other videos active on the page. We’re also doing things like lazy loading the content as you scroll, so we only load a single edition at a time, which tends to be around seven or eight videos. So yeah, those things are really key for us actually making the site load quickly, not showing more than we had to at a single time, and I think it’s really paid off.

Karen:

I’d be curious to know how do you measure or track whether this product is actually resonating with your audience. How do you know if it’s working?

Kirstin:

That’s a great question. That’s the million dollar question, I think. Well, we went into this project, from an editorial standpoint, with our key KPI being total video views. So that means video views on site, yes, but also video views across social. From there, we were able to set benchmarks and overall goals, and we have exceeded those goals on total video views. As far as measuring what works with the actual product, we are using Mixpanel, which I’ll let Neil talk about, and that allows us to track and identify behavior within our audience that you don’t necessarily get with Omniture or Chartbeat.

Neil:

Yeah, I think analytics was a huge part of the product early on. So we have really detailed analytics around how much of a video a user watches, how many users are watching, when they hit pause and play, how many videos they watch in a session versus their lifetime views. So a lot of reporting around that, which of course I don’t have access to that now since we’re not actively engaged in the project. But early on, we saw good numbers with that, and I’m really, really happy that the product team pushed us to make analytics a priority so they could measure success. I would say it’s a special app for Time, they have a lot of brands, but this one I think is really unique and free from any precedent, so it was really brave and risky for them and I think it was definitely the right move.

And then from Postlight’s perspective, success for us was creating an app that got out of the way and let Kirstin’s really great editorial team shine. So if we’re saying that the real value of this application is the content and all of Kirstin’s great work and her team that puts these videos together, that’s what brings the users back over and over again. So, I think we got out of the way and let Kirstin’s team really shine, and for us that was success.

Kirstin:

Thank you Neil, and do you want to know a fun tidbit?

Neil:

Always.

Kirstin:

We are so excited because users are consuming an average of nine videos on each mobile visit.

Neil:

That’s fantastic.

Kirstin:

Yeah, it’s really fantastic retention. We’re excited about that number in particular because it just shows that the content is resonating, and for me that’s always the most important part. While it’s incredibly important to have a working product, if you have content that’s falling flat, then what’s the point? So at least we know for sure that once people start consuming Instants, they are consuming more and more. It’s almost like a Pringle—”Once you pop, you can’t stop” situation.

Ethan:

Couldn’t have said it better myself. Well Kirstin, Neil, as we come to the end of our time, I’ve got to ask you, do you have any advice for our listeners who might be starting their own responsive redesign today, what’s one thing that you’ve learned working on Instant.me that you’d like to share with them?

Neil:

Get to the code as quickly as possible, whether that means prototyping or actually building a product, and especially if the technology is complex. So, things like using animation prototypes to hammer out the details. And get that communication with internal stakeholders happening as quickly as possible. That was key in this project, getting great feedback from all stakeholders. That’s what I would certainly recommend, if I were to do this project over again.

Kirstin:

And speaking toward editorial teams who might be working directly with the product teams, I would say it’s so important to ask questions in earnest and learn the lingo. Learn what responsive design means and don’t be afraid to ask or Google it, because it makes the process so much easier if you’re all on the same page. If you’re talking about that scroll-y thing that “moves up and down but doesn’t this,” things get lost in translation and that’s where miscommunication happens, and then you lose time. So the faster you can dive in and be open to learning about it and then communicate directly with the teams with an open mind, you’re going to be set up for success.

Karen:

Well, I think that’s great advice and it comes from a really interesting product. This is unlike many of the other sites that we talk about, so I’m really thrilled that you would come on and give us a little bit of the background on how you made this happen. So, thank you so much for being here.

Kirstin:

Thank you.

Neil:

Thanks for having us on.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design podcast. And thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process today.

If your company wants to go responsive but you need a little help getting started, Karen and I offer a two-day onsite workshop to help you make your responsive design happen. Visit responsivewebdesign.com/workshop to drop us a line—we’d love to hear from you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every episode at responsivewebdesign.com.

Thanks so much for listening, and we’ll be back next week.