Staff Interview: Eva Lovisa Nelson, Designer

IVAN STEGIC: Hello! And welcome to another episode of the TEN7 audiocast. Today we’ll be exploring the design process at TEN7. I’m Ivan Stegic, TEN7’s Founder and President. Joining me today is Eva Lovisa Nelson our primary designer and Madeleine Lowry, our technical project manager. Good morning.

EVA LOVISA NELSON: Good morning.

IVAN: I wanted to start talking about the fact that we used to be a technologically only company that supported designers, and that we’ve really involved into a firm that’s concerned with the whole user experience. And so, to talk about the design process today, I wanted to think about what we do at TEN7, and how it might be the same or different to designing for a WordPress site. Of course, we’re a Drupal shop, you might also be thinking that it's different to designing for a static site. And so I kind of wanted to go through what the design process looks like from both of your perspectives Madeleine and Eva. But I wanted to start with Eva. So, when I think about a project we’re working on, and I think about the sites user experience, inevitably I think about Eva. I always trust that the visual details that the site will need will be in her purview, and I really think about you Eva as our brand custodian. So, with that, could you tell us a little bit about yourself and kind of what keeps you busy during the day.

EVA: Thank you so much for that kind introduction. Websites are my favorite thing to design so I love working with you guys, it’s a perfect fit. I went to school at a place called BrainCo, it’s like 10 years ago, for interactive design, and that’s where I got really excited about websites and, I’ve just worked at other agencies in the past doing web design, and now I’ve been doing it on my own for about 5 years now. I’m partnering with some multiple shops and I just love it. It’s fun because it’s always changing, like the field is always developing something new and it’s just really fun.

IVAN: And you mentioned that you, you think web design if your favorite thing, so, you spend time doing other kinds of design. What else do you do?

EVA: Oh, I also do identity design. So, logos and I also do a little bit of illustration, and print design as well. There’s always print design in there too, but I really love websites. They’re fun and they’re kind of a more team effort, you know there’s way more people involved in websites.

IVAN: And what percentage do you think you spend doing the kind of digital or interactive aspect of your daily routine?

EVA: That’s probably 70 or 80 percent of the work I have right now, yeah.

IVAN: WOW. That’s a great deal, isn’t it!

EVA: Yeah.

IVAN: And the other person in the room is Madeleine. She’s our technical project manager. I also think of you Madeleine as our wrangler, our chief wrangler of JIRA. But you also have experience in marketing and business development and you’ve run your own company as well. And designing a site really isn’t just about timelines and design proofs, and approvals and so on. So, your role is kind of more than, just dates and pushing things from one, from the beginning to the end. What else do you do in the whole design process outside of shepherding the project from beginning to end?

MADELEINE LOWRY: Yeah, that’s kind of interesting because I don’t think that this was probably in my job description when I took the role as project manager, but, you know, just like all roles, they evolve, and I became more involved in the first phase of work which we call the discovery phase, which is where we work with the client to determine what their business requirements are. As well as you know, their branding requirements, their aesthetic, their hopes and dreams really for their new site. And, having been involved in that phase when we move to the next phase, which is wireframes going to design typically, then I work with Eva, and we just sort of bounce ideas off each other. Eva is fantastic in that she can absorb a lot. She has an intuitive sense about interpreting what they want, often when they can’t really express in words what it is that they desire for their new site. I think that we work pretty collaboratively to make sure that we cover sort of everything that we uncover in the discovery phase, and have a really good working prototype in InVision, to show to the client as a first round.

IVAN: So, you mentioned the discovery process and those are usually very different, depending on the project we’re working on, depending on the client, they kind of have a very similar thread through them even though they might be different. Sometimes, they’ll be a long process of gathering a lot of customer data, sometimes there’ll be a site audit, sometimes there’ll be content strategy, sometimes we’ve had a relationship with the client for a long time, and so we can really get through that process quickly. You mentioned that Eva is able to take all this information in and synthesize it and I agree. I think that happens quite delightfully and very easily at least from my point of view. What are the deliverables, like what are the things that you actually give to Eva that starts her design process?

MADELEINE: Well often Eva’s present in the last set, at least in the last set of discovery meetings with the client. So, she gets to meet them and get a sense for who they are, the identity of the company, beyond the branding, but you know, the, the personalities involved. We usually have some documents that we can give her. Sometimes what I do is I create a design brief when there’s a lot of documentation, you know, I don’t want her to spend 20 hours reading through all that, so I try to distill it down into a design brief for her, sort of a summary, of what we got out of the whole discovery process. And then often times there are wireframes that go along with that.

IVAN: And so, it’s really not just the design that you’re concerned about. It’s really the whole brand identity, the whole brand itself, and what it means to do and look like online. Why is it important, Eva, that we consider the whole brand in its entirety, and not just take the logo of the company or the organization and put it in a template and kind of tweak it for the navigation that that particular site architecture might need?

EVA: Yeah, we want to have a consistent look and feel across their brand involving all touch points. So, whether somebody just got their business card and then they see the URL on there, they type it in. Like, they, you don’t want to surprise people in a bad way. They want to be reassured they’re in the right place. So, I always love to have, if the company does have a style guide, that’s a wonderful thing to have at the beginning, just so I know the rules to play by, and if there’s wiggle room here or there, or if they’re updating things, like that’s a really good tool for me.

IVAN: And if we don’t have a style guide that’s something that you could produce right?

EVA: Yes, absolutely. Some people don’t have them that’s totally fine, we can work with what they have and create a system for them and then they could use that in the future too with their other projects if somebody asks for something.

IVAN: Right. And once you’ve received all of these assets from Madeleine, from TEN7 and you’ve been in meetings with clients, you kind of have gotten to know them, you go back to your office and you look outside the window and you stare into the beautiful blue sky for hours on end until inspiration hits you, and then you whip out that design in 10 minutes. Is that how that works?

EVA: No, It’s usually I through the documents that Madeleine puts together for me, or if we’re using content from the website, the current website, their doing rebrand I will read through as much of the content as I can, just so I get a sense of what’s involved here and what things to think about, and then I start sketching on paper. And so, i'll just sketch little thumbnails, as many possibilities of okay, what could this homepage look like, what could this about page look like, and I’ll go through and I cross out any of them that aren’t going to work well for mobile, and I star ones that I’m like I really like this, and then I just keep going, and I end up with all my little starred layouts, and then I turn them into designs on the computer. And so, it’s there’s a lot like sketching in between and trial and error before I show you guys initial designs.

IVAN: So initial designs really are evolved sketches that you’ve done on paper. Are those sketches in color or black and white?

EVA: They’re just whatever pen color I have. Yeah, they’re just, I literally just take scratch paper. I got lots of it around from other meetings, handouts and what not, and I just recycle and draw as many little thumbnail sketches on the pages I can fit on there. And, so, their messy and it’s quick, but it gets my ideas out of my head and in front of me real quickly. So, I like it.

IVAN: And then you go to your computer and you start looking at those thumbnails, those little sketches and you start putting things together. We used to use Photoshop exclusively. Now we’re using Sketch. Do you have a preference? Do you like one better than the other? Are you secretly using Core InDesign and then converting that to something that we’re seeing? What does the digital part of the process look like?

EVA: Previously like, I was using Photoshop. I was a hardcore Photoshop person and I still love Photoshop, but I’ve been getting more and more into Sketch and I really love Sketch now, so that’s what I’ve been moving all my projects forward with, is Sketch, exclusively now. And, yeah, I literally will replicate my sketches into the Sketch document and, I’ll just make it rough, so I’ll just have gray boxes. It’ll be kind of like a wireframe, and then I’ll put the text in or just placeholder some text or whatever just so I get a sense, okay this is how this page is shaping up, okay I can rely on this idea I have and my sketch is translating well, and I just keep going with that for as many pages as I need to for the stage of the project, and then I’ll start filling it in with actual photos, real colors, I’ll put the real fonts in there, you know, spend more time finessing what the buttons look like and you just kind of bring these, these sketches or wireframes to life, and that’s what you guys end up seeing in InVision. I love how Sketch integrates well with InVision and so then I can create something that the client can scroll through and you guys can provide feedback on.

IVAN: At what point do you think about Drupal? Or do you think about Drupal?

EVA: I know about you know, you’ve helped me think more about okay this is a component, this is a module, can we reuse this module later by adding a different color behind it or what not, so I think about that more. When I work with you guys, about okay how can I make this easier for the developing team.

IVAN: And so, it sounds like it’s actually completely unnecessary to think about Drupal when you're designing it. It almost feels like those two are disconnected.

EVA: Yeah.

IVAN: That probably means you’re not thinking about WordPress or any other CMS’s out there when you're designing either?

EVA: Yeah, not in a specific sense. I mean certainly if like this part is going to be a dynamic thing somebody has to edit. Then for sure it’s a CMS in general that you don’t, would think it about, but you're right, like, it’s not like, one over the other specific things that you have to keep in mind.

IVAN: So that actually sounds really good because that means that you’re putting the user’s perspective in your head, and you don’t actually care what the back end of that system looks like. It’s the user’s experience that counts.

EVA: Absolutely! And I think as an interacting designer I mean that’s, that’s your number one job.

IVAN: Madeleine, I can see on your face that you have a question or a comment about that?

MADELEINE: Yeah, I was thinking about what you just asked Eva, and I would say that Eva you probably were most aware of Drupal, and the way we build things in when we were working on that site that has to do with adoptable animals. Because we, it was a big site build where we decided to use paragraphs. And so there’s this desire to have a very modular, the landing pages are quite modular, and that was reflected in the design. Talk about that, and how it’s, it was different, a different site process for you than other sites.

EVA: You guys even had me create a really long page with like every possible thing that could happen on this page, just so the dev team knew what to plan for. And then the client could pick and choose what they wanted to actually have show up on that page. In terms of design it was just like, okay make these little modular strips or these components that can all, they’re kind of just like building blocks, and you can rearrange them and, have them show up or not show up. That was a fun one.

IVAN: So, the design process is naturally an iterative thing, right? You, you create something, you prune the blemishes, you show it to the client, you refine it, you get feedback, you go back to pruning, you refine some more, you show it to the client again. Do either of you feel like the design process is ever complete?

EVA: I don’t. I don’t think it’s ever complete. It’s always. I mean, I had come from an art background too and it just seems like whenever I was working on painting or drawing or anything like that you could always make it a little bit better, you know. It was hard to stop. And with the web it’s not like a print project where you print it and you're done, you know, this is an evolving thing and as the content on the site changes, as technology changes, as you know, the goals of the client change over time, there’s always things to add and improve. That’s what’s fun about it.

IVAN: Do you ever have a site that we’ve pushed live or that someone else has pushed live that you look at and you think oh man I wished I made that color 10% lighter, or boy that logo could be tweaked and put 5 pixels this way, or something like that?

EVA: And if I’m able to talk to the developer like before that happens and like during the preview phase of before they launch it, I mean that’s a great time to like take care of those things, but sometimes I don’t always have access to that. But, yeah, there’s definitely times when that happens.

IVAN: Now both of you had talked about InVision, and we mentioned Sketch so those are the two tools that we use exclusively at TEN7 to manage this part of the process. And we kind of know that the design process really isn’t ever finished, but we have to move what we’ve created visually, and that the client has seen, into development at some point. There’s not really one hard handover anymore. When we first started, ten years ago it was very much like it was back in the days of print, where you would get a final approval from a client before you started building something. Now it’s a little more mushy. At what point Madeleine do you know you're ready to start moving this into development? Because Eva’s gonna continue working on internal pages, on other tweaks, what’s your line in the sand for saying this is now ready to go to Dev?

MADELEINE: Depends on the client's’ timeline. Depends on their comfort with us moving ahead with almost-done designs. I mean I think we just heard Eva say their always almost done, but I think we try to get it to about an 80% state of readiness before we start committing because once things, and even higher would be better, right. In the ideal world we’ve have 100% done designs because once you get into the development phase making changes to things costs more money. So, we like to avoid that. But that being said as we just discussed, there are always things that are not fully flushed out in the designs that come up later or, or there are changes, or by the client, or there are changes that are suggested by the developers, because they start building this thing and I start saying gosh I wish this, this and this were on the same side of the page so that we could make that sidebar continuous, And so then we, we do take some liberties with the actual designs that were approved by the client with their permission of course. It’s a fuzzy line. I can’t say that there’s a hard set of criteria.

IVAN: And once we start the development on a site and the majority of the design framework is in place, Eva you spend your time then fleshing out internal pages that, they might not be completely intuitive for a developer to put onto a page and to code. So, maybe it’s a specific landing page that has a specific, target audience or purpose. So I would imagine that your time goes down in the amount of time your spending in design. But it also changes, doesn’t it? How does it change?

EVA: For internal pages? Yeah. I mean it’s different than a homepage. I mean a lot of times homepages are kind of like an overview and, the internal pages are more specific. They might be a specific function or, you know something that we’re trying to accomplish on those. Sometimes the developers might have questions about sometimes the dev team isn’t always in the meetings with us, so there might be some questions here and there like, well how are these supposed to function, are these filters? Or what is going on here, so I can help out that way. Is that what you're asking? I wasn’t sure?

IVAN: I think so, but I’ve noticed that you always get requests from us that aren’t necessarily things that we forgot to design in the beginning. They’re things that evolve from the work that we’ve done, and so we might think of questions that we never thought of prior to actually doing the build. So an example might be, you have a header image on a design that, in the design looks like it has an overlay of a color, but when we implement it we have to make a decision as to whether or not we want that overlay to be in the image itself that the client uploads, or whether it’s going to be in code because it happens everywhere on the site. So, we, we didn’t anticipate that, so we come back to you with those kinds of consultative questions, and you’re always so nice and are able to give us the best kind of advice we would you know, we would hope for. But then there are also things like oh shoot, we’ve, we really need these items, cut out and separate than the Sketch files. Could you make those for us? So, like what I was thinking about was the nature of your interaction with us changes a little and I was wondering if you, you noticed that, or if you kind of prefer that part of the process, or if we were just being, it’s just something that happens.

EVA: Oh, I see what you mean. Yes, absolutely. I love developers. I’m married to a developer. I mean I have no problem with the nuts and bolts kind of questions, and yeah I cut out little like SVG icons for the team or if they need something. In terms of like the header image stuff like I think that depends on, I always like to think, okay, what is the client’s technical capability for managing their site in the future, and that plays a big role in how much we can help them out in that regard or if they’d rather, alter images themselves. And also I think there’s a lot of brainstorming that happens, even if we’re just chatting on Slack with the Dev. team and Madeleine too, all of us, will be thinking about oh, okay well what happens when this scenario happens and then sometimes we’ll go bring it back to the client because it’s not a question that we can answer, and then all of us are thinking about this in a different way and it ends up being an even better solution and I think that’s always fun when that happens. Okay like we just solved this problem from a different angle and it’s even going to be better and in the end, and I think that’s really worth it.

IVAN: I love that as well. One of the, or the last question that I would like to put to both of you is a little more general, and I started asking it yesterday, kind of what is the tool set that you use on a daily basis that helps you and makes your job the best it possibly can be. And I’m thinking about software, or hardware, whatever it is, I’m just kind of wondering what your tool set is?

EVA: For me I make lists on my computer with just text editor, that keeps me, because I work on a lot of different projects at the same time and, so I keep my priority, I’m sure there’s some branded software that does this too, but this is just what I’ve been doing for years. I also use an accounting software called FreshBooks that keeps track of my time, and you guys you use Jira which is awesome too. And then I use my Sketch, my Photoshop, InVision and, yeah, yeah, and pen and paper.

IVAN: Pen paper analog. I love it. And Madeleine I imagine you would say Jira is on the top of your list?

MADELEINE: Yeah, Jira’s there. That’s how I manage to you know tickets across the team. Lots of tickets, big team. I also use notebook and pencil, that’s my go to for my own sort of list of things to do. Not even up to the text editor level that Eva’s at. I, we use a lot of Google apps, spreadsheets, and documents so that we can work collaboratively.

IVAN: Well, I think that brings us to the end of this episode of the TEN7 audiocast. Eva and Madeleine thank you both for joining me today and for sharing your insights.

EVA: Thank you for having us.

IVAN: Please visit us at TEN7.com and keep an eye out on the TEN7 blog for future episodes of the TEN7 audiocast. This is Ivan Stegic. Thank you for listening.