Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
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
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.
“
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
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
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.
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!
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
