Contenu connexe
Tendances
Tendances(18)
Similaire à Before the Build
Similaire à Before the Build(20)
Dernier
Dernier(20)
Before the Build
- 1. Before the Build All of the scoping, planning, dreaming and designing that happens before you touch WordPress.
- 2. Ali Green • Creative Director • Operations Manager • Partner GreenMellen provides website, branding, design and messaging solutions to make your company's digital presence meet today’s expectations.
- 3. You’ve landed a new web job for a client who appreciates the process of building a website the “right” way. This means you are empowered to approach the project from a strategic perspective.
- 4. Discovery Questions CONTENT STRATEGY ● Who is the company’s ideal customer? ● What is the overall goal of the website? ● What is the main action users should make when they come to the website? ● What is the company’s biggest pain point in the customer conversion process? ● What makes your company prevail over the competition? ● What questions do you get asked by customers time and time again? SITEMAP ● What are must-have pages on your site? DESIGN ● What are other websites that inspire you? ● What are some other companies within your industry that offer similar services? >> GreenMellenMedia.com/Questions
- 5. The Process Content Strategy Uncovering the buyer journey Sitemap Define the page structure of the website Copywriting Create messaging for each page UI Design Design wireframes with the user in mind Visual Design Apply brand and UX elements 1 2 3 4 5
- 6. Content Strategy Uncovering the buyer journey
- 7. The Buyer Journey Understanding the buyer journey helps you understand the buyer’s challenges and questions, allowing you to craft content that eases their hesitations before making a purchase decision. Develop Interest Gather Information Compare Options Buy
- 8. Develop Interest The buyer becomes aware that they have a problem or desire. DEFINE THE PROBLEM: Cindy’s family is coming in town and she just looked around and realized her house is a disaster. !
- 9. Gather Information The buyer begins to gather more information about the problem or desire. ADD TO THE USER’S RESEARCH: Dust inside your home can increase your risk of allergies and may even give your guests a bad first impression! “
- 10. Compare Options The buyer begins to explore options for addressing the problem or desire. PROVIDE SOLUTIONS: No matter if you need a cleaner one time or once a week, we're happy to coordinate with your busy schedule. “
- 11. Make a Purchase The buyer is prepared to make a purchase decision and select a vendor. DEFINE THE VALUE: 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. “
- 12. Sitemap Define the page structure of the website
- 13. Content Structure Consider the path the buyer takes to make the decision to buy your product. This, paired with any special features, will create a solid foundation for your sitemap.
- 14. FEATURE-BASED PAGES :: cart, login, wholesale SEO PAGES :: incorporate keywords or AdWords landing pages Pages to Consider HOME :: problem / solution statement ABOUT :: value proposition WHAT WE DO :: showcase of product / service BLOG / FAQS :: answer more questions the buyer may have in their journey CONTACT / CTA :: conversion point
- 15. Helpful Tools SLICKPLAN :: slickplan.com GLIFFY :: gliffy.com OMNIGRAFFLE :: omnigroup.com/omnigraffle WHITEBOARD / COCKTAIL NAPKIN
- 16. Copywriting Create messaging for each page
- 17. Content Structure Just like your high school research paper, copywriting should begin with a content outline.
- 18. Elements of a Page MAIN MESSAGE :: A clear, concise overview of the page. Great place for problem/solutions statement from the buyer journey. SUPPORTING MESSAGES :: Avoid paragraph style pages that are hard to skim. KEY VISUALS :: Include a listing of any media that needs to be included on the page. CALL TO ACTION :: Every page should have a clear next step. This can be defined by referencing the buyer journey.
- 19. Helpful Tools GOOGLE DOCS :: Great for version control GATHER CONTENT :: gathercontent.com CONTENT COLLECTOR :: WP Multisite with client access
- 20. User Interface Design Design wireframes with the user in mind
- 21. Wireframing Using the content outline, begin roughing in a visual layout using shapes and icons. This can be as simple as creating blocks that show how the content will be broken up into digestible sections on the page.
- 22. Helpful Tools UXPIN :: uxpin.com ILLUSTRATOR :: adobe.com/illustrator AXURE :: axure.com PENCIL PROJECT :: pencil.evolus.vn WIREFRAME.CC :: wireframe.cc MOQUPS :: moqups.com
- 23. Visual Design Apply brand and UX elements
- 24. Design With your inspiration in place, design the site with the content and wireframes in-hand to create a truly unique and custom user experience.
- 25. Best Practices GUT CHECK :: Consider a design gut check with the client. This is like an inkblot test of websites where you can learn their likes and dislikes. MOOD BOARD :: Create a moodboard to showcase your ideas for which stock photos, colors and textures you plan to use on the site. COMPETITIVE REVIEW :: Review competition to ensure you are creating a unique environment for your client’s product or service. INSPIRATION WEBSITES :: Review inspiration websites, such as Behance and Pinterest, to pull design elements that compliment the brand.
- 26. Development 1. This is where the magic happens! Development This is where the magic happens!
- 27. Quality Assurance The final step
- 28. Quality Assurance It’s important that everyone comes together at the end of a build for a quality assurance phase.
- 29. User Testing Consider bringing in user testers either via focus group or via a site like www.usertesting.com.
- 30. Questions? Good luck on your next build!
- 31. Before the Build Slides will be available on the GreenMellen blog next week! GreenMellenMedia.com/blog
Notes de l'éditeur
- Welcome to Before the Build All of the scoping, planning, dreaming and designing that happens before you touch WordPress. Who here is a developer?
- • Creative Director • Operations Manager • Partner We are a web studio up in Marietta, just north of here. GreenMellen provides website, branding, design and messaging solutions for small and mid-sized businesses If you have questions along the way, try to jot them down and save them for the end.
- Let’s all dive into a scenario where you’ve landed a new web job for a client who appreciates the process of building a website the “right” way. This means you are empowered to approach the project from a strategic perspective. One where you consider content structure, user interface and design before you begin development.
- Before we get started, we have some important questions during the discovery session to help define the scope and give us some baseline information. Here’s a look at some of those key questions: View all the questions we ask at GreenMellenMedia.com/Questions
- Now… we can kick off our process Content Strategy, Sitemap, Copywriting, UI Design, Visual Design
- Content Strategy There are a few ways you can attack the content strategy for a site. You can dig deep into uncovering the buyer journey of the ideal user or stay high level by defining the unique selling points and value proposition. High-level things that the client should already know about their company.
- Today we’re going to look at the Buyer Journey route. Understanding the buyer journey helps you understand the buyer’s challenges and questions, allowing you to craft content that eases their hesitations before making a purchase decision. Ideally, this process includes interviewing clients on their personal experiences or sending a survey to existing clients. Any insight you can get into the customer’s mind will help you craft these journey statements. Now, the buyer journey process can be as involved as you want it to be. Today we’re going to look at 4 simple steps. Develop Interest, Gather Information, Compare Options, Make a Purchase Decision.
- Develop Interest This is when the buyer becomes aware that they have a problem or desire and they need to seek out a solution to their problem. Let’s say you client offers home cleaning services. One of their prospects, Cindy, just looked around and realized her house is a disaster!
- Gather Information Cindy is going to begin gathering information on how to solve this problem quickly. She may be comparing options with your client’s competitors, asking friends for advice, and maybe even looking at local ads. How can we script our content to grab Cindy’s attention? Maybe: Dust inside your home can increase your risk of allergies and even give your guests a bad first impression! So with Cindy’s family is coming to visit, this content should strike a chord with her.
- Compare Options Cindy has gathered some information that she now wants to evaluate and compare. It’s now time to provide content that is valuable to Cindy. So letting her know your client offers both recurring and one-time cleaning services so she can get her house ready for her family’s visit, is a good next step.
- Make a Purchase Once Cindy has narrowed down her options. Including a value-based call to action to help convince the her to make a purchase should help with conversion. Luckily your client provides online estimates and online scheduler. “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. “ The convenience factor convinced Cindy to make a purchase.
- Sitemap Now that we understand the buyer journey, we are educated enough to suggest a logical content structure for the site. Who can tell me what a sitemap is. This is the page hierarchy of a website. This helps determine the pages that will ultimately need to be designed and built.
- Content Structure When we define the sitemap, we are considering the path the buyer takes to make the decision to buy your product. Luckily, we just defined that path during the buyer journey. This, paired with any special features that may be in the scope, will create a solid foundation for your sitemap.
- Pages to Consider Every sitemap is unique, but there are a few key pages you should consider for every website. Home, About, What We Do, Blog/FAQs, Contact/CTA, Feature-based pages, SEO pages for organic keywords and landing pages for AdWords campaigns. Sitemap side note: If there’s an existing site with analytics installed, be sure to review top visited pages and take those into account as well.
- Helpful Tools Slickplan: export your sitemap directly into a WordPress XML file Gliffy Omnigraffle (om-knee-graph-el) - Embarrassing confession Whiteboard / cocktail napkin
- Copywriting Now that we know every page that needs to be built on the site, we can begin writing content for them.
- Content Structure Just like your high school research paper, copywriting should begin with a content outline.
- Elements of a Page Your content outline should follow a consistent structure. There are 4 core elements for every page to consider that will keep your page interesting and not read like a boring Word document. Main Message, Several Supporting Messages, Key Visuals, Call to Action You can also consider adding notes about keywords and SEO page titles in your content outline. From there, you can easily flesh out the content for each page, while the designer works on the user interface.
- Helpful Tools Google Docs - great for version control Gather Content - Great for managing expectations, edits, and approvals for each page. A little pricey. Content Collector - We also have an in-house system we’ve built called content collector when clients want to handle their own writing. This is essentially a WP Multisite that we give clients access to load their copy. Benefit: By using SlickPlan, we can easily import the approved sitemap into Content Collector and it instantly creates a WP menu. Then you can export your pages into the staging site.
- User Interface Design Who knows what wireframes are? They are essentially the blueprint of the website before color and brand elements are introduced.
- Wireframing Using the content outline, begin roughing in a visual layout using shapes and icons. This can be as simple as creating blocks that show how the content will be broken up into digestible sections on the page. It’s important you consider wireframes for both desktop and mobile views. The goal for each view may be a little different. For example, on desktop, you may want the user to fill out a contact form, but on mobile, you want to provide quick access to call. Consider those differences when creating your wireframes. Ideally, you have real copy to work with at this phase, but most of the time you’ll only be working with the content outline. The copywriter can then follow your guidelines for wordcount and page flow. My goal is always to avoid paragraph style pages. Aim to break your pages up into several sections of headlines, sub-heads, short paragraphs and bullet points. You don’t need to design and elements just yet. Just define the content structure. Design will come next. Be sure to add notations for the developer so they know the functionality of each content block. We have some tools on the next slide that can help with that.
- Helpful Tools UxPin: Our tool of choice. It not only allows for developer notations, but clients can also comment on the layout in presentation mode. It also has a great saved library of modules so you can reuse elements on various pages, rather that redesigning or copying them each time. Illustrator: This is what I used to use. If you’re comfortable working in Adobe products, you can definitely use Illustrator, or even InDesign, to create wireframes. Ax-Sure: I’ve not used Ax-Sure, but I know it to be a very powerful prototyping tool. This is best for large projects and complex user-interfaces. Is anyone familiar with Ax-Sure? A few others I’ve not used are: Pencil Project, Wireframe.cc, and Mockups.
- Now we can move on to design. Notice how late in the process the actual visuals come together. This is the final step before development.
- This is the part that clients get really excited about. This is when the wireframe morphs into a branded piece for your client (click) While your design should follow the content structure defined in the wireframes, there are a few best practices when approaching the design of custom website:
- It’s best to understand the client’s likes and dislikes, the industry standard for design, and most important, the user’s interpretation of a good experience. Competitive review Inspiration websites Gut Check - ink blot test Mood Board - stock photos, colors and textures With your inspiration in-hand, it’s time to build out the website’s visuals to create a truly unique user experience.
- The next step is development! In my opinion, this is where the magic happens. And it’s like Christmas when our developer presents us with a site that is beautiful, polished, and mobile responsive.
- But, there’s one important step to consider before the site is truly ready to ship, and that’s quality assurance.
- There are a lot of steps that need to happen before a website is ready to launch. With all these steps comes the possibility for confusion and miscommunication as the site moves through the process, from writer to designer to developer. It’s important that everyone comes together at the end of a build for a quality assurance phase.
- During this phase you can review the site as an internal team OR, on larger projects, consider bringing in user testers either via focus group or via a site like https://www.usertesting.com/. Has anybody ever done user testing?
- Questions?
- Slides will be available on the GreenMellen blog next week! GreenMellenMedia.com/blog