Meagan Petri

Digital Art Director at Planit

Meagan Petri

Digital Art Director at Planit Episode 29 Part 1

Episode Notes

Episode Transcript

Gary:
Hello, and welcome to part two of Episode Twenty-nine of Design Edu Today, the podcast series discussing topics concerning the state of interactive design education at institutions of higher learning. I am your host, Gary Rozanc, Assistant Professor of Graphic Design at the University of Maryland, Baltimore County.

Today we will be discussing design workflow and in part two of the episode we will continue the conversation by discussing responsive web design and the web as a medium in contrast to print design.

Today’s guest is Meagan Petri, a Digital Art Director at the Baltimore firm Planit where she’s designing websites, apps, and identity for a wide variety of clients from non-profits to hospitality to beauty brands. Meagan works with a multidisciplinary team of super talented folks to bring her creative solutions to life, delivering on the needs of the client and engaging with the end user.

Meagan started with a love of film photography and began playing in Photoshop during high school. Soon realizing that she loved design and solving problems, it led her to getting a BFA in Graphic Design from UMBC. After working as a print designer at an agency for her first four years in the industry, Meagan spent her evenings learning HTML, CSS, and Javascript and made the switch to digital design and front-end development, and Meagan hasn’t looked back. When she’s not designing, Meagan’s snuggling her two shibas, reading all the sci-fi she can get her hands on, and taking woodworking classes so she can build furniture that looks less haphazard.

Welcome Meagan.

Meagan:
Thanks Gary.
Gary:
All right, so before we dive into the questions, I wanted to give my guests and the listeners the impetus of this and the next few episodes. Currently I’m working on revamping the curriculum of two courses: a standard technology course where students learn the Adobe Creative Suite and a beginning responsive web design course. So while the questions are going to be specific to design technology workflow and critiquing and testing responsive web designs, I feel a lot of my fellow design educators are struggling to find the right balance themselves and will find this line of questioning useful. So, here we go. So, instead of teaching the Adobe Creative Suite, since tutorials can be found everywhere from Lynda.com to Skillshare, I want to teach things that are much harder to find online, like workflow, which I define as everything from naming files and using version control to project management and communication tools, so my first question is about design workflow. Based on your experience, how prepared or underprepared are entry level designers when it comes to the basics like properly preparing files, naming conventions, using version control, etc.?
Meagan:
I’d say as far as compositional skills and design knowledge, most entry level designers usually come with a pretty good handle on those basics, but as far as those more practical things, they definitely are under-prepared and it’s not through anyone’s fault, you just end up learning a lot of that on the job. And it depends on where you’re working but usually you’re going from designing in a vacuum in college to working on a team where there’s a variety of other people with different skill levels who will be accessing your files. I started out as a print designer and did a lot of pre-flighting, files to be sent out to press so it did teach me a lot about attention to detail and keeping things tidy, usually because I messed something up and then got in big trouble for it. I also feel like everyone makes the mistake of not versioning things out at first because again, in college you’re working in a vacuum and it’s only you and usually you learn the hard way when you save over something important. We find a lot that clients like to reference earlier iterations of concept or you may want to use a UI element that you abandoned in another project and it may seem silly, but it pays to save out a new version every time you’re making edits; it’ll save a lot of work re-creating files in the long run.
Gary:
Just on an aside, have you used the app that’s new from Mac, it’s called Folio?
Meagan:
No, I haven’t.
Gary:
It’s essentially, how do I explain it? Are you familiar with GitHub?
Meagan:
Yes.
Gary:
So, it’s the same thing but for visual design, essentially, so you save a version…you work in one document and then you commit those changes and then when you’re ready to commit the changes again, it saves the same file but now you’ve got this little window where you can go and see what it looked like Version 1, where you can see what it looked like in Version 2…
Meagan:
That’s awesome.
Gary:
Only thing it’s goofy about is that it doubles…it doesn’t double the file size, but every time you make a change it creates a new version; it’s just hiding it from you.
Meagan:
That would be really useful because I often talk to the developers about how great it would be if there was a GitHub for designers!
Gary:
Well, there is now and it actually integrates with GitHub so you can put the stuff up there.
Meagan:
That’s really great.
Gary:
It’s called Folioapp, it’s worth checking out.
Meagan:
Yeah, I’ll take a peek at it. That’s really awesome.
Gary:
It’s kinda curious, but it’s new enough that I know it’s not on a lot of people’s radar.
Meagan:
Yeah, I’ll check it out.
Gary:
All right, so how do you handle file management at Planit so designers, production artists and developers can hand things off to each other and be able to make sense of everything? Do the files live on an internal server or file sharing service like Dropbox?
Meagan:
We have an internal server here at Planit that we keep all of the files on. We do use the same file naming and folder conventions just to make sure that everybody can find stuff. Before, we have kick-offs with the development team; the designers definitely go through and clean up the files and we’ll also do a separate design annotation to call out specifics of functionality and interaction so that they have that to reference and for flat file hand-off for social or PR we’ll use the assets folder in InVision; that’s something we use a lot for visual presentation for clients and to get feedback from internal teams, so we upload all the final files there so that their social team or PR isn’t grabbing uncompleted assets.
Gary:
So, what does the file annotation, the design annotation thing look like? Is it just like a Word doc or…
Meagan:
That’s usually something that…and maybe I get a little too design-y with it, but I lay it out in InDesign and it usually will have screenshots of the different pages; it’ll have paths to where the files are located and usually there will be a number on the screenshot and then a corresponding number below that’ll have more information about intended functionality or the interactions and then also the associated mobile designs with that to show how things are breaking down or stacking and sometimes we don’t do full mobile designs: we’ll do just wireframes or rough sketches of what those look like at different screen sizes, just to save us some time.
Gary:
All right, so, another question I have is, when I assign a project to the students, I give them a design brief with the project details, deadlines; it’s all neatly typed up, I do it on a blog post instead of paper but I’m pretty sure clients don’t do this for you. They don’t hand that stuff to you. So, how does this process work at Planit? Is there a Project Manager or Art Director using something like BaseCamp to neatly distribute this stuff, or how does it work?
Meagan:
So, here, yeah, you’re right, the clients don’t give us a design brief but the account teams do and it is so helpful. Because they’re the client representative in the agency, they have the lion’s share of knowledge and they give us a rundown of the goals of the project, the problems we’re solving, target audiences, competitors, functionality aspects, etc, so generally, the design brief won’t be for a specific project; we usually have multiple initiatives under the umbrella of a single campaign, but they’re done at the beginning of each project and dispersed to all the team members so we all have the background of what we’re working on.

And as far as our workflow there goes, we have the account teams managing the client and then strategy working with the designers to make sure goals are being met and sites will perform. We have project managers working to make sure that design and dev hit deadlines and that the workflow is organized with plenty of time for QA and device testing, and we’re also working pretty closely with PR, social and media to deliver campaign assets and keep on track with their media plans, so here, there are a lot of moving parts but it helps having the right people in place to keep you organized. I’ve worked for smaller agencies and a tech start-up as well and you end up wearing a lot more hats at a smaller company and getting more experience in a variety of areas but I do like being here and having other people be specialized in those things.

Gary:
I should have asked this question first and I’ve never asked this before! How big is Planit? The listeners would probably really like to know just so they get a sense of teams and such?
Meagan:
We’re a mid-sized agency; we’re around a hundred people right now, I think and we’re a full service agency too, so we don’t just do digital. We have a full print team, we have a video team, PR and social as well, so it’s definitely nice to have everybody in one place because I feel like we’re able to collaborate a lot more across all of the disciplines but it definitely requires you to let go of your ego a little bit and rely on your team.
Gary:
All right. Another follow-up question to that, with the idea of the design brief, so you’re saying there’s the project managers or the art directors will hand that off to the design team. When it comes to working in the classroom, would it be beneficial instead of me handing a project brief to the students instead just say, hey, I’m the client, I want X, Y and Z and then have the students write the design brief based on what they hear me as the client saying? Does that make sense?
Meagan:
It does. I don’t think that’s a bad idea because they’d have to really think critically to provide a solution because generally the client doesn’t exactly know what they’re asking for and it’s up to you to provide them with a solution that is going to perform well for them, work across all devices, etc and so I think that here, we do have the account team doing that but if you’re at a smaller agency or you’re working for a start-up, you might have to take on that and so those critical thinking skills would be really important.
Gary:
OK, so I cite the…I don’t know if you’re familiar with Sean Adams formerly of AdamsMorioka, and he…VH1 came back to them, back before they started…it’ll make sense in a minute…but VH1 came to them and said hey, we want to do a re-brand and AdamsMorioka said yeah, we could totally do a re-brand for you but, sorry, the problem is not your branding, it’s your programming.
Meagan:
Right.
Gary:
And so fix your programming, then the branding will naturally take care of itself and that’s what they did, that’s when they came back and they started doing the I Love The Eighties, you know, all the different programming…
Meagan:
All my favorite parts of VH1!
Gary:
It came from that realization that it’s not your branding, it’s your programming and I think that’s what the designer’s job is that we kind of, when I hand them say, here’s a website that you need to design, it’s taking away the critical part of…is that what you really need? Maybe you just need to fix up the exterior of your building and people will come.
Meagan:
Absolutely.
Gary:
And I think that’s one way of taking…getting them to think about that kind of stuff.
Meagan:
Well, because those are things too that you generally aren’t being taught at school and so that kind of thinking is going to take you a long way in your first job and your fifth job, you know?
Gary:
All right, let me see…so, how do, to get back on track now, how do teams at Planit, whatever their makeup, how do they communicate? So, for example, should I have my class using something like Slack to simulate how they will be working as a team? How do I navigate that, so to speak? Like the idea of teams; so we’re not doing the solo rock star thing.
Meagan:
Yeah. A lot of teams use and love Slack; I have a lot of friends at other agencies who are huge fans of it. As far as using specific software here, one of the things I love about Planit is they really let you decide what the best way you work is and so it’s up to the team and dependent on their needs what they choose, so for instance, our traffic manager uses Google Docs and Smartsheet to map everything and handle our daily workload and the devs and the project managers use JIRA for project tracking and issue management, but as for the design team, we use a mix of Google Docs, Gchat and InVision to track feedback and communicate and that just works really well for us; it’s quick and it’s easy and it’s lightweight and everyone seems to enjoy it. But that said, I do think it’s a great idea to have students set up in some sort of environment where they’re communicating and working on a group project, whether it be Slack or in Gchat because you do have to get used to articulating what you’re doing, especially for account and client facing teams and other internal teams who might not be as familiar with user experience so assuming that, if you’re not explaining it, others will have no idea and just look at your design as something flat.
Gary:
All right, so, before I move on to the next line of questioning, how do you handle both client and internal feedback for the visual side of the design process? So, is it recorded so it can be tracked?
Meagan:
It is dependent on the client; we use InVision for both internal and client facing review. Usually accompanied by a short animated mock-up from After Effects to show interaction and for internal review, a designer would send a link to the art director, creative director first and get feedback from them. We’ll also let a developer peek at it to make sure we’re not suggesting anything impossible and also we get their input on interactions and animation because the designers here aren’t running the show: it’s very much a collaborative process between strategy and dev and design and other team members, so we want to make sure we’re delivering the best product.
Gary:
One other question before I move on to the stuff about response design and it comes with the idea of…I get it. Here you’ve got two or three designers working along with the developer, working along with content strategists and that’s the way the industry works but in the classroom, I only have access to designers. Getting a collaboration with other departments is possible but it’s problematic in that the Professor might not be teaching the right class, the natural collaborations may not be happening at the same time and it’s really hard to set up. What are some things that educators could do to foster that teamwork approach to projects, when everybody basically has the same skillsets? Sorry, this is…
Meagan:
No, it’s OK, that’s a really good question….I think you can still get that same feeling of the group collaboration. Maybe it’s that you separate out teams and one person leads the team, kind of like an art director would and then breaks out responsibilities to the other team members, if it’s designing a site for instance, or maybe it’s designing a campaign and you have two people on site design or a landing page and you have one person doing email marketing and you have one person doing social assets, just to kind of…it’s all still going to be design and they would get experience across the board but it would give them a better feel for keeping things consistent across the board, so you develop the visual esthetic together perhaps but then how that translates into the different disciplines and also still have that experience working with a group.

Of course, it wouldn’t solve the how do you work with a developer kind of thing but I think that even just being introduced to working in a group that way and having it be…when I was in school, I definitely thought everything I did was really awesome and that I knew everything and then at my first job, I realized I only knew a fraction of what I needed to know and so being able to have that opportunity to work in a group, even if it’s not exactly what you might be doing at your first job, that would still give you the kind of give and take of a group project and also enable you to design a visual esthetic that can be used across the board and translated to different mediums.

Gary:
Like when I mentioned teams like communicating. So the better strategy would probably be is, OK, however you split these people up into teams, you give them the tasks and then you say, OK, I want you to communicate, I want you to document your communications so somebody could be absent from the team one day or a client wanted to review some of this stuff and just say, you figure it out, because there are so many tools like you said: Google Docs, the tools are now being built into…they’re being built into InVision; there’s so many different ways, there probably isn’t one GitHub. There’s no one right way so just give the students the task of communicating and documenting the communication and let them figure out the ways to do it. I can give them suggestions but ultimately let the team decide how they want to communicate.
Meagan:
You could do that. I feel like it might be a lot of stress just to figure out how to work as a team because there are a lot of nuances there so it may be better to level say and just have them all on Slack. I’ll do in Google Spreadsheets or something just so they’re coming from the same place, because that might be one less thing to worry about because guaranteed, when they’re put in a group environment, I hated group projects and college, they’re terrible: people don’t pull their weight, etc, so especially if you have one person kind of acting as the art director, the leader, giving them one last thing to worry about, letting them just focus on managing the team and less about having to figure out how the team communicates might be easier for them in the long run and really allow them to dive into that role.
Gary:
OK. I didn’t think about it from that aspect of adding to stress, because I was thinking about it from the other aspect is that the project would be really super-easy.
Meagan:
Oh well yeah, that’s true too.
Gary:
And so it’s more about the learning experience of managing and working in a team: that’s technically the project.
Meagan:
I guess isolating what you’re trying to achieve there would be the important thing because yeah, if the project was a lot easier and it was more about the group dynamic, then I think that would be a great idea and of course, giving them a little bit of room to choose how they want to best do that is only going to make them more creative in the long run, I feel like.
Gary:
OK and so the other question that I remembered that I wanted to ask was, you were the first person to finally mention this on the podcast: thank you very much. Email campaigns. There is not a single…no, I’m sorry, there is not a single educator who’s teaching…OK, this is how we design an email. But it’s the most commonly used form of communication in the planet. I think I read a statistic, three billion emails are sent daily.
Meagan:
Oh God, yeah!
Gary:
And we don’t teach…we’re not teaching them how to design those. I want to talk a little bit about what you do or what Planit does when they do an email design.
Meagan:
Yeah, yeah, sure. Emails are very simple in that they really hearken back to the very basics of web design. The stuff that I was learning when I was in college which, at that point, everything was table-based. We have responsive emails now, of course, but the dimensions haven’t really changed much; it’s still every email client is a little bit different so you end up really having to dumb things down because you don’t want to use a lot of imagery, you want to make sure you have plenty of HTML text in there because most email clients also deliver emails with images turned off, so if you’re designing an email and you want to use a lot of crazy fonts because of course, you really have to lean on the fonts that people have in their operating systems because a lot of font families are not supported, except through imagery, so if your email, the top half of it, is all imagery, they probably won’t see anything when they open it and they’ll just go on to their next email, so I think that that’s something that if I’m reviewing someone’s portfolio, I always recommend especially looking for a digital job, give them pointers on email design and it is something that people don’t often think about.

We do it a lot here and usually use Mail Chimp or Constant Contact to send stuff out and the other things that I would point out for email is that…oh yeah, tracking. So, the other thing I would point out for emails is link tracking and that’s less something you might have to worry about and more something a developer would have to worry about, unless you’re actually trying to build out these emails in Constant Contact and that’s a great way to learn basic HTML and CSS for students, I think, is because it’s nothing complicated but loading an email into Mail Chimp, having all of the Google tracked links and learning how to do that because you want to make sure that everything that links out has a tracked link on it so that you can look at the open results and where people are going from the email. Those are just little things that even as a designer, I didn’t think of, but now that I work on an integrated team and the results are really important, that’s something that we really focus on.

Gary:
So, would it be worthwhile then for me to introduce a…yes, it’s definitely needs to be done; we need to teach them how to design emails. But just to simply say, let’s sign up an email in Mail Chimp and use that as a tool and then work within it.
Meagan:
Yeah, and I think it could be as complicated or as simple as you want to; certainly you can use the WYSIWYG editor to build an email and then have it be more about…so you have this really cool visual idea: how do you translate that into an email where you don’t have as much flexibility? Or it could be that could be part of an easy development exercise to design and then develop the email, test it in a bunch of email clients which is, I think, trouble-shooting emails is my worst nightmare but it’s really…
Gary:
Oh God! I wouldn’t want to! That sounds like, just the browsers themselves are enough but now when you’re talking about email clients… No, that’s…I’m going to actually play around with Mail Chimp now and Constant Contact just to see because there’s two ways to do that I’ve never thought of before, so thanks, that’s awesome.
Meagan:
Yeah, really awesome.
Gary:
That’s all we have time for today on part one of episode Twenty-Nine of Design Edu Today. I want to thank today’s guest, Meagan for being so generous with her time. I want to thank the audience for listening and I want to thank the Design Edu Today hosting sponsor DigitalOcean and CDN sponsor Fastly for making the hosting and distribution of these podcasts possible. Finally, I want to thank the AIGA and the AIGA Design Educators’ Community for their generous support of my research that lead to this podcast series.

If you want to discover more about the Design Edu Today podcast and read the session notes and transcripts, visit us on the web at designedu.today. You can also follow us on twitter at @designeudtoday, like our Facebook page or subscribe to this podcast through the iTunes or Google Play store.

Thank you for listening to Design Edu Today.