 Today we are going to talk about all of the scoping and planning and dreaming and designing that happens before you even touch WordPress, so I'm curious who here is a developer Okay, I'm proud of you for coming to a talk that has nothing to do with development So hopefully you'll learn a thing or two today. I am Allie Green. I apologize for the display quality I don't know why we're a little bit grainy up there So bear with me and if you can't read something. I'm happy to repeat I am the creative director operations manager and partner at Green Mellon We are a web studio just north of here in Marietta Green Mellon provides custom website branding design and messaging solutions for small to mid-sized businesses If you do have questions along the way try to hold them for the end because you know, there's a Q&A time at the end, so So let's all dive into a scenario You have just landed a new job for a client who appreciates the process of building a website the right way This means that we're empowered to approach the project from a strategic perspective One where you consider content structure user interface and design before you touch development Before we get started We're sitting down with the client and we're having a discovery session There's lots of questions that need to be asked and if you're curious what some of those questions are We have a page on our website GreenMellonMedia.com Slash questions that you can see our long list of kind of pre-qualification discovery questions to get the conversation started But some key questions that we like to ask going into a project to help us with the actual deliverables Deliverables being content strategy site map and design are up here a few of them It's just simply asking the customer your your client. Who is your ideal customer? What's the overall goal of the website? What's the main action you want users to make when they come to your website? What's the company's biggest pain point in the customer conversion process? What makes your company prevail over the competition and what questions do you get asked by customers time and time again? This is all things that need to be in your resulting Copywriting the site map just a good basic question What pages do you want to have on your website and you can use that as a foundation to build and suggest and add in? Design what are some other websites that inspire you and what are other companies in your industry? So these are baseline questions that should be asked along with some of the other discovery questions you can see there and Once you know those you can really kick off your process the process that we're going to look at today Is the five steps that come before development that's content strategy site map Copywriting UI design and visual design So let's start with content strategy There are a few ways you can attack content strategy one is to dig into the buyer journey Really a deep dive into the questions and thoughts and challenges a buyer has while making a decision The other is maybe just to ask the client some high-level questions. What is your unique selling point? What is your value proposition compared to your competition? These are things that your customer or your client should already know they may not know the buyer journey process So let's dive into the buyer journey process Understanding the buyer journey helps you to understand the buyer's challenges and questions allowing you The one creating the website to craft content that eases the buyer's Hesitations as they make a purchase decision. So ideally this process includes interviewing clients It includes sending out a survey to existing clients to understand better What are the questions and challenges you had when making this decision? Any insight you can get into the customer's mind is going to help with the journey statements. You're going to craft So now the buyer journey process can be as involved as you want it to be today We're going to simplify it down to just four steps for the sake of time There's certainly 20-step buyer journey processes that you can go through The four steps we're going to look at are develop interest gather information Compare options and make a purchase decision So step one develop interest This is when the buyer becomes aware They have a problem or a desire that they need to seek a solution to so here's the scenario Let's say your client offers home cleaning services And one of their prospects Cindy just looked around her house and realized her house is a disaster So Cindy is going to begin gathering information She might ask her friends for advice. Do you have a house cleaner? Who can I use? I need to get this done quick My parents are going to be here tonight You're going to compare maybe she's looking at some of your competitors websites already Maybe she's looking at local ads. Whatever she's doing. She's consuming. She's gathering She's learning as much as she can to help solve this problem quickly So how can we script some content to capture Cindy's attention quickly? Maybe dust inside your home can increase your risk of allergies or even give your guests a bad first impression So Cindy's family coming to visit. I would say that this content would probably strike a chord with her Next she's going to compare options She has the competition sitting here in one tab your your clients website another tab a clients of friends Referral sitting here a phone number on her desk. So she's evaluating and comparing who do I want to hire? Who could who's available first? Who's quickest? Who's cheapest, you know? So letting your client let so letting her know that your client offers both recurring and one-time cleaning services To help her get ready for her family's visit is probably a good way to to give her to perk her interest to look further The next step is make a purchase decision. So Cindy's compared options. It's a simple process She's comparing what's there and including a value-based call to action can help convince her to make a purchase Luckily your client provides online estimates with an online scheduler So your call to action can be let our team of professionals give you the clean home You want and the free time you need worry free schedule now with our online calendar This convenience factor convinced Cindy to go with your clients company So now that we know the process that a typical customer is going to go through We can begin working on the page content or the site map or the page structure Excuse me or the site map has anybody worked with a client to create a site map before? awesome Good deal. So a site map as I said is the page hierarchy of a website It helps determine the pages that will ultimately need to be designed and bill So when we define the site map, we're considering the path the buyer takes to make a decision Luckily, we just uncovered the buyer journey process in the free in the previous step So this should be a fairly simple process This paired with any special features that might have been in the scope. Maybe e-commerce Maybe some some custom functionality. These should create a pretty fluid site map site maps can be anywhere from five to eight pages to a hundred to two hundred pages so beyond and beyond I mean, so there's this can certainly be as involved or as As minimal as needed. This would be a good question to ask during that scoping process How many pages do you want? Like I said, how many pages do you expect to have on the site? What are these ideal pages? It'll help you budget for the site a little bit better So there's some base pages that you consider you should consider for every site map that you build again It's terribly grainy The home page obviously is where you should state a problem solution statement Clearly state what the what the user's problem is and how your company can solve it the about page should have your value proposition The what we do page should showcase your product or service naturally will probably be quite a few sub pages below there Your blog or your FAQs page should answer more questions that the buyer has during their buyer journey So ultimately you know that there's quite a few questions that Cindy or your buyers going to ask while they make this decision Including those as blog posts is awesome You can even title the blog post the question that your buyer is asking and that way when they're googling Hopefully that question will start to surface With your answer the contact or call-to-action page naturally is your conversion point and Then also consider feature-based pages if it's an e-commerce site, where does the cart live? Where does the log-in page live and is there a wholesale page and where do all of these flow into page hierarchy and Finally consider SEO pages if you've done keyword research You probably need to make sure there's pages on the site where you can incorporate each key word onto a resulting page If you went to Jenny's session, you can kind of understand that concept a bit more Also, if you're doing an AdWords campaign Naturally, you're going to need landing pages for that AdWords campaign to land on so consider those Where are those going to live in the site map? some helpful tools For building your site map is our chosen tool versus slick plan Slick plan is a pretty intuitive way to make a flow chart add some notes add some Notations about what each page is going to be the cool thing about slick plan is you can export The slick plan as a wordpress XML file and then import it and you'll automatically create a menu So you don't have to kind of copy paste and recreate the site map Especially the ones that are you know a hundred plus pages that can get a little tedious Three up two others that I've not used is gliffy and Omni garful Or graphel, excuse me, and I actually used to think that was Omni giraffe So I'm glad I finally read it a little bit closer But and heck if you don't want to use a tool you can just whiteboard this You know think through the process on a whiteboard and take a picture when you're done or do it on a cocktail napkin As long as you're going through this process. You're doing the right thing Now we now know every page that needs to be on the website so we can begin copywriting The copyright the copywriting process should always start with a content outline Think back to high school. You would always do an outline a content outline for your research papers, right? What's the conclusion? What's the introduction? What's the body content? What's the conclusion? It's what we learned in grade school. It does not change when you come when it comes to actually to building a a much larger research paper So just like that every page should have the same basic elements So as you're writing your content outline consider each of these for every page a main message a clear concise overview of the page This is a great place for a problem solution statement once again And then every page is going to have a series of supporting messages These should be quick thoughts, you know, we want to avoid doing paragraph format in any sense We want to make sure that we have headline subhead short paragraphs short bullet points something that's easy to skim Include key visuals that might need to be on the page your client might have some awesome photography or video content You might be creating an infographic for this particular page and the content outline is a great way to Notate that that way when it does get to development nothing's lost in translation You want every page to be pretty defined? And then finally every page should have a clear call to action And this should be defined by referencing back to your buyer journey We know what the next step is going to be as the client or as the customer makes a decision So some helpful tools that we use for copywriting Google docs is a freebie and really as good as any It's great for version control You're not going to have five different word documents floating around and not know which one is has been edited most recently It's also let's see gather content is also a great one for version control It's just a little bit pricey, but it maintains that site map structure And then you can literally click on each page insert your content and submit it And there's great collaboration tools as well in gather content Google docs on the other hand. It's very simple You can actually change the doc into suggestion mode and your client can just add their suggestions to the doc Rather than editing the actual content just like in a word doc But it's kind of a hidden feature that not everybody knows about And then finally a homegrown solution that green melon has created is called content collector Content collector is essentially a multi site that we've created We create one per client if the client is writing content will create one for them The client can then log in and we've already exported that slick plan site map that we created at the previous step And imported it into content collector and created the navigation menu So now every client can go in and add their content to each page You know, they may be working on it on the side in a word document And that's fine, but we ask them at the end go in log in We do a quick little video for them screencast. Here's how you insert your copy to the page and publish it It's hidden from you know, it's not indexed google can't see it And once we once they're complete we close down content collector Export all of that content and import it into the staging site and there it is for working You know, you know copying and pasting and it kind of takes out that admin work as well so The next step is user interface design or wire framing. Who knows what wireframes are What did anybody like to share? I saw somebody's hand go up right there Uh-uh the wireframes are a blueprint of the website before colors graphic elements shapes textures photography anything is introduced This really helps you to figure out the flow the structure the content layout the story of a page Every page should have a story from start to finish introduction and middle and an end So figuring out the wireframe is going to help you tell that story It's important to do this not only for desktop But also for mobile interfaces Um Plainly because you want to make sure that you define the goals for desktop and for mobile They could be different on desktop You might want users to fill out a contact form because they're sitting at a computer with You know a quick way to type on a mobile device. You may want them to click to call You know the goal and the conversion point may change between home between desktop and mobile So considering that during your wireframing process is an important step Um ideally at this point you have real copy to work with in this phase But nine times out of ten all you have is your content outline But that's okay because you can create you can take this content outline You know the main message and the support supporting messages the call to action and any necessary Visuals that need to need to be on the page at this point because we've done a content outline for every page So using shapes and icons and and boxes and circles you can lay this out into a basic layout And figuring out these different pieces at this point is going to help the copywriter with word count You know how much space so a lot of people ask what should come first the content or the wireframe, right? And if you're if you have a team Like green melons you have a copywriter on staff and you can work directly with her as you build out the Wireframes and kind of create this copy and flush out this copy while you work But sometimes that's not the case So that content outline stage is so important for creating your wireframe Because now you can actually have an idea of how the page should flow Make sure I didn't miss anything here Keep in mind you don't need to design anything in the wireframe phase Black and white Plane as can be the simpler the better the less designed the better or the client's going to fixate on certain things Like fonts so Keep that in mind design will come next And be sure also to add notations to the developer so they know the functionality of each content block If you kind of have an idea that you want Some area to be a tab, you know a tab section make sure you kind of add some notations in this point Throughout the page layout so that the developer knows what your vision is going into it And if you have questions about how to do that we have some tools to help Our chosen tool is UX pin. Has anybody heard of UX pin? Cool. Yeah, we've been using that one. I used to use illustrator and UX pin has has been a step up for me It not only allows for developer notations, but it also allows for Your clients to comment and add their thoughts in preview mode or in presentation mode It so it's a great way for collaboration and feedback It also has a great saved library of modules so you can reuse elements on various pages rather than copying and pasting them or or redesigning them And illustrator has similar tools. You can certainly save your different your elements But I like the sharing tools that UX pin has You can also in UX pin, of course create your desktop view your mobile view your tablet view whatever whatever you need So depends on how big the project is sometimes you just create a desktop view and you do the mobile Pieces in browser and if that's the kind of job you're working on that's totally fun Um, let's see act sure has anybody ever used act sure Yeah, awesome. Um, so this one is in my experience for bigger projects You know more maybe product development things like that, but very powerful tool Has the same same Features as you expand with collaboration and everything like that So if you're looking for a high level of wire framing tool, that's a great one And three that I've not used or pencil project Wireframe and mock-ups. Does anybody have other tools that they've used? Cool I covered them So now we can finally move on to design Notice how late in the process design is this is on purpose. We've now done all of the strategy necessary To really make sure we've done we've we've done our research We've done our homework and now we can present we can add the visuals We can add the graphics the content is strong the content is there This is the part that the client really gets excited about they finally get to see their site come to life And this is when the wireframe morphs into a branded piece for your client There we go While your design should flow from the content structure that we've defined in the wireframes There are a few best practices that you can use To help make sure that you're really following What's your customers what's your client's idea of a best practice is? Or a good experience is I should say So the client's going to have likes and dislikes We all know that you might design an interface that you think is absolutely beautiful and a few things may derail it Um, we learned in in Nathan's section that data could derail it We could learn that the buttons shouldn't be blue. They should be red and that's how you convert So that's kind of a follow-up step when we do if you do ab testing or user testing But the client might have opinions. They may not like blue. They may not like orange So you want to kind of know that going into it. So you're not spinning your wheels on something that's not going to be successful So a few things you can do first of all a competitive review Review any competitors website that your client has given you or that you've found in the process Just to make sure that you're creating a unique environment a unique design That's going to be different from the you know, the closest competitor Look at some inspiration websites. Don't discredit Pinterest and behance and find some modules and and just different elements that are similar to the brand that you're that you're trying to build And put them in an inspiration folder every little bit helps, you know, all of the different interactions and different techniques that you can do Um in development now you want to make sure that you're taking those into account Another fun idea is what we call a gut check Gather five to ten different websites that you think are strong and show them to your client get them on the phone Do a little screencast or let them click through and have them write down what they like and dislike about those websites It'll give give you an idea of do they like simple websites? Do they like super creative websites? Do they like a lot of interaction? You know So that's going to help guide you in the right direction And then finally you can do a mood board a mood board would be maybe a slide deck of Stock photos colors shapes textures visuals that you're envisioning for the website And if you get them to sign off on that before you dive into design, it's going to be easier to get that approval So with your inspiration in hand, it's time to build the design for the website Once the design is approved the next step is development And this is when I think the magic happens I hand over the design comps the wireframes the developer notes and It turns it's it's like christmas day when all of a sudden the website is built with a beautiful responsive interface and And that's where the developers get the chime in But it's not done yet once your website is built internally the group needs to come back together for what we call the quality assurance phase There are a lot of steps that need to happen before a website's ready to launch With all of these steps comes the possibility for confusion and miscommunication As the site moves through the process from writer to designer to developer a lot can get lost in translation So it's important that everyone comes together at the end of the build for a quality assurance phase During this phase you can review that as an internal team And just kind of offer your feedback and comments to make sure that the site is as you planned it to be Or you can go a little more in-depth You can do focus groups, you know You can bring in some of those clients that you interviewed during the during the buyer journey process And have them take a look at your new the new website and offer their feedback on it and make changes at this point You can also employ engage with a website like user testing dot com Has anybody done a user test before on user testing? They're fun Yep mark you have awesome. Yeah, we've done A few and you get a lot of feedback to process through Because they actually dictate what they say as they're clicking through So you're sitting there listening to them and taking notes on all of these little nuances that they're finding and making adjustments But definitely creates for A good experience because your users are actually navigating to the site and providing feedback So I think I did that fairly quickly, but um Open for questions. We have a good 30 minutes left So if anybody has questions that you want to ask or things you want to share Customers as well Rand well You define the process you define the test so to speak and say the steps you want them to go through and then it It brings in random customers Yeah, and they interview and go through the process with their microphone And then you just listen in and say okay. Well, they obviously can't find the buy now button. So let's change that So yeah, it is cool. How do you handle the client or clients who at the visual design stage You share them those gut check sites and they say oh I really like this And then somebody else on our team says I really like that and neither one of them is anything like your initial Sure Good question framing or any of that good question. I would probably say Discuss amongst yourselves and come up with a consensus or when it comes down to it. It's not their Opinions. It's the user's opinions. So that's the tricky part is your client's going to have opinions. Everybody does So how do we get the client? User testing before you actually have a cycle like in the wireframing phase or something We have not but certainly doable especially if you're going to do a wireframe You can use something like envision to do a full interactive wireframe Now you can't build wireframes in envision. You can only present them and create those those interactions so If you wanted to go to the to the point Of creating an interactive wireframe experience envision is one way you can do that does act sure do that as well With an interactive experience not sure It does more than envision Okay, but you can make it interactive and and you expand you can make it interactive too um So if you want to go through that process and do some user testing of that certainly possible In Sketch also Sketch oh, yeah. Yeah, just like illustrator in design. You could build a wireframe in sketch. Can you do interactions there? Okay cool What else you got for me? Yeah I worked for a non-profit so my end customer is the clients we start as well as the donors and all the tutors Sure You have two different you can go through two buyer journey processes Oh, yep. Absolutely. She said she works for a non-profit and she has two audiences, which is very common I mean you want to narrow it down as much as possible But she has two audiences the donors and the actual clients you serve So how do you craft the buyer journey process or this process? Towards two audiences you do it twice really, you know, you talk about One and that's why I simplified this buyer journey process down. It's just four steps So it's not digging deep into every little psychological thought that they have Which is what a few of them do but a few of the processes can do But yeah run through it run through each one And it can be as simple as kind of talking with your client or your internal team and just say Let's think about this. How are our clients finding us and what are their challenges and how can we solve them? But yeah, you almost want to create a persona for each one You know, you have julie and you have bob and let's talk about how they how they go through the process together Yes Every yeah Content's always the bottleneck, right? Yeah, so his question was how do you handle When clients are submitting content and it's undoubtedly going to be a bottleneck We do what we call What do we call it now? We just change the name of it Page descriptions. I think So content outlines are what we do when we're building the content because we're creating the wireframes with that content outline We have our copywriter do a page description for every page So it's just we make sure it's part of our scope and once we do that site map We send the client content collector and in content collector. We have a page description for every page This is what you're right. This is what you're supposed to write about here So you're supposed to write about here So hopefully that's going to get their wheels spinning a little bit and be like, oh, it's kind of more like filling in the blanks and Kind of means they've got a lot of blanks to fill in but If they are writing content, I like to reserve The wire framing phase for once they submit that content Because then we always have a copy editing phase if the client's handling content. We always do copy editing So copy editing allows us to take their paragraphs of content that they're probably going to submit to us and slice and dice it into digestible Pieces and then we can wireframe because those like even if we do a content outline for them with Main message and supporting messages those supporting messages can be and I mean you give them as many required You try to restrict them So copy editing is the way that we make sure that it's clean and ready to go to the web The hold up is just a whole lot of bugging and babysitting and nagging And taking but the the good thing is is with content collector you can kind of peek in and say what have they done? How you know how far along are they? And see the progress that they're making it's tough Yeah Because there could be a lot of back and forth or there could be very little back and forth Technically the way we build for bill for it He asked how you bill for something that's a bit more strategic like this How do you factor in the time that you can't anticipate the back and forth? First of all, we allot for one major and two minor revisions at every deliverable So at least at that point we know it's if it goes over this we have to start going hourly But we have this master spreadsheet that we have created over the years. That's a few screens long of This service is this much And you know and we've kind of clocked our time over time on it over the years to know the value of each one And we fill in that spreadsheet and that's kind of our cheat sheet for creating a quick proposal But at least everything's there, you know, it's you're not going to miss something or forget about something And you know messaging strategy usually takes 20 hours. So let's account for it 10 hours, whatever it is So that helps but limiting the revision process is what's going to keep it in scope Yeah Yes, what do you consider a revision major and minor major and minor so on the design front A major revision would be I mean scrap it Start over. I hate it, right anything from that to Can we rearrange, you know the layout or the The images I don't like I mean you kind of feel when it's a really heavy revision and then lighter revisions minor revisions are going to be Can we tweak the size of the font, you know, this feels a little big this feels a little small scale, you know In messaging a major revision would be a whole lot of red lines You know in the Word document and you realize they're probably not happy with this and Kind of re you know reworking that content or and that's worst case scenario best case scenario is you know Can you add this paragraph here and then from there it should just be some word smithing Does that answer it? Yes All that stuff before the build yeah, I'm assuming then are all your builds custom Yeah, we build custom sites if we're doing a template site maybe for an existing client We have them submit the stuff to us So rather than us figuring it out for them So if it's a if it's a template build or a theme build we'll say send us your site map And oh by the way slick plans really cool if you want to go in there and make an account and so that's your you know Send it to us Yeah, and then we'll submit we'll send them the content the content collector. They put it in we go through some themes with them We pick a theme They submit their content to us per that theme. We'll literally say header one Subheader one body content one button one header two and let them fill in the blanks that way So That are coming from the client we either set up a drop box account drop box has a really cool feature now You can request An import. I don't know what they call it exactly. I don't know if anybody else knows but you can set up a folder And ask and drop box will send an email To your client to have them upload to submit pictures to that folder So they show up there rather than doing the whole shared folder thing But you can also just create a shared folder With them or I've taken jump drives. I've taken CDs I've taken all sorts of things but but yeah mark Yeah, that's when I like to do a mood board To start and I'll throw a bunch of stock photos in there If they if they don't have photography or if we're not doing a photo session or something Um, I will put in sorry his question was how do you? Do you help the clients? Pick images or do you let them send all of their own images? But that mood board I have found if we put in Five stock images and say this is the feel and this is why we're choosing these images You know one of them one of our clients I mean they are a hard-working IT firm and when we I made sure to put in images that showed a little bit of hustle in every image You know just you know, they're just not posed and just you can tell that they're rushing a little bit because that's their world And so I got them to sign off on those style images before they went into the site Or before we select them does that help? someone else Oh, sorry, I'll get you next hold on Yes in the back It's a WordPress multi site that we've created so we spin up a new site like a super basic Um for every client and you might have Yeah, it's just a watered-down theme that has a very clear navigation bar at the top Because all we want them to do is to pick a page Sign in pick a page press edit page and add their content and press publish Time and time again for every page. So it's super simple You do have to show them how to use the dashboard just a bit where that publish button is But um, you can do that in a screencast and then they're pretty I mean, it's it's WordPress. It's easy Yes, Claudia Just adding on to that. So would you do that if it's a small 10 to 20 page site even like Yeah, those are the ones we do it for because usually a small 10 to 20 page site Is writing their own content because they're trying to keep budgets down So that's when we use content collector most is when they're writing their own content Right, right, right rather than collect a word document because because you can then export From content collector and import to the staging site rather than take every word document And paste it in which you can do but It kind of gives you a good baseline for starting the build So my actual question was okay at the A.B. testing. Yes, do you do it for every site? No Okay, what where what we? personally do A.B. test once they're once they're a Long-time client of ours, you know, maybe a year in we'll say okay Let's start doing some A.B. Test for this button this call to action. How can we make conversion a little bit better? It's not something we do a ton of The user test the user testing that we did all happens to be for that same site, doesn't it? Yeah um, the user testing that we did was Right at launch Right or yeah right before launch So that was the one. Yeah, they were a larger project so Not everyone but Yeah, no, but the A.B. testing can be really easy. I mean we use fresh marketer, right Fresh marketer and it provides you with a lot of different tools from heat maps to A.B. testing Um, and the A.B. testing is really pretty slick You put in I want the button to say A or B and it runs the test tells you what the winner is And you can literally just say go with a and it automatically reflects it on the on the site. So Um, it's real. I mean tools have come so far. So fresh marketer also called zarget Um is one to look at zarget or fresh marketer Is a good one for A.B. testing Same thing. It's just one. I think they changed their name Yes But do you think the slick plan has been the best solution for you for I've stuck with it for years now. I keep trying to find another one Yeah, it's I literally send them the preview mode of slick plan And you can add comments in each page So you can kind of say this page kind of like those page descriptions that I was mentioning You know for each in each page in the in the flow chart, you can have a little comment And actually when you export slick plan and import it into wordpress it keeps those Comments in the body. So that way as long as those were clean and ready to kind of be the guiding direction for each page They'll show up in the page content Yeah, yeah, I like it. I keep trying to find a better one because it's a little bit I find myself Wishing it was a little bit more intuitive Um, but it gets the job done. Yeah More more Is that it Okay, well now you only have 20 minutes left to hang out. So it's a little better Cool I'll hang around a few questions