THE ULTIMATE WEB DESIGN - Kiwi Creative

T H E U L T I M A T E

for Tech Companies

WEB DESIGNG U I D E

COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET2


for Tech CompaniesWEB DESIGN GUIDE

Let’s say your boss drops by your desk and casually says, “Hey, let’s redesign our website!” What comes to mind?

Do thoughts of 60-hour work weeks and never-ending rounds of revisions immediately run

through your head? Or are you giddy at the chance to restructure your sitemap, optimize

content and implement new design trends?

Whatever your personality type, we know you’ll find value in this in-depth, step-by-step look at

how tech companies should approach a web design project.

Planning for SuccessHave you heard the saying “by failing to prepare, you are

preparing to fail”? That 100% applies to tech companies

undertaking a website redesign or development project.

It may sound more fun to open up Photoshop and start

designing right away, but you’ve got a lot of prep work to

ensure the project goes smoothly.

Understand Your Goals

Why do you want to redo your tech website? Because it looks outdated? That’s a

good reason, but dig deeper…

Are you really just frustrated that your website doesn’t look as cool as newer sites? Or, do you

think the content and design of your website is negatively affecting user experience, which in

turn, is hurting your sales pipeline?

Why are we asking? Because the websites that we build for tech companies generally fall into

one of two categories:

“BY FA I LI N G TO P R E PA R E , YOU

ARE P R E PA R I N G TO FA I L”

vs

Brochureware Lead Generation




Understand Your User

Odds are you already have a formalized buyer persona, but does it address

website-specific behavior during the buyer’s journey? If your current website only

has a generic form on the contact page, then the answer is “no.”

Don’t feel bad, you’re definitely not alone: one study even found that 70% of small business

websites don’t display a clear call-to-action on their homepage!

Here are some general ways that help nurture website visitors down the sales funnel:

• Awareness Stage: Blog post embeds on service pages, a resource library of downloadable

content, lead flow pop-up to sign up for email updates

• Consideration Stage: A podcast library, live chat availability, long-form content offers

• Decision Stage: Demo registration CTA in the site nav, or a self-service calendar to book a

time to talk with a sales rep

Which of these would resonate with your specific buyer? Make sure those tactics end up in

the final version of your new website.

If you’re looking to develop a beautifully designed site to validate your business, that’s totally

fine. We call these “brochureware” sites because they’re essentially an online version of your

printed sales materials. Recognizing that this is what you’re looking for upfront will save you

from wasting resources and money on something fancier than you need.

However, most technology companies these days want their website to be a 24/7 lead

generating machine. And knowing that upfront will help you focus on building a website that

will support your specific sales and marketing goals—whether that’s driving organic traffic to

your blog or getting more people to register for a demo of your software.




So, why do we like WordPress so much?

• It’s pretty easy to use: With a bit of training,

you’ll be able to navigate the CMS with ease.

• It’s well documented: Ever get stuck? There

are hundreds of support sites that will give

you the answer.

• It’s affordable: You’ll never pay a monthly fee

to WordPress. (But, yes...you’ll still pony up a

small bit for add-ons like premium plugins

and services like hosting, etc.).

• It’s open source: You can host wherever you

like, the code isn’t top-secret and you may

even find free source code to implement

cool features or functionality.

Evaluate Technology

There are seemingly endless options for a website CMS (content management

system): WordPress, Joomla, Drupal, Magento, Concrete 5, Kentico, Umbraco,

dotCMS, HubSpot…the list goes on and on.

Confused by the options? Here are some things to think about when deciding which CMS you should go with:

• Do you want the freedom to host wherever you want?

• Will your website require a particular type of server platform, like Windows or Linux?

• Do you want an open source or closed source platform?

• Do you want a popular CMS that most developers are familiar with developing in?

• Are you okay with a “home grown” solution specific to an individual agency?

• Are you okay with paying yearly subscription charges?

• Do you have time to keep up-to-date with security updates yourself?

• Do you want a bunch of fancy functionality best achieved by using plugins?

In our experience, most small- to mid-sized tech companies fare best with WordPress. (That’s

what we use to build most of our clients’ websites.) In fact, WordPress runs just over 29% of all

sites that use a CMS.

CRM Systems

ERP SystemsHRM Systems




The only real WordPress objection we’ve heard from companies is concern about security.

However, these same companies usually admit that they’re hosting on a cheap server and

haven’t kept their plugins up-to-date. So, with just a bit of monthly maintenance to keep things

updated, WordPress is no more or less secure than other CMS platforms.

Beyond your CMS, you’ll also want to determine what outside technology platforms your

website should integrate with. For example, are you going to use an all-in-one marketing

automation software, like HubSpot? Or should data push through to other platforms, like

MailChimp or Salesforce? Some of these integrations are simple, but others can be pretty

complex. Make sure you’ve allotted appropriate time and budget to make everything work like

a seamless, well-oiled machine.

Evaluate Skills + Resource Availability

Your tech company has a dozen software engineers—they should be able to code

a website…right?

Not necessarily. Making a website technically function and making it a lead generating

marketing machine are two very different things.

As you’ll see below, building a website is a multi-step process that requires many different

skill sets. Unless this is your only priority and you have a robust internal marketing team, you’ll

probably want to outsource part (or all) of your website design project.

Here are some available options if your internal skills and/or capacity is lacking:

Buy an off-the-shelf theme: There are plenty of websites out there where you can buy a nice looking, off-the-shelf

website template. If your budget is tight and you need a brochureware website, this

could be a good fix. But beware of bloated code and plugin incompatibilities behind the

scenes that could cause your website to run slow or even break in the future.

Hire a freelancer: Freelancers are an affordable way to get a semi-customized website.

Since many freelancers specialize in a single skill (UI/UX vs. development vs. business

intelligence), you need to be okay with managing multiple resources. Plus, freelancer

oftentimes have “day jobs.” So, be prepared to be patient since they might respond on a

delayed timeline and during off hours.




Hire an offshore company: You probably already get daily spam emails from SEO gurus

on the other side of the world or offshore development companies offering to fix your

website. Pros: cheap. Cons: language barriers, quality of work, time difference…the list

goes on and on.

Hire an agency: A full-service agency will employ all of the experts you need to build a

lead generating website under one roof. But, just because they’re doing the bulk of the

work doesn’t mean you can check out of the process. Client feedback is crucial in an

agency relationship. Though an agency might be the costliest of all options, you also get

what you pay for.

Determine Budget + Timeline

Once you’ve figured out all of the above options, it’s time to get serious about two

difficult conversations that happen with all website projects: budget and timeline.

In general, with an agency, a traditional tech website could cost between $25-55K+ and take

3-6+ months to build. If that’s inline with your expectations, agencies will be more than happy

to spec out a unique plan and price quote for your project. But if that gives you a heart

attack, consider one of the other options above or start budgeting to work with an agency

in the future.




The Website ProcessWhew...with the prep work completed, it’s finally time to get started!

As a side note, we’re going to assume you’re working with an agency to build a WordPress

website in these following examples. Because, well...it’s what we do on a daily basis.

Sitemap

Is your current site 12 pages? Or 1,893 pages? In general, today’s websites are

trending smaller, but the answer for “How large should my website be?” is literally

“Whatever it takes to be valuable for your user!”

Look to your site’s page performance in Google Analytics for proof.

Are people reading every press release that you diligently post online? No? Remove and

redirect in your new site. (And, spend your time and energy on what they do read.)

Speaking of...are visitors spending huge amounts of time on your blog? That’s a keeper, even

if it’s a time-consuming task to write new content every month.

Once you have a general idea of the pages that will be on your new website, it’s time to

arrange them into a proper sitemap, which usually looks like a family tree. Top level pages will

be in your header navigation (keep it to 4-7 short items), children pages will live below those,

and so forth.

Don’t forget to include “footer” pages, like a sitemap, terms and conditions, privacy policy

or “header” pages, like a link to tech support or a link to login to a client portal.




Wireframes

Once your sitemap is complete, it’s time to assign each page to a set of templates

that will get designed then developed in WordPress. Tech websites generally have

between 8 and 12 templates which represent unique page layout options.

Sure, you could get away with fewer templates, but if all of your inside pages have you entering

content into a big free-for-all area, styling and consistency throughout your site become

a huge issue, not to mention little visual interest or even confusion for your user.

Here are some popular page layout templates that technology websites often use:

• Homepage: self explanatory!

• Top Level: everything in the header nav

• Second Level: children pages of top level pages

• Standard Sub: generic interior page

• Contact: special space for a contact form, map

• Team Landing: headshots of all team members

• Team Listing: individual bios for each team member

• Blog Landing: excerpts from all blog posts

• Blog Listing: full individual blog posts

• Career Landing: listing of all open job titles

• Career Listing: full individual job description, form to apply

• Clients/Partners/Awards: logo grid

• Full Width: no sidebar/breadcrumb nav for sitemap, terms/conditions, etc.

• Landing Page: marketing-specific squeeze page that includes a form to collect email

addresses in exchange for content offers or other assets

Once you know which template each page in your sitemap will use, it’s time to get sketching!

A whiteboard is a good place to start, but a marketing agency will use online software, like

Balsamiq or Slickplan, which, later, make wireframes easy to translate into design mockups.

It’s important to note that these wireframes will not look like a finished design: they’ll use boxes

as image placeholders and ugly “Lorem Ipsum” text for copy placeholders. Don’t focus on the aesthetics, because that’s all going to change during the design phase. But, do focus on how

the content for the page will meet the goals you defined way back in the planning stage.




Technical Requirements

To make sure your website functions exactly as promised, writing up a “technical

requirements” document for the designer and developer is a must-have step in the

website design process. What areas of the website will be editable vs. static? What

categories should be used in the blog? What should happen when users hover on a button? A

good technical requirements doc will tell you.

Let’s use the infamous contact form as an example. While it seems simple enough, there are

actually many options to consider! So, make sure there are no surprises at launch by answering

these types of questions before development starts:

• What form fields will be needed?

• What form fields are required vs. optional?

• What should the submission button say…“submit” or something more compelling?

• After submission, should the form be replaced with an inline thank you message? What

should that say?

• Should the user get an email confirmation that their message has been received?

• Which staff members need to get notified that someone has filled out a form?

• Should the form data also push data to a CRM?

In fairness, a well-written technical requirements doc might be slightly above the head of a

non-technical person, but your agency should explain anything that doesn’t make sense.

For example, if your sitemap goes several levels deep, consider adding breadcrumb navigation

to your wireframes. If you’re trying to drive people to sign up for a free demo, leave space in

your wireframes for a sidebar graphic.

Remember: if it doesn’t show up on the wireframes, it’s not going to be in your final website!




Website Design

Now’s the time to worry about the “pretty” stuff, like colors, fonts and

photography. Did your wireframes feature rectangular CTA buttons? In the final

design, they may actually have rounded corners. Maybe your main navigation

bar was mocked up in all caps, but the designer decides that initial caps is a better aesthetic

decision that more closely suit your brand.

In other words, a talented graphic designer will always follow the spirit of the wireframes, but

also insert their own creative flair to make sure the website looks appealing and on-brand.

On that note, it takes innate talent and years of training to be a truly excellent UX/UI designer

who improves website experiences through design…like, way more so than we can explain

in one page on our website. But, because 88% of online consumers often don’t return to a

site after a bad experience, here are a handful of top UX tips we always keep in mind when

designing websites:

1. Make navigation logical - 76% of consumers say the most important factor in a website’s design is “the website makes it easy for me to find what I want.” Intuitive site navigation should guide users directly to the information they expect to see

2. Manage focus - use visual contrast (like CTA buttons of contrasting color or captions of smaller, lighter font) to guide users to focus on the most important elements of your page

3. Think mobile - Make sure your design is responsive and uses scrolling and swiping functionality, mobile “hamburger” menus, and content large enough so pinching and zooming isn’t necessary.

4. Design for skimmability - Visitors scroll through only about 50% of an article page, and read less than 20% of the text. Break up page text with elements like highlighted words, short blocks of copy and relevant, attention-grabbing headlines.

5. Use relevant graphics - whether photos, icons or CTAs, graphics should convey meaning for the content they’re supporting—and should NOT look like ads.

6. White space is your friend - The relationship between UI elements is defined the space that either separates them or indicates that they’re directly related.

76% O F C O N S U M E R S S AY T H E M O S T

I M P O R TA N T F A C T O R I N A W E B S I T E ’ S D E S I G N I S “ TH E

W E B S ITE M A K E S IT E ASY F O R M E TO F I N D W H AT

I WA NT.”




Copywriting

While one study found that 94% of website first impressions are related to design,

users won’t stay very long on your page if the copy isn’t equally as compelling.

So, how exactly do you encourage online engagement through copywriting?

Here are a few of our favorite pointers for tech companies:

• Use subheads, bullet points and sidebars: the earlier a visitor is in the buyer’s journey,

the less likely they are to read long-form copy

• Talk about how you solve problems: people don’t buy products, they buy solutions

• Use compelling verbs: a button that says “submit” is boring; a button that says “get

in touch” or “start the conversation” is unique

• Limit technical jargon: users might not know all of your industry lingo, especially acronyms

• Show, don’t tell: client testimonials and case studies give credibility

• Have a personality: don’t be afraid to let your unique brand voice show through your copy

Website Development

Now it’s time for the technical stuff: website development. At the risk of

oversimplifying the process, this involves setting up a sandbox server, installing

WordPress, building page layouts from the wireframes, styling the layouts to

match the design mockups and…the list of development tasks is extensive and as unique as

each client. (That’s why this it’s the longest and priciest phase of a website design project.)

Yes, building a website from scratch takes mad tech skills. And, unfortunately, we can’t teach

you to code in one web page either. But, one of the best perks of WordPress is the abundance

of free or low-cost plugins available that can expand the functionality of your website.

Here are some of the most popular plugins we recommend for tech websites:

• SEO: Yoast

• Multi-Lingual: WPML

• eCommerce: WooCommerce

• Security: WordFence

• Maintenance: UpDraft Plus and WP Optimize




• Performance: W3 Total Cache

• Forms: Contact Form 7 or Gravity Forms

• Image Optimization: WP Smush

• Development: Advanced Custom Fields

While the above plugins are robust, well-supported and secure, that’s not always the case.

Be sure the plugins you choose have an abundance of positive reviews and release frequent

updates. And use them sparingly: the more plugins you install, the more likely they are to affect

site performance or conflict with each other down the road.

Content Migration

Assuming the agency is writing copy and coding the site simultaneously (a common

time-saving process), your developer will use a lot of placeholder text on dev site.

Before launch, you’ll obviously want to replace this with “real” copy as well as

“real” photography or graphics. But who will be assigned to do this admittedly tedious work?

Be clear as to whether you plan to take on this responsibility—or if you plan to assign to the

agency—especially if you’re handling the copywriting yourself.

The good news? Since you probably won’t be rewriting all of your old blog posts, many

platforms will let you export existing posts to a .csv file, which can then be uploaded straight

to WordPress…with one caveat, of course. Often times, featured images can’t be pulled over.

Decide upfront if it’s worth the effort to find a workaround, if you can live without them, or

if you’ll manually re-upload as you have time.




Search Engine Optimization (SEO)

Back in the day, SEO was a shady practice involving keyword stuffing and other

“black hat” ways to trick Google. Nowadays, Google is too smart to fall for those

tricks. (In fact, they’ll penalize you for old school tactics, like duplicate content

or buying backlinks.)

Ranking higher in Google, or any SERP (search engine results page) for that matter, involves

creating a quality experience for your user, not just for the search engine. And while there is

no “magic formula” that guarantees you SEO success, here are a few of the items we prioritize

when developing a website:

301 redirects: Odds are, the pages on your old website won’t match up exactly to the

pages on your new website. To avoid visitors stumbling across the dreaded 404 error

page (which happens when they’ve clicked on a link to a page that doesn’t or no longer

exists), be sure to use a tool like Screaming Frog to make sure you have redirects in

place for any broken page links.

Metadata: The SEMrush Ranking Factors 2.0 study suggests that Google’s algorithms

are getting so good at understanding context and synonyms that keywords are

becoming less important as a ranking factor. That said, don’t get lazy and use the same

meta description on each page. Even if your visitors pay little attention to the page title,

meta description or url structure, follow the same rules that HubSpot recommends

when writing on-page copy: think about humans first and search engines second.

Page load speed: Nearly half of web users expect a site to load in under two seconds,

which is why Google likes pages that aren’t bogged down with bloated code. Assuming

you’re already on a quality hosting server, be sure your images are optimized and your

code is minified.

Behind-the-scenes tasks: There are a handful of technical SEO tasks that the end user

may never notice, but are still important. Examples include submitting an XML sitemap

to Google and setting up a Robots.txt file.

As a disclaimer, even if you follow all of the above best practices, you can’t launch a new

website and expect it to be an overnight success. True SEO results come out of continual

improvements to your website over time, both from adding relevant content and tweaking

what’s already there.




Testing

Your developer should test your website in the most recent versions of web

browsers on Mac, PC, Android and iOS devices to make sure it functions

as expected.

What your developer won’t do, however, is guarantee that your site will look awesome in older

versions or “retired” web browsers, such as Internet Explorer or Netscape. And while that might

negatively impact a small portion of your visitors, much of the technology used on modern

sites simply isn’t compatible with outdated web browsers. And, as a technology company

yourself, we bet you appreciate that fact.

Launch

Finally, it’s time to go live! At this stage, there are a lot of technical tasks that need

to happen behind the scenes. Your web developer and your internal IT team should

coordinate to make sure everything goes smoothly. Once the site is “live,” some

users may see your new site instantly, while others may see your old site temporarily until their

ISP flushes their DNS cache. Don’t worry...although not ideal, this is normal (and could possibly

take up to 12 hours to resolve.)

Training

The beauty of WordPress, or any other CMS for that matter, is that it allows for

easy updates to your website without having to know code. And while the core of

your website is probably pretty similar to others (and thus has lots of great resource

documentation online), customized training will be valuable for the areas of your website that

were developed just for you.

Whether that’s reviewing how to post a new job or switching out a CTA in the sidebar, your

developer should take an hour (if not two or three) to show you how to work the “behind the

scenes” of your new WordPress website. Ask all the questions you want!




Measure + Tweak

Phew…you’ve finally relaunched your website. It’s time to sit back and watch the

leads role in, right? Wrong. (Duh.)

As with all marketing, website design is part art and part science. So even if your site follows

all of the industry best practices, your metrics will likely reveal that there are areas for

improvement.

On that note, what are realistic metrics for a tech website anyway? As a standard disclaimer,

you probably already know the answer is “it depends” and you should aim to simply improve

upon your own past performance. But in general, here are some stats lead generation sites

should shoot for:

• Bounce rate between 30%-50% (HubSpot)

• CTA CTR around 7% (Capterra)

• Time on page over 40 seconds

Getting Started with Web DesignReady to get started with a web design project?

We can help.

Kiwi Creative is a HubSpot Gold Agency Partner that specializes in working with B2B software

and technology customers. And, hopefully, after reading this web page, you can tell that we

know our stuff.

We’re a small, but talented, team of strategists, writers, designers, analysts, technologists and

developers…all ready to help in-house marketing managers at tech companies with branding,

inbound marketing, sales enablement and, of course, web design.

Want to chat about an upcoming project?

Click here to schedule a time that’s convenient for you.

Documents

THE ULTIMATE WEB DESIGN - Kiwi Creative