Episode Transcript

Karen:

Hi, this 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, our boundless enthusiasm has expanded throughout all natural boundaries. We are here with Levent Ocal and Daniel Swakman from Habita. Welcome.

Levent:

Thank you.

Daniel:

Great to be here.

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:

Well, I’m thrilled that you could be here today. Perhaps you could start out by just introducing yourselves, tell us a little bit about what you do at Habita, maybe give us a little background on what the company does. Levent, do you want to go first?

Levent:

Yeah, sure. Habita is a coworking space in Istanbul. I had been working in a career where I did management consulting for the last eight years, and last year I resigned with my friends—I have two cofounders with me—and we established Habita in Istanbul. We are basically renting closed offices and open spaces for freelancers and startups.

Daniel:

And my name is Daniel. I’m a graphic and web designer, and I’m working both in-house at a startup as a web designer and as an independent designer. So, I generally work as a full stack designer, you could say. I’m doing branding and visual design as well as the design implementation in HTML and CSS, and I’ve been involved at Habita to design and develop the website.

Karen:

Well, I’m really glad that you both could join us. I’d be interested if you could start off by explaining a little bit about the decision to go responsive. Were there any questions or concerns about using responsive as a methodology?

Levent:

Actually, we had no discussion about that because since the beginning we’ve wanted to be responsive, because in my experience you never know when and how and where will someone check your website and go online. So since the beginning, since the first moment, we decided it should be a responsive design with Daniel.

Daniel:

Yeah, that’s true. I can only concur with that. It was never really an issue. We even sometimes considered that there would be more mobile users than web users. So, it reflects the approach I generally take in my web design, where I try to build one web solution that would fit on all platforms.

Ethan:

Based on both of your responses, I might know your answers to this question, but I’d love to hear a little bit about how you thought about mobile users and desktop users in the context of this redesign. We talk to a lot of organizations on this podcast about how they firmly believe that mobile users and desktop users are just a little bit different and they need different information and different content, whereas some organizations would disagree and they feel that everybody basically needs the same information regardless of the device that they use. When you were planning the design and content for the new Habita website, where did you fall on that spectrum?

Daniel:

I guess the main difference for us between mobile and web would be only the amount of information someone is willing to consume at any given moment. So where a web user might be in a more comfortable situation, looking at a website and willing to explore more, the mobile user would be a bit more focused towards getting an instant result, you could say. But in terms of content, we never really considered to offer them a different experience. In the end, the core of the experience of the website we wanted to give was to get them acquainted with the space and to offer them information on the background of the story and the current events in Habita.

Levent:

I totally agree with him. Just to add, in the end, the content and information we want to give our users is the same. But the only difference would be something like on desktop, someone might have longer time to spend, but on mobile devices you have to give things very quickly and very attractively. It’s only how they see it, but that what they are looking for is the same for us.

Karen:

Let me follow up on that and ask how you started planning out this website. How did you figure out what content you wanted to put on it or what features you needed to deliver? How did you figure out how long it was going to take and how much it might cost to build a site like this?

Daniel:

In that case, it was an interesting start for us, because at the time we were thinking about the website—at least together—was the time they had just started the construction of the space. Obviously the space was a very central component to Habita. Right at the beginning, we figured out that we wanted to get a storyline out there, we wanted to get the background of the three founders quitting their jobs, chasing their dream of building this shared environment. So, we decided that we would start with a version 0.5 website, if you will, where it would be a basic one-pager with a blog kind of news feed that would allow them to tell the story in very simple blog format chunks. So that, for us, was a very good starting point in terms of getting both me designing and as well the founders to start working on the content, and then we could decide to build on that and iterate over that, if you will.

Levent:

Actually, we were very lucky to have Daniel by our side on this project because, in the beginning, the construction process was going a little bit slow and we were stressed out about when to launch the website, at what point should we give people some information, because the dates kept changing every day. What he recommended to us was to have versions and go step by step. So, for example, in the beginning when there was nothing there, we took a photo of the empty space and we put it as the landing page and advertised, “Coming soon,” and then we had the blog site, and then we had a more advanced website… So, we moved step by step with different versions and that really worked for us.

Ethan:

That’s really great. Daniel, I’d love to hear a little bit more about your design process specifically, as a working web designer. That versioned iterative approach is really interesting to me and I’d be curious to know if responsive design has changed the way you think about designing for the web. Have you seen that shift in recent years?

Daniel:

I wouldn’t say it has changed that dramatically because I, let’s say, always grew up with the mentality. I had been tooling around with HTML and getting websites going, and for me always the way to see if a design works, at least on the web or a digital platform, is to see it actually implemented. So, my process never started from a blank Photoshop canvas, it always was a matter of sketching, thinking about ideas, trying them out in visual programs, but always seeing the end result in HTML. I guess I do this in all my projects, but this is something that I was fortunate also to be able to practice in Habita.

Usually this is something that people like a lot because when they start out on a new project or a new website, they are often not that sure what the exact requirements are, at least until they see it working. So it depends on the scale of the project, but I work either with small HTML prototypes to complete UI kits and mockups. So in that case, it was the same here. Working very modularly and step-by-step makes it also very easy to correct mistakes.

Ethan:

Let me follow up on that very briefly because I’d love to hear a little bit more about the applications and tools you might use on a daily basis when you’re starting on a design project. You mentioned sketching. Is it paper and pencil, or are you doing a little bit of Photoshop sketching, or are you just diving right into HTML prototypes? Tell me a little bit about what’s in your toolbelt.

Daniel:

Right, so I guess, yeah, you’re right, sketching is a core part of it for me, at least to get my thought process going. Also I consider working in visual programs, whether it be Photoshop, Illustrator, or Sketch—I consider that sketching. But I will work on those kind of programs in a somewhat messy way, you would say, and it always comes together for me when I end up building the mockup in HTML, if only in a very simple way, if only trying out the style of a button or a hover state. But that is, for me, where design actually lands. The sketching part and the final design part are, in that sense, built up like that.

Karen:

Beyond the website being designed and launched, how do you create and update the content on the site? You have a blog and you have event listings, so who’s responsible for doing that and what sort of tool or content management system are you using?

Levent:

In terms of deciding what to do in terms of the content, we still work together; it’s a working relationship between the two of us. Because we discuss what to do next, what should be necessary and what shouldn’t be necessary, and what’s the objective of doing something. So, we just sit together and discuss it, so there’s so many ideas, not just design-wise but also content-wise, the ideas are coming from Daniel because of his experience with coworking spaces all over the world, as he designed other coworking space sites as well. So, we really value his opinion. Sometimes he comes up with an idea that we hadn’t initially thought about. For example, the blog idea came from him. It goes back and forth between the two of us.

Daniel:

What I can add to that is the fact that what worked really well for me is that we set up the CMS from the beginning, so we’ve been working with Kirby as a great tool for us to also talk about the content. For me, it’s very easy to customize it to the needs of the specific content required. We’ve set Kirby up from the beginning, so it allowed them to also work on it, whether they’re on desktop or on the go, even. I’ve basically been setting up Kirby as a sort of API for the content that I was able to play with in implementation. So, they’ve been writing blog posts, coming up with new content on the other pages as well, or for events, and I’ve been able to implement that and plug it into whatever page we needed to use that.

Levent:

Just a little thing to add: to be honest I’m very bad with technology, and with the control panel in Kirby, even I can do it.

Ethan:

That’s fantastic. Daniel, I’d love to hear a little bit more about how you conducted design reviews with Levent and his cofounders. Even though you were working in this very iterative, very prototype-driven approach, how did you actually show them the responsive design as it was evolving? Were they looking at it on live devices? Was it a more formal review projected up on a wall? Tell me a little bit about how you talked about aesthetics.

Daniel:

Right, so I guess the main thing that we worked out in that sense is, as I said before, I always try to come up with real prototypes in order to show how a page would look like, and whenever I can, I’ll even try and build the real thing as long as the content is available. So we’ve been setting up a sort of dummy staging account; we’ve set up a dummy staging environment on the live website. I would continuously deploy new versions or new page ideas and I would ask the founders to check it out. I would ask them to check out wherever they could—on their desktop, but definitely also on their mobiles—and think about if the page said what they wanted it to say. So it depended on the specific page, what the questions were around that. But basically we’ve been communicating like that, and I would throw something in the Slack channel and they would see it and check it out and give me feedback. As long as both parties are able to be flexible around that, that is a great process and then you can launch when you’re both happy.

Karen:

Now that the site is launched, how do you know if it’s doing its job for you? Or have you thought about any potential changes that you might want to make in the future?

Levent:

Yes, there are, actually. I think the website is doing good in terms of getting attention and gaining attraction. But for the future, what’s really important for us is that we connect people’s information through our website. So, what we really need to do is people are just surfing on our site and then leaving us some contact info where we can contact them and they might come to Habita to see what’s really here. For future steps, we’ll be more focused on this issue, that people will stay longer on our site and then eventually they will be willing to give their contact info so that we can reach a lot of them.

Daniel:

That’s something that we will be continually working on, so we have these little meetings in between where we think about what we want to develop. Now that the space is open and the site is launched, you can actually see what works and doesn’t work. So, we came up over time with these two parameters—as Levent mentioned—one being getting people’s information to get contact requests and, in that sense, get “personal” after that, which is usually what works really well in Turkey. And the second one being a newsletter that gets sent time to time, is also meant to get people to be part of the community. And on the website, we’ve tried to set up the pages so that it can be easily switched around and so that we can easily test what works and doesn’t work and come up with new landing pages based on new ideas. We hope that over time that’s able to evolve.

Ethan:

Well Daniel, Levent, we’ve both thoroughly enjoyed speaking with the two of you today about the new Habita website. One question I have for you though before we let you go is do you have any advice for any other designers or any other companies who are listening to this podcast who are about to start a responsive redesign? What are one or two things that you’ve learned that you’d like to share with them?

Daniel:

One of the main things I would recommend is to always be ready to be agile and iterate over things no matter what the scale of the project is. The main thing where I always see where the web and the people who want to put content on it come together is where you’re able to make design and development iterative and where you’re able to show your results, not only talk about them. Talking about them only in visual mockups doesn’t work, and talking about them in text styles doesn’t work, or at least to a certain extent. So for me as a visual designer, I always want to be able to show people what the result of the design is and for people to be able to judge the content properly. That’s the main thing.

Levent:

And for me, the main takeaway, the experience I got from this process is that the most important thing is the trust between the designer and the founder. Because we really didn’t know much about this process, much about this world, but we knew what we wanted, so we just tried to describe what we were dreaming of, what we were trying to achieve, and really let Daniel decide on the design, not just the technical part but also the artistic part.

For example, we love our logo. We just love it. Daniel knew it and it became one of the most important aspects of the website. It really stands out. So, not just the technical stuff that we already didn’t know, but also in terms of the artistic side and content-wise, when you trust the person next to you, it really makes the process much easier.

Daniel:

Yeah, I would just say that trust goes both ways, because as a designer it’s a great thing to have that kind of openness, and I would almost say it’s quite rare. It allows you to also think freely about whatever you want to create and see if it lands well.

Karen:

Well, I do think that that’s great advice for anybody who’s listening. Thank you so much for taking time to come on the show today. I think this was a great case study and, heck, if I’m ever in Istanbul, I’d love to stop by.

Levent:

Yeah, sure, we’re waiting.

Daniel:

Thanks for having us.

Levent:

Thank you.

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.