Skip to content

Launching a News Site, One Template at a Time

Iteratively improving Philly.com. A conversation with digital operations managing editor (emeritus) Eric Ulken.

Eric Ulken:

My name is Eric Ulken. I’m managing editor for digital operations at the Philadelphia Media Network. I work in the newsroom and I oversee a team of journalists who are responsible for our digital storytelling and projects. Previously, actually two roles ago, I was executive director for digital strategy and, among other things, I oversaw the product team at philly.com. That is the capacity that I was in at the start of our project together.

Our main issue at philly.com was the fact that we had a non-responsive site. We had a mobile site that was a really sort of inadequate subset of the functionality and breadth of the desktop site. We knew we needed to move in the direction of responsive web design to be able to address our audience as it was shifting rapidly from a desktop based audience to a mobile devices. That was a driving goal behind the redesign. We had a lot of sort of smaller goals within that, including making the site a little bit more, a little faster, a little easier to navigate. We had a number of sort of subsidiary goals, but the main one was make it as functional and as easy to use on a mobile device as it was on a desktop.

Dan Mall:

Can you talk a little bit about what the organization was like at that time? How was the organization structured? Was that at all tied to the kind of site that you had? Was there anything that you wanted to be able to change in that mix?

Eric:

At the time that we started the process, philly.com was a separate newsroom from the Inquirer and the Daily News. We’re all together in one space now. I think to some extent our goal was to improve the brand clarity between or among the three news brands under the PMN umbrella (Philly.com, the Philadelphia Inquirer, the Philadelphia Daily News). We also, in moving to one newsroom, which was already sort of in the plan as we were embarking on this project, I think we knew we wanted to build a site that would be sort of an umbrella for all of the great journalism that’s produced by journalists in all three places when we were finally in one newsroom and working together.

01  A parallel-pathed project plan to template rollout
Dan:

Let’s talk a little bit about the sort of reaching out to other agencies and trying to get some outside help on it. What are some things that were important to you in finding a partner to work with and finding somebody who could help move all that stuff forward?

Eric:

Among other things, we saw design as an ongoing process. We really felt strongly that we did not want to do a redesign in the conventional sense, because we knew we would be back in a year and a half or two years looking for another redesign. That is to say we didn’t want to take the very static problem set and solve just those problems and then call it done. We wanted to be able to build a flexible design structure and language and to really learn from whichever partner we selected how to kind of take ownership of that and make it into something that we could evolve, so that we’re really sort of in perpetual redesign mode as opposed to the one and done redesigns that we have done often in the past.

Over time, we took a more active role, but initially it was good to have somebody who had done this before and was able to share some best practices with us around getting to a design that we can actually play with and continue to evolve. You had the blueprint. You gave us some insight into how to take that and run with it.

Dan:

We ended up with sort of a weird mix at the end there, at least certainly one that was a bit nontraditional. You ended up hiring Super Friendly and Happy Cog as a joint team to work with you on kind of moving the site forward. Talk a little bit about how that happened and maybe from your side of it.

Eric:

My recollection is you guys were both, initially you were both sort of bidders, or potential bidders, and that through mutual contacts it was clear that you were both bidding on this and that there was some thought that maybe a joint bid made more sense. From our perspective, while we certainly weren’t anticipating that, as we started talking with you and with your counterparts at Happy Cog, I would say, the complementary nature of your skill sets became apparent to us. One of the things that we appreciated, aside from the fact that you guys were the only local shop that was sort of a finalist for us and being local to Philadelphia made a lot of sense to us, especially as we were thinking about looking to learn and to really work side by side with our design partner. Beyond that, I think there was this sense that what Happy Cog brought to the table, in my recollection, was the structure and the process and a deep technical capability. I think you guys assembled a great group of design thinkers and people who really got under the hood and understood our problems. I think that collaboration worked really well.

Dan:

I remember sitting in the Happy Cog office the day that the proposal was due and I’m typing away furiously. They’re doing the same thing. We ended up talking about it, and it ends up we’re bidding on the same thing. I remember giving you a call and saying, “Hey, we just found out that we’re pitching against each other here and that we could team up and do something really great here. Are you open to it?” I remember you graciously saying, “Yeah, I’d love to see what that looks like.” I guess, as they say, the rest is history. We decide that we’re all going to do this project together.

How did we do? You talked about the promise of what we had talked about in that sales process, about here’s how we would like to work and here’s how you would like to work. It seems like those things match up. Did that come to fruition during the course of the project? Maybe talk a little bit about your recollection of how we worked together. Maybe talk about the roles on your side. I can say about some of the roles that we had on our side too.

It was definitely the right idea to release an early beta.

02  Behind the scenes of our initial prioritization workshop
Eric:

I think what we brought to the collaboration was a small, but dedicated product team, a handful of developers who were going to take on the code base and be able to continue to evolve it, one design lead. We’re not a really big team, and I think that’s why we knew that we needed some help in this project. We started out with a really deep discovery process where you guys came in and led us through some exercises to kind of get a sense of what the brands meant to us and what we thought that they meant to our audience, to really look at all of the kinds of content that the journalism that we produce and how it might best be represented. I think what we, in the discovery process, we really were happy to be led. Over time, I feel like we took a more active role, but I think initially it was good to have somebody who had done this before and was able to share with us some best practices around how do you get from that vague idea of, “I have this goal and I want to work toward solving that goal,” to an actual physical design that’s represented in code that we can actually play with and continue to evolve.

You guys had the blueprint. You guys gave us some insight into how to take that and run with it.

03  We built a configurator so we could all quickly see the variety of components and layouts an article could contain
04  Variations of a section front to handle different types of content density
Dan:

As I recall how we laid out the whole thing, what we all decided together as a bit unconventional than say the typical redesign process where we redesign the homepage and a handful of templates and then we design them and we build them and we launch them, and then good luck. We took a more iterative approach together, where we did one template at a time, rolling them out one template at a time too. At some point, when we’ve had this new site on the side of the main site, we had a new article template with the old channel and homepages. Once it got the new channel pages done, rolled those out too. It was this kind of iterative roll out starting with mobile and then rolling out more to desktop as we learned more about those things.

How did that work for you and the rest of the team? How did you see that working for users and readers of philly.com and the other properties?

We still struggle with this notion of the continuous redesign, because there is a natural inclination to call it ‘done.’

05  One sprint entirely focused on typographic explorations and improvements to what was already launched
Eric:

I think generally it worked well. I think it was definitely the right idea to release an early beta. I think we did the article page first. We got some feedback, some really valuable feedback, from the users about what was working and what wasn’t. We incorporated some of that feedback into future versions. Relaunching the mobile site of philly.com first was also helpful, and it gave us some confidence that we were solving some of those problems for mobile users.

Quite frankly, where I think we went a little bit wrong is in the re-release of the full philly.com. I think we underestimated the extent to which the changes that we made to the homepage might have confused users. We did test the homepage. We tested the homepage on mobile. We tested it with a small number of people on desktop. But I think what we learned, I think, after the re-release was that the changes were significant enough that we needed to prepare people a bit better than we had.

That said, we made some adjustments. This is part of what we had really hoped to be able to do, is to see what was working and what wasn’t and sort of quickly tune the site to improve the performance. I think we did that pretty well. We struggle still, I think, with this notion of the continuous redesign, because there is sort of a natural inclination to call it done. But at the same time, one of the things that I think is valuable is that we have this toolbox this collection of building blocks that we can use to create new things and to rearrange things without having to go totally back to the drawing board. That has been useful, and we are, even now, talking about some ways that we can use those building blocks to create, for example, new section fronts that we hadn’t contemplated when we were initially working on the redesign project.

Until we actually see people using the product, we don’t always understand what their real motivations and what they’re doing on our site that’s leading them to be frustrated.

06  A motion comp of how the header could act as a navigational aid
Dan:

That’s so awesome to hear. One of my favorite things about being a reader of philly.com is that there are things that I see on the site every couple of days or every couple of weeks where I’m like, “Oh, we didn’t make that. That wasn’t a piece of the thing that we handed off.” It’s cool to see how the site itself is evolving, especially after having read philly.com for years not having seen it evolve at all. Now, kind of seeing these small tweaks in navigation, in language, in blocks, and how things are being arranged, and content being presented, it’s cool to see that as someone who worked on it, but also someone who is an actual reader too.

You mentioned some interesting things about the homepage not being contextualized enough for users. Hindsight being 20/20, what are some things that you would want to do differently if you had done it again?

Eric:

I think probably we would have really allowed ourselves some more time for, thorough one-on-one user testing. I think that would have yielded some valuable insights that we didn’t get through the wider beta. We did get a lot of good feedback, but I think what’s sometimes is to understand the why. We can measure, we can track behaviors. We can ask people questions. But until we actually see people using the product, I think we don’t always understand what their real motivations and what they’re doing on our site that’s leading them, for example, to be frustrated or to not find what they’re looking for.

You listened well to what we were trying to say, to put into words about what we hoped to become.

Dan:

Last piece about the process part that I just kind of want to get your thoughts on. I mentioned it being kind of an unconventional way to go about this and roll it out. One other piece that was unconventional was the way that we addressed aesthetic and conceptual direction. We started the site by going really quickly into moving pages that we knew are fairly known quantities: article pages, channel pages. We didn’t do a ton of exploration on the aesthetic, and just sort of figured we can release new pieces of this iteratively. I remember one of the iterations purely just being we’re going to update the typefaces all over the site. Then, as a separate piece, concurrently, we worked on what we called “concept cars,” different concepts of what philly.com could be. Some of them had different aesthetics. Some of them had different audiences or content strategies. How did that resonate for you and your team? Is that something that worked well? Is that something that felt too separate? What did you think about that?

07  A few “concept car” explorations to prompt discussions about the future of Philly.com
Eric:

I liked the approach. I think there were a lot of interesting ideas presented. I do think “concept car” seems like the right way to describe it, because it really spoke to aspiration. It showed that that you had listened well to what we were trying to say, to put into words about what we hoped to become. At the same time, and you had laid this out for us and warned us in the outset, we knew that this experiment or this process would not probably yield immediately actionable things that we could take and launch right away. We were open to that, in part because I think we wanted to see what the future might look like. I think there were some interesting concepts that we still have and that we will look at and I hope take some inspiration from as we move ahead.

Dan:

We’re just about a year out from when we last started working together. All said and done, how did it go as you look back at the time? Having a separate mobile site, now you have a full responsive site. Is your team working differently? What are metrics look like? Maybe talk about how it’s been over the last year.

Eric:

The move to responsive web is a pretty big one. There were definitely some things that we underestimated in terms of complexity. I think integrating our advertising map was a lot more difficult than we thought it would be. I think we’re still making some adjustments. I think we did succeed to some extent in building a site that felt more unified, felt more like you weren’t giving people totally different experiences depending on what device they were using. There’ a consistency of experience. In that, I think we also improved some things, like our ability to really make our content go viral. It was something that we really struggled with, I think, previously, when it existed under multiple URLs and there were canonical tags and links between them and things like that. But the truth is that it’s a lot easier to get something to really propagate through the social web when it exists on a single URL. The experience is consistent across devices, and it’s optimized for sharing, which our new pages really were in a way that the old pages totally weren’t. We have seen a boost in some of the sharing potential on some of the stories that resonate with people.

Dan:

Last question for you, Eric, as we round out. Advice for clients that are looking to work with SuperFriendly? What should they be looking out for? What should they be looking for? What are some things that they can expect during the process to go well or not so well?

Eric:

I think they can be looking for some really thoughtful people who are very good at… I don’t know what the right word is, customer service, client management. It definitely felt like the lines of communication were always open. There was a level of trust and informality. Maybe that’s not the right word, but it felt like we were able to talk about problems before they became problems in a real sense. We were able to compromise on some things, and there was a level of mutual respect that, in truth, I haven’t always felt in dealing with contractors or with vendors or with agencies.

Dan:

Thank you so much for sharing these thoughts. Super valuable and super great to talk to you.

Eric:

Sure. My pleasure.