We talked with Ellie Alexander, Jimmy Lim and Tiffany Silverberg about:
- Reasons your company might need a website redesign
- Why identifying your target audience is important
- What we use to organize and plan before designing a website
- The process of finalizing the design and copy elements
About Jimmy, Tiffany, and Ellie:
Step into the dynamic world of website redesigns with the directors team at Out & About Communications. Ellie Alexander, our design director; Jimmy Lim, our marketing director; and Tiffany Silverberg, our content director, are experts on the intricacies of website redesigns, and all the elements needed to help breathe new life into your online presence. From crafting the initial wireframe to creating compelling design elements and meaningful copy, our directors take a client-centric approach while guiding businesses through this journey, and also share their insider’s perspective on the evolution of our very own Out & About website redesign.
Featured Resources
- Ellie’s On Purpose Interview about Logo Redesign
- Tiffany’s On Purpose Interview about Brand Personalities
- OutAndAboutCommunications.com
Enjoyed This? You’ll Also Love:
- How to Stand Out Through the Power of Niche Marketing
- Email Marketing Insider Tips for Financial Advisors
- EOS ® Strategies for Financial Services Companies
Lauren (00:05):
All right, so you are in for a treat today. We have our director's team at Out & About here for our On Purpose interview. I'm going to let each of them introduce themselves but we are really looking forward to chatting about website redesigns today. So we're going to get into the whole process, what it's like, and specifically we're going to talk about our website — Out & About Communications. We just redid our brand. We'll talk to that more in a minute. And now the next big hunky item is a website redo. So before we get into all that and what the process is like, I'm going to go ahead and do a round of intros. So Jimmy, why don't we start with you?
Jimmy (00:40):
Okay, cool. So I'm Jimmy; I'm the marketing director. At Out & About, I help clients come up with strategy, of course working with the rest of the directors team to determine how to get clients to where they want to go. And I'm excited to share more about our website today. On to Tiffany.
Tiffany (01:01):
I'm Tiffany. I'm the content director. I help our clients find their brand voice and make sure all the communications written especially really align with that brand voice and as well as their goals. So making sure everything is pointed to the target market and all of that. All words basically come through me and that's what I do. So on to Ellie.
Ellie (01:30):
Yeah, thanks. So I'm Ellie Alexander. I'm the design director here at Out & About. And so what Tiffany is to words and voice I am to visuals and design, whether that's helping one of our clients build a brand from the ground up and like, oh my gosh, we're starting at zero. What does that then look like? And working with our team of designers to craft that or further on down the line when we've got everything locked and loaded and we're rocking and rolling, just making sure the brands and visuals all stay consistent. So that's my world.
Lauren (01:54):
Awesome. So websites are sometimes put out there in the world quickly. You can literally redo a website overnight, 24 hours, you've got a brand new website and it is exactly what you want. Well, we are here to tell you that while you can make that happen, it's probably not going to be exactly what you want because websites are kind of like mini business plans. It really forces you if you're really doing them end to end to go through a bigger picture exercise and really think about how you want to be positioning yourself, especially in this very digital day and age. Your website is sort of like your office front. It's really that first introduction that a prospect — warm or cold — is going to have to your brand. So we, in another episode we can link to, went through a whole rebranding exercise. Ellie was on that and talked about what our whole brand looks like.
I’m very, very proud to be able to put that out there and shout out, major shout out to you, Ellie, and to the team for the work that was done on that and all the compliments and things we've been receiving. So very proud to be able to put that out there. But that was a lot of whole exercises to go through. So now we're going through the whole website component. So what we're going to do here is we're going to talk through what the stages look like. We're going to go through our wireframing, which is our first stage — really strategy heavy and really thinking through those big picture components. We're going to get to the design side of it and how you show it visually and the copy, how those are married together, and then the build and launch. But really with the team here, we're going to focus on those first two phases, the wireframing and copy and design. We'll get into just a little bit of the build too but before we get into all of that, why don't we start with why in the world would you do a website redesign because it is such a darn hunky project. So, anyone just want to speak to that before we get into the different phases?
Jimmy (03:38):
I can add to that. So I think we would kind of visit the idea of a website refresh or website redesign for a couple of reasons, starting with evolution within the company. You have new service offerings, your team has changed significantly. You're doing something different or new technology, maybe there's a function for those that are selling consumer products, they have the WhatsApp chat function. That could be something that's helpful to customer service. They could just do a web refresh. Sometimes it's like living in the same house but you just want a fresh coat of paint to make it look fresher. People who come to your house just feel like, oh, okay, it's a little bit different.
Lauren (04:24):
Any other thoughts?
Ellie (04:27):
Yeah, I echo everything Jimmy said but especially if you or your audience has changed, I think that's a big one. Maybe your website is technically fine, it works, it's on brand, maybe it's not. But yeah, if you've realized your company has changed enough that your website now appeals to the wrong group of people or you need to hone in more on a specific subset of who it should appeal to, whether that's what it says, the content, or the design or this is going back and I hope nobody is like this, but if it is not mobile friendly, if your website is so old that it is the same on a desktop computer as it is in a mobile device, it’s definitely time. Definitely time. I think most people have caught up to there but there are still a few stragglers out there.
Lauren (05:09):
Tiffany, any thoughts too?
Tiffany (05:11):
Yeah, I mean I think they've pretty much covered it but I think the only other thing is just, well, I always say your website should work hard for you. It should be an asset. And so I guess just the other layer is if it's not really serving you or doing what you want it to do, I think it's easy to consider a change. To your point earlier, that turnaround, 24 hours thing, it's easy to just slap a logo on and type some copy and I have a website but there's so many things your website could be doing, whether it's SEO or maybe it's a lead generation tool or it's figuring out that passive marketing for you, what you want that to be doing and then building it from there.
Ellie (05:54):
Yeah, that's a good point, Tiffany. There's a big difference between having a website and having a targeted strategic, accessible, SEO-optimized website. It's night and day.
Tiffany (06:05):
Exactly. And that's where it becomes a whole redesign. So with some clients, we do just pop in and make a few tweaks. We're not looking to make big changes. But the question of why do a redesign is for this: let's just take it all down to the ground and rebuild based on what sort of strategic decisions we want to make.
Lauren (06:22):
Yeah, that house analogy is a really good one, Tiffany, that you were alluding to, and Jimmy as well. So let's talk about the break it all down component, the first phase. So Jimmy, can you talk us through that wireframing phase? What's it about? If you were going into that phase, what should you be prepared for? Tell us a little bit more about what that looks like.
Jimmy (06:41):
Yeah, I think it's really about just thinking about the target audience, who will be using the website, who do we want to attract? And then how they will be using it and then why they would be there, how they would get there. All of these questions usually, why? And then really building that out, putting yourself into the shoes of both the company that's having the website, and also the user, how we want them to navigate it, leaving little breadcrumbs and they're following a certain path you want them to follow. I think that really helps with the wireframing that intention.
Lauren (07:21):
You mind sharing a little bit more about what an information architecture is or kind of navigation and what a wireframe is. You hear these words and they're very jargony, and what would that kind of deliverable look like if you were to receive that once we've started to unpack those big picture questions?
Jimmy (07:38):
Yeah, I think it's always helpful to start with the information architecture, which really is almost like building a web, a food chain and then, oh, this is a homepage, this leads to this. It's just a visual representation of where content sits and how it's organized in an optimal way. And then from there you could take each component, which will be the webpage, and then you take it, build it, another visual around it, and then just, yeah, it looks like a website but it's just a webpage but it's just really a skeletal outline.
Lauren (08:12):
Yeah. It makes me think about if you were to go in and write a piece, you write a blog post or what have you, it's like that outline before you actually get into filling it in and that wireframing. And then I love this kind of skeletal idea of information architecture because it really helps you think about what's the organization. It's like if you've got a file cabinet but nothing's labeled and it's all kind of shoved in there; it really helps to get through that organization. And then Jimmy, how long does that process normally take in that kind of phase one engagement? A lot of meetings? What is that kind of like? What's the responsibility at someone else's end?
Jimmy (08:48):
Yeah, I think it really depends on how intricate all the pages are, how many pages. I think that influences it as well. I would say maybe first we'll have obviously a meeting with the client, kind of understand where they're at, what kind of content, just what the why is and things like that. And then once we have that, really it's building that information architecture. I would say that takes maybe a week or so, and then another maybe another week or two back and forth with the client to just get it ironed out. Then we build web pages themselves, the wireframe, so the individual pages. So yeah, I think that whole stage, depending again on the pages, if we're talking just a simple website, maybe six, eight weeks to be complete, I think.
Lauren (09:39):
Yeah, something around that. It can really ebb and flow depending on the number of templates or versions or things of that sort. It's part of the creative process but that sounds about right. Okay. So wireframe is a big component. Any key players who should be in those conversations too that you would want to make sure are helping to shape that? Just to go back to that initial discovery, who would you want to have in that call?
Jimmy (10:04):
From the client side, I think the sales team for sure. I think that would be helpful because again, the website is very much a part of the sales process nowadays. I mean, it's part of the puzzle. So I think the sales team's input would help. Obviously the marketing person, I think that would help because they would really understand their target audience really, really well and how that whole process of sales just unfolds. So we want to make sure they are involved so the website really just fits nicely and helps to move things along faster instead of causing hindrance.
Lauren (10:48):
Yeah, yeah, absolutely. And then I know sometimes we've brought in key leadership just depending on the size of the company or what have you to help shape things out. So I love that point about the sales team because that's so true. That's a kind of marriage between sales and marketing, making sure that's brought out as well. So thank you, Jimmy. We'll jump over to Ellie. I want to hear about phase two when we get into the design component of it and the copy and the marriage between those. So once we've got the wireframing in place, I know we have an internal handoff here to make sure we're all on the same page. And Ellie, maybe we'll transition from Jimmy to Ellie here. What does that look like for you? Where do you even start? Sometimes people want to go in a totally different direction. They're like, my website was built in the ‘90s. So tell us about that.
Ellie (11:34):
Yeah, it's a whole can of worms. They can go a couple different ways but I think in an ideal world, I'm going to assume we have, even if the website's really old, I'm going to assume we have some sort of updated brand guidelines. If you do have a website that is 15 years old and you're doing a complete flip, you want to make sure you have something on the horizon set you're working toward. So whether we could use that website as a use case or a proof of concept for what the new brand would look like. And then that kind of becomes its own exercise as saying like, okay, we don't know what this brand is going to look like or we're evolving yours. We'll use the homepage to kind of figure out what feels right. And sometimes we have clients with a print piece, if they just have a print piece on hand, you're like, okay, we need to update our onboarding brochure.
And sometimes then we'll use that as our example piece to kind of drive a new brand. But yet you could absolutely use a website. But then let's say you had the brand all figured out, then I think the next stage would be just asking lots of questions because sometimes designers may or may not have been, and myself may or may not have been in certain conversations but okay, why is this on the wireframe? What functionality do we need it to have? So having that meeting where we probably pepper Jimmy with lots of annoying questions like, okay, what do you mean by this? What kind of stuff is going to be in this dropdown? What do you need? What's the user going to do here to make sure we really holistically just get the brain dump of everything on that website so we understand it frontwards, backwards, inside and out. And then we can kind of start making sure the functionality is there underlying, and then start putting the brand frosting on top.
Lauren (13:05):
Yes, I know, I love that. The brand frosting. That's so fun. Tell me a little bit more about that. That website is so critical to all the other pages, the homepage. So you've got your global elements, your header, your footer, your typography. How do you go about choosing that brand frosting, if you will, like you said, to really spice it up because web design's different from print design. So what's the direction you're giving to our designers to really be able to help bring out that feel for the client?
Ellie (13:43):
Well, I think a big part of it too is I am kind of getting into actually the tactical weeds. Part of it is knowing what platform we're designing for. Are we building this website on Webflow where we have lots of creative freedom and we can, whatever we envision with this brand, whether it's really expressive, big animations or huge type more of sky is the limit type thing. Or let's say we're doing a smaller website that may need to be updated more frequently. So we're using a more user-friendly platform like Squarespace where the client could kind of go in and do their own updates but then our designs are a lot more limited on what we can do, the capabilities. So then it becomes more of an exercise of, okay, how can we bring maximum brand personality into a platform that might already be pretty locked down?
Lauren (14:28):
Okay. So do you mind sharing a little bit more about our website? We're going through that whole design process. I mean, we did the information architecture and Jimmy, we can swing back to that process for us too. But the design was such a critical component because we had just gone through that branding exercise. How did you go about bringing that to life? And is there anything that came out of that that you're like, yeah, that feels totally like us. So I'd love to hear a little bit more about our design process in particular, right?
Ellie (15:03):
Yeah, I think a big part for us too, and I think would be the case for lots of brands, but yeah, as you said, we already had new brand guidelines. We kind of knew what the brand could look like. We had our colors, we had our illustration style, we had the logo but we hadn't yet designed any big full pieces. So sometimes you think you look at brand guidelines and that should tell you exactly what everything should look like and it can but even within that, it's like, okay, we use those fun kind of limey to turquoise gradients. How much of that is on the page? If three chords are on the page, it's full of brightly colored gradients, it gets a totally different vibe than if, okay, we use that very sparingly or how much of the black we were using. We had all the parts and pieces but it was kind of like, okay, what are we maxing up? What are we trimming down to find just that right balance of how all those pieces interact.
Lauren (15:54):
So right. And then just to layer in there for us as we were building out our brand, we had to even start to create social media graphics and different things as a baseline. So we kind of knew how it would play. But Ellie, you did such a great job of leading the team to really say, now how does that translate into digital experience? Can you also talk a little bit more to the animation component, right? Because it’s not just designing flat files. What does that kind of show up as someone who's actually reviewing a design before it's going to be built?
Ellie (16:29):
Yeah. Well, I think we are, in this case, we are really blessed to have a really talented developer working with us. Josefina is just fantastic. And so it's been such an asset to have, because I can visualize, wouldn't it be neat if the animation does this or wouldn't it be neat if the animation does that? So can our designer but we were able to just say, okay, we know we want this to move. This is what we're thinking, Josefina — what can Webflow do? What have you seen out there? Because she’s probably closer to the web industry and where trends are going. So we could kind of seed her with, okay, we're thinking this, we want it to feel this way. And she could almost always take it up a notch, be like, oh, I see what you're saying. What about we do this? Or, okay, this new thing is trending. Oh, this is going away because of X, Y, Z. So in terms of animation, she could really point us in the direction of, okay, and also what's feasible. There might be two options that are equally great. Oh, we could animate it like this. Oh, we could animate it like this. This might take 10 hours, this might take one. And really, we like them the same amount. So then let's go with the more efficient one, all things being equal.
Lauren (17:29):
Totally. I mean, to Jimmy's point earlier about having the marketing sales team in the discovery, there's a marriage, there's a marriage also between design and development. And if you break out the two, I feel like the outcome isn't as strong. Okay, super. I want to make sure we get Tiffany in here. So once we've got our design, we've got our framing and everything in place, we've got our designs, then there's that. Maybe we kind of talk about that handoff again. And how do you make sure it doesn't feel like copy's just like, hey, I'm over here and the design's over here and they're not really like, so Tiffany, do you mind talking about that too? Some people are visual, some people are words people. Do you partner with Ellie too and the client to make sure we get really that right voice and tone that goes, they're talking to me.
Tiffany (18:16):
Yeah. Well, I was just thinking about that. I mean, as far as the actual workflow, copy does come at the end technically but I think part of it is just the three of us work together really closely all the time, and I think it's just a lot of communication. So I'm talking with Jimmy as the wireframe is being built out; do we need this kind of content? What kind of story would we tell here? That kind of thing. And the same thing with Ellie. She'll come to me like, should we do this picture or this? What kind of story are we trying to tell so when it does come to the copy stage, I mean technically we're kind of in a box now, the design is all built out and the Lorem Ipsum is there but really we've been working together all along. So we sort of know what each of those sections or whatever is going to say. So then it's just pulling out the voice and the details of who are we going to talk to and what are we going to say, which words would they use? So yeah, I think that's a big part of it, just staying involved in the process.
Lauren (19:11):
And Tiffany, how do you, even the question to Ellie initially, how do you tee that up with a writer? Because there's so many different styles of writing, technicality, voice tone, and then being able to really get inside the prospect. So when they're reading that, they go, they're talking to me, this feels like me. What's that evolution to be able to get from concept to actually reading it on the page?
Tiffany (19:36):
Yeah, I mean, I think to Ellie's point earlier, if we have a good brand guide in place, that really helps if we sort of know where we're trying to go. I mean, we'll always say this, the three of us, but if we have a brand personality that's super helpful if we know what we're trying to get to. So that does help. But even then, I mean I think this is the unpopular answer but the reality is that there's going to be a lot of give and take and back and forth with the client. Even with ourselves, there was a lot of, that word doesn't feel right, I would actually write this. And I think just being open to that process really helps because websites are very close to us but words are also very close to us. And so I think just being open to, okay, we know that's what we wanted to say generally but we'll make a couple tweaks here and there and make changes and just work through it.
Lauren (20:26):
So well said. I know at that stage in review, we've sometimes had sales folks come in and even take a look at it too.
Tiffany (20:33):
It really helps to have the key players involved because to Jimmy's point, sales is going to be using these pages all the time, or the team is going to be using these all the time. So they really to make sure, we would never use that word, and sometimes nobody would know that until it's actually, honestly, maybe none of us would know that but nobody would notice it either until it's in the design stage or even on the staging site, like, oh, now it's standing out to me. We would never say that. So I think just again, being open to the process and working together is really important.
Lauren (21:13):
Absolutely. And one of the things I really enjoy is that we take the design and we drop the copy in there.
Tiffany (21:18):
Yeah, exactly. It feels way different.
Lauren (21:19):
I feel like reading copy off a document versus in the design — Tiffany, anything you want to share regarding that, and even Jimmy, sometimes you play in there, you're like, okay but this is what we meant for it to go for this, or why did it go this direction? Because fill in the blank. So yeah, anything about that stage, this is pre-built.
Ellie (21:43):
So yeah, one part of the iterative process is as we've been saying in general, it goes from wireframing, then we go to design and then copy generally kind of right to the design. If we realize, oh, we need much more content here, it might come back to design and we might adjust something to make room for the content or vice versa. But another thing we intentionally did was, especially across the site in the hero components or when there was a really big callout or a big piece of beauty copy, we knew there was going to be some big statement here, and we knew it was going to hit home some message but we didn't know exactly what the words were going to say. We didn't waste our time yet going and finding the perfect image to go with that because in all likelihood, we could kind of steer the design, the image could have steered the copywriter in a direction that might not have been as impactful or just might not have made sense. So we said, okay, we know there's going to be some big beautiful statement here. We're just not going to worry about what imagery goes with that until it's written, and then we'll come back and we'll find the perfect image to correspond with that copy.
Lauren (22:43):
Any other thoughts too? So well said, and I love you. You'll do the for placement only, just like, hey, we could go down a whole rabbit hole finding the perfect one but then it just doesn't match the copy. You're right. They have to speak to each other.
Tiffany (22:56):
So it's just a matter of working closely together. And as I was saying, it's just about telling the right story. So sometimes that comes from the image first and sometimes it comes from the words — because we've built sites too where we've put so much effort into an animation and it doesn't matter what the words say. That's the story, and then we will tell the story with the words later. So sometimes it goes either way.
Jimmy (23:21):
Yeah, I just want to add that this whole process, as much as we described it in almost like a linear way, it's not playing the telephone game where the information goes one way. There's back and forth. So maybe at Tiffany's stage, she may come back and say, hey, when you put this here, what was your intention? Even right down in the design stage or sometimes when everything's laid out, and then it's kind of back my way, kind of like, okay, did this kind of fit with that initial vision? And it's everybody's vision. It's not my vision. It's not just the client's vision. It's like a collaborative vision to make sure it works for everyone because it has to.
Ellie (23:59):
Yeah, the iterative process isn't like this. It's so creative.
Lauren (24:04):
And we didn't even get into SEO or other components like video that could also ebb and flow with the way that it turns out. Well, just for time’s sake, I know we didn't get into the build side of it as much but once we go through phase one, really the wire framing to phase two, the design and copy, then we get into the build, which is a whole technical component onto itself, and then the iterations to make sure it's ready to go for launch. As we alluded to earlier, mobile ready, responsive testing on various devices and actually just feeling it in kind of the real environment. But just, and I think we talk about this for hours honestly but just as we kind of narrow in any kind of final thoughts for folks if they're thinking about redoing a website, maybe they want to just add, as Jim, you alluded to earlier, a new coat of paint, something like that. Just thoughts you might want to kind of close with this process at large.
Ellie (25:11):
Yeah, I am kind going to echo what both of you guys said but I love the idea of thinking about it like a house remodel. It doesn't have to be a gut job. I'm actually in the middle of a house remodel right now. There is nothing on these walls. This house is somewhere in the middle. We're gutting parts of it and keeping other parts. But sometimes you ought to tear it down to the foundation. Sometimes you're moving across the state or sometimes you're just like, yeah, coat a paint, touch things up a little bit and they'll be good to go. So yeah, you don't have to scare yourself by thinking it has to be an all-in down to the ground demo job. It doesn't have to be.
Lauren (25:43):
That reminds me, just like a house, when you're going to recut it, sometimes you get it and you're like, whoa, didn't know this was here. Sometimes when you go through the process and you get further along, you go, oh my gosh, what about blah, blah, blah, or I didn't realize dah, dah. And so that's part of, like you were saying, Ellie, it's just part of the creative process, and that's for everyone, even if you're in a creative seat or not creative seat, we're all in creative seats. Any other thoughts?
Jimmy (26:13):
Yeah, I think since we're going with the house analogy, I think just really listening to your gut. I mean, kind of like the house as well, if you kind of feel, yeah, I wish there were more power sockets here. I wish there was one more room for this third child I'm expecting. Listen to your gut. It's the same thing with websites. If it's not flowing in a certain way, it may not be a whole refresh. Don't be like, oh, I need to tear the whole house down and build it again. Sometimes it's just a fresh coat of paint.
Tiffany (26:48):
And there's still very strategic things we can do to ensure it's aligned with your target, speaking to your target market, aligned with your goals. We can really get it working for you and not just kind of a business card or brochure on the internet. So I agree there's a lot of different starting points and endpoints along the way.
Lauren (27:07):
And I know we've even done just, can someone just look at my website and just give me what a fresh coat of paint looks like? Not even the full end to end, the whole wireframing and this and that, we kind of alluded to earlier, there's various kind of flavors of redesigns or upgrades you could do, and so you just have to decide where you're at, what your appetite is for undertaking a project, and it helps to steer you accordingly. So well, thank you all for being here. This was super fun. Started off with you’re in for a treat, and you guys totally delivered, so it was fun to unpack this a little bit more and hopefully provide some context of what it's like to do a whole website redesign or a component of it. All right. Thanks guys.
Tiffany (27:52):
Thanks. Thanks.
