Design Deliverables for Today’s Web

Lea Alcantara: Todays’ episode is sponsored by Visual Chefs, a versatile web development agency with expertise in content management system and custom web application development. Through partnerships with designers, agencies and organizations, Visual Chefs propels the web forward. Visit visualchefs.com to learn more.

But before we get into the show, our major sponsor, Pixel & Tonic, has some exciting event news to share. The second annual Craft CMS Summit, which is a virtual one-day conference will be live on April 22nd. Tickets and details can be found at craftcmssummit.com, and if you see the Craft team in person instead of your screen, the team is speaking in Philadelphia for peersconf.com between April 30th to May 2nd. Check out buildwithcraft.com/community to keep updated on what Pixel & Tonic and Craft are up to in the community and for more details on the event I just mentioned.

[Music ends]

Emily Lewis: Today we’re talking about the design deliverables we’re developing for our clients these days, including Style Tiles, which were created by our guest, Samantha Warren. Samantha is a designer and art director and works for the wide range of organizations from small startups to large tech companies to make their products and brands more awesome. Previously at Twitter, she specialized in a blend of visual design and user experience strategy. She also speaks at industry conferences like An Event Apart, spreading the word about Style Tiles every chance she can. Welcome to the show, Samantha.

Samantha Warren: Thank you, thanks for having me, guys.

Lea Alcantara: So Samantha, can you tell our listeners a bit more about yourself?

Samantha Warren: Yeah, I currently live in San Francisco with my amazing husband who is a designer as well and my cross-eyed cat.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: I’ve been recently getting into ceramics. I’m really bad at it though, but I’ve been trying to learn how to do like pottery.

Lea Alcantara: Oh, very cool.

Samantha Warren: Yeah, and I am just designing. I work from home and I design for all sorts of awesome clients.

Lea Alcantara: Very cool. I feel like a lot of digital designers these days are dipping their hand into, well, literally dipping their hand into physical objects, and in your case here, like creating ceramics or creating printed signs and paintings and things like that. Do you also find that true?

Samantha Warren: Yeah. Well, it’s interesting, I had gone to school actually for art.

Lea Alcantara: Oh.

Samantha Warren: And so over the past 12 years of being a designer, I have gotten further and further away from doing what I sort of originally set out to do.

Lea Alcantara: [Agrees]

Samantha Warren: So I worked with a co-worker at Twitter, Jen Cotton, and she’s a ceramicist and she manages to continue to be a very successful ceramicist on the side of also being a full-time designer, and so she sort of inspired me to try this. I’ve never actually done ceramics before, so it was completely new, and it’s about finding a new challenge for myself.

Lea Alcantara: Oh, cool.

Samantha Warren: Yeah. I think it’s great when people start to try and bridge that because you can very focused on pixels, you know?

Emily Lewis: [Agrees]

Lea Alcantara: Oh, for sure.

Emily Lewis: It’s got to free up a whole different part of your mind as well. You’re still being creative, but you’re using your body in a different way and you’re using materials. It reminds me almost, Lea, of all of our developer guests who are into music and playing instruments. [Laughs]

Lea Alcantara: Yeah, I know, for sure.

Emily Lewis: Yeah.

Lea Alcantara: Yeah, absolutely.

Emily Lewis: So Samantha, before we start recording, you actually mentioned that you literally got home from An Event Apart last night, and that what we are going to talk about today is something that was a bit of a running conversation while you were there. Can you tell me a little bit about how the An Event Apart experience was, and what some of the conversations about design deliverables were?

Samantha Warren: Yeah, I think it’s a running theme right now just in our industry, how do we communicate with clients so that they understand the process of building a responsive website, and many of the speakers talked quite a bit about the types of deliverables that they used. Style Tiles is one, but Brad Frost talks a lot about atomic design, Kevin Hoffman talks a lot about what he does in order to communicate and have clear communication with the client. There is just a lot I think going on right now in this space because it’s a new world of web design. We’re not just designing. What was essentially kind of like 960 pixel wide mockups anymore, there’s just so much more to it.

Emily Lewis: [Agrees]

Lea Alcantara: Right, yeah. So in regards to that, things have gotten more and more complicated, but before we dive into all the complication, let’s just start with the basics, what do you define as design deliverables?

Samantha Warren: I see a design deliverable as anything that you give a client within a pivot point in the process to communicate with them where you are, and so it could be a visual, it could also be documentation, it could be just a writeup and a summary of what it is that we had just discussed, but making sure that there’s kind of an agreed upon statement at different parts, at different benchmarks within the process to make sure everybody is on the same page.

Emily Lewis: All right, so before today, like let’s imagine five or seven years ago, like what kind of deliverables were you providing clients? Like you mentioned like a 960 by something static comp, like was it a series of comps? Was it limited to key pages? Were there other deliverables involved, like you even mentioned summary of a conversation or maybe a kick-off meeting, a summary of that?

Samantha Warren: The interesting thing is I think there are a lot of things that have changed, but there are a lot of things that have stayed the same.

Emily Lewis: [Agrees]

Samantha Warren: I think back to when I first started, the number of deliverables that I was producing was just unnecessary.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: Really unnecessary.

Lea Alcantara: [Agrees]

Samantha Warren: So I mean, outside of what it was, but I remember I worked for a large advertising agency and I did something like probably a hundred wireframes.

Emily Lewis: Wow!

Lea Alcantara: Oh.

Samantha Warren: Yeah, so what would be, I would say, like a mid-sized site. It wasn’t something that warranted a hundred wireframes, but I remember there was just some strange place within the conversation that the account manager had had that I needed to provide all of these wireframes and it was just so unnecessary, but that there was this expectation of receiving this giant stack of papers.

Emily Lewis: Oh, these were actually like printed out?

Samantha Warren: Oh yeah. [Laughs]

Lea Alcantara: Oh my God. [Laughs]

Emily Lewis: [Laughs]

Samantha Warren: Oh yeah. When I worked in advertising, everything was printed out.

Emily Lewis: [Laughs]

Samantha Warren: I remember actually I stayed one night really awake and I was at this giant copy machine printer thing just printing like all of these wireframes and thinking to myself, “This is so wasteful. This is so unnecessary.” But a lot of times, and I think back in the day especially, deliverables were seen as a way to make money. That’s how you were making money.

Emily Lewis: Right.

Lea Alcantara: [Agrees]

Samantha Warren: And you needed to have these deliverables in the contract and produced even if they weren’t necessarily efficient because that’s how the agency was making money. That’s how they were billing and they had to have something in order to bill for, and people expect a thing versus just like being a consultant and just being timed.

Lea Alcantara: Right.

Samantha Warren: But looking back, there were lots of wireframes. There were lots of mockups. But I think the things that really stand out in my mind is that idea of doing multiple very different mockups.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Samantha Warren: Having those choices, I think that in my mind was just incredibly wasteful. I can’t stand inefficiency, and so those I felt like were really inefficient, but I think once we began to get to a place where it was very clear that the web was different and people were starting to experiment with what they gave their clients, I worked for an agency, we did mood boards. I actually did this thing, we call the simple comp, which is actually just the header and whatever would be like the first half above the fold of a first page. That was a deliverable I did for a few clients. But mostly mockups, mostly they were static mockups of the home page and key pages, but it’s really changed and evolved throughout the years, and I think it still is. It’s very hard to say that there would be any one particular magic bullet for any one client as far as the design deliverable goes.

Emily Lewis: What tools were you using like to make those wireframes and to make those comps?

Samantha Warren: An interesting thing about that is I don’t know if that would be something that’s really changed a whole lot for me, Photoshop and Illustrator have been mainstays for me awhile.

Lea Alcantara: Me too.

Samantha Warren: I still do wireframes in Illustrator, and I know that it may not be the most efficient way, but sometimes it is the fastest way for me to be able to express an idea.

Emily Lewis: [Agrees]

Samantha Warren: But then I remember that when you’re doing a hundred wireframes, Illustrator is not the best solution.

Emily Lewis: Yeah.

Lea Alcantara: [Laughs]

Samantha Warren: And so I do remember doing this hundred wireframes in Illustrator, but I think the tools to some degree have stayed the same. There hasn’t been a lot of change for me at least there.

Emily Lewis: You know, Lea, I’m curious, because this is something you bring up a lot when you blog for us, talking about why you continue to use Photoshop even though you’re aware of some of the newer choices out there today. I get the feeling that you feel similarly to Samantha. Photoshop is like you are fast in it.

Lea Alcantara: Yeah, I mean, since I started using Photoshop when I was 13 years old.

Samantha Warren: [Laughs]

Lea Alcantara: It’s one of those things where I know it like the back of my hand. So even if there are faster or better tools, I would need to set aside time to understand them and learn them, which it might be an inevitability, but if we have a client that needs something and we’re on a time line, I’m going to open up Photoshop because it’s what I know.

Timestamp: 00:10:11

Emily Lewis: [Agrees]

Lea Alcantara: And at the end of the day, a visual is a visual is a visual, right?

Emily Lewis: And the client doesn’t care what you’re using ultimately.

Lea Alcantara: Yeah, yeah, exactly. So it’s just a matter of figuring out which of these tools makes me translate what’s in my brain properly and in a way that doesnt’ constrain my design thinking. Because I do feel like whenever we have these types of conversations, and I’m sure we’re going to dive deep into this with Samantha too, like a lot of people are like, “Design in the browser or design this or design that.” But for me, I feel like it’s so constraining that I’m thinking way too far ahead in the project that my design thinking is concerned about whether it’s going to render properly before whether this is the best solution or not.

Emily Lewis: [Agrees]

Samantha Warren: Absolutely.

Emily Lewis: So Samantha, you mentioned some of the deliverables that you’ve created in the past and that even the tools you used, they may not change that much, but the deliverables have to have changed to some degree. I mean, you’re not sending hundreds of wireframes these days, right?

Samantha Warren: Yeah, I think for me it’s more about setting the expectations up front.

Emily Lewis: [Agrees]

Samantha Warren: I feel like earlier in my career, I was further and further away from understanding the larger context of a design project.

Lea Alcantara: [Agrees]

Samantha Warren: When you first start out, you’re just kind of like, “Hey, I’m a designer. Give me work, I want to make things.” And then you start to kind of put together, “Well, I could make things better if I had this situation in place,” and I kind of learned, you start to work with other people. If you are on in an agency, you begin to work with your account managers and project managers, and even the sales people who sell the work to start to get a conversation going about how you create the environment and create the situation that would put you in a position and set you up for success in a project, and so as I have gained experience, I have recognized that there are a lot of inefficiencies. There are a lot of ways that you could do, and we talked about the fact that they used to create deliverables a lot of times to make money. Well, what if I can save you money and then leave you time to do something else in your projects.

Emily Lewis: [Agrees]

Samantha Warren: So I’ve started to understand over a period of time how to kind of manipulate the budgets and the deliverables and all of that, almost getting into the business and the sales of design.

Emily Lewis: Right.

Samantha Warren: And so that has really helped me to dictate what I find to set me up as a designer for success, and when I work really closely with others who are involved in the process. Whether it’s me just selling, I can kind of control the process and I work with my clients, but if I’m working in house, communicating with my entire team or if I’m working for an agency, communicating with those who are on that project with me.

Emily Lewis: So can you give me like an example of how you set those expectations with the client? I mean, obviously, a lot of that is conversation and things like that, but what are the things you tell them to expect during the beginning, middle and end phases of a project where design is involved?

Samantha Warren: So I usually start a project by doing a workshop of some sort or opening a conversation. I very rarely begin by dictating anything to a client and I set the expectation that the reason I’m doing this is for their benefit.

Emily Lewis: [Agrees]

Samantha Warren: If I were to give them a cookie cutter solution before understanding their problem, I was really doing their problem a disservice, and so by setting that expectation of kind of having this conversation at the beginning, I’m able to get a good analysis of where we are from the client side of things and from the project side of things, and then I try to put in place a framework.

Emily Lewis: [Agrees]

Samantha Warren: And that framework, I do that with the client and work with them to kind of figure out, “Okay, these are the different phases that we need to go through in order to get the solutions that you are looking for.” Again, it’s about like almost a hyper communication.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Samantha Warren: I’m all about communicating very clearly with the client and making them my partner really.

Lea Alcantara: Right.

Samantha Warren: Because it’s their website, it’s their product that we’re creating, and once I’m long gone from the process, if it’s going to be successful, they need to be emotionally invested in it to make it successful. So by setting those expectations and helping them to really set these expectations for themselves, it creates a set up that I feel like allows them to be armed for success.

Emily Lewis: [Agrees]

Samantha Warren: Creating that framework and a lot of times, there are different parts to that process in framework. It’s like having a plan really, and sometimes that plan is just verbally communicated and it’s agreed upon, but again, depending sort of on the client and the situation, it may be part of the contract we signed. Maybe it’s very much something that’s part of a statement of work, and I never try to be too prescriptive because like I mean, how many times do you start out doing one thing and that completely changes, completely changes as you continue to move through the process. So yeah, it’s just again about communication.

Lea Alcantara: Yeah, it’s interesting. I feel like in many ways when you’re trying to set expectations, you kind of have to toe the line between being detailed about it as well as being vague, so it gives you enough wiggle room..

Emily Lewis: [Agrees]

Lea Alcantara: Sometimes we mention, “We’re going to show you some key pages. We’re not going to show you every page. We’re going to tell you exactly which key pages they are until you get them.” [Laughs]

Samantha Warren: Yeah, yeah.

Emily Lewis: Yeah, that everything sort of builds on each other. One of the things, as you were describing that, Samantha, it reminded me, we don’t typically get too deep into what I call discovery or kick-off until after they have engaged with us. So we intentionally keep our statement of work vague rather than trying to like make it very specific before we really understand client deeply in their problem that we’re trying to solve. Just recently, we started doing like after this sort of initial period of discovery where we’re kind of learning a lot about the client and their site and their audience. We put together a really simple Google Doc that has everything from their key goals and priorities outlined to some of the highest level points about their brand and identity and the audience.

Samantha Warren: [Agrees]

Emily Lewis: And it’s one of those things that we’re trying to do because we’re trying to make sure that we always have a touch point for every decision we make, that if at one point they come to us like when we’re already working on the comp space and what they were asking for doesn’t align with what they agreed to earlier, we have something to like bring them back to the discussion, “This was the document that we agreed on. Are these still your goals?” It’s like kind of reminding them what they said they wanted to start with. [Laughs]

Samantha Warren: Yeah, that’s awesome.

Emily Lewis: And it’s not a visual thing, so maybe someone might not perceive it as a design deliverable, but I feel like all of this stuff, like your communication with your client, that affects design, like all of it is part of contributing to the ultimate design of the solution, both functionally and visually or in other areas.

Samantha Warren: Yeah, I’ve done design principles actually as a deliverable where you go through the process of kind of doing series of different workshoppy exercises and then, “Hey, let’s decide what are the five goals, like how would you describe the principles for how this design should communicate?” And we just kind of document them. It’s kind of similar to what you’re saying, but I like to call them principles just because it gets them sort of thinking. I want them to really feel like they are part of the design process.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Samantha Warren: And the principles of design are now like their principles as a company.

Emily Lewis: Right,

Lea Alcantara: Right. Well, because at the end of the day, the design is the translation of what they want their business to do.

Samantha Warren: Exactly, yeah.

Emily Lewis: So once you have sort of that stuff defined, just assuming it’s a somewhat linear process, do you then move into IA and wireframing or is there something before then?

Samantha Warren: Again, it depends. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: It always depends. I sort of see my framework as being very chunked, so I see every piece of the framework to be attached to a goal, and so particularly IA, I like to call it architecture because it’s kind of like information architecture. It’s the user experience. It’s anything that’s not attached to the visual brand, and so I see that as sort of having its own set of goals because it’s about very tactical goal-driven user experience things that I don’t want to get crossed with. I don’t want them to see something and be like, “Oh, but I don’t like that color green,” and it’s like, “No, no, wait, the color green is not going to affect whether or not somebody gets the information they need in this situation.” Right?

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Samantha Warren: So I sort of chunked that and it’s a little packaged process, and then I do brand and visual design in its own little packaged process, and so sometimes I’ve had many different scenarios here, but I do either those at the same time in parallel and perhaps I’m the person doing both of those things, but I kind of keep them again as like separate deliverables and separate conversations, and then when they’re both at a point where you come to a consensus with the client, I then bring them back together.

Emily Lewis: [Agrees]

Samantha Warren: I’ve also done them linear, like I’ve done maybe user experience first and then brand second or I’ve done brand first and then user experience second. It depends on the stage that this client is at. For startups, for example, they may need a brand first because they may need to get funding and they may need a logo.

Emily Lewis: Right.

Samantha Warren: If it’s an established company, it may really be more important to get in there and just figure out how users get the information they need. So again, it depends, but I like keeping those things very separate because it keeps the client focused.

Timestamp: 00:19:54

Emily Lewis: So when you do get to the wireframe space, like if that project calls for it, what are you using to build your wireframes these days?

Samantha Warren: I usually use Illustrator.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Samantha Warren: And again, it depends on the client. You asked me about how my deliverables have changed, and now that I think about it, I don’t do wireframes like I used to, like one wireframe per page.

Emily Lewis: [Agrees]

Samantha Warren: A lot of times I will like create a giant art board and kind of create almost like a wireframe user flow site map.

Lea Alcantara: [Agrees]

Samantha Warren: And I’ll just say like infinity number of pixels and just get in there and make these giant kind of maps.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: And then if I need to deliver a specific wireframe at a time, I’ll just zoom in and then save that out as its own little PDF.

Emily Lewis: So this is just like a huge big Illustrator file, all in one thing?

Samantha Warren: Yeah. [Laughs]

Emily Lewis: Wow, that’s cool.

Samantha Warren: And I’ve done that, I did that a lot when I was at Twitter, for example, and the reason that it works really well in that scenario, I’m doing that actually for my current client that I’m working with. It works really well because then if I need to, I can go to a plotter and print out the whole map, and you know I always hate saying print anytime I’m talking about interactive anything.

Lea Alcantara: [Laughs]

Samantha Warren: But having that tangible thing in a meeting that you can just quickly point to, it’s like there.

Emily Lewis: Right.

Samantha Warren: You might be showing something else on your screen. You might be showing maybe a part of the visual brand and you have that map there and you can kind of point to something, and they’re able to make that connection and kind of zoom in on the specifics while also understanding the big picture, I found that to be really helpful. So I do tend to do stuff like that a lot. So it’s mostly an Illustrator, and it’s mostly because yeah, I’m very comfortable with Illustrator. I would love to perhaps use something like Balsamiq more often, but again, it depends on the client, and a lot of times the output that Illustrator gives me is what I am needing, what I can create the fastest then.

Lea Alcantara: I’m curious about your Illustrator workflow then. Do you have like custom shapes and stuff like that saved?

Samantha Warren: So I hadn’t for a long time. So I mentioned my husband is also a designer. He’s a designer at a tech company here in town, and he uses Illustrator for everything, and so he’s like master Illustrator person, and he recently kind of was like looking over my shoulder and was like, “Hey, do you know you could use symbols to do that faster?” [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: And it was really great because I had not used symbols before, so I’ve started recently using symbols. It was a really great tip he gave me. I guess it makes it a little bit more like a product like OmniGraffle where you can kind of reuse them.

Emily Lewis: [Agrees]

Samantha Warren: And it did really make my workflow faster, and I’m probably still a little bit awkward at it, but I would like to get faster with that.

Emily Lewis: Have you ever done anything with web-based wireframes that are responsive?

Samantha Warren: I have not, but what I have done, however, is I find in my process the most difficult thing to demonstrate is responsive at an early stage.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Samantha Warren: Because I don’t want to get into making mobile mockups for iPad, mockups for the desktop, so what I have done in a few circumstances is, have you guys ever used Macaw?

Lea Alcantara: I’ve downloaded it, but I haven’t like actually used it. [Laughs]

Samantha Warren: I have found Macaw to be really helpful for this in particular. I can quickly maybe gray box something there or even if I’ve done maybe a mockup at one breakpoint, I can kind of take my assets and throw it in there quickly, and the great thing about Macaw is you can set your breakpoints and toggle between them, and so without outputting anything, you can show what a design looks like at different breakpoints and tweak it at these various breakpoints.

So even if it’s not something I’m outputting as a final deliverable but if I need to demonstrate what works responsively, that’s been a great way to do that. So you could essentially do like a wireframe in Macaw. There’s actually a wireframe mode. I’ve never used it, but you could instead of gray boxing, you could build out your site and then go to a wireframe mode and then show those different breakpoints.

Emily Lewis: [Agrees]

Lea Alcantara: I’m curious with the static resources, clearly you make PDFs and images to show. Frankly, what Emily and I do is we just attach them to Basecamp, [laughs] or we link them to Dropbox which auto-shows up already on Basecamp. Do you have a more sophisticated way to show these deliverables? Because I do believe that there are some services or whatever out there that shows clients space for deliverables.

Samantha Warren: Yeah. So part of what I do working for myself is I try really hard to integrate into the system of the client that I’m working with, so I try to make it as natural for them. For me to go to them and say, “Hey, I need you to download this thing,” it made me more awkward. So for example, I have a client right now who’s very comfortable with Google Drive. That’s just the best way really to communicate with them, and so Google Drive has worked fantastic for that.

So when I was at Twitter, we used InVision a lot. That was really effective in many circumstances, and when you’re working with particularly multiple design teams, InVision is a great way to also communicate between the design teams on the deliverables before you send them to a stakeholder. However, when I used to work in an agency before several years ago, we had built, I wouldn’t say, a sophisticated system. I think we can have just built like some HTML files that we duplicated and used via Dropbox for Style Tiles, in particular, to send Style Tiles over to a client, so we could just send them a quick URL and you would click through and you get the tiles laid out in just HTML pages, and that was really effective for a lot of our clients.

But it depends on the team and it depends on the folks that you’re working with. I try really hard to get a sense for what they’re comfortable with and that’s going to be natural for them, and I don’t always hit that out of the park the first time, but sometimes it may be a Keynote that I share screens with and deliver via like a Google Hangout where I’m sharing my screen. Yeah, it all kind of depends on my contacts.

Emily Lewis: Before we move on and talk about Style Tiles, because that was a big game changer for us as well as I think a lot of people in our industry, I want to give a quick little shoutout to Travis Gertz who while at nGen Works, he put together, and this was a couple of years ago, this thing called Live Wires, which are basically web-based wireframes, and we took them and over the course of – and it’s really been probably 18 months kind of fine tuning it for how we work and modifying in a way so that the underlying HTML structure and even some of the CSS that’s driving these really low-fidelity web-based wireframes, we can then move into our production code, that it’s not just this isolated deliverable where we’re actually doing double the front-end development work.

But they’ve been great for us. I mean, I don’t know how, and Lea, you can chime in after I’m done running my mouth, as a developer, I love this because it gives me the chance to give the client the responsive experience before we’ve done any hardcore design on Lea’s end or I’ve done any hardcore development to sort of make sure they’re comfortable with how the general shape of a given page, resizes and how the layout adjusts, and even simple things like when you click on this button, this is the interaction that’s going to happen rather than trying to show it with static, and it’s super simple to pick up. It’s super simple to sort of customize to your own workflow, and for any of our listeners who kind of struggling with trying to get like the responsive experience to the client a little sooner, I found this is great.

We still sketch. Sometimes Lea might sketch. Whoever is doing the sketching, because sometimes we go back and forth, we use what we prefer. I tend to hand sketch and send Lea scans, and Lea tends to sketch in like Photoshop or Illustrator and send me those files. But then once those sketches are done, we take it in the Live Wires.

Samantha Warren: That sounds awesome. I need to check this out.

Lea Alcantara: Yeah, and I think part of the reason why we chose Live Wires is because there are so many frameworks out there. We didn’t want to deal with everybody else’s like glut of code.

Emily Lewis: Yeah.

Lea Alcantara: And with Live Wires, it was just super clean and like gray boxing.

Emily Lewis: It’s clean.

Lea Alcantara: Like it was literally gray boxing on the screen and it was just very, very clean and clear so it’s easy for us to customize, so that was our priority. We definitely highly recommend that. However, recently we found that, just like with anything, there are certain things that we make assumptions for because we’re in the industry so we get it already, but sometimes certain clients do need more information.

Emily Lewis: [Agrees]

Lea Alcantara: And so we’ve started thinking about doing kind of the hybrid static/dynamic approach where we still would build the Live Wires and we’ll have like a web-based deliverable, but then we’ll take a screenshot and then annotate that screenshot to send them a static explanation in case the browser itself isn’t self-explanatory. Because sometimes clients need you to circle a box, point to it and then explain what…

Emily Lewis: Say what it is.

Lea Alcantara: Yeah, exactly. Because I mean, even when I see the Live Wires, like every part of that page makes sense to me, but that’s because we built it and we know what those boxes are, and sometimes clients do need that extra explanation, and not just the bullet point with the URL because that’s what we used to do. I think that was what we did when we first started doing the Live Wires, when we did the Live Wires, and then we just explained in text with the URL what it was, but then in the future, we’re possibly going to try to do a hybrid where we’re going to send them the URL, then screenshots with certain things that we think might need further explanation.

Timestamp: 00:29:56

Emily Lewis: I think it points toSamantha’s point from earlier where it really depends on the client.

Lea Alcantara: Right.

Emily Lewis: We had some clients who get stuff right away.

Lea Alcantara: Yeah, absolutely.

Emily Lewis: And there’s not a lot of hand holding. They’re completely comfortable dealing with the deliverables we provide and it’s maybe one person, and then we have clients where there’s a committee of people and they’re all at different points on the range of understanding things, and for those clients, we may have to do that sort of annotation, the extra support that they may or may not need.

Samantha Warren: I think the interesting thing about deliverables is that there is a bit of a gut feeling you get sometimes. [Laughs]

Lea Alcantara: Right, right.

Samantha Warren: I would love to say, “Oh, there is a science and a formula and a cookie cutter approach.

Emily Lewis: [Agrees]

Samantha Warren: But to some degree, it is sort of like you meet someone and you start talking to them and you’d start to hear how they articulate specific things about the web and you can get a sense that “I think this person will be able to understand what a Style Tile is without necessarily the full explanation behind it or I think this person will be able to understand responsive.” But then sometimes you’re wrong. [Laughs]

Lea Alcantara: Yes, yeah, totally, right.

Samantha Warren: I know I’ve been wrong.

Emily Lewis: And you find out like halfway through. [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: Yeah. But then it’s just about being flexible and like always kind of having this toolbox of like, “Okay, I’ll try this next. I’ll try this method or that method.”

Emily Lewis: [Agrees]

Samantha Warren: And being able to throw them in, that’s interesting.

Lea Alcantara: I think it’s definitely important that we emphasize the flexibility because I think with this mobile mindset and responsive web design and development, a lot of people are really eager to just jump into the browser or totally reject all static deliverables. But at least in real life, in our experience, we still need a mix, like we still need a mix in order to convey what we need to convery to the clients.

Emily Lewis: And I think it’s more than just conveying to clients, but how we communicate to each other.

Lea Alcantara: Yeah. Oh, totally.

Emily Lewis: How you show me something that I might have to build, like the designer-developer relationship. So Samantha, the next one to talk about, the other thing. I mentioned how Live Wires changed a lot for us. The other thing that changed a whole lot for us was your Style Tiles. So can you tell our listeners what Style Tiles are and how you kind of envisioned them. It seems simple once it’s out there, but no one thought to put it out there.

Samantha Warren: Yeah. So I mentioned earlier I had been doing mood boards with an agency that I worked with quite a bit, but mood boards had some issues. The main issue was a lot of times the clients would have a difficult time connecting this sort of vague idea of these maybe collage-ish looking deliverables with what their website was going to be, like they just couldn’t make the connection between like how does this turn into a button, and then the other piece of it was, mood boards in themselves, they are a very popular deliverable across many design disciplines, and what I would run into is that client would say, “Well, I already did a mood board with my branding agency. Why am I paying you to do that too?” So I felt like there needed to be a deliverable that was very specific to web design, that wasn’t too prescriptive.

It actually came out of an experience I had where I visited my husband’s cousin who is an interior designer and architect, and she was having an open house at her studio. When we walked in, I was amazed by these crazy large blueprints that she had all around her studio. They’re beautiful and they were intricate and I was asking her about them and she was explaining, “Really, that’s the goals for a particular building in these blueprints and we’re working around the constraints and trying to figure out, ‘Does this need to be accessible? What is the environment around this particular building?’”

So all these types of things were figured out in these blueprints, and then she had this separate room that was full of carpet samples and paint chips and fabric swatches and in the middle of the room there was a little island that had these trades on it, and she explained to me that when she gets the entire architecture approved with her client, she then presents them with these options that are again made within the constraints of what is practical for the solution that they’re going after, but they have a choice because they need to live with this product.

Emily Lewis: Oh, I’ve seen something like this in other areas, like with fashion and party planning and things like that, where they sort of like pick what they like and create like a tray of all their favorite things.

Samantha Warren: Yes, so that’s exactly. I mean, it’s not anything mind-blowingly new. I was just like, “Oh my gosh, we need to do this for websites. [Laughs]

Lea Alcantara: [Agrees]

Samantha Warren: And it makes sense, like a carpet sample makes sense because you’re feeling and looking at the actual, a smaller piece of a larger element, and the grade or design, so why don’t we take the smaller pieces like the buttons, maybe it’s a search bar, whatever it is that we know we’re going to use and present them earlier on so that when you’re making a decision about something like color where they may be several shades of blue that could work on this situation instead of having to go through final mockups and make all of those changes, like let’s get that out of the way in its process.

Lea Alcantara: [Agrees]

Samantha Warren: So I began doing it with clients. Specifically, I’m trying to think the first client I did it with, it was a very low budget, and that actually really helped me make my case to the agency I was working with that we should try something new because it was a client we really liked, we really wanted their business, but they had a ridiculously low budget that didn’t account for making lots of mockups. We needed to get something pretty tangible to a developer early on, and the Style Tiles, it worked like kind of surprisingly to me. I was like, “Oh my gosh, this really worked.”

Lea Alcantara: [Laughs]

Samantha Warren: I mean like anything, lots and lots of iteration around how it worked, and what’s the magic amount of time you need to estimate for something like this, how many revisions work for what types of clients, that sort of thing has been something. Again, it depends, but also I refined it over a period of time, but that’s sort of where the Style Tiles came from, and interestingly enough, the agency I worked with when we really begun to cement this was called Phase2 and they’re very active in the Drupal community, and they are supportive of everyone in that company giving back to the open source community. This is a very important part of their methodology and just the principle that they live by, and so I had a lot of opportunity there to give stuff back, so I was like, “Well, all of the developers that I work with, they give back code all the time, I wanted to get back a piece of my process.” So that’s when I sort of codified it and made it a website and I did a presentation at South By Southwest (SXSW) and I never expected the website to catch on like it did because it was really just for the presentation and that’s sort of how it came about.

Emily Lewis: And for us, almost everything we find that we like, we somehow evolve for our own process, and that’s how Style Tiles kind of influenced our own deliverable that sort of falls in that abstracted, but still giving you a feel of a visual experience kind of a thing. People who have used it, who you run into at conferences, has there been like a unique evolution or application that someone has told you about of your Style Tiles?

Samantha Warren: I love seeing when people do this, because that’s the whole piece of open source that makes it so special, like you take something that somebody else did and you build on it. So I think, in general, moving to browser-based Style Tiles is really interesting to me. A lot of the stuff that the folks at Sparkbox, Ben Callahan talks about like what they’ve been doing with their Style Tiles is very interesting to me. Dan Mall has the element collages, which is kind of a similar method to Style Tiles, but more specific to UI elements, and so yeah, over the period of time, people are doing lots of really interesting things with it, and they’re using them very differently.

I know that I use them a lot to take a company’s brand and figure out what that means for the web or maybe it’s a sub-brand and like they use it for exploration, but there are a lot of people who are using them as Anna Debenham, which is showing you of a Style Tiles one of her clients gave her and she’s a front-end developer, and it helped her to influence how she built the site. When everything isn’t spelled out, it kind of helps someone filling the glue in between pieces that aren’t necessarily completely visualized. So there are a lot of really interesting things that people are doing with them, and I think that’s the best part of like the open source world, it’s just you don’t have to use anything the way somebody has built it. You can take it and do whatever you want with it and watching that grow and change has been really, really awesome.

Lea Alcantara: So with Samantha’s Style Tiles, I originally applied it essentially as a Photoshop template that she had on the website when I first started playing around with it, and that worked really well to help plan the rest of the design because it really is the kernel of the idea of the design system.

I think in the past when we’re thinking about like all the mockups we did, part of it was kind of like old design print thinking where everything needs to be like a poster, and that’s what you send. But then when you have deliverables like a Style Tile, you’re starting to think about like the elements that will apply to all the pages and how well all these things work.

Now, having the Style Tiles just as a static deliverable though is a little bit limiting for us because we want the client to understand the context of their site in a browser as soon as possible. Especially because anyone who knows Photoshop knows you have to make sure that the color space is correct, that you save it in the right RGB and all this kind of things and there are so much monitor variations that what you’ve saved in an image might end up being different in a browser so might as well just get that into the browser first and foremost.

Timestamp: 00:40:09

So for us, we thought it made sense to translate like a Style Tile as essentially the first step into our final design system in the browser, and it’s one of those things that what we start there and what they accept there and they see it in the browser, then they see it in the context of their monitors, so there’s no weird color shifting, the size of the font is actually the size as well as the aliasing, because that’s something as a designer that’s like so frustrating, just the difference of anti-aliasing across systems and browsers, but if they see it in their browser, like what I see and what they see might be slightly different, but they see it in the actual context that they want to see it in.

So if they don’t like something, then it’s fixed in that situation, and everything really starts off as that like little seed, and then we go into something that’s kind of like Dan Mall’s element collage and we call it element collage, but it’s not quite exactly the same thing still, and at that point, once the client accepts what’s happening in the in-browser Style Tile, we start making the modules of the site that we think will affect more of the overall design before we even get into the comp stage.

That’s also kind of a hybrid of both static images as well as actual HTML and CSS. So generally speaking, if it’s text related, we tend to show the actual HTML/CSS already on the actual element collage deliverable, but if it needs to have more “styling” around it, like a navigation bar, or how we want to treat photographs or backgrounds and things like that, then I don’t actually code that in HTML and CSS, I just make a mockup in Photoshop, save it as a JPEG and shove it into the HTML deliverable. All of these, like we try to put it in a browser context, so even if we do have like a JPEG of what the final HTML and CSS is going to be, it’s still in that context where the client understands.

Emily Lewis: And I think another thing that we’re doing, and we haven’t yet had an opportunity to apply this, but we’ve sort of changed our underlying internal framework, is that where the element collage does include actual HTML and CSS, we have these little modules, like let’s say for a button, there’s a specific way I code a button and so Lea just calls that include that has my HTML in it and that has my styles, and then she has a handful of styles where she changes color and font and font sizes and border radius and things like that, and then once it’s approved, that CSS and that HTML carries over into the actual production.

So we’re trying to do more reuse of these things so they’re not just these independent things that aren’t influencing the final work, but they’re contributing to it, and not just design, but also in browser, the development of it.

Lea Alcantara: Yeah, because I feel like in the old school way, we’re always doing everything from scratch and that really didn’t make any sense when a button is a button is a button. Even if the button style is going to change, a website is going to have a Submit button somewhere. [Laughs]

Emily Lewis: There’s something I wanted to ask both of you. Samantha, for you to start, I’m just curious about this because I can design, but it’s kind of like I’m not a designer. [Laughs] So you mentioned back in the day when you were doing like mockups, you would give them a couple different choices. What are you doing now? Are you presenting to them your best choice and then iterating off of that, or do you still give multiple options?

Samantha Warren: With the Style Tiles, there are multiple options, and I tend to try and hone in on what I call like “blanket attributes” so there’s a certain point where you know that you’re not going to do three absolutely crazy ideas. So for example, I had a client who overwhelmingly said, “It needed to be patriotic. It needed to feel like a traditional publication.” I mean, at that point in time, you know that it’s going to be three different versions of a red, white and blue color scheme with perhaps three different versions of a slab serif or serif font, and so I’m all about giving you three options within the constraints that you sort of started to set for yourself in refining what your blanket attributes are, and sometimes it isn’t three, I have done two in some circumstances, and I guess you could potentially give more.

But the idea is then after you get a consensus on a Style Tile that maybe you might iterate and it could be iterating, combining things from two tiles. It could be continuously changing some of the attributes of one particular tile. I had a circumstance where the client loved one particular tile, but just didn’t feel right about the color scheme so I’ve just done the tile and then iterated on color schemes for them, and then at that point, I generally then present one mockup of a key page that we would decide beforehand. For example, if it is a publication website, usually that key page is something more akin to an article page. But I tend to kind of work from the inside out as far as what pages I present. I don’t generally give a lot of options, unless they really need it, but I always try and hone in on what it is that they’re uncomfortable with and really only try and iterate and give multiple options around that rather than doing large mockups and giving multiple options there.

Lea Alcantara: So I’m curious about these multiple options in terms of just running a business and keeping your time and making sure everything is on track. Do you limit the amount of choices in a statement of work, and if they do need more options, like more Style Tiles or more iterations in the color scheme, et cetera, do you set a limit, or do you just charge hourly?

Samantha Warren: I usually give an estimate range, and the way I do that, I generally say, for example, for a typical client, maybe I’ll say two to three Style Tiles, and I kind of have developed this formula around—I’m obsessed with Harvest—so I mean like if this is a formulaic approach that I take based on seeing the patterns that I myself as the designer have developed over a period of time, so I kind of know that if I want to make a Style Tile that really gets the level of detail that I feel comfortable with presenting, it’s about four hours, and so using that as sort of a baseline if I’m presenting three Style Tiles, I’m time boxing the four hours and if they only need two tiles, then maybe I add more details to the two tiles, and then I usually give them a set of web iterations and maybe I’ll say one to two iterations.

I really haven’t gotten to a situation where they continue to iterate, but I would probably have a clause where I say, “After that, it’s then hourly at this rate for as many iterations that you would want.” I try to not get too prescriptive when it comes down to that. A lot of times depending on the client that I’m working with and my level of comfort with them, I may say, “Hey, we’re still at a point where we’re iterating. We’re going to need to take time now the number of deliverables in the next phase. Are you fine with that?”

It’s just about being very direct and up front with them about how long it takes you to do things and what the level of effort is, and I’ve been really lucky in this circumstance that most of my clients have been very agreeable with this methodology, knowing that I’m kind of saving them time and getting them what they need under budget, and I think that in particular, the fact that I can kind of translate these steps to a number of hours and this is the rate at that number of hours, so this is exactly what you’re getting for that, has been incredibly helpful for me.

People don’t necessarily understand the vague mushy-gushiness of what a design does all the time, what is the value in this, but if you can say, “Hey, X amount of hours equals X amount of dollars for you and you will get something like this in that amount of time,” it helps them to begin to understand when you go through that amount of time and they haven’t reached the decision that they want, that it’s time and money to continue doing that.

Emily Lewis: I think that’s a lesson we’re still learning. I feel like this came up recently for us. It wasn’t in the design process in terms of the client asking for more and more iterations, but it turned out this client was just someone who really needed a lot of communication more so than we had really factored in to the budget, and as the contract stood, it was a flat rate, that’s all there was. There was no line item for “This is the number of hours of phone calls you get. Anything beyond that will be at our hourly rate.”

We didn’t have that in place, and 20 hours of phone calls later, we were like, “Oh my God, like what’s happened?” And part of it was our failure, my failure as the owner of the business to notice this sooner and bring it to the client’s attention sooner to sort of have that conversation and say, “It looks like we’re communicating more and we want to provide that for you, but it does affect the timeline and it does affect our ability to begin actual production work.” And we ultimately did have this conversation with the client. I just feel it was not too late to do anything about it, but it was later than it should have been. I mean, we should have brought it to the attention of the client a lot sooner, and as it turned out, she was very amenable to working with us and establishing a limit for communications and phone calls and going hourly after that limit from this point forward in the project, but it’s one of those things that I was so stressed the whole day just because it felt like such a hard conversation to have with a client to say we’re going to have to do something different than what we originally agreed upon and finding the right language, because I was afraid the client would walk away.

You just never know. It’s the hard conversations and I think it would come up almost anytime creep enters into a project, but I think you are completely right in what you said about you just are direct and you’re respectful and you tell them what X amount equals in terms of time and resources so they get a sense of what they’re getting for their money.

Timestamp: 00:50:47

Samantha Warren: I’ve been really lucky in the fact that up until now, I’ve worked with teams, either in an agency or in-house that have the infrastructure to kind of educate me and help me learn all of those things. Since going out on my own, I’ve only been out on my own for about six months, but if you guys are familiar with Mike Monteiro and his My Lawyer Gabe.

Lea Alcantara: Yeah, yeah.

Samantha Warren: There’s a lot to be learned from Gabe, I think, and I reached out to him and gotten a lot of helpful tips on how to structure contracts and stuff. That in itself has been a really interesting process, but surrounding yourself with people who can help you and actually asking friends. I mean, I’ve called up a lot of friends who have been in the business working for themselves longer than me have been, and just like, “Hey, what would you do in this situation?”

Emily Lewis: You’re absolutely right. Aaron Gustafson, we’ve been working with him on a project recently, and he has been so wonderful for that. Every time I have a question, I just send it to Aaron. I’m like, “What have you done in this situation? How would you recommend I handle it?” He’s got a lot more experience than I do working as an agency and having complex clients with big committees and lots of departments and things like that, so you’re absolutely right. Asking people who know more than you is always a good thing. [Laughs]

Lea Alcantara: But there’s never like a right answer. That’s a difficult thing.

Emily Lewis: Yeah.

Lea Alcantara: Because up until now, like in terms of communication, most of our clients have been within the scope that Emily and I would be comfortable with in terms of communicating and things like that, and I think part of the uncomfortableness is that I’m willing to talk to the client. It’s like there’s no problem with having to explain myself and having a longer conversation. The problem is that time cost money.

Samantha Warren: Yeah.

Lea Alcantara: Like the longer that these conversations happen and the more frequently that these conversations happen, that’s less time for us to design, that’s less time for us to code, and then suddenly we still have to do all of that and we still have that timeline to keep up with. So it’s definitely one of those things where I can talk all day about design.

Samantha Warren: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: I can have a giant conversation over like every single reason why I chose that font and that size there.

Samantha Warren: Totally.

Lea Alcantara: And some clients want those conversations, but are they necessarily a good business sense for either the client or yourself?

Emily Lewis: Yeah.

Lea Alcantara: Not necessarily, but I definitely think the earlier you have that conversation to set those expectations, the better.

Samantha Warren: [Agrees]

Emily Lewis: Samantha, I’m curious, are there any deliverables that whether you working by yourself, obviously with the client or with an agency, but within your own company versus like when you’ve been in an agency, are there any deliverables that is internal only that you’re really giving to the client, but you’re creating them for your own purposes, whether it’s to share with someone else or to have a single place to go to each time for yourself?

Samantha Warren: Yeah, I think there were quite a few times where I do a lot of exploration as far as style or even like I think mobile, for example, I may not necessarily show them all of the mockups for a prototype, particularly like complex navigation. So for example, I was working on a navigation that have whole layers of sub-levels. [Laughs]

Lea Alcantara: Yeah. [Laughs]

Samantha Warren: When that broke down to mobile, it got really complex, and I needed to work that out for myself on many levels, from an information architectural level, but also from a visual design level because that really affected how usable it was at that level and at a certain point, it was just going to probably confuse or create more conversation that needed to be created. It didn’t need an approval process, so I wouldn’t probably show them that, unless it was directly asked for.

Lea Alcantara: Right.

Samantha Warren: But anything that helps me to understand a complex problem and doesn’t necessarily need to be approved, that’s where I usually keep that internal. I do a lot of exploration on my own though of just like I do a lot of almost like mood boardy-type work, that I probably would never show a client, but just to get a good sense.

Emily Lewis: [Agrees]

Samantha Warren: I love to feel the brand. I know that sounds strange. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: I have this like kind of emotional connection that I have to make with any brand where I like really feel like I know what it is, and sometimes it takes a lot of visual exploration for myself, whether it’s just collecting things, having like an inspiration box or maybe a Pinterest board, so I do a lot of that, and that doesn’t necessarily need to be something that a client approves of either, I think.

Emily Lewis: I think for us, some of the things that come to mind internally, like I have to mention this, Lea, because it like blew my mind when you gave it to me last week.

Lea Alcantara: [Laughs]

Emily Lewis: This is the first time in my 20-plus year career as a front-end developer that a designer has given a document with all of the color and typography rules already broken out. Most of the time they send me a comp, I have to go into the comp and start extracting values, what are the pixel values, what are the RGBs, all that other stuff on my own, which as you know, it adds time, but that’s how it’s always been. I’ve asked for it, and I’ve never gotten it. I’d just get the comps. But Lea gave me this great document, not only did it have like all the typography rules that she had built into her comps, but then also the information of “But in mobile, it’s going to be this size, and then, oh, but in the footer, it’s going to be this size.” Little things like that, and the RGB colors as well instead of just hex values, and we won’t give that to the client, but that’s a deliverable to me, the developer, and it probably saved me like a good hour and a half getting my basic Sass stuff built with these, the fundamental stuff that I normally have to go into the comp, and she uses Photoshop and I use Fireworks and so there’s always a little bit of nuance involved when you’re working between different software on how they open up the files and stuff. So that’s another good example of a deliverable that would just be internal, but it’s great to help transition that design to the front-end developer who’s got to build it out.

Lea Alcantara: Yeah, I remember when we first started, when Emily and I first did our first responsive design client, and you talked about how “Oh, I’m just going to show them maybe like one mobile view and then one key page or whatever.” We didn’t do that. We created all these comps for this particular client, and then once we sent it to them, within five minutes they accepted it. While that sounds like a dream, well, that sounds like a dream for a designer. You’re like, “Let’s just accept it whatever,” because then you can move forward with your project, but at the same time, you’re like, “Why did I spend all that time? They just glanced at it and said okay.” [Laughs] And I really feel like that was kind of that turning point between me and Emily saying like, “We could have saved a lot of time if we have communicated the same thing to them with less views.”

Emily Lewis: Or also like lately Lea has been doing the smallest view, the largest view and we generally give that to the client as comps, and then she does like an idea for some of the squishy middle, but that’s just for us. I see what I can implement in the browser, so the client doesn’t have a set expectation for the middle. We sort of have a guideline that Lea has informed me and then as I’m developing in what makes sense and what feels right, so there is some design in the browser that happens there, and so that’s like another thing that Lea builds, but we never even give it to the client. So before we wrap up, I wanted to ask you a few questions. What should you never ever deliver to a client?

Samantha Warren: I think you should never ever deliver to a client something that you are not confident in.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Samantha Warren: There used to be this old practice of giving them a mockup to kind of throw them off, like something really bad versus something you’ve got in.

Emily Lewis: Yeah.

Samantha Warren: I think that is horrible. There’s a good chance they’re going to go with that, so I think whatever it is, you should be incredibly confident and also passionate about what you’re presenting to them. Don’t give them anything that you think is the wrong solution or that you’re not passionate about being the right solution.

Emily Lewis: And what do you think we designers and developers can do now to sort of not only improve our client deliverables, but help communicate the value of these deliverables to clients?

Samantha Warren: I think the more we share amongst each other what works, I mean, I think everything we share is when it’s kind of like, “Oh, that’s a game changer.” Like when Ethan Marcotte came out with responsive design, it was like, “Oh.|

Emily Lewis: Right.

Lea Alcantara: Yeah.

Samantha Warren: And so every time we find something that really ends up working and sharing it, because I’m not necessarily convinced that we have all the answers out there right now. There’s probably somebody out there who are like just killing it and doing something, but just maybe they haven’t shared it yet. So I think just sharing it, everything that you do that works and in what scenario it is, and it’s just kind of over communication really.

I wish I blog more, but I think I haven’t blogged in a long time, I need to do that. But anytime we all blog and kind of share this stuff, I think it benefits our clients because it’s out there and they then see these things and it becomes institutionalized concept like responsive design. It kind of could have existed before it was called responsive design, but by him putting a name to it, it allowed us all to have this like one definition that we could all latch on to and then move forward with sort of selling it collectively.

Lea Alcantara: [Agrees]

Samantha Warren: And when we do that, and I think to some degree, I try to do that with Style Tiles. In a million years, I never expected clients to come to me asking for that, but now they’re asking for it.

Emily Lewis: [Laughs]

Samantha Warren: And so I don’t have to do like this large portion of education that you said you do.

Emily Lewis: Right.

Samantha Warren: And so every time I’m not educating a client on a deliverable, I’m then taking that same amount of time within their budget to do something super awesome for them at the end, like maybe I’m adding in some extra animation that they would never have gotten within the timeframe that they had. So I think it’s just about a rising tide flows, all those, right?

Lea Alcantara: Yeah, I know. I think that’s definitely true, and I would add that if you’re able to afford it or you can convince your boss or whatever to attend these conferences, so you can see how other people do their work, and for me personally, like when Emily and I went to CSS Dev Conf last year, part of it was almost justifying what we were doing.

Samantha Warren: [Agrees]

Emily Lewis: Yeah, validation.

Lea Alcantara: Yeah, like when I saw that the CBC, that’s basically like the BBC of Canada, it’s the CBC, they had a presenter there, and when he did his presentation and it looked like an exact clone of what Emily and I did and I was like, “Oh, that’s a national organization and they’re doing something that we’re doing, I guess we’re doing it correctly.” [Laughs]

Emily Lewis: [Laughs] Oh, it’s easy to feel like we operate in vacuums in our own little bubbles, whether we’re as independent freelancers or small agencies or even larger agencies that maybe don’t want to share their “secrets,” you forget that what you may be doing, other people could be doing, but you might learn something new that’s more efficient or smarter or more clever or something totally new. I think the best part about the fact that our industry is ever changing, which means like our design deliverables have to change to adapt, but that’s a good thing. If you really love working in this industry, part of it is because you’re always learning.

Lea Alcantara: [Agrees]

Samantha Warren: Yeah.

Lea Alcantara: Well, this was an awesome talk, and I feel like we can continue talking about this.

Samantha Warren: [Laughs]

Emily Lewis: [Laughs]

Samantha Warren: Yeah.

Lea Alcantara: And we will, I think, because I’ll be seeing you in a couple of weeks for ConvergeSE.

Samantha Warren: Yes. Right. I’m excited about that.

Lea Alcantara: But before we finish up, we do have our Rapid Fire 10 Questions, so our listeners can get to know you a bit better. Are you ready?

Samantha Warren: I think so.

Lea Alcantara: Okay, Question 1, Android or iOS?

Samantha Warren: It’s iOS.

Emily Lewis: If you were stranded on a desert island and can only bring three things, what would you bring?

Samantha Warren: Matches. Wait, are we talking about like a deserted island like a beautiful tropical island like Lost?

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: And there might be an airplane on the island somewhere? Are we talking about like Naked and Afraid?

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: Because it’s…

Emily Lewis: Naked and Afraid.

Samantha Warren: With Naked and Afraid, I’ve always like man, you need a pot to boil water. This always comes up.

Emily Lewis: The guy who brought duct tape.

Lea Alcantara: [Laughs]

Samantha Warren: [Laughs]

Emily Lewis: That was so smart because he made a pot out of it and he also made a shelter of it.

Samantha Warren: Yeah, I mean, so oh, maybe duct tape then.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: And matches. It’s always like you need something to start a fire. You need it to be able to boil water so like a pot probably, and then maybe… can I bring a boat?

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: Sure, that makes sense. I love everyone’s answers. Some people are creature comforts and some people are like really practical.

Samantha Warren: [Laughs] Well, I think I would have probably been creature comfort until I saw Naked and Afraid for the first time.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: I’m there with you. My boyfriend and I are addicted to that show.

Lea Alcantara: Speaking of shows, what’s your favorite TV show?

Samantha Warren: Right now, probably House of Cards.

Emily Lewis: What’s your favorite dessert?

Samantha Warren: Warm chocolate chip cookies.

Lea Alcantara: [Agrees]

Emily Lewis: [Agrees]

Lea Alcantara: What profession other than your own would you like to attempt?

Samantha Warren: I think because I feel so strongly about like Style Tiles being kind of like detective work, like finding out what a client likes, so maybe like a detective.

Lea Alcantara: Cool.

Emily Lewis: What profession would you not like to try?

Samantha Warren: Man, well, I’ve tried it before, and that’s why I know. I’m the worst waitress ever.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Samantha Warren: I love tipping people because I’m like, “Oh my gosh, you just did this thing that I would have totally screwed up.” [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: What’s the latest article or blog post you’ve read?

Samantha Warren: Well, I read a lot outside of the industry too.

Lea Alcantara: Sure.

Samantha Warren: Oh, actually, one of my former colleagues, Coleen Baik, recently wrote a great Medium post about privacy and how you can really up your privacy online. It’s fantastic. I recommend you check it out.

Lea Alcantara: Very cool.

Emily Lewis: If you could have a super power, what it would be?

Samantha Warren: I would probably want to be able to sing like Janis Joplin.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Speaking of that, what music do you like to work to?

Samantha Warren: Oh, I like to work with all sorts of stuff. I think if I’m designing, I like really bad 90’s rock and roll. [Laughs]

Lea Alcantara: Awesome.

Emily Lewis: All right, lastly, cats or dogs?

Samantha Warren: Cats.

Lea Alcantara: Awesome, that’s all the time we have for today. Thanks for joining us.

Samantha Warren: Thank you so much for having me.

Emily Lewis: In case our listeners want to follow up with you, where can they find you online?

Samantha Warren: I am at samanthatoy.com and @samanthatoy on Twitter and samantha on Dribbble.

Emily Lewis: Thank you so much. This was a really good conversation. We had a blast.

Samantha Warren: Thank you. I really appreciate you having me.

[Music starts]

Lea Alcantara: We’d now like to thank our sponsors for this podcast: Visual Chefs and Pixel & Tonic.

Emily Lewis: And thanks to our partners: Arcustech, Devot:ee and EE Insider.

Lea Alcantara: We also want to thank our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com. And if you liked this episode, please give us a review on iTunes, Stitcher or both!

Emily Lewis: Don’t forget to tune in to our next episode when we’ll discuss ways to improve diversity and tech with Ashe Dryden and Faruk Ates. Be sure to check out our schedule on our site, ctrlclickcast.com/schedule for more upcoming topics.

Lea Alcantara: This is Lea Alcantara …

Emily Lewis: And Emily Lewis …

Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!

Emily Lewis: Cheers!

[Music stops]

Timestamp: 01:05:51